<div
	class="flex w-full flex-row"
	x-cloak
	x-data="signup({ categories: JSON.parse('[{\u0022id\u0022:1,\u0022uuid\u0022:\u00229237244b-fa68-5c9a-9d99-11b20a084077\u0022,\u0022title\u0022:\u0022Camping\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/camping.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:20,\u0022pro\u0022:1,\u0022slot_mode\u0022:1,\u0022min_quantity\u0022:5,\u0022accommodation_text\u0022:\u0022slot\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/camping-B6gVSH1r.svg\u0022},{\u0022id\u0022:2,\u0022uuid\u0022:\u00229eea22c2-39c4-545c-8975-e0d330ece946\u0022,\u0022title\u0022:\u0022Chambre d\\u0027h\\u00f4tes\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/guesthouse.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:21,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022room\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/guesthouse-DNesPltL.svg\u0022},{\u0022id\u0022:3,\u0022uuid\u0022:\u0022e45a2f60-02b6-5ac5-805e-d7968752ffe3\u0022,\u0022title\u0022:\u0022Conciergerie\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/concierge.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:22,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/concierge-B6W3ctzJ.svg\u0022},{\u0022id\u0022:4,\u0022uuid\u0022:\u0022a4a653fd-e28c-5488-819b-483aae619f51\u0022,\u0022title\u0022:\u0022Gestionnaire de locations\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/rental_manager.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:23,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/rental_manager-CJ-hophS.svg\u0022},{\u0022id\u0022:5,\u0022uuid\u0022:\u00223c42c2e2-4667-5ebc-b6f8-95708456e956\u0022,\u0022title\u0022:\u0022Particulier\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/individual.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:26,\u0022pro\u0022:0,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/individual-DTtj_Rcr.svg\u0022},{\u0022id\u0022:6,\u0022uuid\u0022:\u002297f75d8d-4007-592d-8f30-b0677e74bc10\u0022,\u0022title\u0022:\u0022G\\u00eete\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/cottage.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:24,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/cottage-BuM7NTtJ.svg\u0022},{\u0022id\u0022:7,\u0022uuid\u0022:\u00222a343f89-f849-56e7-8a18-fe1ef38296e3\u0022,\u0022title\u0022:\u0022H\\u00f4tel\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/hotel.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:25,\u0022pro\u0022:1,\u0022slot_mode\u0022:1,\u0022min_quantity\u0022:5,\u0022accommodation_text\u0022:\u0022room\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/hotel-D0e_82Q6.svg\u0022}]') })"
>

	<div
	class="flex justify-center"
	x-data="commonModal({ modalName: 'maeva_signup_modal' })"
>
	<div
		aria-modal="true"
		class="fixed inset-0 z-[2000] overflow-y-auto"
		role="dialog"
		style="display: none"
		x-on:keydown.escape.prevent.stop="closeModal()"
		x-show="open"
	>
		<div
			:class="{
			    'bg-black/25': $store.config.isBase,
			    'bg-maevablue/25': $store.config.isMaeva,
			    'bg-gdfgreen/40': $store.config.isGDF
			}"
			class="fixed inset-0"
			x-show="open"
			x-transition.opacity
		></div>

		<div
			class="relative flex min-h-screen items-center justify-center p-4"
			x-on:mousedown.self="closeModal()"
			x-show="open"
			x-transition
		>
						<div
				 x-trap.noscroll.inert="open" 				class="relative flex rounded-2xl bg-white shadow-lg max-w-[90vw] p-12 lg:min-w-[700px]"
			>
				<div class="flex w-full flex-col items-center gap-4">
					<div class="relative flex w-full justify-end">
												<button
							:class="{
							    'hover:text-white hover:bg-styqrgreen bg-styqrgreen/10 text-styqrgreen': $store.config.isBase,
							    'hover:text-white hover:bg-maevablue bg-maevalightyellow text-maevablue': $store.config.isMaeva,
							    'hover:text-white hover:bg-gdfgreen bg-gdfgreen/10 text-gdfgreen': $store.config.isGDF
							}"
							@click="closeModal()"
							aria-label="Close modal"
							class="-mt-4 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-none transition-all duration-300"
							type="button"
						>
							<svg
	class="h-[22px] w-[22px]"
	data-name="Layer 2"
	viewBox="0 0 22 22"
	xmlns="http://www.w3.org/2000/svg"
>
	<g data-name="invisible box">
		<rect
			data-name="Rectangle 45"
			fill="none"
			height="22"
			width="22"
		/>
	</g>
	<g
		data-name="icons Q2"
		transform="translate(4.584 4.565)"
	>
		<path
			d="M17.7,16.395l4.858-4.812a.963.963,0,0,0,.092-1.238.871.871,0,0,0-1.375-.092l-4.858,4.858-4.858-4.858a.871.871,0,0,0-1.375.092.963.963,0,0,0,.092,1.238l4.858,4.813-4.858,4.813a.963.963,0,0,0-.092,1.238.871.871,0,0,0,1.375.092l4.858-4.858,4.858,4.858a.871.871,0,0,0,1.375-.092.962.962,0,0,0-.092-1.238Z"
			data-name="Tracé 39"
			fill="currentColor"
			transform="translate(-10.001 -9.959)"
		/>
	</g>
</svg>
						</button>
					</div>
					<div class="flex flex-col items-center justify-evenly gap-7">
			<div class="flex flex-col justify-evenly gap-10">
				<div class="flex justify-center">
					<span class="opensans-bold text-2xl text-styqrblack">
						Your email is not registered					</span>
				</div>
				<div class="flex justify-center">

					<span class="opensans-regular text-lg text-styqrblack">
						Please contact the Maeva.com Experience team					</span>
				</div>
				<div class="flex justify-center">

					<div class="flex items-center justify-between gap-10">
						<a
							class="text-maevablue underline"
							href="#"
						>Contact support</a>
						<button
							@click="$dispatch('closeCommonModal', { modalName: 'maeva_signup_modal'})"
							class="poppins-medium opensans-bold h-14 w-40 rounded bg-maevayellow text-center text-base text-styqrblack transition-all duration-100"
							type="button"
						>
							<span>Cancel</span>
						</button>
					</div>
				</div>
			</div>
		</div>

				</div>
			</div>
		</div>
	</div>
</div>


	<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
	function commonModal({
		modalName
	}) {
		return {
			open: false,
			showBackButton: false,
			modalName,
			closeModal() {
				this.open = false;
			},
			openModal() {
				this.open = true;
			},
			init() {
				window.addEventListener('openCommonModal', (event) => {
					if (event.detail.modalName === this.modalName) {
						this.open = true
					}

				});

				window.addEventListener('closeCommonModal', (event) => {
					if (event.detail.modalName === this.modalName) {
						this.open = false
					}
				});

				window.addEventListener('showBackButton', (event) => {
					if (event.detail.modalName === this.modalName) {
						this.showBackButton = event.detail.visible ?? true;
					}
				});
			},
		};
	}
</script>

	<template x-if="false">
		<span @click="$dispatch('openCommonModal', { modalName: 'maeva_signup_modal' })">Testmodal</span>
	</template>
	<div
		:class="{
		    'bg-styqrverylightgrey ': $store.config.isBase,
		    'bg-maevaverylightgrey': $store.config.isMaeva
		}"
		class="flex w-full flex-col gap-7 pb-7 lg:w-1/2"
	>
		<div class="flex justify-center pt-8 lg:justify-start lg:pl-16">
			<img
				:class="{
				    'scale-150': $store.config.isMaeva,
				    'scale-[2.0] ml-5 mb-5': $store.config.env === window
				        .STYQR_ENV_GDF
				}"
				alt="StyQR sidebar logo"
				class="w-28"
				src="https://app.styqr.fr/build/assets/logo-BQWXqMGo.svg"
			>
		</div>

		<form
			@submit.prevent="submit()"
			action="https://app.styqr.fr/auth/signup"
			class="h-full"
			method="post"
			x-ref="signupForm"
		>
			<input type="hidden" name="_token" value="I8u0q3OizwMnUX46OOLYn2DHURnyeW9LX48dMQNx" autocomplete="off">			<div class="flex w-full flex-col items-center justify-between gap-10">
				<div class="flex w-5/6 flex-col justify-center gap-7 lg:w-4/6">
					<div class="flex flex-col justify-center lg:justify-start">
						<template x-if="$store.config.isBase || $store.config.isMaeva">
							<span
								:class="{
								    'opensans-semibold': $store.config.isMaeva,
								    'poppins-medium': $store.config.isBase
								}"
								class="text-center text-3xl text-styqrblack lg:text-left"
							>Welcome</span>
						</template>
						<template x-if="$store.config.isGDF">
							<span class="mulish-light text-center text-3xl text-black lg:text-left">
								Welcome to <br><span class="mulish-semibold">My Welcome Booklet <span class="whitespace-nowrap">Gîtes de France<sup>®</sup></span></span></span>
						</template>
						<template x-if="$store.config.isGDF">
							<span class="mulish-regular opensans-regular mulish-regular mt-7 text-center text-lg text-black lg:text-left">
								This platform is <span class="mulish-bold">exclusively dedicated to <span class="whitespace-nowrap">Gîtes de France<sup>®</sup></span> owners</span>. If you cannot create your account, please contact us via the live chat.							</span>
						</template>
						<template x-if="$store.config.isBase || $store.config.isMaeva">
							<span
								class="poppins-regular opensans-regular text-center text-lg text-styqrmediumgrey lg:text-left">Create your account on StyQR							</span>
						</template>
					</div>

					
					<div class="absolute left-[0px] h-1 w-1 overflow-hidden">
						<label for="company">Company</label>
						<input
							autocomplete="off"
							id="company"
							name="company"
							tabindex="-1"
							type="text"
						>
					</div>

					
					<div x-show="currentStep === 1" x-transition>
						<div class="flex flex-col gap-7">
							<template x-if="$store.config.isBase">
								<div class="flex flex-col gap-4">
									<a
										class="poppins-regular flex h-14 w-full cursor-pointer items-center justify-center gap-4 rounded-md bg-white text-base text-styqrblack transition-all duration-100 hover:bg-[#EDEDED]"
										href="https://app.styqr.fr/auth/google/redirect"
									>
										<div class="h-9 w-9">
											<img
												src="https://app.styqr.fr/build/assets/google-CfoTaO6A.svg"
												x-cloak
											/>
										</div>
										Google login									</a>
									<a
										class="poppins-regular flex h-14 w-full cursor-pointer items-center justify-center gap-4 rounded-md bg-white text-base text-styqrblack transition-all duration-100 hover:bg-[#3B5998] hover:text-white"
										href="https://app.styqr.fr/auth/facebook/redirect"
									>
										<div class="h-9 w-9">
											<img
												src="https://app.styqr.fr/build/assets/fb-CZSFXdFF.svg"
												x-cloak
											/>
										</div>
										Facebook login									</a>
									<div class="flex items-center">
										<div class="h-[2px] w-full bg-white"></div>
										<span class="poppins-regular opensans-regular px-6 text-base text-styqrblack">or</span>
										<div class="h-[2px] w-full bg-white"></div>
									</div>
								</div>
							</template>
							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'text',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'email',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: false,
    isDisabled: false,
    rules: 'required|email|max:100',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="email-"
		>
			Email address
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey focus:border-gdfgreen focus:ring-gdfgreen/30 focus:ring-2': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'email', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'email', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="email-"
			id="email-"
			lang="fr"
			maxlength="500"
			name="email"
			placeholder="Enter your email address"
			x-ref="email"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
	</div>

<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		function inputWrapper({
			align,
			type,
			customTW,
			inputName,
			inputValue,
			formUniqId,
			backgroundColor,
			additionalInfoIsSet,
			rules,
			errorMessages,
			isDisabled,
		}) {
			return {
				align,
				type,
				customTW,
				inputName,
				inputValue,
				formUniqId,
				backgroundColor,
				additionalInfoIsSet,
				showAdditionalInfo: false,
				rules,
				isValid: true,
				errorMessages,
				isDisabled,
				init() {
					if (this.formUniqId) {
						if (this.$refs[
								`${this.inputName}-${this.formUniqId}`
							] !== undefined) {
							this.$refs[
								`${this.inputName}-${this.formUniqId}`
							].classList.add(...Object
								.values(this.customTW));
						}
					} else {
						if (this.$refs[this.inputName] !==
							undefined) {
							this.$refs[this.inputName].classList
								.add(...Object.values(this
									.customTW));
						}
					}

					if (errorMessages.length) {
						this.isValid = false
					}

					window.addEventListener('setinput', (
						event) => {

						Object.entries(event.detail)
							.forEach(([key, value]) => {
								if (key === this
									.inputName) {
									if (event.detail
										.formUniqId) {
										if (this
											.formUniqId ===
											event
											.detail
											.formUniqId
										) {
											this.inputValue =
												value;
										}
									} else {
										this.inputValue =
											value;
									}
								}
							});
					});

					window.addEventListener('inputvalidation', (
						event) => {
						if (event.detail.inputName === this
							.inputName) {
							this.isValid = event.detail
								.isValid;
							this.errorMessages = event
								.detail.errorMessages;
						}
					});
				}
			};
		}
	</script>
							<button
								:class="{
								    'bg-styqrred hover:bg-styqrdarkred text-white': $store.config.isBase,
								    'bg-maevayellow text-styqrblack': $store.config.isMaeva,
								    'bg-gdfgreen text-white rounded-full': $store.config.isGDF
								}"
								:disabled="isCheckingEmail"
								@click="checkEmailAndContinue()"
								class="poppins-medium opensans-bold mulish-semibold h-14 min-w-56 rounded px-6 text-center text-base shadow-lg transition-all duration-100"
								type="button"
							>
								<span x-show="!isCheckingEmail">Continue</span>
								<span
									class="loader-spinner"
									x-cloak
									x-show="isCheckingEmail"
								></span>
							</button>
						</div>
					</div>

					
					<div x-show="currentStep === 2" x-transition x-cloak>
						<div class="flex flex-col gap-7">
							<div class="flex items-center gap-3 rounded-lg bg-white px-4 py-3">
								<span
									:class="{
									    'text-styqrmediumgrey': $store.config.isBase,
									    'text-maevamediumgrey': $store.config.isMaeva,
									    'text-gdfmediumgrey': $store.config.isGDF
									}"
									class="poppins-regular opensans-regular flex-1 text-sm"
									x-show="!isEditingEmail"
									x-text="emailValue"
								></span>
								<input
									@keydown.enter.prevent="isEditingEmail = false"
									class="poppins-regular opensans-regular flex-1 bg-transparent text-sm text-styqrblack outline-none"
									type="email"
									x-model="emailValue"
									x-ref="editEmailInput"
									x-show="isEditingEmail"
								/>
								<button
									:class="{
									    'text-styqrred': $store.config.isBase,
									    'text-maevablue': $store.config.isMaeva,
									    'text-gdfgreen': $store.config.isGDF
									}"
									@click="if (isEditingEmail) { isEditingEmail = false; } else { isEditingEmail = true; $nextTick(() => $refs.editEmailInput.focus()); }"
									class="poppins-regular text-sm underline"
									type="button"
									x-text="isEditingEmail ? 'OK' : 'Edit'"
								></button>
							</div>
							<input name="email" type="hidden" x-bind:value="emailValue" />
							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'text',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'fname',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: false,
    isDisabled: false,
    rules: 'required|max:50',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="fname-"
		>
			First name
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey focus:border-gdfgreen focus:ring-gdfgreen/30 focus:ring-2': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'fname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'fname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="fname-"
			id="fname-"
			lang="fr"
			maxlength="500"
			name="fname"
			placeholder="Enter your first name"
			x-ref="fname"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
	</div>

							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'text',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'lname',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: false,
    isDisabled: false,
    rules: 'required|max:50',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="lname-"
		>
			Last name
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey focus:border-gdfgreen focus:ring-gdfgreen/30 focus:ring-2': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'lname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'lname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="lname-"
			id="lname-"
			lang="fr"
			maxlength="500"
			name="lname"
			placeholder="Enter your last name"
			x-ref="lname"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
	</div>

							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'password',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'password',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: true,
    isDisabled: false,
    rules: 'required|min:8|max:20|pwd',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="password-"
		>
			Password
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey focus:border-gdfgreen focus:ring-gdfgreen/30 focus:ring-2': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'password', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'password', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="password-"
			id="password-"
			lang="fr"
			maxlength="500"
			name="password"
			placeholder="Enter your password"
			x-ref="password"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
					<button
				@click="type === 'password' ? type = 'text' : type = 'password'"
				class="absolute right-5 top-1/2 -translate-y-1/2 transform cursor-pointer text-styqrmediumgrey"
				type="button"
			>
				<div>
					<img
						class="aspect-[1/1] w-4"
						src="https://app.styqr.fr/build/assets/eye-regular-D2tz0aXv.svg"
						x-cloak
						x-show="type === 'password'"
					>

				</div>
				<div>
					<img
						class="aspect-[1/1] w-4"
						src="https://app.styqr.fr/build/assets/eye-slash-regular-CCrAfMiw.svg"
						x-cloak
						x-show="type === 'text'"
					>
				</div>
			</button>
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
			<div
			class="flex"
			x-cloak
			x-collapse
			x-show="additionalInfoIsSet && showAdditionalInfo"
		>
			<div class="poppins-light opensans-regular text-xs text-styqrmediumgrey"><p>To ensure the security of your account, please choose a password that meets the following criteria:</p>
    <ul class="list-disc pl-4">
        <li>Between 8 and 20 characters</li>
        <li>At least one uppercase letter (A-Z)</li>
        <li>At least one lowercase letter (a-z)</li>
        <li>At least one number (0-9)</li>
        <li>At least one special character (e.g. !@#$%^&*_-?)</li>
    </ul></div>
		</div>
	</div>

															<span class="poppins-medium opensans-bold text-base text-styqrblack">
									What type of accommodation do you offer?								</span>
								<div class="flex w-full flex-col gap-2">
									<div class="flex flex-col flex-wrap lg:flex-row">
										<template x-for="(option, index) in categories">
											<label
												:key="index"
												class="poppins-light opensans-regular mb-3 mt-3 flex basis-1/2 items-center gap-4 text-sm"
											>
												<input
													:value="option['id']"
													class="hidden"
													name="user_category_id"
													type="radio"
													x-model="selectedCategory"
												/>
												<div
													:class="{
													    'border-styqrpurple bg-styqrpurple/5': $store.config.isBase,
													    'border-maevablue bg-maevablue/5': $store.config.isMaeva
													}"
													class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-2"
												>
													<div
														:class="{
														    'bg-styqrpurple': $store.config.isBase,
														    'bg-maevablue': $store.config.isMaeva
														}"
														class="checkbox-inside h-3 w-3 rounded"
														x-show="selectedCategory == option['id']"
														x-transition
													></div>
												</div>
												<div
													:class="{
													    'bg-styqrpurple/5': $store.config.isBase,
													    'bg-maevalightgrey': $store.config.isMaeva
													}"
													class="flex h-9 w-9 items-center justify-center rounded-full bg-styqrpurple/5"
												>
													<img :src="option.img" class="h-5 w-5 object-contain" />
												</div>
												<span x-text="categoriesLabel[option['id']]"></span>
											</label>
										</template>
									</div>
								</div>
								<div
									:class="{
									    'text-styqrred': $store.config.isBase || $store.config.isMaeva,
									    'text-gdfred': $store.config.isGDF
									}"
									class="poppins-light opensans-regular text-xs"
									x-cloak
									x-show="!fieldsValidationStatus.category"
								>
									<span>The category is required.</span>
								</div>

																						<div
		@turnstile.window="execute"
		x-data="turnstileCaptcha()"
	></div>

	
							<button
								:class="{
								    'bg-styqrred hover:bg-styqrdarkred  text-white ': $store.config.isBase,
								    'bg-maevayellow text-styqrblack': $store.config.isMaeva,
								    'bg-gdfgreen text-white rounded-full': $store.config.isGDF
								}"
								class="poppins-medium opensans-bold mulish-semibold h-14 w-56 rounded text-center text-base shadow-lg transition-all duration-100"
								type="submit"
							>
								<span>Create an account</span>
							</button>
							<template x-if="$store.config.isBase">
								<p class="poppins-light text-[15px] text-styqrmediumgrey">
									By clicking on "Create my booklet", you certify that you have read and unconditionally accept <a class="text-styqrblack underline" href="https://styqr.fr/conditions-generales-de-vente-et-dutilisation-cgvu/" target="_blank">StyQR's General Terms and Conditions of Use and Sale.</a><br><br>
    To learn more about how StyQR collects and protects your personal data, please consult our
    <a class="text-styqrblack underline" href="https://styqr.fr/politique-de-confidentialite/" target="_blank">privacy policy</a>.
								</p>
							</template>
							<template x-if="$store.config.isGDF">
								<p class="mulish-light text-[13px] text-gdfmediumgrey">
									<span>By clicking on "Create my booklet", you certify that you have read and unconditionally accept <a class="text-gdfgreen underline" href="https://monlivretdaccueilgitesdefrance.fr/cgvu/" target="_blank">the General Terms and Conditions of Use and Sale of Gîtes de France ®</a> <br><br>To learn more about how Gîtes de France ® collects and protects your personal data, please see our <a class="text-gdfgreen underline" href="https://monlivretdaccueilgitesdefrance.fr/politique-de-confidentialite-gdf/" target="_blank">privacy policy.</a></span>
								</p>
							</template>
						</div>
					</div>

				</div>

				<div class="flex w-5/6 flex-col justify-center gap-7 lg:w-4/6">
					<div class="h-[2px] w-full bg-white"></div>
					<span
						:class="{
						    'text-gdfmediumgrey': $store.config.isGDF,
						    'text-styqrmediumgrey': $store.config.isBase || $store.config.isMaeva
						}"
						class="poppins-regular opensans-regular mulish-regular text-sm"
					>
						Already have an account?						<a
							:class="{
							    'text-styqrblack': $store.config.isBase,
							    'text-gdfgreen': $store.config.isGDF
							}"
							class="text-styqrblack underline hover:font-semibold"
							href="https://app.styqr.fr/auth/login"
						>Log in</a>
					</span>
					<div class="poppins-regular opensans-regular mulish-regular flex gap-16 text-[15px] text-styqrblack">
						<a
							class="hover:underline"
							href="https://styqr.fr/politique-de-confidentialite/"
							target="_blank"
							x-cloak
							x-show="$store.config.isBase"
						>Privacy Policy</a>
						<a
							class="hover:underline"
							href="https://monlivretdaccueilgitesdefrance.fr/politique-de-confidentialite-gdf/"
							target="_blank"
							x-cloak
							x-show="$store.config.isGDF"
						>Privacy Policy</a>
						<a
							class="hover:underline"
							href="https://styqr.fr/conditions-generales-de-vente-et-dutilisation-cgvu/"
							target="_blank"
							x-cloak
							x-show="$store.config.isBase"
						>Terms of Service</a>
						<a
							class="hover:underline"
							href="https://monlivretdaccueilgitesdefrance.fr/cgvu/"
							target="_blank"
							x-cloak
							x-show="$store.config.isGDF"
						>Terms of Service</a>
						<section
	class="flag-switcher"
	x-data="{
		open: false,
		locale: 'en',
		flags: JSON.parse('{\u0022fr\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/fr-Chxwg8cX.svg\u0022,\u0022en\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/en-BjR-HC0K.svg\u0022,\u0022es\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/es-CUIqbuJg.svg\u0022,\u0022pt\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/pt-DHBetvJq.svg\u0022,\u0022it\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/it-BUD2l8q-.svg\u0022,\u0022de\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/de-D0RCRAJZ.svg\u0022}'),
		dropdownStyle: {},
		init() {
			const value = `; ${document.cookie}`;
			const parts = value.split('; admin-locale=');
			if (parts.length === 2) {
				const cookieLocale = parts.pop().split(';').shift();
				if (this.flags[cookieLocale]) {
					this.locale = cookieLocale;
				}
			}
		},
		toggle() {
			if (!this.open) {
				const rect = this.$refs.trigger.getBoundingClientRect();
				this.dropdownStyle = {
					position: 'fixed',
					left: rect.left + (rect.width / 2) + 'px',
					top: (rect.top - 8) + 'px',
					transform: 'translate(-50%, -100%)',
					zIndex: 9999
				};
			}
			this.open = !this.open;
		},
		selectLocale(lang) {
			this.locale = lang;
			this.open = false;
			document.cookie = 'admin-locale=' + lang + '; path=/';
			location.reload();
		}
	}"
	@click.outside="open = false"
