<div id="vcard-app" class="wpvg-container wpvg-p-4" style="overflow: visible !important;">
    <div class="wpvg-main-grid" style="overflow: visible !important;">
        
        <!-- Colonne Formulaire -->
        <div class="wpvg-admin-column wpvg-admin-card" style="overflow: visible !important;">
            
            <h2 class="wpvg-admin-main-title">Générateur de vCard Premium</h2>

			<!-- SECTION : Mode de publication (NOUVEAU) -->
			<div id="wpvg-mode-section" class="wpvg-admin-section">

				<h3 class="wpvg-section-title">
					<i>
						<span v-if="uiIcons && uiIcons['cloud-arrow-up']"
							  v-html="uiIcons['cloud-arrow-up']">
						</span>
					</i>
					Chez vous ou chez nous ?
				</h3>

				<div class="wpvg-toggle-row wpvg-mt-4">
					<span class="wpvg-label">Mode :</span>

					<label class="wpvg-switch" style="margin: 1rem 0;">
						<input type="checkbox" v-model="ui.onlineMode">
						<span class="wpvg-slider"></span>
					</label>

					<span class="wpvg-mode-label">
						{{ ui.onlineMode ? 'Mise en ligne automatique' : 'Téléchargement local' }}
					</span>
				</div>
				<div id="wpvg-download-section"
					 class="wpvg-admin-section"
					 v-if="!ui.onlineMode">

					<!-- Titre avec icône (structure identique aux autres sections) -->
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons['box-archive']"
								  v-html="uiIcons['box-archive']">
							</span>
						</i>
						Sauvegarde & Restauration
					</h3>

					<!-- Champ obligatoire pour nom du ZIP -->
					<div class="wpvg-field-wrapper wpvg-mt-4 wpvg-mb-4">
						<div class="wpvg-zip-label-row">
							<label for="wpvg-zipname" class="wpvg-label">
								Nom de votre dossier ZIP :
							</label>
							<p v-if="ui.publishEmail && !ui.isValidEmail" 
							   class="wpvg-label wpvg-text-orange wpvg-mt-1">
								Veuillez entrer une adresse email valide.
							</p>

							<p v-if="!vcard.zipName" id="wpvg-zipname-error" class="wpvg-label wpvg-text-orange" style="margin-left: 4px;">
								Veuillez indiquer un nom de dossier pour télécharger.
							</p>
						</div>

						<input 
							type="text" 
							id="wpvg-zipname" 
							class="wpvg-input wpvg-w-full"
							placeholder="Ex : Mon CV FR"
							autocomplete="off"
							maxlength="30"
							v-model="vcard.zipName"
							@input="zipLimitReached = ($event.target.value.length >= 30)"
							:class="{ 'wpvg-limit-reached': zipLimitReached }"
						>
						<p v-if="zipLimitReached" class="wpvg-limit-text">Limite atteinte (30 caractères)</p>
					</div>
					<!-- Case à cocher Conditions d'utilisation -->
					<div class="wpvg-mb-4" style="display:flex; align-items:center; margin-bottom: 1.5rem;">
						<input 
							type="checkbox"
							id="wpvg-zip-consent"
							v-model="ui.zipConsent"
							class="wpvg-checkbox"
							style="margin-right: 10px;"
						>
						<label for="wpvg-zip-consent" class="wpvg-label" style="margin:0;">
							J’ai lu et j’accepte les Conditions d’utilisation, et je suis responsable du contenu intégré dans ma vCard.<br>
							👉 <a href="https://vcard.chefprojetdigital.fr/conditions-d-utilisation/" target="_blank">Conditions d’utilisation</a>
						</label>
					</div>

					<!-- Boutons -->
					<div class="wpvg-actions-grid wpvg-gap-4">

						<!-- Télécharger ZIP -->
						<button 
							id="wpvg-download-btn"
							class="wpvg-btn wpvg-btn-primary wpvg-w-full"
							:disabled="!vcard.zipName || !ui.zipConsent"
						>
							<span v-if="uiIcons && uiIcons.download" 
								  v-html="uiIcons.download" 
								  class="wpvg-social-svg-icon">
							</span> 
							Télécharger vCard
						</button>

						<!-- Restaurer JSON -->
						<div class="wpvg-relative wpvg-w-full">
							<input 
								type="file" 
								id="json-upload" 
								accept=".json" 
								@change="loadJson" 
								class="hidden"
							>
							<label for="json-upload" class="wpvg-btn wpvg-btn-secondary"  style= "display: flex";>
								<span v-if="uiIcons && uiIcons.upload" 
									  v-html="uiIcons.upload" 
									  class="wpvg-btn-icon">
								</span> 
								Restaurer (JSON)
							</label>
						</div>
					</div>
				</div>
				<div id="wpvg-online-section"
					 class="wpvg-admin-section"
					 v-show="ui.onlineMode">

					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons['cloud']"
								  v-html="uiIcons['cloud']">
							</span>
						</i>
						Mise en ligne automatique
					</h3>

					<p class="wpvg-text-muted wpvg-mt-2">
						Votre vCard sera hébergée sur notre serveur et accessible via un lien unique.
					</p>
					
					<!-- Champ email du destinataire -->
					<div class="wpvg-field-wrapper wpvg-mt-4 wpvg-mb-4">
						<label for="wpvg-publish-email" class="wpvg-label">
							Adresse email du destinataire (pour vous envoyer tous les détails de votre vCard)
						</label>
						<p v-if="ui.onlineMode && (!ui.isValidEmail || !ui.publishConsent)"
						   class="wpvg-label wpvg-text-orange wpvg-mt-1">
							Veuillez entrer une adresse email valide et donner votre consentement pour publier votre vCard en ligne.
						</p>
			
						<input 
							type="email"
							id="wpvg-publish-email"
							class="wpvg-input wpvg-w-full"
							placeholder="ex : jean.dupont@email.com"
							v-model="ui.publishEmail"
							@input="validateEmail"
						>
						<p class="wpvg-text-muted wpvg-mt-2" style="font-size:1.2rem;">
							❶ Après avoir cliqué sur <strong>Publier la vCard en ligne</strong>, vous recevrez un email contenant un lien d’activation.<br>
							❷ Votre vCard ne sera visible qu’après cette validation.<br>
							❸ L’email contiendra également le lien direct, le QR Code et les options de partage.
						</p>
					</div>

					<!-- Case à cocher RGPD -->
					<div class="wpvg-mb-4" style="display:flex; align-items:center; margin-bottom: 1.5rem;">
						<input 
							type="checkbox"
							id="wpvg-publish-consent"
							v-model="ui.publishConsent"
							class="wpvg-checkbox"
							style="margin-right: 10px;"
						>
						<label for="wpvg-publish-consent" class="wpvg-label" style="margin:0;">
							J’accepte les Conditions d’utilisation et le traitement de mes données pour générer et gérer ma vCard en ligne sur votre serveur.<br> 👉 <a href="https://vcard.chefprojetdigital.fr/conditions-d-utilisation/" target="_blank">Conditions d’utilisation</a>
						</label>
					</div>

					<!-- WRAPPER GLOBAL -->
					<div class="wpvg-flex wpvg-flex-col wpvg-stack">

						<!-- SECTION : Actions principales -->
						<div class="wpvg-flex wpvg-flex-col wpvg-stack">

							<!-- Bouton Publier (seulement si aucune vCard existante) -->
							<button 
								class="wpvg-btn wpvg-btn-primary wpvg-w-full wpvg-flex wpvg-items-center"
								@click="publishVCard"
								:disabled="ui.isPublishing || ui.publishSuccess || !ui.isValidEmail || !ui.publishConsent"
								:class="{ 
									'wpvg-btn-disabled': ui.isPublishing || ui.publishSuccess || ui.lockAll || !ui.isValidEmail || !ui.publishConsent,
									'wpvg-btn-success': ui.publishSuccess
								}"
	>

								<!-- Spinner -->
								<span v-if="ui.isPublishing"
									  v-html="uiIcons['arrow-rotate-right']"
									  class="wpvg-social-svg-icon wpvg-spin">
								</span>

								<!-- Icône succès -->
								<span v-else-if="ui.publishSuccess"
									  v-html="uiIcons['envelope-circle-check']"
									  class="wpvg-social-svg-icon wpvg-success-icon-small">
								</span>

								<!-- Icône normale -->
								<span v-else
									  v-html="uiIcons['arrow-up-right-from-square']"
									  class="wpvg-social-svg-icon">
								</span>

								<span class="wpvg-ml-2">
									{{ ui.isPublishing ? 'Création…' : ui.publishSuccess ? 'Email envoyé' : (vcard.vcardId ? 'Mettre à jour cette vCard' : 'Publier la vCard en ligne') }}
								</span>
							</button>


							<!-- Bouton Télécharger JSON -->
							<button 
								v-if="ui.publishResult?.id"
								type="button"
								@click="downloadJson"
								class="wpvg-btn wpvg-btn-secondary wpvg-w-full"
							>
								Télécharger le JSON (sauvegarde)
							</button>

							<!-- Bouton Dupliquer -->
							<button 
								type="button" 
								@click="duplicateVcard" 
								class="wpvg-btn wpvg-btn-secondary wpvg-w-full wpvg-flex wpvg-items-center"
								:disabled="ui.duplicateLocked || ui.isPublishing || ui.publishSuccess"
								:class="{ 'wpvg-btn-disabled': ui.duplicateLocked || ui.isPublishing || ui.publishSuccess }"
							>
								<span v-if="uiIcons && uiIcons['check-double']"
									  v-html="uiIcons['check-double']"
									  class="wpvg-social-svg-icon">
								</span>
								<span class="wpvg-ml-2">Dupliquer cette vCard</span>
							</button>

							<!-- MESSAGE SUCCESS -->
							<div v-if="ui.publishSuccess" class="wpvg-success-modal">
								<div class="wpvg-success-content">
									<span v-html="uiIcons['check']" class="wpvg-success-icon"></span>
									<p>Votre vCard a été envoyée.<br>Vérifiez votre boîte mail pour l’activer.<br>☞ Pensez à vérifier dans vos Spams ☜</p>
								</div>
							</div>
							<div v-if="ui.duplicateSuccess" class="wpvg-info-box wpvg-mt-4">
								<p class="wpvg-label">
									Votre vCard a été dupliquée.<br>
									Cliquez sur <strong>Publier la vCard en ligne</strong> pour envoyer la nouvelle version.
								</p>
							</div>

						</div>

						<!-- SECTION : Résultat publication (uniquement après activation) -->
						<div v-if="ui.publishResult?.url" class="wpvg-flex wpvg-flex-col wpvg-stack">

							<div>
								<p class="wpvg-label">Votre vCard est en ligne :</p>

								<a :href="ui.publishResult.url" target="_blank" class="wpvg-link">
									{{ ui.publishResult.url }}
								</a>
							</div>

							<!-- QR CODE centré -->
							<div class="wpvg-flex wpvg-justify-center">
								<div id="wpvg-qrcode" style="width:180px;height:180px;"></div>
							</div>

							<!-- ACTIONS LIÉES À LA VCARD PUBLIÉE -->
							<div class="wpvg-flex wpvg-flex-col wpvg-stack">

								<button 
									v-if="ui.publishResult?.zip"
									@click="downloadZip(ui.publishResult.zip)"
									class="wpvg-btn wpvg-btn-secondary wpvg-w-full"
								>
									Télécharger le ZIP
								</button>

								<button 
									class="wpvg-btn wpvg-btn-primary wpvg-w-full"
									@click="openVCard(ui.publishResult.url)"
								>
									Ouvrir la vCard
								</button>

								<button 
									class="wpvg-btn wpvg-btn-secondary wpvg-w-full"
									@click="copyLink(ui.publishResult.url)"
								>
									Copier le lien
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
            <!-- FIN SECTION ONLINE -->
			
            <div class="wpvg-sections-stack">
				<!-- Style & Apparence (Fusion Design + Typographie) -->
				<div class="wpvg-admin-section">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons.palette" v-html="uiIcons.palette"></span>
						</i>
						Style & Apparence
					</h3>

					<!-- Palettes -->
					<div class="wpvg-mb-4">
						<label class="wpvg-label-sub">
							Palettes de couleurs
							<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
								❶ Parmi les 6 couleurs personnalisables, 3 sont affichées sur chaque palette : principale, fond et titre.<br>
								❷ Vous pouvez ensuite ajuster chaque couleur en cliquant sur sa pastille.
							</p>
						</label>

						<div class="wpvg-grid-4 wpvg-mt-3 wpvg-sep-line">
							<div v-for="p in palettes"
								 :key="p.name"
								 class="wpvg-palette-card"
								 :class="{ 'wpvg-palette-active': vcard.themeColor === p.themeColor }"
								 @click="applyPalette(p)">

								<div class="wpvg-palette-dots">
									<span class="wpvg-dot" :style="{ backgroundColor: p.themeColor }"></span>
									<span class="wpvg-dot" :style="{ backgroundColor: p.backgroundColor }"></span>
									<span class="wpvg-dot" :style="{ backgroundColor: p.titleColor }"></span>
								</div>

								<p class="wpvg-palette-name">{{ p.name }}</p>
							</div>
						</div>
					</div>

					<!-- 🎨 Couleurs -->
					<div class="wpvg-field-grid-3 wpvg-mb-4 wpvg-sep-line">

						<div>
							<label class="wpvg-label">Couleur principale</label>
							<div class="wpvg-color-row">
								<button type="button" class="wpvg-color-btn" ref="themePickerBtn"></button>
							</div>
						</div>

						<div>
							<label class="wpvg-label">Couleur de fond (vCard)</label>
							<div class="wpvg-color-row">
								<button type="button" class="wpvg-color-btn" ref="backgroundPickerBtn"></button>
							</div>
						</div>

						<div>
							<label class="wpvg-label">Couleur de fond (Champs)</label>
							<div class="wpvg-color-row">
								<button type="button" class="wpvg-color-btn" ref="cardBackgroundPickerBtn"></button>
							</div>
						</div>

						<div>
							<label class="wpvg-label">Couleur des Titres</label>
							<div class="wpvg-color-row">
								<button type="button" class="wpvg-color-btn" ref="titlePickerBtn"></button>
							</div>
						</div>

						<div>
							<label class="wpvg-label">Couleur des Textes</label>
							<div class="wpvg-color-row">
								<button type="button" class="wpvg-color-btn" ref="textPickerBtn"></button>
							</div>
						</div>

						<div>
							<label class="wpvg-label">Couleur des Icônes</label>
							<div class="wpvg-color-row">
								<button type="button" class="wpvg-color-btn" ref="iconPickerBtn"></button>
							</div>
						</div>

					</div>


					<!-- ✒️ Typographie -->
					<div class="wpvg-grid-1 wpvg-mb-4 wpvg-sep-line">
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">Police (Typographie)</label>
							<select v-model="vcard.fontFamily" class="wpvg-input">
								<option value="Inter">Inter (Moderne)</option>
								<option value="Roboto">Roboto (Classique)</option>
								<option value="Outfit">Outfit (Rond & Dynamique)</option>
							</select>
						</div>
					</div>

					<!-- 🔠 Tailles -->
					<div class="wpvg-field-grid-3 wpvg-mb-4">

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">Taille des Titres</label>
							<div class="wpvg-size-row">
								<button type="button" class="wpvg-size-btn" @click="decreaseSize('titleSize')">−</button>
								<input type="text" v-model="vcard.titleSize" class="wpvg-input-size">
								<button type="button" class="wpvg-size-btn" @click="increaseSize('titleSize')">+</button>
							</div>
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">Taille des Textes</label>
							<div class="wpvg-size-row">
								<button type="button" class="wpvg-size-btn" @click="decreaseSize('textSize')">−</button>
								<input type="text" v-model="vcard.textSize" class="wpvg-input-size">
								<button type="button" class="wpvg-size-btn" @click="increaseSize('textSize')">+</button>
							</div>
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">Taille des Icônes</label>
							<div class="wpvg-size-row">
								<button type="button" class="wpvg-size-btn" @click="decreaseSize('iconSize')">−</button>
								<input type="text" v-model="vcard.iconSize" class="wpvg-input-size">
								<button type="button" class="wpvg-size-btn" @click="increaseSize('iconSize')">+</button>
							</div>
						</div>

					</div>

				</div>
				
				<!-- Images -->
				<div class="wpvg-admin-section wpvg-mt-6">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons.image"
								  v-html="uiIcons.image">
							</span>
						</i>
						Images
					</h3>
					<div class="wpvg-field-grid-3">
						
						<!-- Image de couverture -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">Image de couverture</label>

							<div v-if="vcard.coverImage" class="wpvg-media-preview">
								<img :src="vcard.coverImage" :style="{ borderColor: vcard.themeColor }">

								<button @click="vcard.coverImage = null" class="wpvg-remove-btn">
									<i>
										<span v-if="uiIcons && uiIcons.xmark"
											  v-html="uiIcons.xmark">
										</span>
									</i>
								</button>
							</div>

							<div v-else class="wpvg-upload-area wpvg-upload-banner" @click="$refs.coverInput.click()">
								<i>
									<span v-if="uiIcons && uiIcons.panorama"
										  v-html="uiIcons.panorama">
									</span>
								</i>
								<p>Ajouter une bannière</p>
							</div>

							<input type="file" ref="coverInput" accept=".jpg,.jpeg,.png,.webp,.gif" @change="handleCoverUpload" class="hidden">
						</div>
						
						<!-- Photo de profil -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">Photo de profil</label>

							<div class="wpvg-flex-center-gap">

								<div v-if="vcard.avatar" class="wpvg-relative">
									<div class="wpvg-images-width">
										<img :src="vcard.avatar"
											 class="wpvg-avatar-admin"
											 :style="{ borderColor: vcard.themeColor }">

										<button @click="vcard.avatar = null"
												class="wpvg-remove-btn wpvg-remove-avatar">
											<i>
												<span v-if="uiIcons && uiIcons.xmark"
													  v-html="uiIcons.xmark">
												</span>
											</i>
										</button>
									</div>
								</div>

								<div v-else class="wpvg-upload-area wpvg-upload-avatar"
									 @click="$refs.avatarInput.click()">
									<i>
										<span v-if="uiIcons && uiIcons.user"
											  v-html="uiIcons.user">
										</span>
									</i>
								</div>

								<input type="file"
									   ref="avatarInput"
									   accept=".jpg,.jpeg,.png,.webp,.gif"
									   @change="handleAvatarUpload"
									   class="hidden">
							</div>
						</div>

						<!-- Favicon -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">Favicon (Onglet)</label>

							<div class="wpvg-flex-center-gap">

								<div v-if="vcard.favicon" class="wpvg-relative">
									<div class="wpvg-images-width">
										<img :src="vcard.favicon"
											 class="wpvg-favicon-admin">

										<button @click="vcard.favicon = null"
												class="wpvg-remove-btn wpvg-remove-avatar">
											<i>
												<span v-if="uiIcons && uiIcons.xmark"
													  v-html="uiIcons.xmark">
												</span>
											</i>
										</button>
									</div>
								</div>

								<div v-else class="wpvg-upload-area wpvg-upload-favicon"
									 @click="$refs.faviconInput.click()">
									<i>
										<span v-if="uiIcons && uiIcons.star"
											  v-html="uiIcons.star">
										</span>
									</i>
								</div>

								<input type="file"
									   ref="faviconInput"
									   accept=".jpg,.jpeg,.png,.webp,.gif,.ico"
									   @change="handleFaviconUpload"
									   class="hidden">
							</div>
						</div>
					</div>
				</div>

				<!-- Informations Personnelles -->
				<!-- <div class="wpvg-admin-grid-2"> -->
				<div class="wpvg-admin-section wpvg-mt-6">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons.user"
								  v-html="uiIcons.user">
							</span>
						</i>
						Informations Personnelles
					</h3>
					<div class="wpvg-field-wrapper">
						<label class="wpvg-label">Prénom</label>

						<input 
							type="text" 
							maxlength="30" 
							v-model="vcard.firstName" 
							class="wpvg-input"
							@input="firstNameLimit = ($event.target.value.length >= 30)"
							:class="{ 'wpvg-limit-reached': firstNameLimit }"
						>

						<p v-if="firstNameLimit" class="wpvg-limit-text">
							Limite atteinte (30 caractères)
						</p>
					</div>

					<div class="wpvg-field-wrapper">
						<label class="wpvg-label">Nom</label>

						<input 
							type="text" 
							maxlength="30" 
							v-model="vcard.lastName" 
							class="wpvg-input"
							@input="lastNameLimit = ($event.target.value.length >= 30)"
							:class="{ 'wpvg-limit-reached': lastNameLimit }"
						>

						<p v-if="lastNameLimit" class="wpvg-limit-text">
							Limite atteinte (30 caractères)
						</p>
					</div>

					<div class="wpvg-field-wrapper">
						<label class="wpvg-label">Poste / Fonction</label>

						<input 
							type="text" 
							maxlength="38" 
							v-model="vcard.jobTitle" 
							class="wpvg-input"
							@input="jobTitleLimit = ($event.target.value.length >= 30)"
							:class="{ 'wpvg-limit-reached': jobTitleLimit }"
						>

						<p v-if="jobTitleLimit" class="wpvg-limit-text">
							Limite atteinte (38 caractères)
						</p>
					</div>

					<div class="wpvg-field-wrapper">
						<label class="wpvg-label">Entreprise</label>

						<input 
							type="text" 
							maxlength="30" 
							v-model="vcard.company" 
							class="wpvg-input"
							@input="companyLimit = ($event.target.value.length >= 30)"
							:class="{ 'wpvg-limit-reached': companyLimit }"
						>

						<p v-if="companyLimit" class="wpvg-limit-text">
							Limite atteinte (30 caractères)
						</p>
					</div>

					<!-- Description (Quill) -->
					<div class="wpvg-field-wrapper wpvg-mt-6">
						<label class="wpvg-label">Bio / Description</label>
						<div class="wpvg-editor-container">
							<quill-editor v-model="vcard.bio"></quill-editor>
						</div>
						<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
							Limite : 2000 caractères. Le texte long est automatiquement tronqué.
						</p>

					</div>
				</div>			
				
				<!-- Coordonnées -->
				<div class="wpvg-admin-section wpvg-mt-6">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons['address-card']"
								  v-html="uiIcons['address-card']">
							</span>
						</i>
						Coordonnées
					</h3>
					<div class="wpvg-admin-grid-2">

						<!-- Téléphone Mobile -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i>
									<span v-if="uiIcons && uiIcons['mobile-screen']" 
										v-html="uiIcons['mobile-screen']"
									</span>
								</i>
								Téléphone Mobile
							</label>
							<input type="tel" v-model="vcard.mobile"
								   placeholder="+33 6 00 00 00 00"
								   class="wpvg-input">
						</div>

						<!-- Téléphone Fixe -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i>
									<span v-if="uiIcons && uiIcons.phone"
										  v-html="uiIcons.phone">
									</span>
								</i>
								Téléphone Fixe
							</label>
							<input type="tel" v-model="vcard.phone"
								   placeholder="+33 1 00 00 00 00"
								   class="wpvg-input">
						</div>

						<!-- Email -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i>
									<span v-if="uiIcons && uiIcons.envelope"
										  v-html="uiIcons.envelope">
									</span>
								</i>
								Email
							</label>
							<input type="email" v-model="vcard.email"
								   class="wpvg-input">
						</div>

						<!-- Site Web -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i>
									<span v-if="uiIcons && uiIcons.globe"
										  v-html="uiIcons.globe">
									</span>
								</i>
								Site Web
							</label>

							<input type="url" v-model="vcard.website"
								   placeholder="https://"
								   class="wpvg-input"
								   :class="{'wpvg-border-red wpvg-input-error': !isValidUrl(vcard.website)}">

							<p v-if="!isValidUrl(vcard.website)"
							   class="wpvg-text-xs wpvg-text-red wpvg-mt-1">
								L'URL doit commencer par http:// ou https://
							</p>
						</div>

						<!-- Adresse physique (Pleine largeur) -->
						<div class="wpvg-col-span-full wpvg-field-wrapper">
							<label class="wpvg-label">
								<i>
									<span v-if="uiIcons && uiIcons['map-marker-alt']"
										  v-html="uiIcons['map-marker-alt']">
									</span>
								</i>
								Adresse physique (Lien Google Maps)
							</label>

							<input 
								type="text" 
								maxlength="200" 
								v-model="vcard.address"
								placeholder="10 Rue de la Paix, 75000 Paris"
								class="wpvg-input"
								@input="addressLimit = ($event.target.value.length >= 200)"
								:class="{ 'wpvg-limit-reached': addressLimit }"
							>

							<p v-if="addressLimit" class="wpvg-limit-text">
								Limite atteinte (200 caractères)
							</p>
						</div>

						<!-- Agenda -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i>
									<span v-if="uiIcons && uiIcons['calendar-check']" 
										v-html="uiIcons['calendar-check']"
									</span>
								</i>
								Agenda / RDV (URL)
							</label>

							<input type="url" v-model="vcard.agenda"
								   placeholder="Lien Calendly, Doctolib..."
								   class="wpvg-input"
								   :class="{'wpvg-border-red wpvg-input-error': !isValidUrl(vcard.agenda)}">

							<p v-if="!isValidUrl(vcard.agenda)"
							   class="wpvg-text-xs wpvg-text-red wpvg-mt-1">
								L'URL doit commencer par http:// ou https://
							</p>
						</div>

						<!-- Boutique -->
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i>
									<span v-if="uiIcons && uiIcons.store"
										  v-html="uiIcons.store">
									</span>
								</i>
								Boutique (URL)
							</label>

							<input type="url" v-model="vcard.store"
								   placeholder="Lien vers la boutique..."
								   class="wpvg-input"
								   :class="{'wpvg-border-red wpvg-input-error': !isValidUrl(vcard.store)}">

							<p v-if="!isValidUrl(vcard.store)"
							   class="wpvg-text-xs wpvg-text-red wpvg-mt-1">
								L'URL doit commencer par http:// ou https://
							</p>
						</div>
					</div>
				</div>

				<!-- Chat Apps -->
				<div class="wpvg-admin-section wpvg-mt-6">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons.comments"
								  v-html="uiIcons.comments">
							</span>
						</i>
						Messageries (Chat)
					</h3>
					<p class="wpvg-admin-description">Entrez votre numéro, identifiant ou pseudo pour chaque plateforme (laisser vide pour ignorer).</p>
					
					<div class="wpvg-admin-grid-2">
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-whatsapp">
									<span v-if="uiIcons && uiIcons.whatsapp" v-html="uiIcons.whatsapp"></span>
								</i>
								WhatsApp (Numéro)
							</label>

							<input type="text" v-model="vcard.whatsapp" placeholder="+33600000000" class="wpvg-input">
						</div>
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-messenger">
									<span v-if="uiIcons && uiIcons.messenger" v-html="uiIcons.messenger"></span>
								</i>
								Messenger (ID)
							</label>
							<input type="text" v-model="vcard.messenger" placeholder="mon.pseudo" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-telegram">
									<span v-if="uiIcons && uiIcons.telegram" v-html="uiIcons.telegram"></span>
								</i>
								Telegram (Pseudo)
							</label>
							<input type="text" v-model="vcard.telegram" placeholder="monpseudo" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-teams">
									<span v-if="uiIcons && uiIcons.teams" v-html="uiIcons.teams"></span>
								</i>
								Teams (Email/Lien)
							</label>
							<input type="text" v-model="vcard.teams" placeholder="lien ou email Teams" class="wpvg-input">
						</div>
						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-line">
									<span v-if="uiIcons && uiIcons.line" v-html="uiIcons.line"></span>
								</i>
								Line (ID)
							</label>
							<input type="text" v-model="vcard.line" placeholder="monID" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-viber">
									<span v-if="uiIcons && uiIcons.viber" v-html="uiIcons.viber"></span>
								</i>
								Viber (Numéro)
							</label>
							<input type="text" v-model="vcard.viber" placeholder="+33600000000" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-zalo">
									<span v-if="uiIcons && uiIcons.zalo" v-html="uiIcons.zalo"></span>
								</i>
								Zalo (Numéro)
							</label>
							<input type="text" v-model="vcard.zalo" placeholder="Numéro Zalo" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-wechat">
									<span v-if="uiIcons && uiIcons.wechat" v-html="uiIcons.wechat"></span>
								</i>
								WeChat (ID)
							</label>
							<input type="text" v-model="vcard.wechat" placeholder="wechat_id" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-qq">
									<span v-if="uiIcons && uiIcons.qq" v-html="uiIcons.qq"></span>
								</i>
								QQ (Numéro)
							</label>
							<input type="text" v-model="vcard.qq" placeholder="Numéro QQ" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-discord">
									<span v-if="uiIcons && uiIcons.discord" v-html="uiIcons.discord"></span>
								</i>
								Discord (Pseudo)
							</label>
							<input type="text" v-model="vcard.discord" placeholder="pseudo#0000" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-slack">
									<span v-if="uiIcons && uiIcons.slack" v-html="uiIcons.slack"></span>
								</i>
								Slack (Lien)
							</label>
							<input type="text" v-model="vcard.slack" placeholder="https://slack.com/..." class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-ringover">
									<span v-if="uiIcons && uiIcons.ringover" v-html="uiIcons.ringover"></span>
								</i>
								Ringover (Numéro)
							</label>
							<input type="text" v-model="vcard.ringover" placeholder="+33600000000" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-kakao">
									<span v-if="uiIcons && uiIcons.kakaotalk" v-html="uiIcons.kakaotalk"></span>
								</i>
								KakaoTalk (ID)
							</label>
							<input type="text" v-model="vcard.kakaotalk" placeholder="kakao_id" class="wpvg-input">
						</div>

						<div class="wpvg-field-wrapper">
							<label class="wpvg-label">
								<i class="wpvg-icon-signal">
									<span v-if="uiIcons && uiIcons.signal" v-html="uiIcons.signal"></span>
								</i>
								Signal (Numéro)
							</label>
							<input type="text" v-model="vcard.signal" placeholder="+33600000000" class="wpvg-input">
						</div>
					</div>
				</div>

				<!-- Réseaux Sociaux -->
				<div class="wpvg-admin-section">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons['share-nodes']"
								v-html="uiIcons['share-nodes']">
							</span>
						</i>
						Réseaux & plateformes
					</h3>
					<div class="wpvg-mb-6">
						<label class="wpvg-label wpvg-mb-3">Cliquez pour ajouter un réseau :</label>
						<div class="wpvg-social-picker wpvg-mt-2">
							<button v-for="social in availableSocials" 
									:key="'add-'+social.id"
									@click="addSocial(social.id)"
									class="wpvg-social-add-btn"
									:style="{ backgroundColor: social.color }"
									:title="social.name">
								<!-- On affiche uniquement le SVG via la fonction getSocialSvg -->
								<span v-if="getSocialSvg(social.id)" 
									  v-html="getSocialSvg(social.id)" 
									  class="wpvg-social-svg-icon">
								</span>
							</button>
						</div>
					</div>

					<!-- Liste des réseaux ajoutés -->
					<div class="wpvg-social-list" id="socials-list" v-if="vcard.socials.length > 0">

						<div v-for="(social, index) in vcard.socials"
							 :key="social.network"
							 class="wpvg-social-item">

							<!-- Poignée de déplacement -->
							<div class="wpvg-drag-handle wpvg-social-drag-handle" title="Déplacer">
								<i>
									<span v-if="uiIcons && uiIcons['grip-vertical']"
										  v-html="uiIcons['grip-vertical']">
									</span>
								</i>
							</div>

							<!-- Icône du réseau -->
							<div class="wpvg-social-icon-box"
								 :style="{ backgroundColor: getSocialColor(social.network) }">

								<span v-if="getSocialSvg(social.network)"
									  v-html="getSocialSvg(social.network)"
									  class="wpvg-social-svg-icon">
								</span>

								<i v-else>
									<span v-if="uiIcons && uiIcons[social.network]"
										  v-html="uiIcons[social.network]">
									</span>
								</i>
							</div>

							<!-- Input URL -->
							<div style="flex: 1;">
								<input type="url"
									   v-model="social.url"
									   :placeholder="'URL ' + getSocialName(social.network)"
									   class="wpvg-input"
									   :class="{'wpvg-border-red wpvg-input-error': !isValidUrl(social.url)}">

								<p v-if="!isValidUrl(social.url)"
								   class="wpvg-text-xs wpvg-text-red wpvg-mt-1">
									L'URL doit commencer par http:// ou https://
								</p>
							</div>

							<!-- Bouton Supprimer -->
							<button @click="removeSocial(index)"
									class="wpvg-trash-btn"
									title="Supprimer">
								<i>
									<span v-if="uiIcons && uiIcons.trash"
										  v-html="uiIcons.trash">
									</span>
								</i>
							</button>

						</div>
					</div>

					<div v-else class="wpvg-empty-state">
						Aucun réseau social ajouté.
					</div>
				</div>

				<!-- Contenu mis en avant -->
				<div class="wpvg-admin-section wpvg-mt-6">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons.star"
								  v-html="uiIcons.star">
							</span>
						</i>
						Contenu mis en avant
					</h3>
					<!-- Groupe de boutons d'ajout -->
					<div class="wpvg-add-actions-group">
						<button @click="addFeaturedItem('media')" class="wpvg-add-item-btn wpvg-label-sub">
							<i class="wpvg-text-blue">
								<span v-if="uiIcons && uiIcons.image"
									  v-html="uiIcons.image">
								</span>
							</i>
							Média / PDF
						</button>
						<button @click="addFeaturedItem('youtube')" class="wpvg-add-item-btn wpvg-label-sub">
							<i class="wpvg-text-red">
								<span v-if="uiIcons && uiIcons.youtube"
									  v-html="uiIcons.youtube">
								</span>
							</i>
							Vidéo (YT/Vimeo)
						</button>
						<button @click="addFeaturedItem('video')" class="wpvg-add-item-btn wpvg-label-sub">
							<i class="wpvg-text-purple">
								<span v-if="uiIcons && uiIcons.video"
									  v-html="uiIcons.video">
								</span>
							</i>
							Fichier Vidéo
						</button>
						<button @click="addFeaturedItem('audio')" class="wpvg-add-item-btn wpvg-label-sub">
							<i class="wpvg-text-pink">
								<span v-if="uiIcons && uiIcons.music"
									  v-html="uiIcons.music">
								</span>
							</i>
							Fichier Audio
						</button>
						<button @click="addFeaturedItem('text')" class="wpvg-add-item-btn wpvg-label-sub">
							<i>
								<span v-if="uiIcons && uiIcons.font"
									  v-html="uiIcons.font">
								</span>
							</i>
							Texte
						</button>
						<button @click="addFeaturedItem('product')" class="wpvg-add-item-btn wpvg-label-sub">
							<i class="wpvg-featured-title-product">
								<span v-if="uiIcons && uiIcons.box"
									  v-html="uiIcons.box">
								</span>
							</i>
							Produit
						</button>
						<button @click="addFeaturedItem('button')" class="wpvg-add-item-btn wpvg-label-sub">
							<i class="wpvg-featured-title-cta">
								<span v-if="uiIcons && uiIcons.bullseye"
									  v-html="uiIcons.bullseye">
								</span>
							</i>
							Bouton CTA
						</button>
						<button @click="addFeaturedItem('iframe')" class="wpvg-add-item-btn wpvg-label-sub">
							<i class="wpvg-featured-title-iframe"">
								<span v-if="uiIcons && uiIcons.code"
									  v-html="uiIcons.code">
								</span>
							</i>
							iFrame / Embed
						</button>
					</div>

					<!-- Liste des blocs (Drag & Drop) -->
					<div class="wpvg-featured-stack" id="featured-list" v-show="vcard.featuredItems.length > 0">
						<div v-for="(item, index) in vcard.featuredItems" 
							 :key="item.id" 
							 class="wpvg-featured-card">

							<!-- Poignée de déplacement -->
							<div class="wpvg-drag-handle wpvg-featured-drag-handle" title="Déplacer">
								<i>
									<span v-if="uiIcons && uiIcons['grip-vertical']"
										  v-html="uiIcons['grip-vertical']">
									</span>
								</i>
							</div>

							<!-- Bouton Supprimer le bloc -->
							<button @click="removeFeaturedItem(index)" 
									class="wpvg-btn-remove-card" 
									title="Supprimer">
								<i>
									<span v-if="uiIcons && uiIcons.trash"
										  v-html="uiIcons.trash">
									</span>
								</i>
							</button>

							<!-- Bloc Média (Image ou PDF) -->
							<div v-if="item.type === 'media'" class="wpvg-media-block">
								<h4 class="wpvg-media-title">
									<i>
										<span v-if="uiIcons && uiIcons.image"
											  v-html="uiIcons.image">
										</span>
									</i>
									Bloc Média (Image / PDF)
								</h4>

								<input type="text" maxlength="30"
									   v-model="item.title" 
									   placeholder="Titre (Optionnel)" 
									   class="wpvg-input ql-padding"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<div class="wpvg-field-wrapper wpvg-mt-2">
									<label class="wpvg-label-xs">Fichier Principal (Image ou PDF)</label>
									<input type="file" 
										   accept=".jpg,.jpeg,.png,.webp,.gif,.pdf"
										   @change="handleFeaturedImageUpload($event, item)" 
										   class="wpvg-text-sm">
								</div>

								<!-- 2. OPTIONS PDF : Apparaissent SEULEMENT si c'est un PDF -->
								<div v-if="item.isPdf" class="wpvg-pdf-options-box">
									<label class="wpvg-pdf-label">Image de miniature du PDF</label>

									<div class="wpvg-flex-center-gap">

										<!-- Miniature PDF -->
										<div v-if="item.pdfThumb" class="wpvg-relative">
											<img :src="item.pdfThumb" class="wpvg-thumb-preview">

											<!-- Bouton supprimer miniature -->
											<button @click="item.pdfThumb = null" 
													class="wpvg-remove-btn wpvg-remove-avatar">
												<i>
													<span v-if="uiIcons && uiIcons.xmark"
														  v-html="uiIcons.xmark">
													</span>
												</i>
											</button>
										</div>

										<!-- Pas de miniature -->
										<div v-else class="wpvg-thumb-empty">
											<i>
												<span v-if="uiIcons && uiIcons.image"
													  v-html="uiIcons.image">
												</span>
											</i>
											<span>PAS DE MINIATURE</span>
										</div>

										<!-- Upload miniature -->
										<div style="flex: 1;">
											<input type="file" accept=".jpg,.jpeg,.png,.webp,.gif"
												   @change="handlePdfThumbUpload($event, item)"
												   class="wpvg-text-xs wpvg-w-full">
											<p class="wpvg-helper-text">Indispensable pour l'aperçu du PDF.</p>
										</div>

									</div>
								</div>

								<!-- 3. APERÇU DYNAMIQUE DU FICHIER CHARGÉ -->
								<div v-if="item.image || item.isPdf" class="wpvg-mt-2">

									<!-- PDF -->
									<div v-if="item.isPdf" class="wpvg-w-full">

										<!-- Miniature PDF -->
										<div v-if="item.pdfThumb" class="wpvg-featured-media-frame">
											<img :src="item.pdfThumb" class="wpvg-featured-media-img">
											<div class="wpvg-badge-green">MINIATURE GÉNÉRÉE</div>
										</div>

										<!-- PDF sans miniature -->
										<div v-else class="wpvg-pdf-status-card">
											<i>
												<span v-if="uiIcons && uiIcons['file-pdf']"
													  v-html="uiIcons['file-pdf']">
												</span>
											</i>
											<span class="wpvg-pdf-status-title">Document PDF chargé</span>
										</div>

									</div>

									<!-- Image -->
									<div v-else class="wpvg-featured-media-frame">
										<img :src="item.image" class="wpvg-featured-media-img">
									</div>
								</div>
								<button @click="removeFeaturedMedia(item)" class="wpvg-btn-text-danger">
									Supprimer ce fichier
								</button>

								<!-- 4. DESCRIPTION UNIQUE -->
								<div class="wpvg-mt-2">
									<label class="wpvg-label-xs">Description / Texte</label>
									<quill-editor v-model="item.description"></quill-editor>
									<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
										Limite : 2000 caractères. Le texte long est automatiquement tronqué.
									</p>
								</div>
							</div>
								
							<!-- YouTube -->
							<div v-if="item.type === 'youtube'" class="wpvg-media-block wpvg-mt-2">
								<h4 class="wpvg-featured-title wpvg-featured-title-yt">
									<i>
										<span v-if="uiIcons && uiIcons.youtube"
											  v-html="uiIcons.youtube">
										</span>
									</i>
									Vidéo YouTube / Vimeo
								</h4>

								<input type="text" maxlength="30"
									   v-model="item.title"
									   placeholder="Titre (Optionnel)"
									   class="wpvg-input ql-padding"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<input type="url" v-model="item.url"
									   @change="onVideoUrlChange(item, index)"
									   placeholder="URL de la vidéo (ex: https://youtube.com/watch?v=...)"
									   class="wpvg-input"
									   :class="{'wpvg-border-red wpvg-input-error': !isValidUrl(item.url)}">

								<p v-if="!isValidUrl(item.url)" class="wpvg-text-xs wpvg-text-red wpvg-mt-1">
									L'URL doit commencer par http:// ou https://
								</p>

								<div class="wpvg-mt-2">
									<label class="wpvg-label-xs">Description</label>
									<quill-editor v-model="item.description"></quill-editor>
									<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
										Limite : 2000 caractères. Le texte long est automatiquement tronqué.
									</p>
								</div>

								<p class="wpvg-text-orange wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
									ℹ️ L’aperçu affiche temporairement les miniatures YouTube/Vimeo pour faciliter la création.	Dans la vCard finale, toutes les images seront locales et 100% RGPD. ▶ L’activation de la vidéo (bouton Play) relève du choix du visiteur, qui charge alors le contenu externe.<br>
								</p>
							</div>

							<!-- Text -->
							<div v-if="item.type === 'text'" class="wpvg-media-block wpvg-mt-2">
								<h4 class="wpvg-featured-title wpvg-featured-title-text">
									<i>
										<span v-if="uiIcons && uiIcons.font"
											  v-html="uiIcons.font">
										</span>
									</i>
									Bloc de Texte
								</h4>

								<input type="text" maxlength="30"
									   v-model="item.title"
									   placeholder="Titre (Optionnel)"
									   class="wpvg-input ql-padding"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<div class="wpvg-mt-2">
									<quill-editor v-model="item.description"></quill-editor>
									<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
										Limite : 2000 caractères. Le texte long est automatiquement tronqué.
									</p>
								</div>
							</div>

							<!-- Audio File -->
							<div v-if="item.type === 'audio'" class="wpvg-media-block wpvg-mt-2">
								<h4 class="wpvg-featured-title wpvg-featured-title-audio">
									<i>
										<span v-if="uiIcons && uiIcons.music"
											  v-html="uiIcons.music">
										</span>
									</i>
									Fichier Audio
								</h4>

								<input type="text" maxlength="30"
									   v-model="item.title"
									   placeholder="Titre (Optionnel)"
									   class="wpvg-input ql-padding"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<input type="file" accept=".mp3,.mpeg,.wav,.ogg"
									   @change="handleAudioUpload($event, item)"
									   class="wpvg-text-sm wpvg-mt-2">

								<div v-if="item.image" class="wpvg-mt-2">
									<audio :src="item.image" controls class="wpvg-audio-player"></audio>
									<button @click="item.image = null" class="wpvg-btn-text-danger">
										Retirer l'audio
									</button>
								</div>

								<div class="wpvg-mt-2">
									<label class="wpvg-label-xs">Description</label>
									<quill-editor v-model="item.description"></quill-editor>
									<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
										Limite : 2000 caractères. Le texte long est automatiquement tronqué.
									</p>
								</div>
							</div>

							<!-- Video File -->
							<div v-if="item.type === 'video'" class="wpvg-media-block wpvg-mt-2">
								<h4 class="wpvg-featured-title wpvg-featured-title-video">
									<i>
										<span v-if="uiIcons && uiIcons.video"
											  v-html="uiIcons.video">
										</span>
									</i>
									Fichier Vidéo
								</h4>

								<input type="text" maxlength="30"
									   v-model="item.title"
									   placeholder="Titre (Optionnel)"
									   class="wpvg-input ql-padding"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<div class="wpvg-mt-2">
									<input type="file" accept=".mp4,.webm,.ogg"
										   @change="handleVideoUpload($event, item)"
										   class="wpvg-text-sm">
								</div>

								<div v-if="item.image" class="wpvg-mt-2">
									<video :src="item.image" controls class="wpvg-video-preview"></video>
									<button @click="item.image = null" class="wpvg-btn-text-danger">
										Retirer la vidéo
									</button>
								</div>

								<div class="wpvg-mt-2">
									<label class="wpvg-label-xs">Description</label>
									<quill-editor v-model="item.description"></quill-editor>
									<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
										Limite : 2000 caractères. Le texte long est automatiquement tronqué.
									</p>
								</div>
							</div>

							<!-- Product -->
							<div v-if="item.type === 'product'" class="wpvg-media-block wpvg-mt-2">
								<h4 class="wpvg-featured-title wpvg-featured-title-product">
									<i>
										<span v-if="uiIcons && uiIcons.box"
											  v-html="uiIcons.box">
										</span>
									</i>
									Produit Mis en Avant
								</h4>

								<input type="text" maxlength="30"
									   v-model="item.title"
									   placeholder="Nom du produit"
									   class="wpvg-input ql-padding"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<div class="wpvg-flex-gap-2 wpvg-mt-2">
									<input type="file" accept=".jpg,.jpeg,.png,.webp,.gif"
										   @change="handleFeaturedImageUpload($event, item)"
										   class="wpvg-text-sm wpvg-w-1-2">

									<input type="text" v-model="item.price" placeholder="Prix normal" class="wpvg-input">
									<input type="text" v-model="item.promoPrice" placeholder="Promo (Optionnel)" class="wpvg-input">
								</div>

								<div v-if="item.image" class="wpvg-featured-media-frame">
									<img :src="item.image" class="wpvg-featured-media-img">
									<br>
								</div>

								<button @click="item.image = null" class="wpvg-btn-text-danger">
									Retirer l'image
								</button>

								<div class="wpvg-mt-2">
									<label class="wpvg-label-xs">Description</label>
									<quill-editor v-model="item.description"></quill-editor>
									<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
										Limite : 2000 caractères. Le texte long est automatiquement tronqué.
									</p>
								</div>

								<div class="wpvg-flex-gap-2 wpvg-items-start ql-padding">
									<div class="wpvg-w-1-3">
										<input type="text" maxlength="16"
											   v-model="item.btnLabel"
											   placeholder="Texte du bouton"
											   class="wpvg-input"
											   @input="item.btnLabelLimit = ($event.target.value.length >= 16)"
											   :class="{ 'wpvg-limit-reached': item.btnLabelLimit }"
										>

										<p v-if="item.btnLabelLimit" class="wpvg-limit-text">
											Limite atteinte (16 caractères)
										</p>
									</div>

									<div class="wpvg-w-2-3">
										<input type="url" v-model="item.url" placeholder="URL du produit"
											   class="wpvg-input"
											   :class="{'wpvg-border-red wpvg-input-error': !isValidUrl(item.url)}">

										<p v-if="!isValidUrl(item.url)" class="wpvg-text-xs wpvg-text-red wpvg-mt-1">
											L'URL doit commencer par http:// ou https://
										</p>
									</div>
								</div>
							</div>
															
							<!-- Button - CTA -->
							<div v-if="item.type === 'button'" class="ql-gap wpvg-media-block wpvg-mt-2">
								<h4 class="wpvg-featured-title wpvg-featured-title-cta">
									<i>
										<span v-if="uiIcons && uiIcons.bullseye"
											  v-html="uiIcons.bullseye">
										</span>
									</i>
									Bouton CTA Personnalisé
								</h4>

								<!-- Titre -->
								<input type="text" maxlength="30" 
									   v-model="item.title" 
									   placeholder="Titre (Optionnel)" 
									   class="wpvg-input"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<!-- IMAGE (tous formats) -->
								<div class="wpvg-field-wrapper wpvg-mt-2">
									<label class="wpvg-label-xs">Image (Optionnelle)</label>
									<input type="file"
										   accept=".jpg,.jpeg,.png,.webp,.gif"
										   @change="handleFeaturedImageUpload($event, item)"
										   class="wpvg-text-sm">
								</div>

								<!-- Aperçu image -->
								<div v-if="item.image" class="wpvg-mt-2">
									<div class="wpvg-featured-media-frame">
										<img :src="item.image" class="wpvg-featured-media-img">
									</div>

									<button @click="item.image = null" class="wpvg-btn-text-danger">
										Supprimer cette image
									</button>
								</div>

								<!-- DESCRIPTION RICH TEXT -->
								<div class="wpvg-mt-2">
									<label class="wpvg-label-xs">Description / Texte</label>
									<quill-editor v-model="item.description"></quill-editor>
									<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
										Limite : 2000 caractères. Le texte long est automatiquement tronqué.
									</p>
								</div>

								<!-- Ligne bouton + URL -->
								<div class="wpvg-flex-gap-2 wpvg-items-start wpvg-mt-2">
									<div class="wpvg-w-1-3">
										<input type="text" maxlength="16" 
											   v-model="item.btnLabel" 
											   placeholder="Texte du bouton" 
											   class="wpvg-input"
											   @input="item.btnLabelLimit = ($event.target.value.length >= 16)"
											   :class="{ 'wpvg-limit-reached': item.btnLabelLimit }"
										>

										<p v-if="item.btnLabelLimit" class="wpvg-limit-text">
											Limite atteinte (16 caractères)
										</p>
									</div>

									<div class="wpvg-w-2-3">
										<input type="url" 
											   v-model="item.url" 
											   placeholder="URL de destination"
											   class="wpvg-input"
											   :class="{'wpvg-border-red wpvg-input-error': !isValidUrl(item.url)}">

										<p v-if="!isValidUrl(item.url)" class="wpvg-text-xs wpvg-text-red wpvg-mt-1">
											L'URL doit commencer par http:// ou https://
										</p>
									</div>
								</div>

								<label class="wpvg-text-orange" style="font-size: 1.2rem !important";>
									♫ Pour les podcasts : collez simplement le lien ou le code d’intégration de votre plateforme (Spotify, Apple Podcasts, Deezer…).
								</label>
							</div>

							<!-- iFrame / Embed -->
							<div v-if="item.type === 'iframe' || item.type === 'embed'" class="ql-gap wpvg-media-block wpvg-mt-2">
								<h4 class="wpvg-featured-title wpvg-featured-title-iframe">
									<i>
										<span v-if="uiIcons && uiIcons.code"
											  v-html="uiIcons.code">
										</span>
									</i>
									Code d'intégration (HTML / iframe)
								</h4>

								<input type="text" maxlength="30"
									   v-model="item.title"
									   placeholder="Titre (Optionnel)"
									   class="wpvg-input"
									   @input="item.titleLimit = ($event.target.value.length >= 30)"
									   :class="{ 'wpvg-limit-reached': item.titleLimit }"
								>

								<p v-if="item.titleLimit" class="wpvg-limit-text">
									Limite atteinte (30 caractères)
								</p>

								<input type="text" maxlength="200"
									   v-model="item.description"
									   placeholder="Description..."
									   class="wpvg-input"
									   @input="item.descLimit = ($event.target.value.length >= 200)"
									   :class="{ 'wpvg-limit-reached': item.descLimit }"
								>

								<p v-if="item.descLimit" class="wpvg-limit-text">
									Limite atteinte (200 caractères)
								</p>

								<textarea v-model="item.html"
										  placeholder="Collez votre code d'intégration ici..."
										  rows="3"
										  class="wpvg-input"
										  style="font-family: monospace;">
								</textarea>

								<p class="wpvg-text-orange wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
									ℹ️ Pour des raisons de sécurité et de confidentialité, les contenus externes intégrés (cartes, widgets, formulaires, etc.) sont bloqués dans l’aperçu. Dans la vCard publiée, ils ne se chargeront qu’au clic du visiteur, qui choisira alors d’accepter de charger du contenu externe. L’utilisation de scripts dangereux, intrusifs, frauduleux ou menant vers des espaces non sécurisés est strictement interdite. L’intégration de scripts (Google Analytics, tracking, etc.) dans ce champ est strictement interdite - aller dans la section "SEO & Référencement". 👉 Consultez nos <a href="https://vcard.chefprojetdigital.fr/conditions-d-utilisation/" target="_blank">Conditions d’utilisation</a>.<br>
								</p>
							</div>
                        </div>
                    </div>
                </div>
								<!-- SEO -->
				<div class="wpvg-admin-section wpvg-mt-6">
					<h3 class="wpvg-section-title">
						<i>
							<span v-if="uiIcons && uiIcons['magnifying-glass']"
								v-html="uiIcons['magnifying-glass']">
							</span>
						</i>
						SEO & Référencement
					</h3>
					<div class="wpvg-admin-grid-2">
						<!-- Ligne d'indexation (Prend toute la largeur) -->
						<div class="wpvg-col-span-full wpvg-color-row wpvg-sep-line">

							<div style="display:flex; flex-direction:column; gap:4px;">

								<div class="wpvg-col-span-full wpvg-color-row">
									<input type="checkbox"
										   id="seo-index"
										   v-model="vcard.seoIndex"
										   :disabled="vcard.passwordProtection"
										   class="wpvg-checkbox">

									<label for="seo-index"
										   class="wpvg-text-sm wpvg-font-medium wpvg-text-gray-700">
										Autoriser l'indexation par les moteurs de recherche (Google, Bing...)
										<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
											La non-indexation n’est pas garantie, même si la case est décochée.
										</p>
									</label>
								</div>

								<!-- ⭐ Message automatique sous la case -->
								<p v-if="vcard.passwordProtection"
								   class="wpvg-text-xs wpvg-text-orange wpvg-mt-1">
									L’indexation est désactivée car la vCard est protégée par mot de passe.
								</p>
							</div>
						</div>

						<!-- Code de tracking (optionnel) -->
						<div class="wpvg-field-wrapper wpvg-col-span-full wpvg-sep-line">
							<label class="wpvg-label">
								Code de tracking (optionnel)
							</label>

							<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mb-2">
								Collez ici votre script de suivi (Google Analytics, Matomo, Plausible, etc.). 
								Il sera injecté dans le &lt;head&gt; de votre vCard (ZIP + version en ligne).
							</p>

							<textarea
								class="wpvg-input wpvg-w-full"
								rows="5"
								placeholder="Ex : &lt;script&gt;...&lt;/script&gt;"
								v-model="vcard.trackingCode"
								maxlength="2000"
								@input="trackingLimit = ($event.target.value.length >= 2000)"
								:class="{ 'wpvg-limit-reached': trackingLimit }"
							></textarea>

							<p v-if="trackingLimit" class="wpvg-limit-text">
								Limite atteinte (2000 caractères)
							</p>

							<p class="wpvg-text-xs wpvg-text-orange wpvg-mt-1">
								ℹ️ Ce champ est réservé aux scripts de suivi conformes (Google Analytics, Matomo, Plausible, etc.). Ils ne seront activés qu’après consentement explicite du visiteur. L’ajout de scripts dangereux, intrusifs ou non liés au tracking est strictement interdit. Voir nos Conditions d’utilisation 👉 <a href="https://vcard.chefprojetdigital.fr/conditions-d-utilisation/" target="_blank">Conditions d’utilisation</a>.
							</p>
						</div>

						<!-- Méta Titre -->
						<div class="wpvg-field-wrapper wpvg-col-span-full wpvg-sep-line">
							<div class="wpvg-field-wrapper">
								<label class="wpvg-label">
									Méta Titre (Title) 
									<span class="wpvg-text-gray-400 wpvg-font-normal">(50–65 caractères recommandés)</span>
								</label>

								<input type="text"
									   v-model="vcard.seoTitle"
									   maxlength="65"
									   placeholder="Titre pour les moteurs de recherche"
									   class="wpvg-input"
									   @input="seoTitleLimit = ($event.target.value.length >= 65)"
									   :class="{ 'wpvg-limit-reached': seoTitleLimit }"
								>

								<p v-if="seoTitleLimit" class="wpvg-limit-text">
									Limite atteinte (65 caractères)
								</p>

								<p class="wpvg-text-xs wpvg-mt-1" 
								   :class="vcard.seoTitle.length > 55 ? 'wpvg-text-orange' : 'wpvg-text-gray-400'">
									{{ vcard.seoTitle.length }} / 65 caractères
								</p>
							</div>

							<!-- Méta Description -->
							<div class="wpvg-field-wrapper">
								<label class="wpvg-label">
									Méta Description 
									<span class="wpvg-text-gray-400 wpvg-font-normal">(120–160 caractères recommandés)</span>
								</label>

								<textarea v-model="vcard.seoDesc"
										  maxlength="160"
										  placeholder="Description courte pour les moteurs de recherche"
										  rows="2"
										  class="wpvg-input"
										  @input="seoDescLimit = ($event.target.value.length >= 160)"
										  :class="{ 'wpvg-limit-reached': seoDescLimit }"
								></textarea>

								<p v-if="seoDescLimit" class="wpvg-limit-text">
									Limite atteinte (160 caractères)
								</p>

								<p class="wpvg-text-xs wpvg-mt-1" 
								   :class="vcard.seoDesc.length > 140 ? 'wpvg-text-orange' : 'wpvg-text-gray-400'">
									{{ vcard.seoDesc.length }} / 160 caractères
								</p>
							</div>
						</div>
					</div>
					
					<!-- Protection par mot de passe -->
					<div class="wpvg-col-span-full wpvg-color-row wpvg-mb-2">
						<input type="checkbox"
							   id="seo-password-protect"
							   v-model="vcard.passwordProtection"
							   class="wpvg-checkbox">

						<label for="seo-password-protect"
							   class="wpvg-text-sm wpvg-font-medium wpvg-text-gray-700">
							Protéger l’accès à ma vCard par un mot de passe
							<p class="wpvg-text-xs wpvg-text-gray-500 wpvg-mt-1">
								Si l’option est activée, votre vCard ne sera accessible qu’avec un mot de passe.
							</p>
						</label>
					</div>

					<!-- Champ mot de passe -->
					<div v-if="vcard.passwordProtection" class="wpvg-col-span-full wpvg-mb-2">
						<label class="wpvg-label-sub" for="seo-password">
							Mot de passe (simple)
						</label>

						<input type="text" maxlength="30"
							   id="seo-password"
							   v-model="vcard.password"
							   placeholder="Ex : 1234"
							   class="wpvg-input wpvg-w-64"
							   @input="passwordLimit = ($event.target.value.length >= 30)"
							   :class="{ 'wpvg-limit-reached': passwordLimit }"
						>

						<p v-if="passwordLimit" class="wpvg-limit-text">
							Limite atteinte (30 caractères)
						</p>
					</div>
				</div>
            </div>
        </div>
		<div id="wpvg-preview-panel" class="wpvg-preview-panel">
			<!-- Colonne Preview (1/3 de l'espace) -->
			<div class="wpvg-preview-column">
				<div class="wpvg-sticky-col">
					<h3 class="wpvg-preview-label">Aperçu en direct</h3>
					
					<div class="wpvg-phone-mockup">
						<div class="wpvg-phone-notch">
							<!-- Remplacement Tailwind par une classe dédiée -->
							<div class="wpvg-phone-speaker"></div>
						</div>
						
						<div class="wpvg-phone-content" 
							 :style="{ 
								 '--vcard-color': vcard.themeColor,
								 '--vcard-bg': vcard.backgroundColor,
								 '--vcard-card-bg': vcard.cardBackgroundColor,
								 '--title-size': vcard.titleSize,
								 '--title-color': vcard.titleColor,
								 '--text-size': vcard.textSize,
								 '--text-color': vcard.textColor,
								 '--icon-size': vcard.iconSize,
								 '--icon-color': vcard.iconColor,
								 fontFamily: vcard.fontFamily === 'Inter' ? 'Inter, sans-serif' : vcard.fontFamily === 'Roboto' ? 'Roboto, sans-serif' : 'Outfit, sans-serif'
							 }">
							
							<!-- Header avec Image de couverture ou Couleur thématique -->
							<div class="vcard-preview-header" :style="vcard.coverImage ? { backgroundImage: 'url(' + vcard.coverImage + ')', backgroundSize: 'cover', backgroundPosition: 'center' } : { backgroundColor: vcard.themeColor }">
								
								<!-- Avatar / Photo de profil -->
								<div v-if="vcard.avatar" class="vcard-preview-avatar" :style="{ borderColor: vcard.themeColor }">
									<!-- Nettoyage des classes Tailwind ici -->
									<img :src="vcard.avatar" class="vcard-avatar-img">
								</div>
								
								<!-- Fallback icône Utilisateur SVG -->
								<div v-else class="vcard-preview-avatar" :style="{ borderColor: vcard.themeColor }">
									<span v-if="uiIcons && uiIcons.user" 
										  v-html="uiIcons.user" 
										  class="wpvg-preview-svg"
										  style="width: var(--icon-size, 2.2rem); height: var(--icon-size, 2.2rem); fill: var(--icon-color, #9ca3af);">
									</span>
								</div>
							</div>

							<div class="vcard-preview-body">
								<!-- Nom et Prénom -->
								<h1 v-if="vcard.firstName || vcard.lastName" class="vcard-preview-name">
									{{ vcard.firstName }} {{ vcard.lastName }}
								</h1>
								
								<!-- Poste et Entreprise -->
								<div v-if="vcard.jobTitle" class="vcard-preview-title">{{ vcard.jobTitle }}</div>
								<div v-if="vcard.company" class="vcard-preview-company">{{ vcard.company }}</div>
								
								<!-- Boutons d'action -->
								<div class="vcard-preview-actions" style="flex-wrap: wrap;">
									<!-- Bouton Contact avec icône address-card -->
									<a href="#" @click.stop class="vcard-preview-btn">
										<span v-if="uiIcons && uiIcons['address-card']" 
											  v-html="uiIcons['address-card']" 
											  class="wpvg-preview-svg">
										</span>
										Contact
									</a>
									
									<!-- Bouton Partager avec icône qrcode -->
									<a href="#" @click.stop="showAdminQR" class="vcard-preview-btn" style="background: #111827;">
										<span v-if="uiIcons && uiIcons.qrcode" 
											  v-html="uiIcons.qrcode" 
											  class="wpvg-preview-svg">
										</span>
										Partager
									</a>
								</div>

								<!-- Bio / Description -->
								<div v-if="vcard.bio" class="vcard-preview-bio quill-content" v-html="vcard.bio"></div>
								
								<div class="vcard-preview-links">
									<!-- État vide (S'affiche si aucune coordonnée n'est saisie) -->
									<div v-if="!vcard.phone && !vcard.mobile && !vcard.email && !vcard.website && !vcard.address && !vcard.agenda && !vcard.store" 
										 class="wpvg-empty-state">
										Vos coordonnées apparaîtront ici
									</div>

									<!-- Mobile avec bouton SMS -->
									<div v-if="vcard.mobile" class="vcard-link-wrapper">
										<a :href="'tel:' + vcard.mobile" class="vcard-preview-link-item" @click.stop>
											<div class="vcard-preview-link-icon">
												<span v-if="uiIcons && uiIcons['mobile-screen']" 
													  v-html="uiIcons['mobile-screen']" 
													  class="wpvg-preview-svg"
													  style="fill: white;">
												</span>
											</div>
											<div>
												<div class="label2">Mobile</div>
												<div class="value wpvg-font-medium">{{ vcard.mobile }}</div>
											</div>
										</a>
										<a :href="'sms:' + vcard.mobile" class="vcard-action-btn" @click.stop title="Envoyer SMS">
											<span v-if="uiIcons && uiIcons['comment-sms']" 
												  v-html="uiIcons['comment-sms']" 
												  class="wpvg-preview-svg coord-icon">
											</span>
										</a>
									</div>

									<!-- Téléphone Fixe -->
									<a v-if="vcard.phone" :href="'tel:' + vcard.phone" class="vcard-preview-link-item" @click.stop>
										<div class="vcard-preview-link-icon">
											<span v-if="uiIcons && uiIcons.phone" 
												  v-html="uiIcons.phone" 
												  class="wpvg-preview-svg"
												  style="fill: white;">
											</span>
										</div>
										<div>
											<div class="label2">Téléphone Fixe</div>
											<div class="value wpvg-font-medium">{{ vcard.phone }}</div>
										</div>
									</a>

									<!-- Email -->
									<a v-if="vcard.email" :href="'mailto:' + vcard.email" class="vcard-preview-link-item" @click.stop>
										<div class="vcard-preview-link-icon">
											<span v-if="uiIcons && uiIcons.envelope" 
												  v-html="uiIcons.envelope" 
												  class="wpvg-preview-svg"
												  style="fill: white;">
											</span>
										</div>
										<div>
											<div class="label2">Email</div>
											<div class="value wpvg-font-medium">{{ vcard.email }}</div>
										</div>
									</a>

									<!-- Site Web -->
									<a v-if="vcard.website && isValidUrl(vcard.website)" :href="vcard.website" target="_blank" class="vcard-preview-link-item">
										<div class="vcard-preview-link-icon">
											<span v-if="uiIcons && uiIcons.globe" 
												  v-html="uiIcons.globe" 
												  class="wpvg-preview-svg"
												  style="fill: white;">
											</span>
										</div>
										<div>
											<div class="label2">Site Web</div>
											<div class="value wpvg-font-medium">{{ displayUrl(vcard.website) }}</div>
										</div>
									</a>

									<!-- Adresse -->
									<a v-if="vcard.address" :href="'https://maps.google.com/?q=' + encodeURIComponent(vcard.address)" target="_blank" class="vcard-preview-link-item">
										<div class="vcard-preview-link-icon">
											<span v-if="uiIcons && uiIcons['map-marker-alt']" 
												  v-html="uiIcons['map-marker-alt']" 
												  class="wpvg-preview-svg"
												  style="fill: white;">
											</span>
										</div>
										<div>
											<div class="label2">Adresse</div>
											<div class="value wpvg-font-medium">{{ vcard.address }}</div>
										</div>
									</a>

									<!-- Agenda / RDV -->
									<a v-if="vcard.agenda && isValidUrl(vcard.agenda)" :href="vcard.agenda" target="_blank" class="vcard-preview-link-item">
										<div class="vcard-preview-link-icon">
											<span v-if="uiIcons && uiIcons['calendar-check']" 
												  v-html="uiIcons['calendar-check']" 
												  class="wpvg-preview-svg"
												  style="fill: white;">
											</span>
										</div>
										<div>
											<div class="label2">Agenda / RDV</div>
											<div class="value wpvg-font-medium">Prendre rendez-vous</div>
										</div>
									</a>

									<!-- Boutique -->
									<a v-if="vcard.store && isValidUrl(vcard.store)" :href="vcard.store" target="_blank" class="vcard-preview-link-item">
										<div class="vcard-preview-link-icon">
											<span v-if="uiIcons && uiIcons.store" 
												  v-html="uiIcons.store" 
												  class="wpvg-preview-svg"
												  style="fill: white;">
											</span>
										</div>
										<div>
											<div class="label2">Boutique</div>
											<div class="value wpvg-font-medium">Visiter la boutique</div>
										</div>
									</a>
								</div>
								
								<!-- Section Messageries avec icônes SVG et variables CSS -->
								<div v-if="vcard.whatsapp || vcard.messenger || vcard.telegram || vcard.teams || vcard.line || vcard.viber || vcard.wechat || vcard.qq || vcard.zalo || vcard.discord || vcard.slack || vcard.ringover || vcard.kakaotalk || vcard.signal" class="wpvg-mb-6">
									<h2 class="section-title-label">Messageries</h2>
									<div class="vcard-preview-social">
										
										<!-- WhatsApp -->
										<a v-if="vcard.whatsapp" href="#" class="vcard-preview-social-link" style="color: #25d366;" title="WhatsApp" @click.stop>
											<span v-if="uiIcons && uiIcons.whatsapp" 
												  v-html="uiIcons.whatsapp" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Messenger -->
										<a v-if="vcard.messenger" href="#" class="vcard-preview-social-link" style="color: #00B2FF;" title="Messenger" @click.stop>
											<span v-if="uiIcons && uiIcons.messenger" 
												  v-html="uiIcons.messenger" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Telegram -->
										<a v-if="vcard.telegram" href="#" class="vcard-preview-social-link" style="color: #0088cc;" title="Telegram" @click.stop>
											<span v-if="uiIcons && uiIcons.telegram" 
												  v-html="uiIcons.telegram" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Teams -->
										<a v-if="vcard.teams" href="#" class="vcard-preview-social-link" style="color: #6264A7;" title="Teams" @click.stop>
											<span v-if="uiIcons && uiIcons.teams" 
												  v-html="uiIcons.teams" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Line -->
										<a v-if="vcard.line" href="#" class="vcard-preview-social-link" style="color: #00c300;" title="Line" @click.stop>
											<span v-if="uiIcons && uiIcons.line" 
												  v-html="uiIcons.line" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Viber -->
										<a v-if="vcard.viber" href="#" class="vcard-preview-social-link" style="color: #665CAC;" title="Viber" @click.stop>
											<span v-if="uiIcons && uiIcons.viber" 
												  v-html="uiIcons.viber" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- WeChat -->
										<a v-if="vcard.wechat" href="#" class="vcard-preview-social-link" style="color: #7bb32e;" title="WeChat" @click.stop>
											<span v-if="uiIcons && uiIcons.wechat" 
												  v-html="uiIcons.wechat" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- QQ -->
										<a v-if="vcard.qq" href="#" class="vcard-preview-social-link" style="color: #1d8ce0;" title="QQ" @click.stop>
											<span v-if="uiIcons && uiIcons.qq" 
												  v-html="uiIcons.qq" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Zalo -->
										<a v-if="vcard.zalo" href="#" class="vcard-preview-social-link" style="color: #665CAC;" title="Zalo" @click.stop>
											<span v-if="uiIcons && uiIcons.zalo" 
												  v-html="uiIcons.zalo" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Discord -->
										<a v-if="vcard.discord" href="#" class="vcard-preview-social-link" style="color: #5865F2;" title="Discord" @click.stop>
											<span v-if="uiIcons && uiIcons.discord" 
												  v-html="uiIcons.discord" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Slack -->
										<a v-if="vcard.slack" href="#" class="vcard-preview-social-link" style="color: #4A154B;" title="Slack" @click.stop>
											<span v-if="uiIcons && uiIcons.slack" 
												  v-html="uiIcons.slack" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Ringover (Utilise headset) -->
										<a v-if="vcard.ringover" href="#" class="vcard-preview-social-link" style="color: #f97316;" title="Ringover" @click.stop>
											<span v-if="uiIcons && uiIcons.ringover" 
												  v-html="uiIcons.ringover" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- KakaoTalk (Utilise comment) -->
										<a v-if="vcard.kakaotalk" href="#" class="vcard-preview-social-link" style="color: #FAE100;" title="KakaoTalk" @click.stop>
											<span v-if="uiIcons && uiIcons.kakaotalk" 
												  v-html="uiIcons.kakaotalk" 
												  class="wpvg-preview-svg">
											</span>
										</a>

										<!-- Signal (Utilise lock) -->
										<a v-if="vcard.signal" href="#" class="vcard-preview-social-link" style="color: #3A76F0;" title="Signal" @click.stop>
											<span v-if="uiIcons && uiIcons.signal" 
												  v-html="uiIcons.signal" 
												  class="wpvg-preview-svg">
											</span>
										</a>
									</div>
								</div>
									
								<!-- Section Réseaux Sociaux (Boucle v-for) -->
								<div v-if="validSocials.length > 0">
									<h2 class="section-title-label">Réseaux & plateformes</h2>
									<div class="vcard-preview-social">
										<a v-for="social in validSocials" 
										   :key="social.network" 
										   :href="social.url" 
										   class="vcard-preview-social-link" 
										   :style="{ color: getSocialColor(social.network) }" 
										   :title="getSocialName(social.network)" 
										   @click.stop>
											<!-- L'icône est injectée via getSocialSvg et stylisée avec var(--icon-size) -->
											<span v-html="getSocialSvg(social.network)" 
												  class="wpvg-preview-svg">
											</span>
										</a>
									</div>
								</div>

								<!-- Section Contenu mis en avant -->
								<div v-if="vcard.featuredItems.length > 0" class="wpvg-mt-6 text-left">
									<div v-for="item in vcard.featuredItems" :key="item.id" class="vcard-featured-block shadow-sm ql-padding">
										
										<h3 v-if="item.title" class="wpvg-featured-card-title">{{ item.title }}</h3>
										
										<!-- Cas 1 : Média / PDF -->
										<template v-if="item.type === 'media' && item.image">
											<div v-if="item.isPdf" class="vcard-pdf-container">
												<div class="vcard-pdf-preview wpvg-mb-6">
													<img v-if="item.pdfThumb" :src="item.pdfThumb" class="wpvg-w-full wpvg-border1">
													<!-- Fallback SVG pour PDF -->
													<div v-else class="pdf-thumb-wrapper">
														<span v-if="uiIcons && uiIcons['file-pdf']" 
															  v-html="uiIcons['file-pdf']" 
															  style="fill: #ef4444; width: 3rem; height: 3rem; display: block;">
														</span>
														<span>{{ item.title || 'Document PDF' }}</span>
													</div>
												</div>
												<!-- Bouton Télécharger PDF avec icône SVG -->
												<div>
													<a href="${filename}" target="_blank" class="vcard-preview-btn">
														<span v-if="uiIcons && uiIcons['file-arrow-down']" 
															  v-html="uiIcons['file-arrow-down']" 
															  style="fill: currentColor; width: var(--icon-size, 1.1rem); height: var(--icon-size, 1.1rem); display: inline-flex;">
														</span>
														Ouvrir le PDF
													</a>
												</div>
											</div>
											<!-- Cas Image Standard -->
											<div v-else>
												<img :src="item.image" class="wpvg-w-full rounded-lg wpvg-mb-2 object-cover wpvg-border1">
											</div>
										</template>
										
										<!-- Cas 2 : Audio -->
										<div v-if="item.type === 'audio' && item.image">
											<audio :src="item.image" controls class="wpvg-w-full wpvg-mb-2"></audio>
										</div>
										
										<!-- Cas 3 : Vidéo -->
										<div v-if="item.type === 'video' && item.image">
											<video :src="item.image" controls class="wpvg-w-full wpvg-mb-2 rounded-lg wpvg-border1"></video>
										</div>

										<!-- Cas 4 : Produit (image) -->
										<div v-if="item.type === 'product' && item.image">
											<img :src="item.image" class="wpvg-w-full rounded-lg wpvg-mb-2 object-cover wpvg-border1">
										</div>
										
										<!-- Cas 5 : Vidéo externe (YouTube + Vimeo) -->
										<gdpr-video
											class="iframe-container wpvg-mb-2"
											v-if="item.url && isValidUrl(item.url)"
											:url="item.url">
										</gdpr-video>

										
										<!-- Description du bloc (Contenu Quill, sauf CTA et iFrame/Embed) -->
										<div v-if="item.description 
												&& item.type !== 'button' 
												&& item.type !== 'iframe' 
												&& item.type !== 'embed'"
											 class="value quill-content ql-padding" 
											 v-html="item.description">
										</div>
										
										<!-- Cas 6 : SECTION PRODUIT (prix + bouton) -->
										<div v-if="item.type === 'product'" class="vcard-product-preview">
											
											<!-- Section Prix -->
											<div v-if="item.price || item.promoPrice" class="product-price-wrapper wpvg-mt-2">
												<span v-if="item.price && item.promoPrice" class="price-old">{{ item.price }}</span>
												<span v-else-if="item.price" class="product-price" :style="{ color: vcard.themeColor }">{{ item.price }}</span>
												<span v-if="item.promoPrice" class="price-promo">{{ item.promoPrice }}</span>
											</div>
											
											<!-- Bouton d'action PRODUIT -->
											<div v-if="item.url && isValidUrl(item.url)" class="wpvg-mt-2">
												<a href="#" 
												   class="vcard-preview-btn" 
												   @click.stop>
													{{ item.btnLabel || 'Cliquez ici' }}
												</a>
											</div>
										</div>
										
										<!-- Cas 7 : SECTION CTA (image + rich text + bouton) -->
										<div v-if="item.type === 'button'" class="vcard-cta-preview wpvg-mt-2">
											
											<!-- Image CTA -->
											<div v-if="item.image" class="wpvg-mb-2">
												<img :src="item.image" class="vcard-cta-img wpvg-w-full rounded-lg wpvg-border1">
											</div>
											
											<!-- Description CTA (rich text) -->
											<div v-if="item.description"
												 class="vcard-cta-desc value quill-content ql-padding"
												 v-html="item.description">
											</div>
											
											<!-- Bouton CTA -->
											<div v-if="item.url && isValidUrl(item.url)" class="wpvg-mt-2">
												<a :href="item.url"
												   target="_blank"
												   class="vcard-preview-btn">
													{{ item.btnLabel || 'Cliquez ici' }}
												</a>
											</div>
										</div>
										
										<!-- Cas 8 : Intégration iFrame / Embed HTML (RGPD) -->
										<div v-if="(item.type === 'iframe' || item.type === 'embed') && item.html" class="wpvg-mt-2">

											<!-- Description éventuelle -->
											<p v-if="item.description" class="featured-text" style="margin-bottom: 1rem;">{{ item.description }}</p>

											<!-- Wrapper GDPR généré comme dans les vCards online -->
											<div class="gdpr-map"
												 :data-map-url="extractIframeSrc(item.html)">
												 
												<div class="gdpr-map-overlay">
													<p>En cliquant, vous acceptez de charger du contenu externe.</p>
													<button class="gdpr-map-btn">Charger le contenu</button>
												</div>
											</div>

										</div>

									</div> <!-- Fin de vcard-featured-block -->

									<!-- Footer vCard - signature -->
									<div style="text-align: center; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.05);">
										<p style="font-size: 0.8rem; color: #9ca3af; margin: 0;">
											Créée avec ❤️ par 
											<a href="https://vcard.chefprojetdigital.fr/" target="_blank" 
											   style="color: var(--vcard-color); text-decoration: none; font-weight: 600;">
												Ton CV en ligne
											</a>
										</p>
									</div>
								</div> <!-- Fin de la boucle vcard.featuredItems -->
							</div> <!-- Fin de vcard-preview-body -->
						</div> <!-- Fin de wpvg-phone-content -->
					</div> <!-- Fin de wpvg-phone-mockup -->
				</div> <!-- Fin de wpvg-sticky-col -->
			</div> <!-- Fin de wpvg-preview-column -->
		</div> <!-- wpvg-preview-panel -->
		<div id="wpvg-preview-toggle" class="wpvg-preview-btn">
			<span class="wpvg-icon"></span>
		</div>
	</div>

	<!-- MODAL : QR Code Modal (Admin Side) -->
	<div id="qr-modal-admin" class="modal-overlay" style="display:none;">
		<div class="modal-content">
			<!-- Bouton Fermer avec icône xmark -->
			<button class="modal-close" @click="hideAdminQR">
				<span v-if="uiIcons && uiIcons.xmark" 
					  v-html="uiIcons.xmark" 
					  style="width: 16px; height: 16px; display: block; fill: var(--wpvg-admin-text-light, #6b7280);">
				</span>
			</button>
			
			<!-- Header visible uniquement à l'impression -->
			<div class="print-only-header wpvg-mb-6 wpvg-text-left hidden">
				<h2 class="wpvg-admin-main-title">{{ vcard.firstName }} {{ vcard.lastName }}</h2>
				<p class="featured-text">{{ vcard.jobTitle }} <span v-if="vcard.company">- {{ vcard.company }}</span></p>
				<p class="wpvg-text-xs wpvg-mt-2">Document généré le : {{ new Date().toLocaleDateString('fr-FR') }}</p>
				<p class="wpvg-text-xs wpvg-mt-1">Lien : <a :href="vcard.currentUrl" target="_blank" class="wpvg-text-blue" style="text-decoration: underline;">{{ vcard.currentUrl }}</a></p>
			</div>

			<h3 class="wpvg-featured-card-title print-hidden">Partager ce contact</h3>
			
			<!-- Zone du QR Code -->
			<div id="qrcode-admin" class="wpvg-admin-section" style="display: flex; justify-content: center; background: white; padding: 1rem;"></div>
			
			<!-- Grille de partage (Masquée à l'impression) -->
			<div class="share-grid wpvg-mt-6 print-hidden">
				<!-- Copier le lien -->
				<button @click="copyAdminLink" class="share-btn">
					<span v-if="uiIcons && uiIcons.link" 
						  v-html="uiIcons.link" 
						  style="fill: #3b82f6; width: 20px; height: 20px;">
					</span>
					<span class="wpvg-text-m wpvg-font-medium">Copier</span>
				</button>

				<!-- Envoyer par Email -->
				<a :href="'mailto:?subject=Contact&body=Voici mon contact : ' + vcard.currentUrl" class="share-btn" style="text-decoration: none; color: inherit;">
					<span v-if="uiIcons && uiIcons.envelope" 
						  v-html="uiIcons.envelope" 
						  style="fill: #ef4444; width: 20px; height: 20px;">
					</span>
					<span class="wpvg-text-m wpvg-font-medium">Email</span>
				</a>

				<!-- Envoyer par SMS -->
				<a :href="'sms:?body=Voici mon contact : ' + vcard.currentUrl" class="share-btn" style="text-decoration: none; color: inherit;">
					<span v-if="uiIcons && uiIcons['comment-sms']" 
						  v-html="uiIcons['comment-sms']" 
						  style="fill: #22c55e; width: 20px; height: 20px;">
					</span>
					<span class="wpvg-text-m wpvg-font-medium">SMS</span>
				</a>

				<!-- Partager sur WhatsApp -->
				<a :href="'https://wa.me/?text=Voici mon contact : ' + encodeURIComponent(vcard.currentUrl)" target="_blank" class="share-btn" style="text-decoration: none; color: inherit;">
					<span v-if="uiIcons && uiIcons.whatsapp" 
						  v-html="uiIcons.whatsapp" 
						  style="fill: #25d366; width: 17px; height: 17px;">
					</span>
					<span class="wpvg-text-m wpvg-font-medium">WhatsApp</span>
				</a>
			</div>

			<!-- Bouton Imprimer -->
			<div class="wpvg-mt-6 print-hidden">
				<button @click="printAdminQR" class="wpvg-btn-primary" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;">
					<span v-if="uiIcons && uiIcons.print" 
						  v-html="uiIcons.print" 
						  style="fill: white; width: 18px; height: 18px;">
					</span>
					Imprimer le QR Code
				</button>
			</div>
		</div>
	</div>
	<!-- MODAL : Confirmer le téléchargement -->
	<div id="wpvg-confirm-modal" class="wpvg-modal" style="display:none;">
		<div class="wpvg-modal-content">
			<h3 class="wpvg-modal-title">Confirmer le téléchargement</h3>
			<p id="wpvg-confirm-text" class="wpvg-modal-text"></p>

			<div class="wpvg-modal-actions">
				<button id="wpvg-cancel" class="wpvg-btn wpvg-btn-secondary">
					Annuler
				</button>

				<button id="wpvg-confirm" class="wpvg-btn wpvg-btn-primary">
					Confirmer
				</button>
			</div>
		</div>
	</div>
	<!-- MODAL : ZIP Confirm Modal (Admin Side) -->
	<div id="zip-modal-admin" class="modal-overlay" style="display:none;">
		<div class="modal-content">

			<!-- Bouton Fermer -->
			<button class="modal-close" id="zip-modal-close">
				<span v-if="uiIcons && uiIcons.xmark" 
					  v-html="uiIcons.xmark" 
					  style="width: 16px; height: 16px; display: block; fill: var(--wpvg-admin-text-light, #6b7280);">
				</span>
			</button>

			<h3 class="wpvg-featured-card-title print-hidden">Confirmer le téléchargement</h3>

			<p id="zip-modal-text" class="wpvg-mt-4 wpvg-text-m"></p>

			<div class="share-grid wpvg-mt-6 print-hidden">
				<button id="zip-modal-cancel" class="share-btn wpvg-text-m">Annuler</button>
				<button id="zip-modal-confirm" class="share-btn wpvg-text-m">Confirmer</button>
			</div>
		</div>
	</div>
</div>