>
	<div class="inline-flex items-center justify-center">
		<button
			class="flex items-center gap-1"
			type="button"
			x-ref="trigger"
			@click="toggle()"
		>
			<img
				:alt="locale"
				:src="flags[locale]"
				class="h-[20px] w-[20px] cursor-pointer rounded-full"
			>
			<svg
				:class="open ? 'rotate-180' : ''"
				class="h-3 w-3 text-gray-400 transition-transform"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				viewBox="0 0 24 24"
			>
				<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" />
			</svg>
		</button>
	</div>
	<div
		class="flex flex-col gap-2 rounded-xl bg-white p-2.5 shadow-xl"
		x-show="open"
		x-transition
		:style="dropdownStyle"
	>
		<template
			:key="lang"
			x-for="lang in Object.keys(flags)"
		>
			<button
				class="flex items-center transition-opacity hover:opacity-75"
				type="button"
				x-show="lang !== locale"
				@click="selectLocale(lang)"
			>
				<img
					:alt="lang"
					:src="flags[lang]"
					class="h-[20px] w-[20px] cursor-pointer rounded-full"
				>
			</button>
		</template>
	</div>
</section>

					</div>
				</div>
			</div>
		</form>
	</div>

	<div
		:class="{
		    'bg-white ': $store.config.isBase,
		    'bg-maevalightyellow': $store.config.isMaeva,
		    'bg-gdfverylightgrey': $store.config.isGDF
		}"
		class="fixed right-0 top-0 hidden h-[100vh] w-1/2 lg:block"
	>
		<div class="flex h-full w-full flex-col items-center justify-center gap-8">
			<img
				class="w-5/6"
				src="https://app.styqr.fr/build/assets/signup-CMMRwQnV.png"
			/>
			<a
				href="https://fr.trustpilot.com/review/styqr.fr"
				target="_blank"
				x-cloak
				x-show="$store.config.isBase"
			>
				<img src="https://app.styqr.fr/build/assets/trustpilot-8P1Qo29L.svg" />
			</a>
			<div
				class="flex justify-center"
				x-show="$store.config.isBase"
			>
				<div class="flex gap-4">
					<a
						class="poppins-regular opensans-regular text-xs text-styqrmediumgrey underline"
						href="https://styqr.fr/decouvrez-nos-fonctionnalites/"
					>Discover StyQR</a>
					<a
						class="poppins-regular opensans-regular text-xs text-styqrmediumgrey underline"
						href="https://styqr.fr/nos-tarifs/"
					>Our pricing</a>

				</div>
			</div>
		</div>
	</div>
</div>

	<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		function signup({
			categories
		}) {

			return {
				categories,
				selectedCategory: null,
				currentStep: 1,
				isCheckingEmail: false,
				isEditingEmail: false,
				emailValue: '',
				fieldsValidationStatus: {
					fname: false,
					lname: false,
					email: false,
					password: false,
					category: true,
				},
				categoriesLabel: {
					'1': 'Campsite',
					'2': 'Guesthouse',
					'3': 'Concierge',
					'4': 'Rental manager',
					'5': 'Individual',
					'6': 'Cottage',
					'7': 'Hotel',
				},
				init() {
					window.addEventListener('inputvalidation', (event) => {
						this.setFieldsValidationStatus(event.detail.inputName, event.detail.isValid)
					})
					window.addEventListener('inputupdated', (event) => {
						if (event.detail.name === 'email') {
							this.emailValue = event.detail.value;
						}
					})
				},
				setFieldsValidationStatus(field, isValid) {
					this.fieldsValidationStatus[field] = isValid
				},
				async checkEmailAndContinue() {
					const emailInput = this.$refs.signupForm.querySelector('[name=email]');
					if (emailInput) {
						this.emailValue = emailInput.value;
						emailInput.dispatchEvent(new Event('blur'));
					}

					await this.$nextTick();

					if (!this.fieldsValidationStatus.email || !this.emailValue) {
						return;
					}

					this.isCheckingEmail = true;
					try {
						const response = await fetch("https://app.styqr.fr/auth/check-email", {
							method: 'POST',
							headers: {
								'Accept': 'application/json',
								'Content-Type': 'application/json',
								'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || "I8u0q3OizwMnUX46OOLYn2DHURnyeW9LX48dMQNx",
								'X-Requested-With': 'XMLHttpRequest',
							},
							body: JSON.stringify({ email: this.emailValue }),
						});
						if (!response.ok) {
							this.currentStep = 2;
							return;
						}
						const data = await response.json();
						if (data.exists) {
							window.location.href = "https://app.styqr.fr/auth/login" + '?email=' + encodeURIComponent(this.emailValue);
							return;
						}
						this.currentStep = 2;
					} catch (error) {
						console.error('Email check failed:', error);
						this.currentStep = 2;
					} finally {
						this.isCheckingEmail = false;
					}
				},
				submit() {
					if (this.currentStep !== 2) return;
					if (!this.selectedCategory) {
						this.fieldsValidationStatus.category = false;
					} else {
						this.fieldsValidationStatus.category = true;
					}
					if (this.$store.config.isGDF) {
						this.fieldsValidationStatus.category = true;
					}
					Object.keys(this.fieldsValidationStatus).forEach(field => {
						if (field === 'email') return; // email already validated in step 1
						const element = this.$refs.signupForm.querySelector(`[name=${field}]`);
						if (element) {
							element.dispatchEvent(new Event('blur'));
						}
					})
					const formIsIncomplete = Object.values(this.fieldsValidationStatus).some(status => !status)
					if (formIsIncomplete) {
						const invalidInput = this.$refs.signupForm.querySelector(`[name=fname]`);
						if (invalidInput) {
							invalidInput.scrollIntoView({
								behavior: 'smooth',
								block: 'center'
							});
						}
						return;
					}
					this.$dispatch('turnstile');
				}
			}
		}
	</script>

<!DOCTYPE html>
<html lang="en" class="">

<head>
	<style nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		[x-cloak] {
			display: none !important;
		}
		/* --safe-top resolves to env(safe-area-inset-top) — non-zero only when the
		   viewport extends under the notch (PWA standalone iOS). In Safari mobile
		   browser the viewport already starts below the status bar, so env() is 0. */
		:root {
			--safe-top: env(safe-area-inset-top, 0px);
		}
		/* App-shell (iOS 26): Safari composites the SCROLLING DOCUMENT's pixels
		   behind the translucent status bar and ignores position:fixed elements
		   (and theme-color) — as soon as the document scrolls, page content shows
		   above the fixed navbars. No CSS overlay can cover that strip. The only
		   reliable fix is to lock the document (scroll stays at 0) and move all
		   scrolling into #main-scroll-container: Safari then paints the body
		   background in the status bar strip. Guest pages (login, signup) render
		   their content outside this shell and must keep document scrolling, so
		   the lock is gated on the app-shell class (set when a user is connected). */
		html.app-shell,
		html.app-shell body {
			height: 100dvh;
			overflow: hidden;
			overscroll-behavior: none;
		}
		/* Safari derives the status bar strip color from the html/body
		   background-color (fixed navbars and theme-color are ignored). Force
		   both white so the strip merges with the fixed white navbars, and move
		   the page grey onto the scroller instead — it fills the viewport, so
		   pages render identically. Values mirror the env body classes
		   (bg-styqrverylightgrey / maeva / gdf) from tailwind.config.js. */
		html.app-shell,
		html.app-shell body {
			background-color: #fff;
		}
		html.app-shell #main-scroll-container {
			background-color: #F6F7FB; /* styqrverylightgrey */
		}
		html.app-shell body.env-maeva #main-scroll-container {
			background-color: #F7F7F7; /* maevaverylightgrey */
		}
		html.app-shell body.env-gdf #main-scroll-container {
			background-color: #FAFAFA; /* gdfverylightgrey */
		}
		#main-scroll-container {
			height: 100dvh;
			overflow-y: auto;
			overflow-x: clip;
			-webkit-overflow-scrolling: touch;
			/* Repère des éléments qu'on lui accroche en absolu — le sélecteur
			   de couleur maison lui passe son popover (Coloris, `parent`).
			   Sans position, ce « top: 2578px » se lisait dans un tout autre
			   repère : la palette s'ouvrait deux mille pixels plus bas, hors
			   de l'écran. Invisible sur une page courte, fatal sur une longue. */
			position: relative;
		}
		/* Booklet setup: room for the fixed setup navbar is padding INSIDE the
		   scroller (2-row mobile navbar = 6.5rem, 1-row ≥1030px = 4.5rem);
		   ≥1280px keeps its original geometry (scroller below the navbar). */
		.booklet-setup-wrapper #main-scroll-container {
			padding-top: calc(6.5rem + var(--safe-top));
		}
		@media (min-width: 1030px) {
			.booklet-setup-wrapper #main-scroll-container {
				padding-top: calc(4.5rem + var(--safe-top));
			}
		}
		@media (min-width: 1280px) {
			.booklet-setup-wrapper #main-scroll-container {
				position: relative;
				margin-top: 4.5rem;
				height: calc(100dvh - 4.5rem);
				padding-top: 0;
			}
		}
		/* Common navbar wrapper: mobile navbar = 3.5rem */
		.common-navbar-wrapper {
			margin-top: calc(3.5rem + var(--safe-top));
		}
		@media (min-width: 1024px) {
			.common-navbar-wrapper {
				margin-top: 0;
			}
		}
		/* Common navbar: total height = 3.5rem + safe-area (mobile), 4.5rem (desktop) */
		.navbar-common-root {
			height: calc(3.5rem + var(--safe-top));
		}
		@media (min-width: 1024px) {
			.navbar-common-root {
				height: 4.5rem;
			}
		}
		/* Hide PWA preview when assistant panel is open */
		@media (min-width: 1280px) {
			html.assistant-open .xl\:w-1\/3 {
				display: none !important;
			}
			html.assistant-open .xl\:w-2\/3 {
				width: 100% !important;
				flex: 1 1 100% !important;
			}
		}
	</style>
	<meta
		content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
		name="viewport"
	>

	<title>StyQR – The digital welcome booklet</title>

	
	<meta name="robots" content="noindex, nofollow">

	<meta
		content="Easily create and customize a digital welcome booklet to inform and guide your travelers before, during and after their stay."
		name="description"
	>

	
		<meta property="og:title" content="StyQR">
	<meta property="og:description" content="Easily create and customize a digital welcome booklet to inform and guide your travelers before, during and after their stay.">
	<meta property="og:type" content="website">
			<meta property="og:image" content="https://app.styqr.fr/build/assets/bo-styqr-Boylxb8b.png">
		<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="StyQR">
	<meta name="twitter:description" content="Easily create and customize a digital welcome booklet to inform and guide your travelers before, during and after their stay.">
			<meta name="twitter:image" content="https://app.styqr.fr/build/assets/bo-styqr-Boylxb8b.png">
	
	
	<meta
		content="#FFFFFF"
		name="theme-color"
	/>

	<link rel="preload" as="style" href="https://app.styqr.fr/build/assets/app-a_zXcVsG.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="preload" as="style" href="https://app.styqr.fr/build/assets/pwa-vendor-utils-uinUY4w9.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="preload" as="style" href="https://app.styqr.fr/build/assets/flatpickr-CksuuEqD.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="preload" as="style" href="https://app.styqr.fr/build/assets/app-DxmiEZ9-.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/app-Dwza10e3.js" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/wifiQrPayload-BsmrMAbi.js" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/pwa-vendor-utils-4GyjBB1g.js" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/flatpickr.min-Cc3t1Oke.js" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/pwa-vendor-react-AfeGxaWq.js" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/pwa-vendor-i18n-Cm10fOe7.js" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="stylesheet" href="https://app.styqr.fr/build/assets/app-a_zXcVsG.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="stylesheet" href="https://app.styqr.fr/build/assets/pwa-vendor-utils-uinUY4w9.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="stylesheet" href="https://app.styqr.fr/build/assets/flatpickr-CksuuEqD.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><link rel="stylesheet" href="https://app.styqr.fr/build/assets/app-DxmiEZ9-.css" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd" /><script type="module" src="https://app.styqr.fr/build/assets/app-Dwza10e3.js" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd"></script>
	
	
	<link
		href="https://fonts.googleapis.com"
		rel="preconnect"
	>
	<link
		crossorigin
		href="https://fonts.gstatic.com"
		rel="preconnect"
	>
	<link
		href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"
		rel="stylesheet"
	/>

	
		<link
		href="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.min.css"
		rel="stylesheet"
	/>

	<link
		href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
		rel="stylesheet"
	>
	<link
		href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
		rel="stylesheet"
	>
	<link
		href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap"
		rel="stylesheet"
	>

	
	<link
		href="https://app.styqr.fr/build/assets/favicon-varM8o3K.png"
		rel="icon"
		type="image/png"
	/>

	<meta
		content="I8u0q3OizwMnUX46OOLYn2DHURnyeW9LX48dMQNx"
		name="csrf-token"
	>
	<script>window.dataLayer = window.dataLayer || [];</script>

<!-- Google Tag Manager -->
<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KWWGGZ9');</script>
<!-- End Google Tag Manager -->
</head>

<body
	class=""
	:class="{
	    'bg-styqrverylightgrey': $store.config.isBase,
	    'bg-maevaverylightgrey': $store.config.isMaeva,
	    'bg-gdfverylightgrey': $store.config.isGDF
	}"
	x-data
	x-init="$nextTick(() => {
    const loader = document.getElementById('page-loader');
    if (loader) {
        loader.style.opacity = '0';
        setTimeout(() => loader.remove(), 10);
    }
})"
>
	
	<div
		class="fixed inset-0 z-[9999] flex items-center justify-center bg-[#F6F7FB] transition-opacity duration-[35ms]"
		id="page-loader"
		x-init="document.body.setAttribute('data-env', $store.config.env);"
	>
		<div class="flex flex-col items-center gap-4">
			<span class="loader-spinner !h-10 !w-10 !border-[5px]"></span>
			<span class="text-sm font-medium text-gray-400">Loading...</span>
		</div>
	</div>

		
	<div
	class="flex justify-center"
	x-data="{}"
>
	<div
		aria-modal="true"
		class="fixed inset-0 z-[10100] overflow-y-auto"
		role="dialog"
		style="display: none"
		x-on:keydown.escape.prevent.stop="$store.confirmModal.open = false"
		x-show="$store.confirmModal.open"
	>
		<div
			class="fixed inset-0 bg-black/25"
			x-show="$store.confirmModal.open"
			x-transition.opacity
		></div>

		<div
			class="relative flex min-h-screen items-center justify-center p-4"
			x-show="$store.confirmModal.open"
			x-transition
		>
			<div
				class="relative max-w-xl rounded-xl bg-white p-12 shadow-lg"
				x-on:click.stop
				x-trap.noscroll.inert="$store.confirmModal.open"
			>
				<div class="flex flex-col items-center justify-evenly gap-7">
					<span
						class="multi-black poppins-bold opensans-bold mulish-bold text-center text-2xl"
						x-text="$store.confirmModal.title"
					>Confirmation</span>
					<span
						:class="{
						    'text-styqrmediumgrey': $store.config.isBase,
						    'text-maevadarkgrey': $store.config.isMaeva,
						    'text-black': $store.config.isGDF
						}"
						class="poppins-regular opensans-regular mulish-regular text-left"
						x-html="$store.confirmModal.message"
					></span>

					<div class="flex flex-col gap-7 md:flex-row">
						<button
							:class="{
							    'bg-maevalightgrey hover:bg-maevalightgrey': $store.config.isMaeva,
							    'bg-styqrverylightgrey hover:bg-styqrlightgrey': $store.config.isBase,
							    'bg-gdfverylightgrey hover:bg-gdfdarkgrey ': $store.config.isGDF,
							}"
							@click="$store.confirmModal.onCancel()"
							class="poppins-medium opensans-bold mulish-bold h-14 w-60 rounded bg-styqrverylightgrey text-center text-base transition-all duration-100 focus:outline-none"
							type="button"
							x-show="$store.confirmModal.showButton.cancel"
						>
							<span x-text="$store.confirmModal.cancelText"></span>
						</button>
						<button
							:class="{
							    'bg-maevablue hover:bg-maevablue': $store.config.isMaeva,
							    'bg-styqrgreen hover:bg-styqrdarkgreen': $store.config.isBase,
							    'bg-gdfgreen hover:bg-gdfdarkgreen ': $store.config.isGDF,
							}"
							@click="$store.confirmModal.onOk()"
							class="poppins-medium opensans-bold mulish-bold h-14 w-60 rounded bg-styqrgreen text-center text-base text-white transition-all duration-100 hover:bg-styqrdarkgreen focus:outline-none"
							type="button"
							x-show="$store.confirmModal.showButton.ok"
						>
							<span x-text="$store.confirmModal.okText"></span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<div
	@notify.window="add($event)"
	aria-live="polite"
	class="fixed right-0 top-0 z-[1000] flex w-full max-w-sm flex-col space-y-4 pb-4 pr-4 sm:justify-start"
	role="status"
	x-data="{
    notifications: [],
    add(e) {
        this.notifications.push({
            id: e.timeStamp,
            type: e.detail.type,
            content: e.detail.content,
            countdown: e.detail.countdown,
        })
    },
    remove(notification) {
        this.notifications = this.notifications.filter(i => i.id !== notification.id)
    },
}"
>
	<!-- Notification -->
	<template
		:key="notification.id"
		x-for="notification in notifications"
	>
		<div
			class="pointer-events-auto relative w-full max-w-sm rounded-lg border border-gray-200 bg-white p-2 shadow-lg"
			x-data="{
    show: false,
    remaining: notification.countdown || 0,
    typeToTitle: {
        'error': 'Error',
        'success': 'Success',
        'info': 'Information',
    },
    init() {
        this.$nextTick(() => this.show = true)

        // Un countdown (ex. throttle 429) garde le toast affiché jusqu'à la
        // fin du délai ; sinon auto-fermeture classique après 5 s.
        if (this.remaining > 0) {
            const timer = setInterval(() => {
                if (--this.remaining <= 0) {
                    clearInterval(timer)
                    this.transitionOut()
                }
            }, 1000)
        } else {
            setTimeout(() => this.transitionOut(), 5000)
        }
    },
    countdownLabel() {
        const m = Math.floor(this.remaining / 60)
        const s = this.remaining % 60
        return 'You can try again in :time'.replace(':time', m > 0 ? m + ' min ' + s + ' s' : s + ' s')
    },
    transitionOut() {
        this.show = false

        setTimeout(() => this.remove(this.notification), 500)
    },
}"
			x-show="show"
			x-transition.duration.500ms
		>
			<div class="flex items-start gap-4">
				<div class="flex flex-1 gap-2 py-1.5 pl-2.5">
					<!-- Icons -->
					<div
						class="flex-shrink-0"
						x-show="notification.type === 'info'"
					>
						<svg
							class="mt-0.5 size-4 text-gray-600"
							fill="currentColor"
							viewBox="0 0 16 16"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								clip-rule="evenodd"
								d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z"
								fill-rule="evenodd"
							/>
						</svg>
						<span class="sr-only">Information:</span>
					</div>

					<div
						class="flex-shrink-0"
						x-show="notification.type === 'success'"
					>
						<svg
							class="mt-0.5 size-4 text-green-600"
							fill="currentColor"
							viewBox="0 0 16 16"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								clip-rule="evenodd"
								d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"
								fill-rule="evenodd"
							></path>
						</svg>
						<span class="sr-only">Success:</span>
					</div>

					<div
						class="flex-shrink-0"
						x-show="notification.type === 'error'"
					>
						<svg
							class="mt-0.5 size-4 text-red-600"
							fill="currentColor"
							viewBox="0 0 16 16"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								clip-rule="evenodd"
								d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
								fill-rule="evenodd"
							></path>
						</svg>
						<span class="sr-only">Error:</span>
					</div>

					<!-- Text -->
					<div class="flex flex-col gap-y-2">
						<p
							class="text-sm font-medium capitalize text-gray-800"
							x-text="typeToTitle[notification.type]"
						></p>

						<div
							class="text-sm text-gray-600"
							x-text="notification.content"
						></div>

						<div
							class="text-sm font-semibold text-gray-800"
							x-show="remaining > 0"
							x-text="countdownLabel()"
						></div>
					</div>
				</div>
				<!-- Remove button -->
				<div class="flex items-center">
					<button
						@click="transitionOut()"
						class="inline-flex items-center justify-center rounded-md p-1.5 font-medium text-gray-400 hover:bg-gray-800/5 hover:text-gray-800"
						type="button"
					>
						<svg
							aria-hidden
							class="size-5"
							fill="currentColor"
							viewBox="0 0 20 20"
						>
							<path
								clip-rule="evenodd"
								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
								fill-rule="evenodd"
							></path>
						</svg>
						<span class="sr-only">Close notification</span>
					</button>
				</div>
			</div>
		</div>
	</template>
</div>
	<div
	x-data="stykyModal()"
	x-show="isOpen"
	x-cloak
	@styky:open.window="open($event.detail)"
	@keydown.escape.window="isOpen ? close() : null"
	class="fixed inset-0 z-[3000] flex items-center justify-center overflow-y-auto py-4"
	role="dialog"
	aria-modal="true"
	aria-labelledby="styky-modal-title"
>
	
	<div class="absolute inset-0 bg-black/40" @click="close()"></div>

	
	<div
		x-show="isOpen"
		:class="isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"
		class="relative z-[3001] my-auto w-full max-w-lg rounded-2xl bg-white shadow-2xl mx-4 flex flex-col max-h-[90dvh] transition-all duration-200"
	>
		
		<div class="flex shrink-0 items-center justify-between rounded-t-2xl bg-gradient-to-r from-styqrpurple to-styqrpurple/80 px-5 py-3">
			<div class="flex items-center gap-3">
				<div class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
					<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0-2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
					</svg>
				</div>
				<span id="styky-modal-title" class="poppins-semibold text-base text-white">StyKy</span>
				<span class="rounded-full bg-white/20 px-2 py-0.5 text-xs text-white/90 uppercase" x-text="language"></span>
			</div>
			<button
				@click="close()"
				class="flex h-7 w-7 items-center justify-center rounded-full text-white/70 transition-colors hover:bg-white/20 hover:text-white"
				type="button"
				aria-label="Close"
			>
				<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
			</button>
		</div>

		
		<div x-ref="bodyScroll" class="flex flex-1 min-h-0 flex-col gap-4 overflow-y-auto p-5">

			
			<div x-show="contextType !== 'subtitle' && hasExistingContent" class="flex gap-1 rounded-xl bg-gray-100 p-1">
				<button
					@click="mode = 'create'; resetResult()"
					:class="mode === 'create' ? 'bg-white shadow-sm text-styqrpurple' : 'text-gray-500 hover:text-gray-700'"
					class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm poppins-medium transition-all"
					type="button"
				>
					<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" /></svg>
					Create				</button>
				<button
					@click="mode = 'rewrite'; resetResult()"
					:class="mode === 'rewrite' ? 'bg-white shadow-sm text-styqrpurple' : 'text-gray-500 hover:text-gray-700'"
					class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm poppins-medium transition-all"
					type="button"
				>
					<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" /></svg>
					Rewrite				</button>
			</div>

			
			<template x-if="mode === 'create'">
				<div class="flex flex-col gap-4">
					
					<div class="flex flex-col gap-2">
						
						<label for="styky-category" class="poppins-medium text-sm text-gray-700" x-text="contextType === 'shop_product' ? 'Product' : 'Theme'"></label>
						<div class="flex items-center gap-2">
							<span
								x-show="category && !isCategoryEditing"
								@click="isCategoryEditing = true; $nextTick(() => $refs.categoryInput.focus())"
								class="inline-flex items-center gap-1.5 rounded-lg bg-styqrpurple/10 px-3 py-1.5 text-sm poppins-medium text-styqrpurple cursor-pointer"
							>
								<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
								<span x-text="category"></span>
								<button type="button" @click.stop="category = ''; isCategoryEditing = true; $nextTick(() => $refs.categoryInput.focus())" class="ml-1 text-styqrpurple/60 hover:text-styqrpurple">
									<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
								</button>
							</span>
							<input
								id="styky-category"
								name="styky_category"
								x-ref="categoryInput"
								x-show="!category || isCategoryEditing"
								x-model="category"
								@blur="if(category.trim()) isCategoryEditing = false"
								@keydown.enter="if(category.trim()) isCategoryEditing = false"
								class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
								:placeholder="contextType === 'shop_product' ? 'E.g. Breakfast delivered to the room' : 'E.g.: arrival and departure, wifi, amenities...'"
								type="text"
							>
						</div>
					</div>

					
					<div x-show="suggestions.length > 0" class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">Suggestions</label>
						<div class="flex flex-wrap gap-2">
							<template x-for="suggestion in suggestions" :key="suggestion">
								<button
									@click="prompt = suggestion"
									:class="{
										'border-styqrpurple bg-styqrpurple/10 text-styqrpurple': prompt === suggestion,
										'border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300': prompt !== suggestion
									}"
									class="rounded-lg border px-3 py-1.5 text-sm transition-colors poppins-regular"
									type="button"
									x-text="suggestion"
								></button>
							</template>
						</div>
					</div>

					
					<div class="flex flex-col gap-2">
						<label for="styky-prompt" class="poppins-medium text-sm text-gray-700">What would you like to write?</label>
						<textarea
							id="styky-prompt"
							name="styky_prompt"
							x-model="prompt"
							@keydown.enter.meta="generate()"
							@keydown.enter.ctrl="generate()"
							class="h-24 w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
							:placeholder="promptPlaceholder"
						></textarea>
					</div>

					
					<div x-show="contextType !== 'subtitle' && contextType !== 'shop_product'" class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">Text length</label>
						<div class="flex gap-2">
							<template x-for="option in [{value:'court',label:'Court',desc:'~200 mots'},{value:'moyen',label:'Moyen',desc:'~500 mots'},{value:'long',label:'Long',desc:'~800 mots'}]">
								<button
									@click="length = option.value"
									:class="{
										'border-styqrpurple bg-styqrpurple/10 text-styqrpurple': length === option.value,
										'border-gray-200 bg-gray-50 text-gray-600 hover:bg-gray-100': length !== option.value
									}"
									class="flex flex-1 flex-col items-center gap-0.5 rounded-xl border px-3 py-2 transition-colors"
									type="button"
								>
									<span class="text-sm poppins-medium" x-text="option.label"></span>
									<span class="text-xs opacity-60" x-text="option.desc"></span>
								</button>
							</template>
						</div>
					</div>

					
					<div x-show="contextType === 'subtitle'" class="rounded-xl bg-amber-50 px-4 py-2.5 text-xs text-amber-700">
						The generated text will be short (2 lines max), suitable for a subtitle.					</div>

					
					<div x-show="contextType === 'shop_product'" class="rounded-xl bg-amber-50 px-4 py-2.5 text-xs text-amber-700">
						The text describes the service in a few sentences. No price, no times, no duration: StyKy invents nothing you have not entered.					</div>
				</div>
			</template>

			
			<template x-if="mode === 'rewrite'">
				<div class="flex flex-col gap-4">
					
					<div class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">Current text</label>
						<div class="wysiwyg-rendered max-h-32 overflow-y-auto rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm text-gray-600" x-html="existingContent"></div>
					</div>

					
					<div class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">What would you like to do? <span class="text-gray-400 poppins-regular">(up to 4)</span></label>
						<div class="grid grid-cols-2 gap-2">
							<template x-for="action in rewriteActions" :key="action.id">
								<button
									@click="toggleRewriteAction(action.id)"
									:disabled="!selectedRewriteActions.includes(action.id) && selectedRewriteActions.length >= 4"
									:class="{
										'border-styqrpurple bg-styqrpurple/10 text-styqrpurple ring-1 ring-styqrpurple/20': selectedRewriteActions.includes(action.id),
										'border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300': !selectedRewriteActions.includes(action.id) && selectedRewriteActions.length < 4,
										'border-gray-200 bg-gray-50 text-gray-300 cursor-not-allowed opacity-50': !selectedRewriteActions.includes(action.id) && selectedRewriteActions.length >= 4
									}"
									class="flex items-center gap-2 rounded-xl border px-3 py-2.5 text-left text-sm transition-all poppins-regular"
									type="button"
								>
									<span x-text="action.icon" class="text-base"></span>
									<span x-text="action.label"></span>
								</button>
							</template>
						</div>
					</div>

					
					<div x-show="selectedRewriteActions.length > 0" class="flex flex-col gap-2 transition-all duration-150">
						<label for="styky-rewrite-extra" class="poppins-medium text-sm text-gray-700">Additional instructions <span class="text-gray-400 poppins-regular">(optional)</span></label>
						<input
							id="styky-rewrite-extra"
							name="styky_rewrite_extra"
							x-model="rewriteExtraInstructions"
							class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
							placeholder="E.g.: Keep existing emojis, friendly style..."
							type="text"
						>
					</div>
				</div>
			</template>

			
			<div
				x-show="generatedContent"
				:class="generatedContent ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"
				class="flex flex-col gap-3 transition-all duration-200"
			>
				<label class="poppins-medium text-sm text-gray-700">Preview:</label>
				<div
					class="wysiwyg-rendered max-h-48 overflow-y-auto rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm"
					x-html="generatedContent"
				></div>
			</div>

			
			<div
				x-show="error"
				class="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-600 transition-opacity duration-150"
				x-text="error"
			></div>
		</div>

		
		<div class="shrink-0 rounded-b-2xl border-t border-gray-100 bg-white p-4">
			
			<button
				x-show="!generatedContent"
				@click="mode === 'rewrite' ? rewrite() : generate()"
				:disabled="isGenerating || (mode === 'create' && !prompt.trim()) || (mode === 'rewrite' && selectedRewriteActions.length === 0)"
				:class="{
					'bg-gradient-to-r from-styqrpurple to-styqrpurple/80 hover:from-styqrpurple/90 hover:to-styqrpurple/70 shadow-md shadow-styqrpurple/20': !isGenerating && ((mode === 'create' && prompt.trim()) || (mode === 'rewrite' && selectedRewriteActions.length > 0)),
					'bg-gray-300 cursor-not-allowed': isGenerating || (mode === 'create' && !prompt.trim()) || (mode === 'rewrite' && selectedRewriteActions.length === 0)
				}"
				class="flex h-12 w-full items-center justify-center gap-2 rounded-xl text-sm text-white transition-colors poppins-medium sm:h-14 sm:text-base"
				type="button"
			>
				<template x-if="!isGenerating">
					<span class="flex items-center gap-2">
						<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" /></svg>
						<span x-text="mode === 'rewrite' ? 'Rewrite with StyKy' : 'Generate with StyKy'"></span>
					</span>
				</template>
				<template x-if="isGenerating">
					<span class="flex items-center gap-2">
						<span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
						<span x-text="mode === 'rewrite' ? 'Rewriting...' : 'Generating...'"></span>
					</span>
				</template>
			</button>

			
			<div x-show="generatedContent" class="flex gap-2">
				<button
					@click="insertContent()"
					:class="$store.config?.isMaeva
						? 'bg-maevayellow text-styqrblack hover:bg-maevayellow/90'
						: 'bg-styqrgreen text-white hover:bg-styqrgreen/90'"
					class="flex h-12 flex-1 items-center justify-center rounded-xl px-4 text-sm transition-colors poppins-medium sm:h-14 sm:text-base"
					type="button"
					x-text="mode === 'rewrite' ? 'Replace in editor' : 'Insert in editor'"
				></button>
				<button
					@click="mode === 'rewrite' ? rewrite() : generate()"
					:disabled="isGenerating"
					class="flex h-12 shrink-0 items-center justify-center rounded-xl border border-gray-200 px-4 text-sm text-gray-600 transition-colors hover:bg-gray-50 poppins-medium sm:h-14"
					type="button"
				>
					Regenerate				</button>
			</div>
		</div>
	</div>
</div>

	<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		function stykyModal() {
			const suggestionsByContext = {
				subtitle: [
					"Warm catchy phrase",
					"Short description of the place",
					"Personalized welcome",
				],
				module: [
					"Usage instructions",
					"How-to guide",
					"Schedules and access",
					"Rules and guidelines",
					"Practical tips",
				],
				welcome: [
					"Welcome message",
					"Accommodation presentation",
					"Essential stay information",
				],
				shop_product: [
					"What the service includes",
					"How it works",
					"Good to know before ordering",
				],
			};

			const rewriteActions = [
				{ id: 'fix_spelling', label: "Fix spelling", icon: '✓', placeholder: "E.g.: Also fix punctuation..." },
				{ id: 'reformat', label: "Reformat", icon: '🪄', placeholder: "E.g.: Break into paragraphs, add headings, bullet lists..." },
				{ id: 'add_emojis', label: "Add emojis", icon: '😊', placeholder: "E.g.: Fun and colorful style..." },
				{ id: 'improve_style', label: "Improve style", icon: '✨', placeholder: "E.g.: Make it smoother and more engaging..." },
				{ id: 'shorten', label: "Make it shorter", icon: '📝', placeholder: "E.g.: Keep only the essentials..." },
				{ id: 'expand', label: "Make it more detailed", icon: '📖', placeholder: "E.g.: Add more practical details..." },
				{ id: 'tone_professional', label: "Professional tone", icon: '👔', placeholder: "E.g.: High-end hotel style..." },
				{ id: 'tone_casual', label: "Casual tone", icon: '🏖️', placeholder: "E.g.: Relaxed holiday vibes..." },
				{ id: 'tone_warm', label: "Warm tone", icon: '🏡', placeholder: "E.g.: Like a caring host..." },
			];

			return {
				isOpen: false,
				mode: 'create',
				prompt: '',
				category: '',
				length: "medium",
				contextType: '',
				suggestions: [],
				promptPlaceholder: "Describe what you would like to write...",
				generatedContent: '',
				isGenerating: false,
				error: '',
				targetEditorId: null,
				language: 'fr',
				existingContent: '',
				hasExistingContent: false,
				isCategoryEditing: false,

				// Rewrite mode
				rewriteActions: rewriteActions,
				selectedRewriteActions: [],
				rewriteExtraInstructions: '',

				open(detail) {
					this.targetEditorId = detail?.editorId || null;
					this.contextType = detail?.contextType || '';
					this.category = detail?.category || '';
					this.isCategoryEditing = !detail?.category;
					this.language = detail?.language || 'fr';
					// Sanitize BEFORE x-html — `existingContent` is raw WYSIWYG HTML
					// stored without server-side purification, so a malicious owner
					// could plant <img src=x onerror=...> in their own booklet and
					// escalate to the support account when staff use impersonate +
					// click "Réécrire avec Styky".
					const rawExisting = detail?.existingContent || '';
					this.existingContent = window.sanitizeBoHtml ? window.sanitizeBoHtml(rawExisting) : '';
					this.hasExistingContent = this.existingContent.trim().length > 0
						&& this.existingContent.trim() !== '<p></p>';
					this.prompt = '';
					this.generatedContent = '';
					this.error = '';
					this.selectedRewriteActions = [];
					this.rewriteExtraInstructions = '';

					// Default to rewrite if content exists (and not subtitle)
					if (this.hasExistingContent && this.contextType !== 'subtitle') {
						this.mode = 'rewrite';
					} else {
						this.mode = 'create';
					}

					// Set suggestions based on context
					this.suggestions = suggestionsByContext[this.contextType] || suggestionsByContext['module'] || [];

					// Adapt defaults based on context
					if (this.contextType === 'subtitle') {
						this.length = 'court';
						this.promptPlaceholder = 'Ex: Phrase d\'accroche pour accueillir les voyageurs...';
					} else if (this.contextType === 'welcome') {
						this.length = 'moyen';
						this.promptPlaceholder = 'Ex: Message de bienvenue chaleureux pour les voyageurs...';
					} else if (this.contextType === 'shop_product') {
						// Une fiche produit se lit avant d'acheter : 800 mots
						// n'y ont pas leur place.
						this.length = 'court';
						this.promptPlaceholder = "E.g. What the service includes and how it works...";
					} else {
						this.length = 'moyen';
						this.promptPlaceholder = this.category
							? 'Ex: Décris les informations sur ' + this.category.toLowerCase() + '...'
							: 'Décrivez ce que vous souhaitez rédiger...';
					}

					this.isOpen = true;
				},

				close() {
					this.isOpen = false;
				},

				resetResult() {
					this.generatedContent = '';
					this.error = '';
				},

				toggleRewriteAction(actionId) {
					const idx = this.selectedRewriteActions.indexOf(actionId);
					if (idx === -1) {
						if (this.selectedRewriteActions.length >= 4) return;
						this.selectedRewriteActions.push(actionId);
					} else {
						this.selectedRewriteActions.splice(idx, 1);
					}
					this.generatedContent = '';
					this.error = '';
				},

				async generate() {
					if (!this.prompt.trim() || this.isGenerating) return;

					this.isGenerating = true;
					this.error = '';
					this.generatedContent = '';

					let finalPrompt = this.prompt;
					if (this.contextType === 'subtitle') {
						finalPrompt = this.prompt + '. IMPORTANT : génère uniquement 1 à 2 phrases courtes maximum, adapté pour un sous-titre. Pas de titre <h2>, pas de liste, juste du texte dans un <p>.';
					}

					await this._callApi({
						prompt: finalPrompt,
						locale: this.language || 'fr',
						category: this.category,
						context_type: this.contextType,
						length: this.length,
						mode: 'create',
					});
				},

				async rewrite() {
					if (this.selectedRewriteActions.length === 0 || this.isGenerating) return;

					this.isGenerating = true;
					this.error = '';
					this.generatedContent = '';

					await this._callApi({
						mode: 'rewrite',
						locale: this.language || 'fr',
						category: this.category,
						rewrite_actions: this.selectedRewriteActions,
						existing_content: this.existingContent,
						extra_instructions: this.rewriteExtraInstructions || '',
					});
				},

				async _callApi(payload) {
					try {
						const response = await fetch("https:\/\/app.styqr.fr\/api\/styky\/generate", {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json',
								'X-CSRF-TOKEN': 'I8u0q3OizwMnUX46OOLYn2DHURnyeW9LX48dMQNx',
								'X-Requested-With': 'XMLHttpRequest',
								'Accept': 'application/json',
							},
							body: JSON.stringify(payload),
						});

						if (!response.ok) {
							if (response.status === 419) {
								this.error = 'Session expirée. Veuillez recharger la page.';
							} else if (response.status === 429) {
								this.error = 'Trop de requêtes. Veuillez patienter quelques instants.';
							} else {
								this.error = 'Erreur serveur (' + response.status + '). Réessayez.';
							}
							return;
						}

						const data = await response.json();

						if (data.success) {
							// `data.content` comes back from the OpenAI rewrite endpoint —
							// the model is told to return HTML, and the input it rewrote can
							// already carry user-supplied HTML. Sanitize before x-html so a
							// crafted prompt cannot punch through to script execution.
							this.generatedContent = window.sanitizeBoHtml ? window.sanitizeBoHtml(data.content || '') : '';
							this.$nextTick(() => {
								setTimeout(() => {
									const container = this.$refs.bodyScroll;
									if (container) container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
								}, 100);
							});
						} else {
							this.error = data.error || 'Erreur lors de la génération';
						}
					} catch (err) {
						this.error = 'Erreur de connexion. Réessayez.';
						console.error('StyKy error:', err);
					} finally {
						this.isGenerating = false;
					}
				},

				insertContent() {
					if (!this.generatedContent) return;

					const editorId = this.targetEditorId;

					try {
						window.dispatchEvent(new CustomEvent('styky:insert', {
							detail: {
								content: this.generatedContent,
								editorId: editorId,
								replace: this.mode === 'rewrite',
							}
						}));
					} catch (e) {
						console.error('StyKy insert error:', e);
					}

					window.dispatchEvent(new CustomEvent('notify', {
						detail: {
							content: 'Contenu inséré dans l\'éditeur',
							type: 'success',
						}
					}));

					this.close();

					// Scroll to the editor where content was inserted
					if (editorId) {
						setTimeout(() => {
							const el = document.getElementById('wysiwyg-editor-' + editorId);
							if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
						}, 250);
					}
				},
			};
		}
	</script>
	<div
	x-data="wysiwygEmojiPicker()"
	x-show="open"
	x-transition:enter="transition ease-out duration-150"
	x-transition:enter-start="opacity-0 scale-95"
	x-transition:enter-end="opacity-100 scale-100"
	x-transition:leave="transition ease-in duration-100"
	x-transition:leave-start="opacity-100 scale-100"
	x-transition:leave-end="opacity-0 scale-95"
	@emoji:open.window="openPicker($event.detail)"
	@keydown.escape.window="open = false"
	class="fixed inset-0 z-[9999] flex items-center justify-center"
	x-cloak
>
	
	<div class="absolute inset-0 bg-black/20" @click="open = false"></div>

	
	<div class="relative z-10 flex w-full max-w-sm flex-col rounded-2xl bg-white shadow-2xl" @click.stop>
		
		<div class="flex items-center justify-between border-b px-4 py-3">
			<span class="poppins-semibold text-sm text-styqrblack">Insert an emoji</span>
			<button @click="open = false" type="button" class="rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600">
				<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
			</button>
		</div>

		
		<div class="px-4 py-2">
			<input
				id="wysiwyg-emoji-search"
				name="wysiwyg_emoji_search"
				x-model="search"
				x-ref="searchInput"
				type="text"
				placeholder="Search..."
				aria-label="Search..."
				class="h-9 w-full rounded-lg border border-gray-200 px-3 text-sm outline-none transition-colors focus:border-gray-400"
			/>
		</div>

		
		<div class="flex flex-wrap gap-1 px-4 pb-2">
			<template x-for="cat in categories" :key="cat.key">
				<button
					@click="activeCategory = cat.key; search = ''"
					:class="activeCategory === cat.key ? 'bg-gray-200 text-styqrblack' : 'text-gray-400 hover:bg-gray-100'"
					class="shrink-0 rounded-md px-2 py-1 text-lg transition-colors"
					type="button"
					:title="cat.label"
					x-text="cat.icon"
				></button>
			</template>
		</div>

		
		<div class="h-64 overflow-y-auto px-4 py-2">
			<div class="grid grid-cols-8 gap-1">
				<template x-for="emoji in filteredEmojis" :key="emoji">
					<button
						@click="selectEmoji(emoji)"
						class="flex h-9 w-9 items-center justify-center rounded-lg text-xl transition-colors hover:bg-gray-100"
						type="button"
						x-text="emoji"
					></button>
				</template>
			</div>
			<div x-show="filteredEmojis.length === 0" class="flex h-32 items-center justify-center text-sm text-gray-400">
				No results			</div>
		</div>
	</div>
</div>

	<div
	x-data="wysiwygImageModal()"
	x-show="isOpen"
	x-cloak
	@wysiwyg:open-image.window="open($event.detail)"
	@keydown.escape.window="if (isOpen) close()"
>
	
	<div
		class="fixed inset-0 z-[3000] bg-black/40"
		@click="close()"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100"
		x-transition:leave-end="opacity-0"
	></div>

	
	<div
		class="fixed inset-x-4 top-[5%] bottom-[5%] z-[3001] mx-auto flex max-w-3xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl lg:inset-x-0 lg:w-[750px]"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0 scale-95"
		x-transition:enter-end="opacity-100 scale-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100 scale-100"
		x-transition:leave-end="opacity-0 scale-95"
	>
		
		<div class="flex items-center justify-between border-b px-6 py-4">
			<span class="poppins-semibold text-lg text-gray-800">Add images</span>
			<button
				@click="close()"
				class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
				type="button"
			>
				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
			</button>
		</div>

		
		<div class="flex border-b px-6">
			<button
				@click="activeTab = 'upload'"
				:class="activeTab === 'upload' ? 'border-styqrpurple text-styqrpurple' : 'border-transparent text-gray-500 hover:text-gray-700'"
				class="border-b-2 px-4 py-3 text-sm poppins-medium transition-colors"
				type="button"
			>Upload</button>
			<button
				@click="activeTab = 'url'"
				:class="activeTab === 'url' ? 'border-styqrpurple text-styqrpurple' : 'border-transparent text-gray-500 hover:text-gray-700'"
				class="border-b-2 px-4 py-3 text-sm poppins-medium transition-colors"
				type="button"
			>URL</button>
			<button
				@click="activeTab = 'unsplash'"
				:class="activeTab === 'unsplash' ? 'border-styqrpurple text-styqrpurple' : 'border-transparent text-gray-500 hover:text-gray-700'"
				class="border-b-2 px-4 py-3 text-sm poppins-medium transition-colors"
				type="button"
			>Unsplash</button>
		</div>

		
		<div class="flex-1 overflow-y-auto p-6">

			
			<div x-show="activeTab === 'upload'" class="flex flex-col gap-4">
				
				<div
					@dragover.prevent="isDragging = true"
					@dragleave.prevent="isDragging = false"
					@drop.prevent="isDragging = false; handleDrop($event)"
					:class="{
						'border-styqrpurple bg-styqrpurple/5': isDragging,
						'border-gray-300': !isDragging,
						'min-h-[180px]': uploadedUrls.length === 0 && !isUploading,
					}"
					class="flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed py-4 transition-colors"
					@click="$refs.fileInput.click()"
				>
					<div x-show="!isUploading" class="flex flex-col items-center gap-2 text-center">
						<svg x-show="uploadedUrls.length === 0" class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></svg>
						<p class="text-sm text-gray-600">
							<span x-show="uploadedUrls.length === 0">Drop images here or <span class="text-styqrpurple poppins-medium">browse</span></span>
							<span x-show="uploadedUrls.length > 0" class="text-styqrpurple poppins-medium">+ Ajouter d'autres images</span>
						</p>
						<p x-show="uploadedUrls.length === 0" class="text-xs text-gray-400">JPEG, PNG, GIF, WebP - Max 10 Mo par image</p>
					</div>
					<div x-show="isUploading" class="flex items-center gap-3">
						<span class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-styqrpurple"></span>
						<p class="text-sm text-gray-600">Uploading...</p>
					</div>
				</div>
				<input
					id="wysiwyg-image-file"
					name="wysiwyg_image_file"
					x-ref="fileInput"
					@change="handleFileSelect($event)"
					type="file"
					accept="image/*"
					multiple
					aria-label="Drop images here or"
					class="hidden"
				>
				<p x-show="uploadError" class="text-sm text-red-500" x-text="uploadError"></p>

				
				<div x-show="uploadedUrls.length > 0" class="grid grid-cols-4 gap-2">
					<template x-for="(url, index) in uploadedUrls" :key="url + '-' + index">
						<div class="group relative aspect-square overflow-hidden rounded-lg border border-gray-200">
							<img :src="url" class="h-full w-full object-cover">
							<button
								@click.stop="removeUploadedImage(index)"
								class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/50 text-white opacity-0 transition-opacity group-hover:opacity-100"
								type="button"
							>
								<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
							</button>
						</div>
					</template>
				</div>

				
				<div x-show="uploadedUrls.length > 1">
					<div class="flex flex-col gap-2">
	<span class="text-xs poppins-medium uppercase tracking-wide text-gray-500">Layout</span>
	<div class="flex gap-2">
					<button
				@click="selectedLayout = 1"
				:class="selectedLayout === 1 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 24px"></div>
									</div>
				<span class="text-xs poppins-medium">1/row</span>
			</button>
					<button
				@click="selectedLayout = 2"
				:class="selectedLayout === 2 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
									</div>
				<span class="text-xs poppins-medium">2/row</span>
			</button>
					<button
				@click="selectedLayout = 3"
				:class="selectedLayout === 3 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
									</div>
				<span class="text-xs poppins-medium">3/row</span>
			</button>
					<button
				@click="selectedLayout = 4"
				:class="selectedLayout === 4 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
									</div>
				<span class="text-xs poppins-medium">4/row</span>
			</button>
			</div>
</div>
				</div>

				<button
					x-show="uploadedUrls.length > 0"
					@click="insertFromUpload()"
					class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
					type="button"
				>
					<span x-text="uploadedUrls.length === 1 ? 'Inserer l\'image' : 'Inserer ' + uploadedUrls.length + ' images'"></span>
				</button>
			</div>

			
			<div x-show="activeTab === 'url'" class="flex flex-col gap-4">
				<div class="flex flex-col gap-2">
					<label for="wysiwyg-image-url" class="text-sm poppins-medium text-gray-700">URL de l'image</label>
					<input
						id="wysiwyg-image-url"
						name="wysiwyg_image_url"
						x-model="imageUrl"
						@keydown.enter="imageUrl.trim() && insertSingleImage(imageUrl.trim())"
						class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
						placeholder="https://example.com/image.jpg"
						type="url"
					>
				</div>
				<div x-show="imageUrl.trim()" class="flex justify-center rounded-xl border border-gray-200 bg-gray-50 p-4">
					<img :src="imageUrl" class="max-h-40 max-w-full rounded-lg object-contain" x-on:error="$el.style.display='none'" x-on:load="$el.style.display=''" />
				</div>
				<button
					x-show="imageUrl.trim()"
					@click="insertSingleImage(imageUrl.trim())"
					class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
					type="button"
				>Inserer l'image</button>
			</div>

			
			<div x-show="activeTab === 'unsplash'" class="flex flex-col gap-4">
				
				<div class="relative">
					<svg class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
					<input
						id="wysiwyg-image-unsplash-search"
						name="wysiwyg_image_unsplash_search"
						x-model="searchQuery"
						@keydown.enter="searchUnsplash()"
						class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 pl-10 pr-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
						placeholder="Search photos..."
						aria-label="Search photos..."
						type="text"
					>
				</div>
				
				<div class="flex flex-wrap gap-2">
					<template x-for="cat in categories" :key="cat">
						<button
							@click="searchQuery = cat; searchUnsplash()"
							:class="{ 'bg-styqrpurple text-white': searchQuery === cat, 'bg-gray-100 text-gray-600 hover:bg-gray-200': searchQuery !== cat }"
							class="rounded-full px-3 py-1 text-xs transition-colors poppins-medium"
							type="button"
							x-text="cat"
						></button>
					</template>
				</div>

				
				<div class="max-h-[300px] overflow-y-auto" @scroll="handleUnsplashScroll($event)">
					<div x-show="isSearching && photos.length === 0" class="flex justify-center py-8">
						<span class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-styqrpurple"></span>
					</div>
					<div x-show="!isSearching && photos.length === 0 && hasSearched" class="py-8 text-center text-sm text-gray-500">
						No photos found.
					</div>
					<div class="grid grid-cols-3 gap-2">
						<template x-for="photo in photos" :key="photo.id">
							<div
								@click="togglePhotoSelection(photo)"
								:class="{ 'ring-2 ring-styqrpurple ring-offset-2': isPhotoSelected(photo) }"
								class="group relative cursor-pointer overflow-hidden rounded-lg aspect-square transition-all hover:shadow-md"
							>
								<img :src="photo.small" :alt="photo.alt" class="h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy">
								<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent px-1.5 pb-1 pt-4">
									<a
										:href="photo.author_url + '?utm_source=styqr&utm_medium=referral'"
										@click.stop
										target="_blank"
										rel="noopener noreferrer"
										class="text-[9px] text-white/80 hover:text-white"
										x-text="photo.author"
									></a>
								</div>
								<div
									x-show="isPhotoSelected(photo)"
									class="absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-styqrpurple text-white shadow"
								>
									<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
								</div>
							</div>
						</template>
					</div>
					<div x-show="isSearching && photos.length > 0" class="flex justify-center py-3">
						<span class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-styqrpurple"></span>
					</div>
				</div>

				
				<div x-show="selectedPhotos.length > 1">
					<div class="flex flex-col gap-2">
	<span class="text-xs poppins-medium uppercase tracking-wide text-gray-500">Layout</span>
	<div class="flex gap-2">
					<button
				@click="selectedLayout = 1"
				:class="selectedLayout === 1 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 24px"></div>
									</div>
				<span class="text-xs poppins-medium">1/row</span>
			</button>
					<button
				@click="selectedLayout = 2"
				:class="selectedLayout === 2 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
									</div>
				<span class="text-xs poppins-medium">2/row</span>
			</button>
					<button
				@click="selectedLayout = 3"
				:class="selectedLayout === 3 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
									</div>
				<span class="text-xs poppins-medium">3/row</span>
			</button>
					<button
				@click="selectedLayout = 4"
				:class="selectedLayout === 4 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
									</div>
				<span class="text-xs poppins-medium">4/row</span>
			</button>
			</div>
</div>
				</div>

				<button
					x-show="selectedPhotos.length > 0"
					@click="confirmUnsplash()"
					class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
					type="button"
				>
					<span x-text="selectedPhotos.length === 1 ? 'Inserer la photo' : 'Inserer ' + selectedPhotos.length + ' photos'"></span>
				</button>
			</div>
		</div>
	</div>
</div>

	<div
	x-data="wysiwygVideoModal()"
	x-show="isOpen"
	x-cloak
	@wysiwyg:open-video.window="open($event.detail)"
	@keydown.escape.window="if (isOpen) close()"
>
	
	<div
		class="fixed inset-0 z-[3000] bg-black/40"
		@click="close()"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100"
		x-transition:leave-end="opacity-0"
	></div>

	
	<div
		class="fixed inset-x-4 top-[15%] z-[3001] mx-auto flex max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl lg:inset-x-0 lg:w-[500px]"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0 scale-95"
		x-transition:enter-end="opacity-100 scale-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100 scale-100"
		x-transition:leave-end="opacity-0 scale-95"
	>
		
		<div class="flex items-center justify-between border-b px-6 py-4">
			<span class="poppins-semibold text-lg text-gray-800">Add a video</span>
			<button
				@click="close()"
				class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
				type="button"
			>
				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
			</button>
		</div>

		
		<div class="flex flex-col gap-5 p-6">
			
			<div class="flex flex-col gap-2">
				<label for="wysiwyg-video-url" class="text-sm poppins-medium text-gray-700">Video URL</label>
				<input
					id="wysiwyg-video-url"
					name="wysiwyg_video_url"
					x-model="videoUrl"
					@input="detectPlatform()"
					@keydown.enter="videoUrl.trim() && insertVideo()"
					class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
					placeholder="https://www.youtube.com/watch?v=..."
					type="url"
				>
			</div>

			
			<div x-show="detectedPlatform" class="flex items-center gap-3 rounded-xl bg-gray-50 px-4 py-3">
				
				<template x-if="detectedPlatform === 'youtube'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6 text-red-600" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
						<span class="text-sm poppins-medium text-gray-700">YouTube</span>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'vimeo'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6 text-[#1ab7ea]" viewBox="0 0 24 24" fill="currentColor"><path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 0 0 3.501-3.123C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z"/></svg>
						<span class="text-sm poppins-medium text-gray-700">Vimeo</span>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'drive'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
						<span class="text-sm poppins-medium text-gray-700">Google Drive</span>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'other'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6 text-gray-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
						<span class="text-sm poppins-medium text-gray-700">Video (direct link)</span>
					</div>
				</template>

				<span x-show="embedUrl" class="ml-auto text-xs text-green-600 poppins-medium">Valid link</span>
				<span x-show="!embedUrl && videoUrl.trim()" class="ml-auto text-xs text-red-500 poppins-medium">Unrecognized link</span>
			</div>

			
			<div x-show="embedUrl" class="overflow-hidden rounded-xl border border-gray-200">
				
				<template x-if="detectedPlatform === 'youtube' && videoId">
					<div class="relative w-full aspect-video bg-black">
						<img :src="'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg'" alt="" class="w-full h-full object-cover opacity-85" />
						<div class="absolute inset-0 flex items-center justify-center">
							<svg width="68" height="48" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24S67.94 13.05 66.52 7.74z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>
						</div>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'vimeo'">
					<div class="relative w-full aspect-video" style="background:linear-gradient(135deg,#1ab7ea 0%,#0e71b8 100%)">
						<div class="absolute inset-0 flex flex-col items-center justify-center gap-2">
							<svg width="60" height="60" viewBox="0 0 24 24" fill="white" opacity="0.9"><path d="M8 5v14l11-7z"/></svg>
							<span class="text-white text-sm poppins-semibold opacity-90">Vimeo</span>
						</div>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'drive'">
					<div class="relative w-full aspect-video" style="background:linear-gradient(135deg,#4285F4 0%,#34A853 100%)">
						<div class="absolute inset-0 flex flex-col items-center justify-center gap-2">
							<svg width="60" height="60" viewBox="0 0 24 24" fill="white" opacity="0.9"><path d="M8 5v14l11-7z"/></svg>
							<span class="text-white text-sm poppins-semibold opacity-90">Google Drive</span>
						</div>
					</div>
				</template>
			</div>

			
			<div class="flex flex-wrap gap-2 text-xs text-gray-400">
				<span>Supported platforms:</span>
				<span class="rounded bg-gray-100 px-2 py-0.5 text-gray-500">YouTube</span>
				<span class="rounded bg-gray-100 px-2 py-0.5 text-gray-500">Vimeo</span>
				<span class="rounded bg-gray-100 px-2 py-0.5 text-gray-500">Google Drive</span>
			</div>

			
			<button
				x-show="embedUrl"
				@click="insertVideo()"
				class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
				type="button"
			>Insert video</button>
		</div>
	</div>
</div>


	<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		window.STYQR_ENV_BASE = "base";
		window.STYQR_ENV_MAEVA = "maeva";
		window.STYQR_ENV_GDF = "gdf";

		/**
		 * Converts a hex color + opacity (0-100) to an rgba string.
		 * @param {string} hex - Hex color (e.g. '#FF0000')
		 * @param {number} opacity - Opacity from 0 to 100
		 * @returns {string} rgba string
		 */
		window.hexToRgba = function(hex, opacity) {
			const cleaned = hex.replace('#', '');
			const r = parseInt(cleaned.substring(0, 2), 16);
			const g = parseInt(cleaned.substring(2, 4), 16);
			const b = parseInt(cleaned.substring(4, 6), 16);
			const a = opacity / 100;
			return `rgba(${r}, ${g}, ${b}, ${a})`;
		};

		/**
		 * Annonce un depart en paiement, puis soumet le formulaire.
		 *
		 * Seule l'intention se mesure ici : la vente remonte du webhook Stripe,
		 * avec le montant reellement encaisse. Le formulaire part au rappel de
		 * GTM, et de toute facon au bout d'une seconde et demie — un tag lent ou
		 * bloque ne doit jamais retenir un client devant sa page de paiement.
		 *
		 * @param {HTMLFormElement} form
		 * @param {string} itemId
		 * @param {string} itemName
		 * @param {number|null} quantity
		 * @returns {boolean} toujours false : la soumission est differee
		 */
		window.styqrBeginCheckout = function(form, itemId, itemName, quantity) {
			let submitted = false;
			const send = function() {
				if (submitted) return;
				submitted = true;
				form.submit();
			};

			// `dataLayer` est toujours defini — head_tags le stubbe pour que les
			// pushes ne cassent rien la ou GTM ne charge pas. C'est donc la
			// presence du conteneur qu'il faut tester : sinon, hors production,
			// chaque clic attendrait le filet de 1,5 s pour rien.
			if (typeof dataLayer === 'undefined' || typeof window.google_tag_manager === 'undefined') {
				send();
				return false;
			}

			dataLayer.push({ ecommerce: null });
			dataLayer.push({
				event: 'begin_checkout',
				ecommerce: {
					currency: 'EUR',
					items: [{ item_id: itemId, item_name: itemName, quantity: quantity || 1 }]
				},
				eventCallback: send
			});
			setTimeout(send, 1500);

			return false;
		};

		document.addEventListener('alpine:init', () => {

			const gaData = null;
			if (gaData && Object.keys(gaData).length > 0) {
				dataLayer.push(gaData);
			}

			const gaFlashData = null;
			if (gaFlashData) {
				dataLayer.push(gaFlashData);
			}


			Alpine.store('menu', {
				open: false,
				shouldValidateBeforePageChange: false,
			})

			Alpine.store('loading-overlay', {
				visible: false,
			})


			Alpine.store('config', {
				env: "base",
				isGDF: "base" === window.STYQR_ENV_GDF,
				isMaeva: "base" === window.STYQR_ENV_MAEVA,
				isBase: "base" === window.STYQR_ENV_BASE,
			})

			Alpine.store('api', {
				csrfToken: "I8u0q3OizwMnUX46OOLYn2DHURnyeW9LX48dMQNx",
				scrollTarget: null,
				_refreshingToken: null,

				// Shared per-page preview (module customization grouped layout).
				// A page-group "Aperçu" button retargets the side preview to that
				// page's deep-link and expands the layout to half/half.
				activePreviewUrl: null,
				previewExpanded: false,
				_defaultPreviewSrc: null,
				// Navigate the (already-booted) preview to `url` via postMessage — instant,
				// no full PWA reboot. dataset.src is kept in sync so a save-triggered
				// refreshPreview() reloads the right page. The PWA acks the nav
				// (navigateAck) ; sans ack sous 600ms (PWA pas bootée, vieux bundle,
				// handler absent) → chargement dur de l'URL : la page s'affiche toujours.
				_gotoPreview(f, url) {
					f.dataset.src = url;
					const hardLoad = () => {
						const u = new URL(url, window.location.origin);
						u.searchParams.set('_t', Date.now().toString());
						f.src = u.toString();
					};
					if (!f.src || !f.contentWindow) { hardLoad(); return; }
					const path = new URL(url, window.location.origin).pathname + '?preview=1';
					let acked = false;
					const onAck = (e) => {
						if (e.data && e.data.type === 'navigateAck') {
							acked = true;
							window.removeEventListener('message', onAck);
						}
					};
					try {
						window.addEventListener('message', onAck);
						f.contentWindow.postMessage({ type: 'navigate', path }, this.getPwaOrigin());
						setTimeout(() => {
							window.removeEventListener('message', onAck);
							if (!acked) hardLoad();
						}, 600);
					} catch (e) {
						window.removeEventListener('message', onAck);
						hardLoad();
					}
				},
				// Retarget the side preview to a page (no size change) — called when a
				// page group accordion is expanded.
				targetPreview(url) {
					const f = document.getElementById('booklet-preview-desktop');
					if (!f || !url) return;
					if (this._defaultPreviewSrc === null) this._defaultPreviewSrc = f.dataset.src || f.src || null;
					// Always re-send (idempotent, ack'd) : un premier envoi perdu ne doit
					// jamais bloquer les suivants.
					this.activePreviewUrl = url;
					this._gotoPreview(f, url);
				},
				// Expand the preview to half-screen on a given page / shrink it back.
				togglePreviewHalf(url) {
					if (this.previewExpanded && this.activePreviewUrl === url) {
						this.previewExpanded = false;
						return;
					}
					this.targetPreview(url);
					this.previewExpanded = true;
				},

				async refreshCsrfToken() {
					if (!this._refreshingToken) {
						this._refreshingToken = fetch('/refresh-csrf', {
							headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
						})
						.then(r => r.ok ? r.json() : Promise.reject(r))
						.then(data => {
							this.csrfToken = data.token;
							const meta = document.querySelector('meta[name=csrf-token]');
							if (meta) meta.setAttribute('content', data.token);
						})
						.finally(() => { this._refreshingToken = null; });
					}
					return this._refreshingToken;
				},

				async apiFetch(url, options = {}) {
					const res = await fetch(url, options);
					if (res.status === 419) {
						await this.refreshCsrfToken();
						if (options.headers && !(options.headers instanceof Headers)) {
							options.headers['X-CSRF-TOKEN'] = this.csrfToken;
						}
						return fetch(url, options);
					}
					return res;
				},

				getPwaOrigin() {
					const iframe = document.getElementById('booklet-preview-desktop') || document.getElementById('booklet-preview-mobile');
					if (iframe) {
						const src = iframe.src || iframe.dataset.src;
						if (src) {
							try { return new URL(src).origin; } catch(e) {}
						}
					}
					return window.location.origin;
				},

				// Full iframe reload — restored from pre-49ecdbdfa behavior. The "data-only
				// postMessage refresh" introduced for perf was unreliable: pages where the new
				// state required a fresh component mount (welcome popup auto-show, font loads,
				// component memoization) showed "nothing changed". Hard reload always works.
				// Debounced 300ms: a single user action triggering 3 cascaded saves
				// (font_family + font_weight + font_style) results in ONE reload, not three
				// (otherwise reloads cancel each other → "starts then stops").
				_refreshPreviewTimer: null,
				refreshPreview() {
					if (this._refreshPreviewTimer) clearTimeout(this._refreshPreviewTimer);
					this._refreshPreviewTimer = setTimeout(() => this._doRefreshPreview(), 300);
				},

				// Soft refresh — refetch data inside the already-booted PWA (postMessage
				// reloadBooklet), no full reboot. Safe ONLY for pure-style changes
				// (colors/opacities): they re-render without remount. Fonts, layouts,
				// hero images still need the hard refreshPreview() (cf. 49ecdbdfa).
				_softRefreshTimer: null,
				softRefreshPreview() {
					if (this._softRefreshTimer) clearTimeout(this._softRefreshTimer);
					this._softRefreshTimer = setTimeout(() => {
						const iframe = document.getElementById('booklet-preview-desktop') || document.getElementById('booklet-preview-mobile');
						if (iframe && iframe.src && iframe.contentWindow) {
							try {
								iframe.contentWindow.postMessage({ type: 'reloadBooklet' }, this.getPwaOrigin());
								return;
							} catch (e) { /* fall back to hard reload */ }
						}
						this._doRefreshPreview();
					}, 300);
				},
				_doRefreshPreview() {
					const iframes = [
						document.getElementById('booklet-preview-desktop'),
						document.getElementById('booklet-preview-mobile'),
					].filter((i) => i && (i.src || i.dataset.src) && i.offsetParent !== null);

					iframes.forEach((iframe) => {
						const baseUrl = new URL(iframe.dataset.src || iframe.src, window.location.origin);
						baseUrl.searchParams.set('_t', Date.now().toString());
						iframe.src = baseUrl.toString();

						if (this.scrollTarget) {
							const target = this.scrollTarget;
							iframe.addEventListener('load', () => {
								try {
									iframe.contentWindow.postMessage({ type: 'scrollTo', target }, this.getPwaOrigin());
								} catch (e) { /* ignore */ }
							}, { once: true });
						}

						if (this._pendingPreviewMessage) {
							const message = this._pendingPreviewMessage;
							iframe.addEventListener('load', () => {
								try {
									iframe.contentWindow.postMessage(message, this.getPwaOrigin());
								} catch (e) { /* ignore */ }
							}, { once: true });
						}
					});

					this._pendingPreviewMessage = null;
				},

				// Send a targeted event to the PWA preview (for real-time updates)
				sendToPreview(type, payload = {}) {
					const iframe = document.getElementById('booklet-preview-desktop') || document.getElementById('booklet-preview-mobile');
					if (iframe && iframe.contentWindow) {
						iframe.contentWindow.postMessage({ type, ...payload }, this.getPwaOrigin());
					}
				},

				// Même chose, mais rejoué APRÈS le rechargement de la preview : un
				// postMessage envoyé juste avant refreshPreview() part dans le document
				// que le reload va remplacer, donc il est perdu.
				_pendingPreviewMessage: null,
				sendToPreviewAfterRefresh(type, payload = {}) {
					this._pendingPreviewMessage = { type, ...payload };
				},

				async post(route, data = {}) {
					const formData = data instanceof FormData ? data : this.toFormData(data);

					const response = await fetch(route, {
						method: 'POST',
						body: formData,
						headers: {
							'X-CSRF-TOKEN': this.csrfToken,
							'X-Requested-With': 'XMLHttpRequest',
							'Accept': 'application/json'
						},
					});

					const result = await response.json();

					if (result.success) {
						this.refreshPreview();
					}

					return result;
				},

				async postJson(route, data = {}) {
					const response = await fetch(route, {
						method: 'POST',
						body: JSON.stringify(data),
						headers: {
							'Content-Type': 'application/json',
							'Accept': 'application/json',
							'X-CSRF-TOKEN': this.csrfToken,
							'X-Requested-With': 'XMLHttpRequest',
						},
					});

					const result = await response.json();

					if (result.success) {
						this.refreshPreview();
					}

					return result;
				},

				toFormData(obj) {
					const formData = new FormData();
					Object.entries(obj).forEach(([key, value]) => {
						formData.append(key, value ?? '');
					});
					return formData;
				},

				toBase64(file) {
					return new Promise((resolve, reject) => {
						const reader = new FileReader();
						reader.readAsDataURL(file);
						reader.onload = () => resolve(reader.result);
						reader.onerror = reject;
					});
				}
			})

			Alpine.store('confirmModal', {
				open: false,
				onOk() {},
				onCancel() {},
				showButton: {
					cancel: true,
					ok: true,
				}
			});

			Alpine.store('formHasBeenModified', {

			})

			/**
			 * Texte replie pour la recherche : minuscules, sans accent.
			 *
			 * Sans ca, chercher « velo » ne trouvait pas « Location de velos »
			 * — le voyageur comme l'hote tapent rarement les accents, et une
			 * recherche qui exige la saisie exacte n'est pas une recherche.
			 *
			 * NFD separe la lettre de son accent, la plage U+0300-U+036F retire
			 * les diacritiques ainsi isoles.
			 */
			window.styqrFold = function (value) {
				return String(value ?? '')
					.normalize('NFD')
					.replace(/[\u0300-\u036f]/g, '')
					.toLowerCase()
					.trim();
			};

			Alpine.magic('confirm', () => {
				return ({
					message = 'Voulez vous vraiment effectuer cette action ?',
					okText = 'OK',
					cancelText = "Cancel",
					title = "Confirm",
					showButton = {
						cancel: true,
						ok: true,
					}
				}) => new Promise((resolve, reject) => {
					const confirmModal = Alpine.store('confirmModal')
					confirmModal.open = true
					confirmModal.message = message
					confirmModal.okText = okText
					confirmModal.cancelText = cancelText
					confirmModal.title = title
					confirmModal.showButton = showButton

					confirmModal.onOk = () => {
						confirmModal.open = false
						resolve(true)
					};

					confirmModal.onCancel = () => {
						confirmModal.open = false
						resolve(false)
					};
				});
			})


			Alpine.directive('tooltip', (el, {
				expression
			}, {
				evaluate
			}) => {
				tippy(el, {
					content: evaluate(expression),
					appendTo: 'parent',
					allowHTML: true,
					theme: 'styqr',
					delay: [null, 1500]
				})
			})
			Alpine.magic('validate', (el) => {
				return (rules) => {
					const value = el.value.trim();
					const rulesList = rules.split('|');
					let inputIsValid = true;
					const errorMessages = [];

					const errorMessagesMap = {
						required: "Ce champ est obligatoire.",
						min: (min) => `La valeur doit comporter au moins ${min} caractères.`,
						max: (max) => `La valeur ne doit pas dépasser ${max} caractères.`,
						pwd: "Le mot de passe n'est pas au bon format.",
						email: "L'adresse email n'est pas valide."
					};

					const validationMethods = {
						required() {
							return value !== '';
						},
						min(arg) {
							const minLength = parseInt(arg);
							return value.length >= minLength;
						},
						max(arg) {
							const maxLength = parseInt(arg);
							return value.length <= maxLength;
						},
						pwd() {
							const regex =
								/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^A-Za-z0-9\s]).{8,}$/;

							return regex.test(value);
						},
						email() {
							const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
							return regex.test(value);
						}
					};

					rulesList.forEach(rule => {
						let [ruleName, arg] = rule.split(':');

						if (validationMethods[ruleName]) {
							const isValid = validationMethods[ruleName](arg);
							if (!isValid) {
								inputIsValid = false;
								if (errorMessagesMap[ruleName]) {
									errorMessages.push(typeof errorMessagesMap[ruleName] ===
										'function' ?
										errorMessagesMap[ruleName](arg) :
										errorMessagesMap[ruleName]);
								}
							}
						}
					});


					window.dispatchEvent(new CustomEvent('inputvalidation', {
						detail: {
							inputName: el.name,
							isValid: inputIsValid,
							errorMessages
						}
					}));

					return inputIsValid;
				};
			});
		})
	</script>

			<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>

		<script>
			window.turnstileCaptcha = () => {
				return {
					widgetId: null,
					pendingResolve: null,
					pendingReject: null,
					init() {
						const render = () => {
							this.widgetId = window.turnstile.render(this.$el, {
								sitekey: '0x4AAAAAAE_QOHdL7jxPvK09',
								appearance: 'interaction-only',
								execution: 'execute',
								callback: this.onComplete.bind(this),
								'error-callback': this.onError.bind(this),
								'timeout-callback': this.onError.bind(this),
							});
							// Promise-based getter for AJAX callers (e.g. send-magic-link).
							// Resets the widget so each call yields a fresh token; the
							// previous one is single-use and Cloudflare will reject it.
							window.turnstileFetchToken = () => new Promise((resolve, reject) => {
								if (this.widgetId === null || !window.turnstile) {
									reject(new Error('Turnstile not ready'));
									return;
								}
								this.pendingResolve = resolve;
								this.pendingReject = reject;
								window.turnstile.reset(this.widgetId);
								window.turnstile.execute(this.widgetId);
							});
						};
						if (window.turnstile && typeof window.turnstile.render === 'function') {
							render();
						} else {
							window.onloadTurnstileCallback = render;
							const existing = document.querySelector('script[src*="challenges.cloudflare.com/turnstile"]');
							if (existing && !existing.src.includes('onload=')) {
								existing.src = existing.src + '&onload=onloadTurnstileCallback';
							}
						}
					},
					execute() {
						if (this.widgetId !== null && window.turnstile) {
							window.turnstile.execute(this.widgetId);
						} else {
							this.$el.closest('form').submit();
						}
					},
					onComplete(token) {
						// Promise-mode caller (AJAX flow): hand back the token, skip
						// the form-submit fallback. The fetch caller is responsible
						// for putting the token in its body.
						if (this.pendingResolve) {
							const resolve = this.pendingResolve;
							this.pendingResolve = null;
							this.pendingReject = null;
							resolve(token);
							return;
						}
						const form = this.$el.closest('form');
						let input = form.querySelector('input[name="cf-turnstile-response"]');
						if (!input) {
							input = document.createElement('input');
							input.type = 'hidden';
							input.name = 'cf-turnstile-response';
							form.appendChild(input);
						}
						input.value = token;
						form.submit();
					},
					onError() {
						if (this.pendingReject) {
							const reject = this.pendingReject;
							this.pendingResolve = null;
							this.pendingReject = null;
							reject(new Error('Turnstile execution failed'));
						}
						if (this.widgetId !== null && window.turnstile) {
							window.turnstile.reset(this.widgetId);
						}
					}
				};
			};
		</script>
	
	
	<script type="text/javascript" nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
	window.$crisp = [];
	
	window.CRISP_WEBSITE_ID = "9c703196-0a4c-4ae3-ae89-b574d074cb94";
	(function() {
		d = document;
		s = d.createElement("script");
		s.src = "https://client.crisp.chat/l.js";
		s.async = 1;
		d.getElementsByTagName("head")[0].appendChild(s);
	})();
</script>

	
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2/dist/umd/popper.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.umd.min.js"
	></script>
	
			
	<div x-data="aiPublicPanel()" @keydown.escape.window="open = false">
    
    <button
        type="button"
        x-show="!open"
        @click="show()"
        aria-label="A question? Styky can help"
        title="A question? Styky can help"
        class="fixed bottom-5 right-5 z-[60] flex h-16 w-16 items-center justify-center rounded-full text-white transition-transform active:scale-[0.94]"
        style="background:linear-gradient(135deg,#7c3aed,#a855f7);box-shadow:0 4px 18px rgba(124,58,237,.4);"
    >
        <svg viewBox="0 0 48 48" class="h-9 w-9" fill="currentColor" aria-hidden="true">
            <g transform="translate(10.5 12) scale(0.0473)"><path class="styky-star" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></g>
            <g transform="translate(31 5) scale(0.0243)"><path class="styky-star styky-star--2" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></g>
            <g transform="translate(6 30) scale(0.0191)"><path class="styky-star styky-star--3" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></g>
        </svg>
    </button>

    
    <div
        x-show="teaser"
        x-cloak
        x-transition.duration.300ms
        @click="show(); teaser = false"
        class="fixed bottom-24 right-5 z-[60] flex max-w-[280px] cursor-pointer items-start gap-2.5 rounded-2xl rounded-br-md bg-white p-3.5 ring-1 ring-purple-100"
        style="box-shadow:0 8px 30px rgba(124,58,237,.25);"
    >
        <p class="text-sm leading-snug text-gray-700">Hi, I&#039;m Styky, trouble signing in, or a question about StyQR?</p>
        <button type="button" @click.stop="teaser = false" aria-label="Close" class="-mr-1 -mt-1 shrink-0 rounded-full p-1 text-gray-300 transition-colors hover:text-gray-500">
            <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
    </div>

    
    <div x-show="open" x-transition.opacity class="fixed inset-0 bg-black/30" style="z-index:2000;backdrop-filter:blur(2px);" @click="open = false"></div>
    <div
        x-show="open"
        x-cloak
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="translate-y-4 opacity-0"
        x-transition:enter-end="translate-y-0 opacity-100"
        style="z-index:2001;"
        class="fixed bottom-0 right-0 top-0 flex w-full max-w-full flex-col overflow-hidden bg-white shadow-2xl sm:bottom-3 sm:right-3 sm:top-3 sm:w-[400px] sm:rounded-3xl"
    >
        <div class="flex items-center justify-between px-5 py-4 text-white" style="background:linear-gradient(135deg,#7c3aed,#a855f7);">
            <div>
                <p class="poppins-medium text-sm">Styky</p>
                <p class="text-xs text-white/80">StyQR&#039;s AI assistant</p>
            </div>
            <button type="button" @click="open = false" class="rounded-full p-1.5 text-white/80 transition-colors hover:bg-white/15 hover:text-white">
                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
        </div>

        
        <div x-show="contact" x-cloak class="flex-1 overflow-y-auto p-4">
            <template x-if="contact && !contact.sent">
                <div class="rounded-2xl border p-4" style="border-color:#e2d9f8;background:#fbfaff;">
                    <p class="poppins-medium text-sm text-gray-800" x-text="contact.needsMessage ? (contact.bestEffort ? t.contact['title-weekend'] : t.contact['title-closed']) : t.contact.title"></p>
                    <p class="mt-1 text-xs text-gray-500" x-text="contact.needsMessage ? t.contact['subtitle-closed'].replace(':when', contact.reopensAt) : t.contact.subtitle"></p>
                    <input
                        type="email"
                        x-model="contact.email"
                        placeholder="Your email address"
                        class="mt-3 w-full rounded-xl border border-gray-200 px-3 py-2 text-sm outline-none transition-colors focus:border-purple-300"
                    >
                    <textarea
                        x-show="contact.needsMessage"
                        x-model="contact.message"
                        rows="3"
                        maxlength="2000"
                        placeholder="Describe your problem…"
                        class="mt-2 w-full resize-none rounded-xl border border-gray-200 px-3 py-2 text-sm outline-none transition-colors focus:border-purple-300"
                    ></textarea>
                    <div class="mt-2 flex items-center justify-end gap-2">
                        <button type="button" @click="contact = null" class="rounded-xl px-3 py-1.5 text-xs text-gray-500 transition-colors hover:text-gray-800">Cancel</button>
                        <button
                            type="button"
                            @click="submitContact()"
                            :disabled="contact.sending || !validEmail() || (contact.needsMessage && contact.message.trim().length < 5)"
                            class="poppins-medium rounded-xl px-4 py-1.5 text-xs text-white transition-transform active:scale-[0.97]"
                            :style="(contact.sending || !validEmail() || (contact.needsMessage && contact.message.trim().length < 5)) ? 'background:#c4b5fd;' : 'background:#7c3aed;'"
                            x-text="contact.sending ? t.contact.sending : (contact.needsMessage ? t.contact.send : t.contact.open)"
                        ></button>
                    </div>
                </div>
            </template>
            <template x-if="contact && contact.sent">
                <div class="rounded-2xl border p-4" style="border-color:#e2d9f8;background:#fbfaff;">
                    <p class="text-sm text-gray-700" x-text="(contact.bestEffort ? t.contact['sent-weekend'] : t.contact.sent).replace(':when', contact.reopensAt)"></p>
                    <button type="button" @click="contact = null" class="poppins-medium mt-3 text-xs" style="color:#7c3aed;">Back to Styky</button>
                </div>
            </template>
        </div>

        
        <div x-show="human" x-cloak class="flex flex-1 flex-col overflow-hidden">
            <button type="button" @click="human = false" class="flex items-center gap-1.5 border-b border-gray-100 px-4 py-2 text-xs text-gray-500 transition-colors hover:text-styqrpurple">
                <svg viewBox="0 0 24 24" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
                <span>Back to Styky</span>
            </button>
            <template x-if="human">
                <iframe
                    :src="'https://go.crisp.chat/chat/embed/?website_id=9c703196-0a4c-4ae3-ae89-b574d074cb94' + (humanEmail ? ('&user_email=' + encodeURIComponent(humanEmail)) : '')"
                    title="Chat with the StyQR team"
                    class="w-full flex-1 border-0"
                    referrerpolicy="origin"
                ></iframe>
            </template>
        </div>

        <div x-show="!contact && !human" class="flex-1 space-y-3 overflow-y-auto p-4" x-ref="scroller">
            <div x-show="messages.length === 0" class="space-y-3">
                <p class="text-sm text-gray-600">Hello! I can help you get back into your account or answer your questions about StyQR.</p>
                <div class="flex flex-col gap-2">
                    <template x-for="s in suggestions" :key="s">
                        <button type="button" @click="input = s; send()" class="rounded-2xl border border-gray-100 bg-white p-3 text-left text-sm text-gray-700 transition-all hover:-translate-y-px hover:border-purple-200" x-text="s"></button>
                    </template>
                </div>
            </div>

            <template x-for="(msg, i) in messages" :key="i">
                <div>
                    <div x-show="msg.kind === 'user'" class="flex justify-end">
                        <p class="max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md px-4 py-2.5 text-sm text-white" style="background:#7c3aed;" x-text="msg.text"></p>
                    </div>
                    <div x-show="msg.kind === 'assistant'" class="flex">
                        <p class="max-w-[90%] whitespace-pre-wrap break-words rounded-2xl rounded-bl-md px-4 py-2.5 text-sm text-gray-800" style="background:#f3f0ff;" x-text="msg.text"></p>
                    </div>
                    <p x-show="msg.kind === 'error'" class="rounded-2xl px-4 py-2.5 text-sm" style="background:#fef2f2;color:#dc2626;" x-text="msg.text"></p>
                </div>
            </template>

            <div x-show="streaming && liveText" class="flex">
                <p class="max-w-[90%] whitespace-pre-wrap break-words rounded-2xl rounded-bl-md px-4 py-2.5 text-sm text-gray-800" style="background:#f3f0ff;" x-text="liveText"></p>
            </div>
            <p x-show="streaming && !liveText" class="text-sm text-gray-400">Styky is thinking…</p>
        </div>

        
        <button type="button" x-show="!contact && !human" @click="talkToHuman()" class="flex w-full items-center justify-center gap-2 border-t border-gray-100 px-4 py-2.5 text-xs text-gray-500 transition-colors hover:text-styqrpurple">
            <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
            <span>Talk to a human</span>
        </button>

        <div x-show="!contact && !human" class="border-t border-gray-100 p-3">
            <div class="flex items-end gap-2">
                <textarea
                    x-ref="input"
                    x-model="input"
                    @keydown.enter.prevent="if (!$event.shiftKey) send()"
                    rows="1"
                    maxlength="1000"
                    placeholder="Your question…"
                    class="max-h-32 min-h-[44px] flex-1 resize-none rounded-2xl border border-gray-200 px-4 py-2.5 text-sm outline-none transition-colors focus:border-purple-300"
                ></textarea>
                <button type="button" @click="send()" :disabled="streaming || !input.trim()" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-white transition-transform active:scale-[0.94]" :style="(streaming || !input.trim()) ? 'background:#c4b5fd;' : 'background:#7c3aed;'">
                    <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </button>
            </div>
            <p class="mt-1.5 text-center text-[11px] leading-tight text-gray-400">AI can make mistakes. Always check before acting.</p>
        </div>
    </div>
</div>


		<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
	function commonModal({
		modalName
	}) {
		return {
			open: false,
			showBackButton: false,
			modalName,
			closeModal() {
				this.open = false;
			},
			openModal() {
				this.open = true;
			},
			init() {
				window.addEventListener('openCommonModal', (event) => {
					if (event.detail.modalName === this.modalName) {
						this.open = true
					}

				});

				window.addEventListener('closeCommonModal', (event) => {
					if (event.detail.modalName === this.modalName) {
						this.open = false
					}
				});

				window.addEventListener('showBackButton', (event) => {
					if (event.detail.modalName === this.modalName) {
						this.showBackButton = event.detail.visible ?? true;
					}
				});
			},
		};
	}
</script>
<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
function wysiwygEmojiPicker() {
	const emojiData = {
		smileys: {
			icon: '😀', label: 'Smileys',
			emojis: '😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😗☺😚😙🥲😋😛😜🤪😝🤑🤗🤭🤫🤔🫡🤐🫢😐😑😶🫥😏😒🙄😬🤥🫨😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳🥸😎🤓🧐😕🫤😟🙁☹😮😯😲😳🥺🥹😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬😈👿💀☠💩🤡👹👺👻👽👾🤖😺😸😹😻😼😽🙀😿😾'
		},
		gestures: {
			icon: '👋', label: 'Gestes',
			emojis: '👋🤚🖐✋🖖🫱🫲🫳🫴👌🤌🤏✌🤞🫰🤟🤘🤙👈👉👆🖕👇☝🫵👍👎✊👊🤛🤜👏🙌🫶👐🤲🤝🙏✍💅🤳💪🦾🦿🦵🦶👂🦻👃🧠🫀🫁🦷🦴👀👁👅👄🫦'
		},
		people: {
			icon: '👶', label: 'Personnes',
			emojis: '👶🧒👦👧🧑👱👨🧔👩🧓👴👵🙍🙎🙅🙆💁🙋🧏🙇🤦🤷👮🕵💂🥷👷🫅🤴👸👳👲🧕🤵👰🤰🫃🫄🤱👼🎅🤶🦸🦹🧙🧚🧛🧜🧝🧞🧟💆💇🚶🧍🧎🏃💃🕺🕴👯🧖🧗🤸🏌🏇⛷🏂🏋🤼🤽🤾🤺⛹🏊🚣🧘🛀🛌'
		},
		nature: {
			icon: '🌿', label: 'Nature',
			emojis: '🐶🐱🐭🐹🐰🦊🐻🐼🐻‍❄️🐨🐯🦁🐮🐷🐽🐸🐵🙈🙉🙊🐒🐔🐧🐦🐤🐣🐥🦆🦅🦉🦇🐺🐗🐴🦄🐝🪱🐛🦋🐌🐞🐜🪰🪲🪳🦟🦗🕷🦂🐢🐍🦎🦖🦕🐙🦑🦐🦞🦀🪸🐡🐠🐟🐬🐳🐋🦈🦭🐊🐅🐆🦓🦍🦧🐘🦛🦏🐪🐫🦒🦘🦬🐃🐂🐄🐎🐖🐏🐑🦙🐐🦌🐕🐩🦮🐕‍🦺🐈🐈‍⬛🪶🐓🦃🦤🦚🦜🦢🦩🕊🐇🦝🦨🦡🦫🦦🦥🐁🐀🐿🦔🌵🎄🌲🌳🌴🪵🌱🌿☘🍀🎍🪴🎋🍃🍂🍁🪻🪺🍄🐚🪨🌾💐🌷🌹🥀🌺🌸🌼🌻🌞🌝🌛🌜🌚🌕🌖🌗🌘🌑🌒🌓🌔🌙🌎🌍🌏🪐💫⭐🌟✨⚡☄💥🔥🌪🌈☀🌤⛅🌥☁🌦🌧⛈🌩🌨❄☃⛄🌬💨💧💦🫧☔☂🌊🌫'
		},
		food: {
			icon: '🍔', label: 'Nourriture',
			emojis: '🍇🍈🍉🍊🍋🍌🍍🥭🍎🍏🍐🍑🍒🍓🫐🥝🍅🫒🥥🥑🍆🥔🥕🌽🌶🫑🥒🥬🥦🧄🧅🍄🥜🫘🌰🍞🥐🥖🫓🥨🥯🥞🧇🧀🍖🍗🥩🥓🍔🍟🍕🌭🥪🌮🌯🫔🥙🧆🥚🍳🥘🍲🫕🥣🥗🍿🧈🧂🥫🍱🍘🍙🍚🍛🍜🍝🍠🍢🍣🍤🍥🥮🍡🥟🥠🥡🦀🦞🦐🦑🦪🍦🍧🍨🍩🍪🎂🍰🧁🥧🍫🍬🍭🍮🍯🍼🥛☕🫖🍵🍶🍾🍷🍸🍹🍺🍻🥂🥃🫗🥤🧋🧃🧉🧊🥢🍽🍴🥄'
		},
		travel: {
			icon: '✈️', label: 'Voyage',
			emojis: '🚗🚕🚙🚌🚎🏎🚓🚑🚒🚐🛻🚚🚛🚜🏍🛵🚲🛴🛹🛼🚏🛣🛤🛞⛽🛞🚨🚥🚦🛑🚧⚓🛟⛵🛶🚤🛳⛴🛥🚢✈🛩🛫🛬🪂💺🚁🚟🚠🚡🛰🚀🛸🧳🏠🏡🏢🏣🏤🏥🏦🏨🏩🏪🏫🏬🏭🏗🏚🏘🗼🗽⛪🕌🛕🕍⛩🕋⛲⛺🌁🌃🏙🌄🌅🌆🌇🌉♨🎠🛝🎡🎢💈🎪🗻🏔⛰🌋🏕🏖🏜🏝🏞'
		},
		objects: {
			icon: '💡', label: 'Objets',
			emojis: '⌚📱📲💻⌨🖥🖨🖱🖲🕹🗜💽💾💿📀📼📷📸📹🎥📽🎞📞☎📟📠📺📻🎙🎚🎛🧭⏱⏲⏰🕰⌛⏳📡🔋🪫🔌💡🔦🕯🪔🧯🗑🛢💸💵💴💶💷🪙💰💳🪪💎⚖🪜🧰🪛🔧🔩⚙🪤🧲🔫💣🪓🔪🗡⚔🛡🚬⚰🪦⚱🏺🔮📿🧿🪬💈⚗🔭🔬🕳🩹🩺🩻🩼💊💉🩸🧬🦠🧫🧪🌡🧹🪠🧺🧻🚰🚿🛁🛀🧼🪥🪒🧽🪣🧴🔑🗝🚪🪑🛋🛏🛌🧸🪆🖼🪞🪟🛍🛒🎁🎈🎏🎀🪄🪅🎊🎉🎎🏮🎐🧧✉📩📨📧💌📥📦📫📪📬📭📮🗳✏✒🖋🖊🖌🖍📝💼📁📂🗂📅📆🗒🗓📇📈📉📊📋📌📍📎🖇📏📐✂🗃🗄🗑🔒🔓🔏🔐'
		},
		symbols: {
			icon: '❤️', label: 'Symboles',
			emojis: '❤🩷🧡💛💚💙🩵💜🖤🩶🤍🤎💔❤‍🔥❤‍🩹❣💕💞💓💗💖💘💝💟☮✝☪🕉☸✡🔯🕎☯☦🛐⛎♈♉♊♋♌♍♎♏♐♑♒♓🆔⚛🉑☢☣📴📳🈶🈚🈸🈺🈷✴🆚💮🉐㊙㊗🈴🈵🈹🈲🅰🅱🆎🆑🅾🆘❌⭕🛑⛔📛🚫💯💢♨🚷🚯🚳🚱🔞📵🚭❗❕❓❔‼⁉🔅🔆〽⚠🚸🔱⚜🔰♻✅🈯💹❇✳❎🌐💠Ⓜ🌀💤🏧🚾♿🅿🛗🈳🈂🛂🛃🛄🛅🚹🚺🚼⚧🚻🚮🎦📶🈁🔣ℹ🔤🔡🔠🆖🆗🆙🆒🆕🆓0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🔢#️⃣*️⃣⏏▶⏩⏭⏯◀⏪⏮🔼⏫🔽⏬⏸⏹⏺⏏🎦🔅🔆📶🔀🔁🔂🔃🔄🔙🔚🔛🔜🔝'
		},
		flags: {
			icon: '🏳️', label: 'Drapeaux',
			emojis: '🏁🚩🎌🏴🏳🏳️‍🌈🏳️‍⚧️🇫🇷🇬🇧🇺🇸🇩🇪🇪🇸🇮🇹🇵🇹🇧🇷🇨🇦🇦🇺🇯🇵🇨🇳🇰🇷🇮🇳🇷🇺🇲🇽🇦🇷🇨🇴🇨🇱🇵🇪🇻🇪🇨🇺🇧🇪🇳🇱🇨🇭🇦🇹🇸🇪🇳🇴🇩🇰🇫🇮🇮🇪🇵🇱🇨🇿🇬🇷🇹🇷🇪🇬🇿🇦🇲🇦🇹🇳🇸🇦🇦🇪🇮🇱🇹🇭🇻🇳🇮🇩🇵🇭🇲🇾🇸🇬🇳🇿'
		},
	};

	// French + English keyword mapping for search
	const searchMap = {
		// Smileys & émotions
		'sourire': '😀😃😄😁😊☺🙂', 'smile': '😀😃😄😁😊☺🙂', 'happy': '😀😃😄😁😊😆',
		'rire': '😆😅🤣😂', 'laugh': '😆😅🤣😂', 'lol': '🤣😂', 'mdr': '🤣😂',
		'coeur': '❤🩷🧡💛💚💙🩵💜🖤💕💞💓💗💖💘💝', 'heart': '❤🩷🧡💛💚💙🩵💜🖤💕💞💓💗💖💘💝', 'amour': '❤💕💞💓💗💖💘💝😍🥰😘', 'love': '❤💕💞💓💗💖💘💝😍🥰😘',
		'triste': '😢😭😞😔🥺😿', 'sad': '😢😭😞😔🥺😿', 'pleurer': '😢😭', 'cry': '😢😭😿',
		'colere': '😠😡🤬👿', 'angry': '😠😡🤬👿', 'enerve': '😠😡🤬', 'rage': '🤬😡',
		'peur': '😨😱😰', 'fear': '😨😱😰', 'effraye': '😨😱😰', 'scared': '😨😱😰',
		'malade': '🤒🤕🤢🤮🤧😷', 'sick': '🤒🤕🤢🤮🤧😷', 'fievre': '🤒🤕🌡',
		'surprise': '😮😯😲😳🤯', 'etonne': '😮😯😲😳🤯', 'shocked': '😮😲😳🤯',
		'cool': '😎🤓🧐', 'swag': '😎🤙🕶',
		'bisou': '😘😗😚😙💋', 'kiss': '😘😗😚😙💋',
		'clin': '😉😜🤪', 'wink': '😉😜🤪',
		'diable': '😈👿👹👺', 'devil': '😈👿👹👺', 'demon': '😈👿👹',
		'mort': '💀☠👻', 'dead': '💀☠👻', 'fantome': '👻', 'ghost': '👻',
		'clown': '🤡', 'robot': '🤖', 'alien': '👽👾',
		'gene': '😅😬🫣🫠', 'shy': '🫣🙈😊', 'timide': '🫣🙈😊',
		'fatigue': '😴😪🥱😩', 'tired': '😴😪🥱😩', 'dormir': '😴💤🛌', 'sleep': '😴💤🛌',
		'reflechir': '🤔💭🧐', 'think': '🤔💭🧐', 'penser': '🤔💭',
		'content': '😊😁🥰🤗', 'joy': '😊😁🥰😆', 'joie': '😊😁🥰😆🎉',
		'plaisir': '😏😋🤤😜', 'yummy': '😋🤤', 'delicieux': '😋🤤',
		'nerd': '🤓🧐📚', 'geek': '🤓🧐🖥',
		'hug': '🤗🫂', 'calin': '🤗🫂🥰',
		'confused': '😕🫤😟🤷', 'perdu': '😕🫤😟🤷',
		'secret': '🤫🤐🫢', 'chut': '🤫🤐',
		'arghhh': '😤😡🤬', 'grr': '😤😠😡',
		'vomi': '🤮🤢', 'puke': '🤮🤢',
		// Gestes & mains
		'pouce': '👍👎', 'thumb': '👍👎', 'bravo': '👏🙌🎉👍', 'clap': '👏',
		'ok': '👌👍✅🆗', 'merci': '🙏🤝', 'prier': '🙏', 'pray': '🙏', 'thanks': '🙏🤝',
		'main': '👋🤚🖐✋🖖🫱🫲👐🤲', 'hand': '👋🤚🖐✋🖖🫱🫲👐🤲', 'wave': '👋',
		'doigt': '👈👉👆👇☝🫵🖕', 'finger': '👈👉👆👇☝🫵', 'point': '👈👉👆👇☝🫵',
		'poing': '✊👊🤛🤜', 'fist': '✊👊🤛🤜', 'force': '💪✊🦾', 'strong': '💪🦾',
		'victoire': '✌🤞🏆🥇', 'peace': '✌🤞', 'rock': '🤘🤟🎸',
		'applaudir': '👏🙌', 'salut': '👋🤚', 'hello': '👋🤚', 'bonjour': '👋🤚☀',
		'bye': '👋🤚', 'au revoir': '👋🤚',
		'ecrire': '✍🖊📝', 'write': '✍🖊📝',
		'muscle': '💪🦾🏋', 'bras': '💪🦾',
		'oreille': '👂🦻', 'ear': '👂🦻', 'nez': '👃', 'nose': '👃',
		'oeil': '👁👀', 'eye': '👁👀', 'yeux': '👀👁', 'voir': '👀👁🔍',
		'bouche': '👄💋🫦', 'mouth': '👄💋🫦', 'langue': '👅😛😜😝', 'tongue': '👅😛',
		'cerveau': '🧠💭', 'brain': '🧠💭',
		// Personnes & métiers
		'bebe': '👶🍼🧒', 'baby': '👶🍼', 'enfant': '🧒👦👧',
		'homme': '👨🧔🤵', 'man': '👨🧔', 'femme': '👩👸💃', 'woman': '👩👸💃',
		'famille': '👨‍👩‍👧‍👦👪🏠', 'family': '👨‍👩‍👧‍👦👪',
		'couple': '💑👫👬👭💏', 'amoureux': '💑💏❤😍',
		'vieux': '🧓👴👵', 'old': '🧓👴👵',
		'police': '👮🚔🚨🔫', 'policier': '👮🚔🚨',
		'docteur': '🧑‍⚕️👨‍⚕️👩‍⚕️🩺💉', 'doctor': '🧑‍⚕️🩺💉', 'medecin': '🧑‍⚕️🩺💉',
		'pompier': '🧑‍🚒🚒🔥', 'firefighter': '🧑‍🚒🚒',
		'cuisinier': '🧑‍🍳👨‍🍳👩‍🍳🍳', 'chef': '🧑‍🍳👨‍🍳🍳', 'cook': '🧑‍🍳🍳',
		'professeur': '🧑‍🏫👨‍🏫👩‍🏫📚', 'teacher': '🧑‍🏫📚',
		'etudiant': '🧑‍🎓👨‍🎓👩‍🎓📖', 'student': '🧑‍🎓📖',
		'scientifique': '🧑‍🔬🔬🧪', 'scientist': '🧑‍🔬🔬🧪',
		'artiste': '🧑‍🎨🎨🖌🖼', 'artist': '🧑‍🎨🎨🖌',
		'musicien': '🧑‍🎤🎤🎵🎸', 'singer': '🧑‍🎤🎤🎵',
		'astronaute': '🧑‍🚀🚀🌌', 'astronaut': '🧑‍🚀🚀',
		'fermier': '🧑‍🌾👨‍🌾🌾🚜', 'farmer': '🧑‍🌾🌾',
		'ninja': '🥷', 'pirate': '🏴‍☠️🦜⚓',
		'prince': '🤴👑', 'princesse': '👸👑💎', 'princess': '👸👑',
		'ange': '👼😇', 'angel': '👼😇',
		'zombie': '🧟', 'vampire': '🧛🦇', 'sorcier': '🧙🪄', 'wizard': '🧙🪄',
		'fee': '🧚✨🪄', 'fairy': '🧚✨', 'sirene': '🧜🌊', 'mermaid': '🧜🌊',
		'superhero': '🦸💥', 'heros': '🦸💥🦹',
		'danser': '💃🕺🪩', 'dance': '💃🕺🪩', 'danse': '💃🕺🪩',
		// Nature & météo
		'soleil': '☀🌞🌤🌅🌄', 'sun': '☀🌞🌤🌅🌄', 'sunny': '☀🌞🌤',
		'pluie': '🌧☔🌦💧', 'rain': '🌧☔🌦💧', 'rainy': '🌧☔🌦',
		'neige': '❄☃⛄🌨', 'snow': '❄☃⛄🌨', 'froid': '❄🥶⛄🌨', 'cold': '❄🥶⛄',
		'chaud': '🥵☀🔥🌡', 'hot': '🥵☀🔥🌡', 'chaleur': '🥵☀🔥🌡',
		'feu': '🔥🧯🕯', 'fire': '🔥🧯🕯', 'flamme': '🔥',
		'eau': '💧💦🌊🏊', 'water': '💧💦🌊', 'goutte': '💧💦',
		'vent': '💨🌬🌪', 'wind': '💨🌬🌪', 'orage': '⛈🌩⚡', 'storm': '⛈🌩⚡', 'thunder': '⛈🌩⚡',
		'nuage': '☁⛅🌥🌦🌧', 'cloud': '☁⛅🌥🌦🌧',
		'arc-en-ciel': '🌈', 'rainbow': '🌈',
		'lune': '🌙🌕🌖🌗🌘🌑🌒🌓🌔🌛🌜🌝🌚', 'moon': '🌙🌕🌛🌜🌝🌚',
		'eclair': '⚡🌩', 'lightning': '⚡🌩', 'tonnerre': '⛈🌩',
		'brouillard': '🌫', 'fog': '🌫',
		'tornade': '🌪', 'tornado': '🌪',
		'terre': '🌍🌎🌏🗺', 'earth': '🌍🌎🌏', 'monde': '🌍🌎🌏🗺', 'world': '🌍🌎🌏',
		'planete': '🪐🌍🌎🌏', 'planet': '🪐🌍', 'espace': '🌌🚀🛸🪐⭐', 'space': '🌌🚀🛸🪐',
		'volcan': '🌋🔥', 'volcano': '🌋',
		'desert': '🏜🐪☀🌵',
		'ocean': '🌊🐋🐬🦈🏊', 'mer': '🌊🐋🐬🦈🏖',
		'ile': '🏝🌴🏖', 'island': '🏝🌴',
		'foret': '🌲🌳🍃🌿', 'forest': '🌲🌳🍃',
		'coucher': '🌅🌇🌆', 'sunset': '🌅🌇', 'lever': '🌅🌄☀', 'sunrise': '🌄☀',
		'nuit': '🌙🌌🌃🌉✨', 'night': '🌙🌌🌃',
		// Animaux
		'chien': '🐶🐕🐩🦮🐕‍🦺', 'dog': '🐶🐕🐩', 'chiot': '🐶🐕', 'puppy': '🐶',
		'chat': '🐱🐈🐈‍⬛', 'cat': '🐱🐈🐈‍⬛', 'chaton': '🐱🐈',
		'oiseau': '🐦🐤🐣🐥🦆🦅🦉🕊🦜🦢🦩🦚', 'bird': '🐦🐤🦆🦅🦉🕊',
		'poisson': '🐟🐠🐡🎣🦈🐬🐳🐋', 'fish': '🐟🐠🐡🎣🦈',
		'papillon': '🦋', 'butterfly': '🦋', 'abeille': '🐝', 'bee': '🐝',
		'cheval': '🐴🐎🏇🦄', 'horse': '🐴🐎🏇🦄', 'licorne': '🦄', 'unicorn': '🦄',
		'singe': '🐵🐒🙈🙉🙊', 'monkey': '🐵🐒🙈🙉🙊',
		'cochon': '🐷🐽🐖', 'pig': '🐷🐽🐖', 'vache': '🐮🐄🐂', 'cow': '🐮🐄',
		'lapin': '🐰🐇', 'rabbit': '🐰🐇', 'ours': '🐻🐻‍❄️🧸', 'bear': '🐻🐻‍❄️🧸',
		'serpent': '🐍', 'snake': '🐍', 'tortue': '🐢', 'turtle': '🐢',
		'lion': '🦁👑', 'tigre': '🐯🐅', 'tiger': '🐯🐅',
		'elephant': '🐘', 'girafe': '🦒', 'giraffe': '🦒',
		'renard': '🦊', 'fox': '🦊', 'loup': '🐺', 'wolf': '🐺',
		'panda': '🐼🐻', 'koala': '🐨',
		'souris': '🐭🐁🐀', 'mouse': '🐭🐁🐀', 'rat': '🐀🐁',
		'grenouille': '🐸', 'frog': '🐸', 'crocodile': '🐊',
		'pingouin': '🐧', 'penguin': '🐧',
		'baleine': '🐋🐳', 'whale': '🐋🐳', 'dauphin': '🐬', 'dolphin': '🐬',
		'requin': '🦈', 'shark': '🦈',
		'pieuvre': '🐙', 'octopus': '🐙', 'crevette': '🦐', 'shrimp': '🦐',
		'crabe': '🦀', 'crab': '🦀', 'homard': '🦞', 'lobster': '🦞',
		'escargot': '🐌', 'snail': '🐌', 'coccinelle': '🐞', 'ladybug': '🐞',
		'fourmi': '🐜', 'ant': '🐜', 'araignee': '🕷🕸', 'spider': '🕷🕸',
		'mouche': '🪰', 'fly': '🪰', 'moustique': '🦟', 'mosquito': '🦟',
		'dinosaure': '🦕🦖', 'dinosaur': '🦕🦖', 'dragon': '🐉🐲',
		'mouton': '🐑🐏', 'sheep': '🐑🐏', 'chevre': '🐐', 'goat': '🐐',
		'chameau': '🐫🐪', 'camel': '🐫🐪',
		'aigle': '🦅', 'eagle': '🦅', 'hibou': '🦉', 'owl': '🦉',
		'perroquet': '🦜', 'parrot': '🦜', 'flamant': '🦩', 'flamingo': '🦩',
		'cygne': '🦢', 'swan': '🦢', 'paon': '🦚', 'peacock': '🦚',
		'canard': '🦆', 'duck': '🦆', 'poule': '🐔🐓🥚', 'chicken': '🐔🐓',
		'cerf': '🦌', 'deer': '🦌', 'biche': '🦌',
		'gorille': '🦍', 'gorilla': '🦍', 'orangoutan': '🦧',
		'hippopotame': '🦛', 'hippo': '🦛', 'rhinoceros': '🦏', 'rhino': '🦏',
		'zebre': '🦓', 'zebra': '🦓',
		'herisson': '🦔', 'hedgehog': '🦔', 'ecureuil': '🐿', 'squirrel': '🐿',
		'chauve-souris': '🦇', 'bat': '🦇',
		'scorpion': '🦂', 'lezard': '🦎', 'lizard': '🦎',
		'patte': '🐾', 'paw': '🐾', 'empreinte': '🐾👣',
		// Plantes
		'fleur': '🌸🌹🌺🌻🌷💐🌼🪻🥀', 'flower': '🌸🌹🌺🌻🌷💐🌼🪻🥀',
		'rose': '🌹🥀🩷', 'tournesol': '🌻', 'sunflower': '🌻', 'tulipe': '🌷', 'tulip': '🌷',
		'arbre': '🌲🌳🌴🎄🪵', 'tree': '🌲🌳🌴🎄🪵',
		'feuille': '🍃🍂🍁🌿☘🍀', 'leaf': '🍃🍂🍁🌿☘🍀',
		'plante': '🌱🌿🪴🌵🌾', 'plant': '🌱🌿🪴🌵🌾',
		'champignon': '🍄', 'mushroom': '🍄',
		'cactus': '🌵', 'bambou': '🎋', 'bamboo': '🎋',
		'trefle': '☘🍀', 'clover': '☘🍀', 'chance': '🍀🤞🎰',
		'bouquet': '💐🌹🌷', 'jardin': '🌱🌿🪴🌻🌷', 'garden': '🌱🌿🪴🌻',
		'herbe': '🌱🌿🌾', 'grass': '🌱🌿',
		// Nourriture & boissons
		'pizza': '🍕', 'burger': '🍔🍟', 'frites': '🍟', 'fries': '🍟',
		'gateau': '🎂🍰🧁🥧', 'cake': '🎂🍰🧁🥧', 'patisserie': '🧁🍰🥐🍩',
		'fruit': '🍇🍈🍉🍊🍋🍌🍍🍎🍏🍐🍑🍒🍓🫐🥝', 'pomme': '🍎🍏', 'apple': '🍎🍏',
		'banane': '🍌', 'banana': '🍌', 'orange': '🍊🟠', 'citron': '🍋', 'lemon': '🍋',
		'fraise': '🍓', 'strawberry': '🍓', 'cerise': '🍒', 'cherry': '🍒',
		'raisin': '🍇', 'grape': '🍇', 'pasteque': '🍉', 'watermelon': '🍉',
		'ananas': '🍍', 'pineapple': '🍍', 'peche': '🍑', 'peach': '🍑',
		'mangue': '🥭', 'mango': '🥭', 'kiwi': '🥝', 'noix coco': '🥥', 'coconut': '🥥',
		'avocat': '🥑', 'avocado': '🥑', 'tomate': '🍅', 'tomato': '🍅',
		'cafe': '☕🫖', 'coffee': '☕', 'the': '🍵🫖', 'tea': '🍵🫖',
		'vin': '🍷🍾🥂', 'wine': '🍷🍾🥂', 'biere': '🍺🍻', 'beer': '🍺🍻',
		'cocktail': '🍸🍹🧉', 'champagne': '🍾🥂',
		'glace': '🍦🍧🍨🧊', 'icecream': '🍦🍧🍨',
		'chocolat': '🍫🍩', 'bonbon': '🍬🍭', 'candy': '🍬🍭', 'sweet': '🍬🍭🍩🧁',
		'pain': '🍞🥐🥖🫓🥨🥯', 'bread': '🍞🥐🥖', 'croissant': '🥐', 'baguette': '🥖',
		'legume': '🥕🥦🥬🥒🌽🧅🧄🥔🍆🫑', 'vegetable': '🥕🥦🥬🥒🌽',
		'carotte': '🥕', 'carrot': '🥕', 'brocoli': '🥦', 'broccoli': '🥦',
		'mais': '🌽', 'corn': '🌽', 'salade': '🥗🥬', 'salad': '🥗🥬',
		'fromage': '🧀', 'cheese': '🧀', 'oeuf': '🥚🍳', 'egg': '🥚🍳',
		'viande': '🥩🍖🍗🥓', 'meat': '🥩🍖🍗', 'poulet': '🍗🐔',
		'sushi': '🍣🍱', 'riz': '🍚🍙', 'rice': '🍚🍙', 'nouille': '🍜🍝', 'noodle': '🍜🍝',
		'taco': '🌮', 'burrito': '🌯', 'sandwich': '🥪',
		'soupe': '🍲🥣', 'soup': '🍲🥣',
		'cookie': '🍪', 'biscuit': '🍪',
		'miel': '🍯🐝', 'honey': '🍯',
		'sel': '🧂', 'salt': '🧂', 'piment': '🌶🥵', 'pepper': '🌶',
		'restaurant': '🍽🍴🥢🧑‍🍳',
		'petit-dejeuner': '🥞🧇🍳☕🥐', 'breakfast': '🥞🧇🍳☕',
		// Transport & voyage
		'voiture': '🚗🚕🚙🏎', 'car': '🚗🚕🚙🏎', 'auto': '🚗🚕🚙',
		'avion': '✈🛩🛫🛬', 'plane': '✈🛩🛫🛬', 'flight': '✈🛩🛫🛬',
		'train': '🚂🚃🚄🚅🚆🚇🚈🚉', 'bus': '🚌🚎🚍', 'metro': '🚇🚈',
		'bateau': '🚢⛵🛶🚤⛴🛳', 'boat': '🚢⛵🛶🚤', 'ship': '🚢⛵🛳',
		'velo': '🚲🚴🏍🛵', 'bike': '🚲🚴', 'moto': '🏍🛵', 'motorcycle': '🏍🛵',
		'fusee': '🚀', 'rocket': '🚀', 'helicoptere': '🚁', 'helicopter': '🚁',
		'maison': '🏠🏡🏘', 'house': '🏠🏡🏘', 'home': '🏠🏡',
		'hotel': '🏨🏩', 'plage': '🏖🏝☀🌊🏄', 'beach': '🏖🏝🌊🏄',
		'montagne': '🏔⛰🗻🏕', 'mountain': '🏔⛰🗻',
		'taxi': '🚕🚖', 'ambulance': '🚑🏥', 'camion': '🚛🚚', 'truck': '🚛🚚',
		'trottinette': '🛴', 'scooter': '🛴🛵', 'skateboard': '🛹',
		'essence': '⛽🛞', 'fuel': '⛽', 'parking': '🅿🚗',
		'feu rouge': '🚦🚥', 'traffic': '🚦🚥🚗',
		'voyage': '🧳✈🗺🏖🌍', 'travel': '🧳✈🗺🌍', 'vacances': '🏖🏝✈🌴🧳', 'vacation': '🏖🏝✈',
		'carte': '🗺🧭📍', 'map': '🗺🧭📍',
		'camping': '🏕⛺🔥🌲', 'tent': '⛺🏕',
		'eglise': '⛪🕊', 'church': '⛪', 'mosquee': '🕌', 'mosque': '🕌',
		'chateau': '🏰🏯👑', 'castle': '🏰🏯',
		'statue': '🗽🗿', 'monument': '🗽🗿🏛',
		'pont': '🌉🌁', 'bridge': '🌉🌁',
		'usine': '🏭', 'factory': '🏭', 'bureau': '🏢💼🖥', 'office': '🏢💼',
		'ecole': '🏫📚✏🧑‍🏫', 'school': '🏫📚✏',
		'banque': '🏦💰💳', 'bank': '🏦💰',
		'magasin': '🏪🛍🛒', 'shop': '🏪🛍🛒', 'boutique': '🏪🛍',
		'ancre': '⚓🚢', 'anchor': '⚓',
		// Communication & tech
		'telephone': '📱📲☎📞', 'phone': '📱📲☎📞', 'appel': '📱📞☎',
		'mail': '📧📩✉📨💌', 'email': '📧📩✉📨💌', 'lettre': '✉📩📨💌', 'message': '💬📩✉📧',
		'ordinateur': '💻🖥⌨🖱', 'computer': '💻🖥⌨🖱', 'pc': '💻🖥',
		'photo': '📷📸🖼🎞', 'camera': '📷📸🎥📹🎬',
		'musique': '🎵🎶🎼🎹🎸🎷🎺🎻🥁🎤🎧', 'music': '🎵🎶🎼🎹🎸🎷🎺🎻🥁',
		'video': '📹🎥🎬📽🎞', 'film': '🎬🎥📽🎞🍿', 'cinema': '🎬🎥🍿',
		'television': '📺📡', 'tv': '📺📡',
		'radio': '📻🎙',
		'batterie': '🔋🪫🔌', 'battery': '🔋🪫',
		'wifi': '📶📡', 'internet': '📶🌐💻',
		'micro': '🎙🎤', 'microphone': '🎙🎤',
		'casque': '🎧', 'headphone': '🎧',
		'imprimante': '🖨📄', 'printer': '🖨',
		'disque': '💿💾📀🖴', 'disk': '💿💾📀',
		'satellite': '📡🛰',
		'joystick': '🕹🎮', 'manette': '🎮🕹',
		'clavier': '⌨🖥', 'keyboard': '⌨',
		'ecran': '🖥📺💻📱', 'screen': '🖥📺💻',
		'guitare': '🎸🎵', 'guitar': '🎸', 'piano': '🎹🎵', 'violon': '🎻', 'violin': '🎻',
		'trompette': '🎺', 'trumpet': '🎺', 'saxophone': '🎷', 'tambour': '🥁', 'drum': '🥁',
		// Sport & activités
		'sport': '⚽🏀🏈⚾🎾🏐🏉🥏🎱🏆', 'football': '⚽🏈', 'basket': '🏀', 'basketball': '🏀',
		'tennis': '🎾🏸', 'natation': '🏊🤽', 'swim': '🏊🤽', 'nager': '🏊🤽',
		'ski': '⛷🎿🏂', 'surf': '🏄🌊', 'snowboard': '🏂',
		'trophee': '🏆🥇🥈🥉🏅🎖', 'trophy': '🏆🥇🥈🥉', 'medaille': '🏅🎖🥇🥈🥉', 'medal': '🏅🎖🥇',
		'golf': '⛳🏌', 'rugby': '🏉',
		'boxe': '🥊🥋', 'boxing': '🥊', 'karate': '🥋',
		'baseball': '⚾🥎', 'volleyball': '🏐',
		'ping-pong': '🏓', 'badminton': '🏸',
		'escrime': '🤺', 'fencing': '🤺',
		'escalade': '🧗🏔', 'climbing': '🧗',
		'yoga': '🧘🧘‍♀️🧘‍♂️', 'meditation': '🧘🙏',
		'course': '🏃🏃‍♂️🏃‍♀️🏅', 'run': '🏃🏅', 'courir': '🏃🏅',
		'marcher': '🚶🚶‍♂️🚶‍♀️', 'walk': '🚶',
		'gym': '🏋🏋‍♂️🏋‍♀️💪', 'musculation': '🏋💪',
		'jeu': '🎮🎲🃏🎯🎰🧩', 'game': '🎮🎲🃏🎯', 'jouer': '🎮🎲🎯',
		'carte jeu': '🃏🎴', 'des': '🎲', 'dice': '🎲',
		'cible': '🎯', 'target': '🎯', 'billard': '🎱', 'pool': '🎱',
		'puzzle': '🧩',
		'peche': '🎣🐟', 'fishing': '🎣',
		'equitation': '🏇🐴', 'riding': '🏇',
		'bowling': '🎳',
		// Symboles & signes
		'star': '⭐🌟✨💫', 'etoile': '⭐🌟✨💫',
		'check': '✅✔☑', 'valide': '✅✔☑👍', 'croix': '❌✖❎',
		'fleche': '➡⬅⬆⬇↗↘↙↖↕↔', 'arrow': '➡⬅⬆⬇↗↘↙↖',
		'rond': '🔴🟠🟡🟢🔵🟣⚫⚪🟤', 'cercle': '🔴🟠🟡🟢🔵🟣⚫⚪⭕',
		'attention': '⚠🚨❗❕🔔', 'warning': '⚠🚨❗❕',
		'interdit': '🚫⛔🚷🚯🚳🚱🔞📵', 'stop': '🛑⛔🚫✋',
		'info': 'ℹ💡❓❔', 'question': '❓❔🤔',
		'argent': '💰💵💴💶💷💲🪙💳', 'money': '💰💵💴💶💷💲🪙💳', 'euro': '💶💰', 'dollar': '💵💲💰',
		'cadeau': '🎁🎀🎊🎉', 'gift': '🎁🎀', 'present': '🎁🎀',
		'fete': '🎉🎊🥳🎈🎆🎇🪅🎂', 'party': '🎉🎊🥳🎈', 'celebration': '🎉🎊🥳🎆',
		'noel': '🎄🎅🤶🎁⛄❄🌟', 'christmas': '🎄🎅🤶🎁⛄❄',
		'halloween': '🎃👻💀🦇🕷🕸🧛🧟', 'citrouille': '🎃', 'pumpkin': '🎃',
		'anniversaire': '🎂🎈🎉🥳🎁🕯', 'birthday': '🎂🎈🎉🥳🎁',
		'mariage': '💒💍👰🤵💕', 'wedding': '💒💍👰🤵',
		'paques': '🐰🥚🐣🌷', 'easter': '🐰🥚🐣',
		'nouvel an': '🎆🎇🥂🎉🕛', 'new year': '🎆🎇🥂🎉',
		'feu artifice': '🎆🎇✨', 'firework': '🎆🎇',
		'ballon': '🎈🏐⚽🏀', 'balloon': '🎈',
		'confetti': '🎊🎉',
		'ruban': '🎀🎗', 'ribbon': '🎀🎗',
		'carre': '🟥🟧🟨🟩🟦🟪⬛⬜🟫', 'square': '🟥🟧🟨🟩🟦🟪⬛⬜',
		'rouge': '🔴🟥❤🩷', 'red': '🔴🟥❤',
		'bleu': '🔵🟦💙🩵', 'blue': '🔵🟦💙',
		'vert': '🟢🟩💚', 'green': '🟢🟩💚',
		'jaune': '🟡🟨💛', 'yellow': '🟡🟨💛',
		'violet': '🟣🟪💜', 'purple': '🟣🟪💜',
		'noir': '⚫⬛🖤🏴', 'black': '⚫⬛🖤',
		'blanc': '⚪⬜🤍', 'white': '⚪⬜🤍',
		'orange couleur': '🟠🟧🧡',
		'marron': '🟤🟫🤎', 'brown': '🟤🟫🤎',
		'plus': '➕✚', 'moins': '➖', 'minus': '➖',
		'multiplier': '✖❌', 'diviser': '➗',
		'infini': '♾', 'infinity': '♾',
		'recycler': '♻🔄', 'recycle': '♻',
		'radioactif': '☢', 'danger': '☢☣⚠🚨',
		'paix': '☮✌🕊', 'religion': '✝☪🕉☸✡🛐',
		'zodiaque': '♈♉♊♋♌♍♎♏♐♑♒♓', 'zodiac': '♈♉♊♋♌♍♎♏♐♑♒♓',
		'musique note': '🎵🎶🎼♩♪', 'note': '🎵🎶📝',
		'haut-parleur': '🔊🔉🔈📢📣', 'speaker': '🔊📢', 'son': '🔊🔉🔈🔔',
		'silence': '🔇🤫', 'mute': '🔇',
		'cloche': '🔔🛎🔕', 'bell': '🔔🛎',
		// Objets & quotidien
		'porte': '🚪', 'door': '🚪', 'cle': '🔑🗝', 'key': '🔑🗝',
		'chaise': '🪑', 'chair': '🪑', 'lit': '🛏🛌🛋', 'bed': '🛏🛌',
		'canape': '🛋', 'sofa': '🛋', 'lampe': '💡🔦🕯🪔', 'lamp': '💡🔦',
		'ampoule': '💡', 'bougie': '🕯🪔', 'candle': '🕯🪔',
		'miroir': '🪞', 'mirror': '🪞', 'fenetre': '🪟', 'window': '🪟',
		'montre': '⌚⏱⏲⏰🕰', 'watch': '⌚⏱⏲⏰', 'horloge': '⏰🕰⌛⏳', 'clock': '⏰🕰',
		'livre': '📖📚📕📗📘📙📓📔', 'book': '📖📚📕📗📘📙',
		'crayon': '✏✒🖋🖊', 'pencil': '✏✒🖋🖊', 'stylo': '🖊🖋✒', 'pen': '🖊🖋✒',
		'ciseaux': '✂', 'scissors': '✂',
		'sac': '🛍👜👛🎒💼🧳', 'bag': '🛍👜👛🎒💼',
		'valise': '🧳💼', 'suitcase': '🧳',
		'parapluie': '☂☔🌂', 'umbrella': '☂☔🌂',
		'poubelle': '🗑', 'trash': '🗑', 'corbeille': '🗑',
		'outils': '🧰🔧🔩🪛🪜🔨', 'tools': '🧰🔧🔩🪛',
		'marteau': '🔨', 'hammer': '🔨', 'tournevis': '🪛', 'screwdriver': '🪛',
		'peinture': '🖌🎨🖍', 'paint': '🖌🎨', 'art': '🎨🖼🖌🖍',
		'lunettes': '👓🕶🥽', 'glasses': '👓🕶🥽',
		'chapeau': '🎩🧢👒🪖', 'hat': '🎩🧢👒',
		'couronne': '👑', 'crown': '👑', 'roi': '🤴👑', 'king': '🤴👑', 'reine': '👸👑', 'queen': '👸👑',
		'diamant': '💎', 'diamond': '💎', 'bijou': '💍💎', 'jewelry': '💍💎👑',
		'bague': '💍', 'ring': '💍',
		'toilettes': '🚽🚾🧻', 'wc': '🚽🚾', 'toilet': '🚽🚾',
		'douche': '🚿🛁🧼', 'shower': '🚿', 'bain': '🛁🛀', 'bath': '🛁🛀',
		'savon': '🧼', 'soap': '🧼',
		'medicament': '💊💉🩹🩺', 'medicine': '💊💉🩹🩺', 'hopital': '🏥💊🩺🚑', 'hospital': '🏥🚑🩺',
		'dent': '🦷🪥', 'tooth': '🦷🪥', 'brosse': '🪥🧹',
		'os': '🦴', 'bone': '🦴',
		'cadenas': '🔒🔓🔐', 'lock': '🔒🔓🔐', 'securite': '🔒🛡🔐', 'security': '🔒🛡',
		'bouclier': '🛡', 'shield': '🛡',
		'epee': '⚔🗡', 'sword': '⚔🗡',
		'bombe': '💣🧨', 'bomb': '💣🧨', 'explosion': '💥💣🧨',
		'cigarette': '🚬🚭',
		'loupe': '🔍🔎', 'search': '🔍🔎', 'chercher': '🔍🔎',
		'ampoule idee': '💡✨', 'idea': '💡✨🤔', 'idee': '💡✨',
		'papier': '📄📃📝📋', 'paper': '📄📃📝',
		'dossier': '📁📂🗂', 'folder': '📁📂🗂', 'fichier': '📄📁📂',
		'calendrier': '📅📆🗓', 'calendar': '📅📆🗓', 'date': '📅📆',
		'epingle': '📌📍', 'pin': '📌📍',
		'trombone': '📎🖇', 'clip': '📎🖇',
		'regle': '📏📐', 'ruler': '📏📐',
		'calculatrice': '🧮', 'calculator': '🧮',
		'boite': '📦📥📤', 'box': '📦', 'colis': '📦📮',
		'courrier': '📮📬📭📫📪', 'mailbox': '📮📬📭',
		'journal': '📰📄', 'newspaper': '📰',
		'tableau': '🖼🎨📊📋', 'picture': '🖼📷',
		'jumelles': '🔭🧐', 'telescope': '🔭',
		'microscope': '🔬🧑‍🔬',
		'aimant': '🧲', 'magnet': '🧲',
		'echelle': '🪜', 'ladder': '🪜',
		'corde': '🪢', 'rope': '🪢', 'noeud': '🪢🎀',
		'sablier': '⌛⏳', 'hourglass': '⌛⏳', 'temps': '⏰⌛⏳🕐',
		'time': '⏰⌛⏳🕐', 'heure': '🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛',
		// Vêtements
		'vetement': '👔👕👖👗🧥🥻', 'clothes': '👔👕👖👗🧥',
		'tshirt': '👕', 'chemise': '👔', 'shirt': '👔👕',
		'pantalon': '👖', 'pants': '👖', 'jean': '👖',
		'robe': '👗', 'dress': '👗',
		'manteau': '🧥🧣', 'coat': '🧥', 'veste': '🧥🧣',
		'echarpe': '🧣', 'scarf': '🧣', 'gant': '🧤', 'glove': '🧤',
		'chaussette': '🧦', 'sock': '🧦',
		'chaussure': '👞👟🥾👠👡🩴', 'shoe': '👞👟🥾👠',
		'botte': '👢🥾', 'boot': '👢🥾', 'talon': '👠👡',
		'cravate': '👔🎀', 'tie': '👔',
		'maillot': '👙🩱🩲🏊', 'swimsuit': '👙🩱',
		'costume': '🤵👔💼', 'suit': '🤵👔',
		// Drapeaux
		'france': '🇫🇷', 'drapeau': '🏁🚩🎌🏴🏳🏳️‍🌈', 'flag': '🏁🚩🎌🏴🏳',
		'europe': '🇪🇺🇫🇷🇩🇪🇪🇸🇮🇹🇧🇪🇳🇱🇵🇹🇦🇹🇬🇷',
		'usa': '🇺🇸', 'amerique': '🇺🇸🗽', 'angleterre': '🇬🇧', 'england': '🇬🇧',
		'espagne': '🇪🇸', 'spain': '🇪🇸', 'italie': '🇮🇹', 'italy': '🇮🇹',
		'allemagne': '🇩🇪', 'germany': '🇩🇪', 'portugal': '🇵🇹',
		'japon': '🇯🇵', 'japan': '🇯🇵', 'chine': '🇨🇳', 'china': '🇨🇳',
		'bresil': '🇧🇷', 'brazil': '🇧🇷', 'canada': '🇨🇦',
		'maroc': '🇲🇦', 'tunisie': '🇹🇳', 'algerie': '🇩🇿',
		'belgique': '🇧🇪', 'suisse': '🇨🇭', 'switzerland': '🇨🇭',
	};

	// Base code points with a "text" default presentation: they need the
	// VS-16 (U+FE0F) variation selector to render as colored emoji instead of
	// a monochrome text glyph. Source: emoji-variation-sequences.txt.
	const TEXT_DEFAULT_EMOJI = /^[\u00a9\u00ae\u203c\u2049\u2122\u2139\u2194-\u2199\u21a9\u21aa\u231a\u231b\u2328\u23cf\u23e9-\u23f3\u23f8-\u23fa\u24c2\u25aa\u25ab\u25b6\u25c0\u25fb-\u25fe\u2600-\u2604\u260e\u2611\u2614\u2615\u2618\u261d\u2620\u2622\u2623\u2626\u262a\u262e\u262f\u2638-\u263a\u2640\u2642\u2648-\u2653\u265f\u2660\u2663\u2665\u2666\u2668\u267b\u267e\u267f\u2692-\u2697\u2699\u269b\u269c\u26a0\u26a1\u26a7\u26aa\u26ab\u26b0\u26b1\u26bd\u26be\u26c4\u26c5\u26c8\u26cf\u26d1\u26d3\u26d4\u26e9\u26ea\u26f0-\u26f5\u26f7-\u26fa\u26fd\u2702\u2708\u2709\u270c\u270d\u270f\u2712\u2714\u2716\u271d\u2721\u2733\u2734\u2744\u2747\u2753\u2757\u2763\u2764\u27a1\u2934\u2935\u2b05-\u2b07\u2b1b\u2b1c\u2b50\u2b55\u3030\u303d\u3297\u3299]$/;

	function normalizeEmoji(char) {
		if (!char) return char;
		// Leave compound emojis (ZWJ sequences, flag pairs, already-VS-16 chars…) alone
		if (char.length !== 1 || char.charCodeAt(0) === 0xfe0f) return char;
		if (TEXT_DEFAULT_EMOJI.test(char)) return char + '\ufe0f';
		return char;
	}

	return {
		open: false,
		targetId: null,
		search: '',
		activeCategory: 'smileys',

		get categories() {
			return Object.entries(emojiData).map(([key, val]) => ({ key, icon: val.icon, label: val.label }));
		},

		get filteredEmojis() {
			if (this.search.trim()) {
				const q = this.search.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
				// Search in keyword map first
				let results = '';
				for (const [keyword, emojis] of Object.entries(searchMap)) {
					if (keyword.includes(q)) results += emojis;
				}
				// Also search all emojis from all categories
				if (!results) {
					results = Object.values(emojiData).map(c => c.emojis).join('');
				}
				return [...new Set([...results])].filter(c => c.trim()).map(normalizeEmoji);
			}
			const cat = emojiData[this.activeCategory];
			return cat ? [...cat.emojis].filter(c => c.trim()).map(normalizeEmoji) : [];
		},

		openPicker(detail) {
			this.targetId = detail.targetId;
			this.search = '';
			this.activeCategory = 'smileys';
			this.open = true;
			this.$nextTick(() => this.$refs.searchInput?.focus());
		},

		selectEmoji(emoji) {
			// filteredEmojis already returns normalized chars, but double-normalize
			// defensively in case a caller passes a raw code point.
			const normalized = normalizeEmoji(emoji);
			window.dispatchEvent(new CustomEvent('emoji:selected', {
				detail: { targetId: this.targetId, emoji: normalized }
			}));
			this.open = false;
		},
	};
}
</script>
	<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		function wysiwygImageModal() {
			return {
				isOpen: false,
				activeTab: 'upload',
				targetEditorId: null,

				// Upload tab
				isDragging: false,
				isUploading: false,
				uploadedUrls: [],
				uploadError: '',

				// URL tab
				imageUrl: '',

				// Unsplash tab
				searchQuery: '',
				photos: [],
				selectedPhotos: [],
				isSearching: false,
				hasSearched: false,
				currentPage: 1,
				totalPages: 0,
				categories: ['Plage', 'Montagne', 'Ville', 'Nature', 'Restaurant', 'Hotel', 'Piscine', 'Jardin', 'Interieur', 'Terrasse'],

				// Layout
				selectedLayout: 1,

				open(detail) {
					this.targetEditorId = detail?.editorId || null;
					this.isOpen = true;
					this.resetAll();

					const category = detail?.category;
					if (category && category.trim()) {
						this.activeTab = 'unsplash';
						this.searchQuery = category.trim();
						this.$nextTick(() => this.searchUnsplash());
					}
				},

				close() {
					this.isOpen = false;
				},

				resetAll() {
					this.activeTab = 'upload';
					this.isDragging = false;
					this.isUploading = false;
					this.uploadedUrls = [];
					this.uploadError = '';
					this.imageUrl = '';
					this.searchQuery = '';
					this.photos = [];
					this.selectedPhotos = [];
					this.isSearching = false;
					this.hasSearched = false;
					this.currentPage = 1;
					this.totalPages = 0;
					this.selectedLayout = 1;
				},

				handleDrop(event) {
					const files = event.dataTransfer?.files;
					if (files?.length) this.uploadFiles(Array.from(files));
				},

				handleFileSelect(event) {
					const files = event.target.files;
					if (files?.length) this.uploadFiles(Array.from(files));
					event.target.value = '';
				},

				async uploadFiles(files) {
					const imageFiles = files.filter(f => f.type.startsWith('image/'));
					if (!imageFiles.length) {
						this.uploadError = 'No valid image selected.';
						return;
					}
					const oversized = imageFiles.filter(f => f.size > 10 * 1024 * 1024);
					if (oversized.length) {
						this.uploadError = oversized.length + ' image(s) depasse(nt) 10 Mo.';
						return;
					}

					this.uploadError = '';
					this.isUploading = true;

					const results = await Promise.allSettled(
						imageFiles.map(f => this.uploadSingleFile(f))
					);

					let errorCount = 0;
					results.forEach(r => {
						if (r.status === 'fulfilled' && r.value) {
							this.uploadedUrls.push(r.value);
						} else {
							errorCount++;
						}
					});

					this.isUploading = false;

					if (errorCount > 0 && this.uploadedUrls.length === 0) {
						this.uploadError = 'Erreur lors de l\'envoi des images.';
					} else if (errorCount > 0) {
						this.uploadError = errorCount + ' image(s) n\'ont pas pu etre envoyee(s).';
					}

					this.autoSuggestLayout(this.uploadedUrls.length);
				},

				async uploadSingleFile(file) {
					const formData = new FormData();
					formData.append('image', file);

					try {
						const response = await fetch("https:\/\/app.styqr.fr\/api\/wysiwyg\/upload-image", {
							method: 'POST',
							body: formData,
							headers: {
								'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
								'X-Requested-With': 'XMLHttpRequest',
								'Accept': 'application/json',
							},
						});

						const data = await response.json();
						return data.success ? data.url : null;
					} catch (err) {
						console.error('WYSIWYG upload error:', err);
						return null;
					}
				},

				removeUploadedImage(index) {
					this.uploadedUrls.splice(index, 1);
					this.autoSuggestLayout(this.uploadedUrls.length);
				},

				insertFromUpload() {
					if (!this.uploadedUrls.length) return;
					this.insertImages(this.uploadedUrls);
				},

				async searchUnsplash() {
					if (!this.searchQuery.trim()) return;
					this.isSearching = true;
					this.currentPage = 1;
					this.photos = [];
					this.selectedPhotos = [];

					try {
						const response = await fetch(
							"https:\/\/app.styqr.fr\/api\/unsplash\/search" + '?query=' + encodeURIComponent(this.searchQuery) + '&page=1',
							{ headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } }
						);
						const data = await response.json();
						if (data.photos) {
							this.photos = data.photos;
							this.totalPages = data.total_pages;
						}
					} catch (err) {
						console.error('Unsplash search error:', err);
					} finally {
						this.isSearching = false;
						this.hasSearched = true;
					}
				},

				async loadMoreUnsplash() {
					if (this.isSearching || this.currentPage >= this.totalPages) return;
					this.isSearching = true;
					this.currentPage++;
					try {
						const response = await fetch(
							"https:\/\/app.styqr.fr\/api\/unsplash\/search" + '?query=' + encodeURIComponent(this.searchQuery) + '&page=' + this.currentPage,
							{ headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } }
						);
						const data = await response.json();
						if (data.photos) this.photos = [...this.photos, ...data.photos];
					} catch (err) {
						console.error('Unsplash load more error:', err);
					} finally {
						this.isSearching = false;
					}
				},

				handleUnsplashScroll(event) {
					const el = event.target;
					if (el.scrollTop + el.clientHeight >= el.scrollHeight - 100) {
						this.loadMoreUnsplash();
					}
				},

				togglePhotoSelection(photo) {
					const idx = this.selectedPhotos.findIndex(p => p.id === photo.id);
					if (idx >= 0) {
						this.selectedPhotos.splice(idx, 1);
					} else {
						this.selectedPhotos.push(photo);
					}
					this.autoSuggestLayout(this.selectedPhotos.length);
				},

				isPhotoSelected(photo) {
					return this.selectedPhotos.some(p => p.id === photo.id);
				},

				async confirmUnsplash() {
					if (!this.selectedPhotos.length) return;

					const trackPromises = this.selectedPhotos.map(photo =>
						fetch("https:\/\/app.styqr.fr\/api\/unsplash\/download", {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json',
								'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
								'X-Requested-With': 'XMLHttpRequest',
							},
							body: JSON.stringify({
								download_url: photo.download_url,
								photo_url: photo.url,
							}),
						}).catch(err => console.error('Download tracking error:', err))
					);

					Promise.allSettled(trackPromises);

					this.insertImages(this.selectedPhotos.map(p => p.url));
				},

				autoSuggestLayout(count) {
					if (count >= 4) this.selectedLayout = 4;
					else if (count >= 3) this.selectedLayout = 3;
					else if (count >= 2) this.selectedLayout = 2;
					else this.selectedLayout = 1;
				},

				insertImages(urls) {
					window.dispatchEvent(new CustomEvent('wysiwyg:insert-image', {
						detail: { urls, layout: this.selectedLayout, editorId: this.targetEditorId }
					}));
					this.close();
				},

				insertSingleImage(url) {
					window.dispatchEvent(new CustomEvent('wysiwyg:insert-image', {
						detail: { urls: [url], layout: 1, editorId: this.targetEditorId }
					}));
					this.close();
				},
			};
		}
	</script>
	<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		function wysiwygVideoModal() {
			return {
				isOpen: false,
				videoUrl: '',
				targetEditorId: null,
				detectedPlatform: null,
				embedUrl: null,
				videoId: null,

				open(detail) {
					this.targetEditorId = detail?.editorId || null;
					this.isOpen = true;
					this.videoUrl = '';
					this.detectedPlatform = null;
					this.embedUrl = null;
					this.videoId = null;
				},

				close() {
					this.isOpen = false;
				},

				detectPlatform() {
					const url = this.videoUrl.trim();
					this.videoId = null;
					if (!url) {
						this.detectedPlatform = null;
						this.embedUrl = null;
						return;
					}

					if (url.match(/youtube\.com|youtu\.be/i)) {
						this.detectedPlatform = 'youtube';
						const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
						this.videoId = match ? match[1] : null;
						this.embedUrl = match ? `https://www.youtube.com/embed/${match[1]}` : null;
					} else if (url.match(/vimeo\.com/i)) {
						this.detectedPlatform = 'vimeo';
						const match = url.match(/vimeo\.com\/(\d+)/);
						this.embedUrl = match ? `https://player.vimeo.com/video/${match[1]}` : null;
					} else if (url.match(/drive\.google\.com/i)) {
						this.detectedPlatform = 'drive';
						const match = url.match(/drive\.google\.com\/file\/d\/([a-zA-Z0-9_-]+)/);
						this.embedUrl = match ? `https://drive.google.com/file/d/${match[1]}/preview` : null;
					} else {
						this.detectedPlatform = 'other';
						this.embedUrl = null;
					}
				},

				insertVideo() {
					if (!this.embedUrl) return;

					window.dispatchEvent(new CustomEvent('wysiwyg:insert-video', {
						detail: {
							url: this.videoUrl,
							embedUrl: this.embedUrl,
							platform: this.detectedPlatform,
							editorId: this.targetEditorId,
						}
					}));

					this.close();
				},
			};
		}
	</script>
<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
function aiPublicPanel() {
    return {
        open: false,
        teaser: false,
        contact: null,
        human: false,
        humanEmail: '',
        input: '',
        messages: [],
        liveText: '',
        streaming: false,
        t: {"contact":{"title":"Let me connect you with the team","subtitle":"Enter your email address: the team will know who you are and can find your account.","title-closed":"The team is not available right now","title-weekend":"Nobody is on duty this weekend","subtitle-closed":"Leave your email and message: the team will reply, :when at the latest.","email-placeholder":"Your email address","message-placeholder":"Describe your problem\u2026","open":"Continue","send":"Send","sending":"Sending\u2026","cancel":"Cancel","sent":"Noted! The team will reply by email, :when at the latest.","sent-weekend":"Sent! The team already has your message: an answer is possible today, and :when at the latest.","back":"Back to Styky"},"fab":"A question? Styky can help","teaser":"Hi, I\u0027m Styky, trouble signing in, or a question about StyQR?","title":"Styky","subtitle":"StyQR\u0027s AI assistant","welcome":"Hello! I can help you get back into your account or answer your questions about StyQR.","placeholder":"Your question\u2026","thinking":"Styky is thinking\u2026","suggestions":["I can\u0027t sign in","I forgot my password","What exactly is StyQR?"],"errors":{"unavailable":"I\u0027m unavailable right now : please try again shortly.","rate-limit":"One moment, too many requests in a row. Try again in a minute.","daily-limit":"Daily limit reached : use \u0022Talk to a human\u0022 below.","network":"Network error, please try again."}},
        // Le fil de cet échange : il regroupe les questions côté serveur et
        // rattache une demande d'humain à la conversation qui la précède.
        thread: (window.crypto && crypto.randomUUID ? crypto.randomUUID() : ('t' + Date.now().toString(36) + Math.random().toString(36).slice(2, 10))).toLowerCase(),
        get suggestions() { return this.t.suggestions || []; },

        // « Parler à un humain » TAPÉ dans le champ : on ouvre la mise en
        // relation au lieu de demander au modèle où est le bouton — il
        // répondait « en bas à droite » à des gens qui ne le voyaient pas.
        wantsHuman(text) {
            const t = text.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[\u2018\u2019]/g, "'").trim();
            return /\b(parler|discuter|echanger)\s+(a|avec)\s+((un|une)\s+(humain|personne|conseill\w*|agent|vraie?\s+personne)|quelqu'?un|l'?equipe)\b/.test(t)
                || /\b(talk|speak|chat)\s+(to|with)\s+(a\s+)?(human|person|real person|agent|someone)\b/.test(t)
                || /\bhablar\s+con\s+(un|una)\s+(humano|persona|agente)\b/.test(t)
                || /\bmit\s+einem\s+menschen\b/.test(t)
                || /\bparlare\s+con\s+(un|una)\s+(umano|persona|operatore)\b/.test(t)
                || /\bfalar\s+com\s+(um|uma)\s+(humano|pessoa)\b/.test(t)
                || /^(un\s+)?(humain|conseiller|human|agent|support)\s*[.!?]*$/.test(t);
        },

        init() {
            // Crisp masqué : Styky est la porte d'entrée ici aussi.
            try {
                const hide = () => { try { window.$crisp && window.$crisp.push(['do', 'chat:hide']); } catch (e) {} };
                hide();
                window.$crisp && window.$crisp.push(['on', 'chat:closed', hide]);
                window.addEventListener('load', hide);
            } catch (e) { /* Crisp absent */ }

            // Bulle après 30 s : quelqu'un bloqué à la connexion a besoin
            // d'aide vite. Une seule fois par appareil.
            try {
                if (localStorage.getItem('styky_public_teaser_seen') === '1') return;
            } catch (e) { return; }
            setTimeout(() => {
                if (this.open) return;
                this.teaser = true;
                try { localStorage.setItem('styky_public_teaser_seen', '1'); } catch (e) {}
                setTimeout(() => { this.teaser = false; }, 12000);
            }, 30000);
        },

        show() {
            this.open = true;
            this.$nextTick(() => {
                this.$refs.input?.focus();
                // Même règle que dans le back-office : on rouvre sur l'accueil,
                // pas là où l'on avait laissé le défilement.
                if (this.messages.length === 0 && this.$refs.scroller) this.$refs.scroller.scrollTop = 0;
            });
        },

        // « Parler à un humain ». Le formulaire et la fenêtre de l'équipe
        // étaient dessinés depuis le 31/07, mais leur code n'avait jamais été
        // écrit : le bouton ouvrait la bulle Crisp à toute heure, y compris la
        // nuit, où personne ne la lit avant le lendemain. Le serveur dit
        // maintenant si l'équipe est là, et le panneau suit : l'email d'abord
        // (quelqu'un qui n'arrive pas à se connecter, on ne sait pas qui c'est),
        // puis la discussion dans le panneau — ou, fermé, un message recueilli.
        async talkToHuman() {
            let data = null;
            try {
                const res = await fetch("https:\/\/app.styqr.fr\/ai\/public\/escalate", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '' },
                    body: JSON.stringify({ page: window.location.pathname, thread: this.thread }),
                });
                if (res.ok) data = await res.json();
            } catch (e) { /* réseau : repli plus bas */ }

            // Serveur muet : l'ancien geste, la bulle Crisp, plutôt que rien.
            if (!data) {
                try {
                    window.$crisp && window.$crisp.push(['do', 'chat:show']);
                    window.$crisp && window.$crisp.push(['do', 'chat:open']);
                    this.open = false;
                } catch (e) { /* Crisp absent */ }
                return;
            }

            this.human = false;
            this.contact = {
                email: '',
                message: '',
                needsMessage: data.support_open === false,
                bestEffort: data.support_status === 'best_effort',
                reopensAt: data.reopens_at || '',
                sending: false,
                sent: false,
            };
            this.open = true;
        },

        validEmail() {
            return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test((this.contact?.email || '').trim());
        },

        // Les dernières questions posées à Styky : l'équipe sait d'où l'on
        // vient sans le redemander.
        recentQuestions() {
            return this.messages.filter(m => m.kind === 'user').slice(-3).map(m => m.text.slice(0, 300)).join(' | ');
        },

        async submitContact() {
            const c = this.contact;
            if (!c || c.sending || !this.validEmail()) return;
            const email = c.email.trim();

            // Équipe là : la discussion s'ouvre DANS le panneau, l'email part
            // avec elle — l'équipe répond à la bonne personne.
            if (!c.needsMessage) {
                this.humanEmail = email;
                try {
                    window.$crisp && window.$crisp.push(['set', 'session:data', [[
                        ['styky_page', window.location.pathname],
                        ['styky_question', (this.recentQuestions() || '(aucune question)').slice(0, 180)],
                    ]]]);
                } catch (e) { /* contexte best effort */ }
                this.contact = null;
                this.human = true;
                return;
            }

            if (c.message.trim().length < 5) return;
            c.sending = true;
            try {
                const res = await fetch("https:\/\/app.styqr.fr\/ai\/public\/offline-message", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '' },
                    body: JSON.stringify({
                        email,
                        message: c.message.trim().slice(0, 2000),
                        page: window.location.pathname,
                        context: this.recentQuestions().slice(0, 1000) || null,
                    }),
                });
                if (!res.ok) throw new Error(String(res.status));
                const data = await res.json().catch(() => ({}));
                if (data.reopens_at) c.reopensAt = data.reopens_at;
                c.sent = true;
            } catch (e) {
                this.contact = null;
                this.messages.push({ kind: 'error', text: this.t.errors.network });
            } finally {
                if (this.contact) this.contact.sending = false;
            }
        },

        scrollDown() { this.$nextTick(() => { if (this.$refs.scroller) this.$refs.scroller.scrollTop = this.$refs.scroller.scrollHeight; }); },

        async send() {
            const message = this.input.trim();
            if (!message || this.streaming) return;
            this.input = '';
            this.messages.push({ kind: 'user', text: message });
            if (this.wantsHuman(message)) { this.talkToHuman(); return; }
            this.streaming = true;
            this.liveText = '';
            this.scrollDown();

            const history = this.messages.slice(-8).filter(m => m.kind === 'user' || m.kind === 'assistant')
                .map(m => ({ role: m.kind, content: m.text.slice(0, 1000) }));

            try {
                const res = await fetch("https:\/\/app.styqr.fr\/ai\/public\/ask", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '', 'Accept': 'text/event-stream' },
                    body: JSON.stringify({
                        message,
                        locale: document.documentElement.lang || 'fr',
                        history: history.slice(0, -1),
                        context: 'public',
                        page: /^\/[a-z0-9\/-]*$/.test(window.location.pathname) ? window.location.pathname.slice(0, 120) : null,
                        thread: this.thread,
                    }),
                });
                if (!res.ok || !res.body) {
                    this.messages.push({ kind: 'error', text: res.status === 429 ? this.t.errors['rate-limit'] : this.t.errors.unavailable });
                    return;
                }
                const reader = res.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    buffer += decoder.decode(value, { stream: true });
                    let cut;
                    while ((cut = buffer.indexOf('\n\n')) !== -1) {
                        const frame = buffer.slice(0, cut);
                        buffer = buffer.slice(cut + 2);
                        frame.split('\n').forEach(line => {
                            if (!line.startsWith('data: ')) return;
                            try {
                                const event = JSON.parse(line.slice(6));
                                if (event.type === 'delta') { this.liveText += event.text; this.scrollDown(); }
                                else if (event.type === 'done') {
                                    const text = event.blocked ? event.response : (this.liveText || event.response);
                                    this.liveText = '';
                                    if (text) this.messages.push({ kind: 'assistant', text });
                                    this.scrollDown();
                                } else if (event.type === 'error') {
                                    this.liveText = '';
                                    this.messages.push({ kind: 'error', text: event.error === 'daily_limit' ? this.t.errors['daily-limit'] : this.t.errors.unavailable });
                                }
                            } catch (e) { /* frame partielle */ }
                        });
                    }
                }
            } catch (e) {
                this.messages.push({ kind: 'error', text: this.t.errors.network });
            } finally {
                this.streaming = false;
                if (this.liveText) { this.messages.push({ kind: 'assistant', text: this.liveText }); this.liveText = ''; }
                this.scrollDown();
            }
        },
    };
}
</script>

	
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.x.x/dist/cdn.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"
	></script>
	<div
	x-data="imageCropModal()"
	x-show="isOpen"
	x-cloak
	class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
	@keydown.escape.window="cancel()"
>
	
	<div class="absolute inset-0 bg-black/60" @click="cancel()"></div>

	<div
		class="relative flex w-full max-w-xl max-h-[90vh] flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
		x-show="isOpen"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0 scale-95"
		x-transition:enter-end="opacity-100 scale-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100 scale-100"
		x-transition:leave-end="opacity-0 scale-95"
	>
		
		<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
			<h3 class="poppins-semibold opensans-bold mulish-bold text-lg text-styqrblack">Crop image</h3>
			<button @click="cancel()" class="flex h-8 w-8 items-center justify-center rounded-full text-styqrmediumgrey transition-colors hover:bg-gray-100 hover:text-styqrblack">
				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
				</svg>
			</button>
		</div>

		
		<div class="flex items-center justify-center bg-gray-50 px-4 py-4 sm:px-6 sm:py-6">
			<div class="relative h-[50vh] max-h-[460px] w-full overflow-hidden rounded-lg">
				<img x-ref="cropImage" class="block max-w-full" />
			</div>
		</div>

		
		<div class="flex items-center gap-3 px-6 py-3">
			<svg class="h-4 w-4 shrink-0 text-styqrmediumgrey" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM13.5 10.5h-6" />
			</svg>
			<input
				id="image-crop-zoom"
				name="image_crop_zoom"
				type="range"
				min="0.1"
				max="3"
				step="0.01"
				x-model="zoomLevel"
				@input="applyZoom()"
				aria-label="Crop image"
				class="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-gray-200 accent-styqrpurple"
			/>
			<svg class="h-4 w-4 shrink-0 text-styqrmediumgrey" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
			</svg>
		</div>

		
		<div class="flex items-center justify-end gap-3 border-t border-gray-100 px-6 py-4">
			<button
				@click="cancel()"
				class="poppins-medium opensans-medium mulish-medium rounded-lg px-5 py-2.5 text-sm text-styqrmediumgrey transition-colors hover:bg-gray-100 hover:text-styqrblack"
			>Cancel</button>
			<button
				@click="confirm()"
				:class="{
					'bg-styqrpurple hover:bg-styqrpurple/90': $store.config.isBase,
					'bg-maevablue hover:bg-maevablue/90': $store.config.isMaeva,
					'bg-gdfgreen hover:bg-gdfgreen/90': $store.config.isGDF
				}"
				class="poppins-medium opensans-medium mulish-medium rounded-lg px-5 py-2.5 text-sm text-white shadow-sm transition-colors"
			>Confirm</button>
		</div>
	</div>
</div>

<script nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
	function imageCropModal() {
		return {
			isOpen: false,
			cropper: null,
			zoomLevel: 1,
			onConfirmCallback: null,
			outputSize: 512,

			init() {
				window.StyQRImageCropper = {
					open: (source, options = {}) => this.open(source, options),
				};
			},

			async open(source, { aspectRatio = 1, outputSize = 512, onConfirm } = {}) {
				this.outputSize = outputSize;
				this.onConfirmCallback = onConfirm;
				this.zoomLevel = 1;

				if (source instanceof File) {
					this._initCropper(URL.createObjectURL(source), aspectRatio);
				} else if (source.startsWith('blob:') || source.startsWith('data:')) {
					this._initCropper(source, aspectRatio);
				} else {
					// Same-origin URLs can be loaded directly (no CORS).
					// Cross-origin URLs are proxied through the server.
					let sameOrigin = false;
					try {
						const u = new URL(source, window.location.href);
						sameOrigin = u.origin === window.location.origin;
					} catch (_) {}

					if (sameOrigin) {
						this._initCropper(source, aspectRatio);
						return;
					}

					try {
						const proxyUrl = "https:\/\/app.styqr.fr\/my\/media\/proxy-image" + '?url=' + encodeURIComponent(source);
						const response = await fetch(proxyUrl, { credentials: 'same-origin' });
						if (!response.ok) throw new Error('Proxy returned ' + response.status);
						const blob = await response.blob();
						this._initCropper(URL.createObjectURL(blob), aspectRatio);
					} catch (e) {
						console.error('Failed to load image for cropping', e);
					}
				}
			},

			_initCropper(url, aspectRatio) {

				if (this.cropper) {
					this.cropper.destroy();
					this.cropper = null;
				}

				const img = this.$refs.cropImage;
				img.src = url;
				this.isOpen = true;

				img.onload = () => {
					this.$nextTick(() => {
						this.cropper = new Cropper(img, {
							aspectRatio: aspectRatio,
							viewMode: 0,
							dragMode: 'move',
							autoCropArea: 1,
							cropBoxResizable: false,
							cropBoxMovable: false,
							toggleDragModeOnDblclick: false,
							guides: false,
							center: true,
							highlight: false,
							background: true,
							responsive: true,
							restore: false,
							minContainerWidth: 200,
							minContainerHeight: 200,
							ready: () => {
								this.zoomLevel = 1;
							},
						});
					});
				};
			},

			applyZoom() {
				if (this.cropper) {
					this.cropper.zoomTo(parseFloat(this.zoomLevel));
				}
			},

			confirm() {
				if (!this.cropper || !this.onConfirmCallback) return;

				const canvas = this.cropper.getCroppedCanvas({
					width: this.outputSize,
					height: this.outputSize,
					imageSmoothingEnabled: true,
					imageSmoothingQuality: 'high',
				});

				canvas.toBlob((blob) => {
					const croppedFile = new File([blob], 'cropped.png', { type: 'image/png' });
					this.onConfirmCallback(croppedFile);
					this.close();
				}, 'image/png');
			},

			cancel() {
				this.close();
			},

			close() {
				this.isOpen = false;
				if (this.cropper) {
					this.cropper.destroy();
					this.cropper = null;
				}
				this.onConfirmCallback = null;
			},
		};
	}
</script>

	<script
		defer
		src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
	></script>

</body>

</html>

	<style nonce="5lT8R90GWHDB10yRn9sEeadcsLd6BJjWSUZme5qd">
		::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		::-webkit-scrollbar-track {
			background: #f4f4f4;
			border-radius: 10px;
		}

		::-webkit-scrollbar-thumb {
			background: linear-gradient(45deg, #7A49C7, #a077f1);
			border-radius: 10px;
		}
	</style>