<script>
'use strict';
function heroVideos() {
return {
players: {},
currentlyPlaying: 'videoLeft',
init() {
const videos = [{
name: 'videoLeft',
ref: this.$refs.videoLeft
}, {
name: 'videoRight',
ref: this.$refs.videoRight
}];
videos.forEach(video => {
this.players[video.name] = new Plyr(video.ref, {
loop: {
active: true
},
controls: []
});
});
this.players[this.currentlyPlaying].play();
},
switchPlay(name) {
this.players[this.currentlyPlaying].pause();
this.players[name].play();
this.currentlyPlaying = name;
},
intersectSwitchPlay(name) {
if (window.innerWidth < 768) {
this.switchPlay(name);
}
}
}
}
</script>
<div x-data="heroVideos" class="grid grid-cols-1 md:grid-cols-2 gap-4 md:h-[712px] md:max-h-screen-75 homepage-hero">
<div class="relative h-[70vh] md:h-auto" @mouseenter="switchPlay('videoLeft')" x-intersect.full="intersectSwitchPlay('videoLeft')">
<div class="relative z-10 mt-auto h-full flex md:items-start justify-end flex-col gap-4
bg-gradient-to-tr to-60% from-dark-60 px-4 py-6 md:p-12 text-light-white">
<h1 class="font-medium text-2xl md:text-5xl">Collection <br> Caractères Fil d’Or</h1>
<div class="flex md:flex-col items-center md:items-start gap-4 md:gap-12 justify-between">
<p class="text-sm md:text-base font-semibold">Lunettes de vue MAGIC + 2 clips inclus - 229€</p>
<button type="button" class="shrink-0 max-md:btn-size-sm btn btn-light ">
Découvrir la collection
</button>
</div>
</div>
<div class="absolute top-0 left-0 right-0 bottom-0">
<video class="h-full" x-ref="videoLeft" class="plyr" muted autoplay playsinline poster="/img/hero/videoLeft.jpg">
<source src="/videos/hero/hero-afflelou.mp4" type="video/mp4" />
</video>
</div>
</div>
<div class="relative h-[70vh] md:h-auto" @mouseenter="switchPlay('videoRight')" x-intersect.full="intersectSwitchPlay('videoRight')">
<div class="relative z-10 mt-auto h-full flex md:items-end justify-end flex-col gap-4
bg-gradient-to-tl to-60% from-dark-60 px-4 py-6 md:p-12 text-light-white md:text-right">
<h1 class="font-medium text-2xl md:text-4xl">N’arrêtez jamais <br> de bien entendre</h1>
<div class="flex md:flex-col items-center md:items-end gap-4 md:gap-12 justify-between">
<p class="text-sm md:text-base font-semibold">Votre deuxième paire d’aide <br> auditive pour 1€ de plus</p>
<button type="button" class="shrink-0 max-md:btn-size-sm btn btn-audio ">
Profiter de l’offre
</button>
</div>
</div>
<div class="absolute top-0 left-0 right-0 bottom-0">
<video class="h-full plyr" x-ref="videoRight" muted playsinline poster="/img/hero/videoRight.jpg">
<source src="/videos/hero/hero-audio.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
<section class="bg-neutral-100 py-12 mt-4">
<div class="container">
<div class="inline-flex justify-center items-center flex-col gap-6 w-full">
<div class="flex flex-col gap-6 md:gap-2 justify-center items-center text-center text-neutral-800">
<h2 class="font-medium text-2xl md:text-3xl">ALAIN AFFLELOU <a href="" class="is-underlined text-2xl md:text-3xl">Opticien</a> et <a class="link-audio text-2xl md:text-3xl is-underlined" href="">Acousticien</a></h2>
<p class="md:text-xl">Nos opticiens et audioprothésistes vous conseillent dans nos 1200 magasins </p>
</div>
<form x-data="appointmentModal" method="get" action="" class="relative inline-flex flex-col gap-2 md:max-w-[662px] w-full">
<div x-ref="modalButton" class="inline-flex items-center justify-between rounded-full bg-light-white shadow-lg">
<button type="button" class="text-neutral-800 text-left px-6 md:px-8 py-2 md:py-4" @click="showModal">
<p class="hidden md:block">Sujet</p>
<p :class="modalSelectedOption ? 'text-neutral-800 font-semibold' : 'text-neutral-500'" x-text="modalSelectedOption ? modalSelectedOption : 'Quel est le motif du rendez-vous ?'" class="hidden md:block text-nowrap truncate max-w-[330px]">Quel est le motif du rendez-vous ?</p>
<p class="text-neutral-800 block md:hidden">Prendre rendez-vous</p>
</button>
<div class="md:px-3.5 p-2 md:py-0">
<button :class="modalSwitched ? 'btn-audio' : 'btn-dark'" class="btn md:btn-icons btn-size-md btn-leading-icon max-md:btn-only-icon">
<div x-show="!modalSwitched"><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
</div>
<div x-show="modalSwitched"><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
</div>
<span class="hidden md:block" x-text="modalSwitched ? 'Prendre rendez-vous' : 'Prendre rendez-vous'">Prendre rendez-vous</span>
</button>
</div>
</div>
<div x-show="modalOpened" @click.outside="modalOpened = false" x-cloak x-transition class="absolute z-20 left-0 right-0 top-[calc(100%+8px)] bg-light-white p-10 flex flex-col gap-10 text-neutral-800 rounded-3xl shadow-lg">
<div x-ref="switch" :class="modalSwitched ? 'before:translate-x-[calc(100%+2px)]' : ''" class="grid grid-cols-2 bg-neutral-150 p-2 gap-1 rounded-full relative before:transition-transform
before:rounded-full before:mx-px before:my-2 before:absolute before:left-2 before:top-0 before:bottom-0 before:right-1/2 before:bg-light-white">
<button @click="modalSwitched = false" type="button" :class="modalSwitched ? 'text-neutral-500' : 'text-neutral-800'" class="btn relative z-10 bg-transparent backdrop-blur-none justify-center text-xl py-2">Optique</button>
<button @click="modalSwitched = true" type="button" :class="modalSwitched ? 'text-audio-600' : 'text-neutral-500'" class="btn relative z-10 bg-transparent backdrop-blur-none justify-center text-xl py-2 transition-colors">Audition</button>
</div>
<div class="flex flex-col gap-2" x-ref="selectors">
<div>Quel est le motif du rendez-vous ?</div>
<div x-show="!modalSwitched" x-cloak="">
<div x-data="appointmentSelect" class="relative">
<button type="button" @click="openSelect" class="text-neutral-500 flex items-center text-neutral-800 justify-between w-full px-3.5 py-2.5 text-left border border-neutral-300 rounded-md shadow-sm text-sm">
<span :class="selected ? 'font-medium' : 'text-neutral-500'" class="truncate" x-text="selected ? selected.name : 'Choisir un motif'">Choisir un motif</span>
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content relative mt-2 shadow-none " x-show="show" x-transition x-cloak @click.outside="show = false">
<template x-for="option in options">
<button type="button" @click="select(option.id)" class="dropdown-item px-4 border-l border-r first-of-type:border-t first-of-type:rounded-t-md" :class="option.checked ? 'dropdown-item-checked' : ''">
<span class="max-w-full truncate" x-text="option.name"></span>
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</button>
</template>
</div>
<select class="hidden" x-ref="select" name="subject">
<option value="" selected disabled hidden></option>
<option value="option-1">Vérifier ma vue (avec ordonnance)</option>
<option value="option-2">Vérifier ma vue (avec ordonnance) et être conseillé dans le choix de mes lunettes</option>
<option value="option-3">Être conseillé dans le choix de mes lunettes</option>
<option value="option-4">Être conseillé dans le choix de mes lentilles de contact</option>
<option value="option-5">Effectuer une réparation, un ajustement, un réglage de mes lunettes</option>
<option value="option-6">Réceptionner ma commande</option>
</select>
</div>
</div>
<div x-show="modalSwitched" x-cloak="">
<div x-data="appointmentSelect" class="relative">
<button type="button" @click="openSelect" class="text-neutral-500 flex items-center text-neutral-800 justify-between w-full px-3.5 py-2.5 text-left border border-neutral-300 rounded-md shadow-sm text-sm">
<span :class="selected ? 'font-medium' : 'text-neutral-500'" class="truncate" x-text="selected ? selected.name : 'Choisir un motif'">Choisir un motif</span>
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content relative mt-2 shadow-none " x-show="show" x-transition x-cloak @click.outside="show = false">
<template x-for="option in options">
<button type="button" @click="select(option.id)" class="dropdown-item px-4 border-l border-r first-of-type:border-t first-of-type:rounded-t-md" :class="option.checked ? 'dropdown-item-checked' : ''">
<span class="max-w-full truncate" x-text="option.name"></span>
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</button>
</template>
</div>
<select class="hidden" x-ref="select" name="subject">
<option value="" selected disabled hidden></option>
<option value="option-1">Vérifier mon audition (sans ordonnance)</option>
<option value="option-2">Premier rendez-vous (avec ordonnance)</option>
<option value="option-3">Livraison des aides auditives</option>
<option value="option-4">Réglage des aides auditives - Début période d’essai</option>
<option value="option-5">Restitution des aides auditives - Fin période d’essai</option>
<option value="option-6">Rendez-vous de suivi (3 mois, 6 mois, 1 an, …)</option>
<option value="option-7">Réglage et/ou contrôle des aides auditives</option>
<option value="option-8">Service après vente - Nettoyage des aides auditives</option>
<option value="option-9">Renouvellement des aides aides auditives</option>
<option value="option-10">Fabrication de protections d’oreilles sur mesure</option>
</select>
</div>
</div>
</div>
</div>
</form>
<script>
function appointmentModal() {
return {
modalSwitched: false,
modalOpened: false,
modalSelectedOption: null,
showModal() {
// desktop only
if (window.innerWidth > 768) {
this.modalOpened = !this.modalOpened;
if (this.modalOpened) {
this.scrollToTrigger();
}
}
},
scrollToTrigger() {
const modalButtonBounding = this.$refs.modalButton.getBoundingClientRect();
const offset = (window.innerHeight / 2) - (modalButtonBounding.height * 2);
window.scrollTo({
behavior: 'smooth',
top: modalButtonBounding.top -
document.body.getBoundingClientRect().top -
offset,
})
}
}
}
function appointmentSelect() {
return {
options: [],
show: false,
selected: null,
init() {
Array.from(this.$refs.select.options).forEach(option => {
if (!option.disabled)
this.options.push({
id: option.value,
name: option.text,
checked: option.selected
})
});
},
openSelect() {
this.show = !this.show;
},
select(id) {
this.options = this.options.map(option => {
if (option.id === id) {
option.checked = true;
this.selected = option;
} else {
option.checked = false;
}
return option;
});
this.modalSelectedOption = this.selected.name;
this.$refs.select.value = this.selected.id;
this.scrollToTrigger()
this.show = false;
this.modalOpened = false;
}
}
}
</script>
</div>
</div>
</section>
<div x-data="stickyToggle()" x-ref="magicPaginationAnchor" class="relative pb-20">
<div id="magic" x-intersect.threshold.30="enterSection('magic')">
<div class="px-0 flex flex-col gap-14 md:gap-28 pt-20 md:pt-48 ">
<div class="container">
<div class="flex flex-col gap-6 w-4/5 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="25" viewBox="0 0 96 25" fill="none" class="h-6 md:h-8">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.8762 12.3001C42.8762 18.5023 47.7302 24.1652 54.0672 24.1652C59.865 24.1652 64.4493 19.3113 64.8538 13.6484H54.6066V18.0978H57.8425C56.629 19.1765 55.5504 19.8506 53.9324 19.8506C49.6178 19.8506 45.8425 15.4012 45.8425 11.2214C45.8425 6.63713 48.9436 1.91803 53.9324 1.91803C57.1684 1.91803 59.9998 3.80567 61.7526 6.5023H59.9998C58.5167 4.61466 56.2245 3.40118 53.9324 3.40118C49.0785 3.40118 47.4605 8.25511 47.4605 12.4349H47.5953C47.5953 8.79443 50.0223 4.88432 53.9324 4.88432C56.0897 4.88432 57.9773 6.09781 59.1908 7.85061H64.1796C62.4268 3.53601 58.5167 0.300049 53.9324 0.300049C47.9998 0.300049 44.3594 5.55848 44.3594 11.2214C44.3594 16.345 48.5391 21.1989 53.9324 21.1989C57.0335 21.1989 59.4605 19.3113 60.9436 16.6147H56.0897V15.1315H63.1009C62.0223 19.3113 58.3818 22.6821 53.9324 22.6821C47.9998 22.6821 43.0111 18.5023 43.0111 12.3001H42.8762ZM20.4944 0.569702L11.3258 20.3899L2.83146 5.01914V22.5472H1.34832V2.05285H2.83146L11.191 17.154L18.8764 0.569702H17.2584L11.0562 13.918L3.77528 0.569702H0V24.0304H4.31461V10.6821L11.4607 23.6259L20.4944 4.07532V22.5472H19.0112V10.8169L17.5281 13.918V24.0304H21.9775V0.569702H20.4944ZM31.011 0.569702L23.0559 24.0304H27.775L29.7975 18.0978H36.8087L38.8312 24.0304H43.5503L36.5391 3.1315L35.7301 5.42364L41.5278 22.5472H39.9099L37.8874 16.6147H28.7188L26.6964 22.5472H25.0784L32.0896 2.05285H33.7076L32.4941 5.42364L35.3256 13.7832H31.2806L32.4941 10.1427L31.6851 7.71577L29.1233 15.1315H37.4829L34.1121 5.42364L35.7301 0.569702H31.011ZM67.4158 24.0304V0.569702H71.7304V2.05285H68.8989V22.5472H70.2472V3.40117H71.7304V24.0304H67.4158ZM85.483 4.74949C88.5841 4.74949 90.7414 6.36746 91.8201 9.33375H95.9999C94.7864 4.47982 90.4718 0.434875 85.3482 0.434875C78.6066 0.434875 75.7751 6.36746 75.7751 12.4349C75.7751 17.5585 80.4942 21.3338 85.3482 21.3338C87.6403 21.3338 89.7976 19.9854 91.2808 18.2326H93.1684C91.5504 20.7944 88.5841 22.8169 85.3482 22.8169C79.4156 22.8169 74.4268 18.5023 74.4268 12.3H74.292C74.292 18.5023 79.1459 24.3001 85.483 24.3001C90.0673 24.3001 94.1122 20.9293 95.7302 16.7495H90.7414C89.528 18.5023 87.6403 19.9854 85.483 19.9854C81.5729 19.9854 77.3931 16.6147 77.3931 12.4349C77.3931 7.31128 79.6852 1.91802 85.483 1.91802C89.2583 1.91802 92.6291 4.47982 94.1122 7.98544H92.6291C91.2808 5.15398 88.4493 3.40117 85.483 3.40117C80.6291 3.40117 79.0111 8.12027 79.0111 12.3H79.1459C79.1459 8.52477 81.4381 4.74949 85.483 4.74949Z" fill="currentColor" />
</svg>
<h2 class="font-medium text-4xl md:text-6xl">Autant de clips, autant de looks.</h2>
</div>
</div>
<div class="video-container w-auto h-[500px] md:w-full md:h-auto ">
<div x-data="videoAnimation( true )" class="plyr__video flex justify-center h-full ">
<video x-ref="videoPlayer" autoplay loop muted playsinline>
<source src="/videos/magic.mp4" type="video/mp4" media="(min-width: 768px)">
<source src="/videos/magic2.mp4" type="video/mp4" media="(max-width: 767px)">
<source src="/videos/magic.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</video>
</div>
<script>
function videoAnimation(enableGsap = false) {
return {
enableGsap: enableGsap,
plyr: null,
init() {
// Initialisation de Plyr
this.plyr = new Plyr(this.$refs.videoPlayer, {
autoplay: true,
controls: ["play"]
});
if (this.enableGsap) {
this.initGsap();
}
},
initGsap() {
gsap.registerPlugin(ScrollTrigger);
const video = this.$refs.videoPlayer;
const container = document.querySelector('.container');
if (video) {
const containerWidth = container.offsetWidth;
const trigger = gsap.fromTo(
this.plyr.elements.container, {
width: "100vw"
}, {
width: (containerWidth - 32),
marginLeft: "16px",
marginRight: "16px",
ease: "power1.out",
"border-radius": "8px",
scrollTrigger: {
trigger: video,
start: 'top-=450 top',
end: "top-=50 top",
scrub: true,
once: true,
// markers: true, // Pour debug, à retirer en production
}
}
);
} else {
console.error("L'élément vidéo n'a pas été trouvé dans le DOM.");
}
}
};
}
</script>
</div>
<div class="container px-0 flex flex-col gap-14 md:gap-28" x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="flex flex-col items-center gap-10 w-4/5 mx-auto" x-ref="buttonMagic" x-ref="sliderMagic" x-bind:class="{ 'invisible': !shown, 'visible': shown }" x-transition:enter="transition-opacity duration-300" x-transition:leave="transition-opacity duration-300">
<p class="font-medium text-xl tmd:ext-2xl self-start">MAGIC, un concept innovant et pratique pour ceux qui souhaitent avoir une seule paire de lunettes avec un style personnalisable et des fonctionnalités multiples.</p>
<div class="flex flex-col md:flex-row gap-4">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto w-full md:w-auto justify-center btn btn-dark ">
En savoir plus
</a>
</div>
</div>
</div>
<div x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="container" x-ref="sliderMagic" x-bind:class="{ 'invisible': !shown, 'visible': shown }" x-transition:enter="transition-opacity duration-300" x-transition:leave="transition-opacity duration-300">
<div x-data="initCarouselcarousel246965180()" x-init="init()" class="relative w-full h-full mx-auto">
<div class="flex justify-between items-center mb-8 ">
<h2 class="text-3xl font-semibold ">La collection MAGIC</h2>
<div class="flex items-center justify-center space-x-4 ">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="hidden sm:inline-flex mx-auto btn btn-dark-subtle ">
Voir toute la collection
</a>
<div class=" hidden sm:flex flex space-x-2">
<button type="button" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-prev-carousel-246965180 before:border-none btn btn-dark-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
</svg>
</button>
<button type="button" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-next-carousel-246965180 before:border-none btn btn-dark-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div x-ref="swiperContainer" id="carousel-246965180" class="swiper md:h-full">
<div class="swiper-wrapper ">
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-246965180-0">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct1.png" alt="MAGIC 262" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct1.png" alt="MAGIC 262 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 262</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>
<p class="text-xs text-neutral-500 pt-2">3 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
199,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-246965180-1">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct2.png" alt="Enola" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct2.png" alt="Enola - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Enola</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC</p>
<p class="text-xs text-neutral-500 pt-2">5 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-246965180-2">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct3.png" alt="MAGIC 222" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct3.png" alt="MAGIC 222 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 222</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>
<p class="text-xs text-neutral-500 pt-2">2 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
179,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-246965180-3">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct1.png" alt="Enola" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct1.png" alt="Enola - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Enola</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC</p>
<p class="text-xs text-neutral-500 pt-2">5 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-246965180-4">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct2.png" alt="MAGIC 222" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct2.png" alt="MAGIC 222 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 222</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>
<p class="text-xs text-neutral-500 pt-2">2 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
179,00 €
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-246965180 swiper-pagination swiper-light" :class="isMagicDark ? 'swiper-dark' : 'swiper-light'"></div>
<div class="flex sm:hidden mt-6">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto btn btn-dark-subtle ">
Voir toute la collection
</a>
</div>
</div>
</div>
<script>
function initCarouselcarousel246965180() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 1.2,
"tablet": 2.2,
"desktop": 3
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false,
"showTitle": true,
"title": "La collection MAGIC",
"useDynamicTheming": true
},
componentId: 'carousel-246965180',
init() {
this.initSwiper();
if (typeof this.customFunction === 'function') {
this.customFunction();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
},
1024: {
slidesPerView: this.options.slidesPerView.desktop
}
},
on: {
slideChange: () => this.updateSliderTheme(),
},
});
this.updateSliderTheme();
},
updateSliderTheme() {
const activeSlide = this.swiper.slides[this.swiper.activeIndex];
const theme = activeSlide.getAttribute('data-slider-theme');
this.sliderTheme = theme || 'light';
},
customFunction() {
// Custom function can be defined here and overridden outside.
}
};
}
</script>
</div>
</div>
</div>
</div>
<div id="incognito" x-intersect.threshold.25="enterSection('incognito')">
<div class="px-0 flex flex-col gap-14 md:gap-28 pt-20 md:pt-48 text-audio-700">
<div class="container">
<div class="flex flex-col gap-6 w-4/5 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="164" height="25" viewBox="0 0 164 25" fill="none" class="h-6 md:h-8">
<path d="M48.0002 5.22313C46.4618 3.68467 44.0002 3.06928 41.8464 3.06928C36.6156 3.06928 32.9233 7.37698 32.9233 12.3001C32.9233 17.2231 36.9233 21.5308 41.8464 21.5308C44.0002 21.5308 46.1541 20.6077 48.0002 19.0693V22.4539C46.1541 23.377 44.0002 23.9924 41.8464 23.9924C35.3848 23.9924 29.8464 18.7616 29.8464 12.3001C29.8464 5.53082 35.3848 0.300049 42.1541 0.300049C44.3079 0.300049 46.1541 0.915436 48.0002 1.83851V5.22313Z" fill="black" />
<path d="M3.69208 0.915283H0.922852V23.9922H3.69208V0.915283Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M60.3079 24.3C66.7695 24.3 72.3079 19.0693 72.3079 12.3001C72.3079 5.83852 66.7695 0.300049 60.3079 0.300049C53.8464 0.300049 48.3079 5.83852 48.3079 12.3001C48.3079 19.0693 53.5387 24.3 60.3079 24.3ZM60.3079 3.06928C65.8464 3.06928 69.5387 7.37698 69.5387 12.3001C69.5387 17.5308 65.231 21.5308 60.3079 21.5308C55.3848 21.5308 51.0772 17.5308 51.0772 12.3001C51.0772 7.37698 54.7695 3.06928 60.3079 3.06928Z" fill="black" />
<path d="M96.0001 13.2231C96.0001 19.377 91.6924 24.3 85.2309 24.3C78.7693 24.3 73.5385 18.7616 73.5385 12.3001C73.5385 5.83852 78.7693 0.300049 85.5386 0.300049C89.2309 0.300049 92.6155 1.83851 94.7693 4.60775L92.6155 6.76159C91.077 4.60775 88.3078 3.06928 85.5386 3.06928C80.3078 3.06928 76.3078 7.37698 76.3078 12.3001C76.3078 17.2231 80.3078 21.5308 85.2309 21.5308C88.9232 21.5308 92.6155 18.4539 92.6155 14.7616H86.7693V11.9924H96.0001V13.2231Z" fill="black" />
<path d="M121.846 0.915283H124.615V23.9922H121.846V0.915283Z" fill="black" />
<path d="M134.461 23.6845H131.692V3.37682H126.153V0.915283H140V3.37682H134.461V23.6845Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.077 24.3C157.539 24.3 163.077 19.0693 163.077 12.3001C163.077 5.83852 157.539 0.300049 151.077 0.300049C144.616 0.300049 139.077 5.83852 139.077 12.3001C139.077 19.0693 144.308 24.3 151.077 24.3ZM151.077 3.06928C156.616 3.06928 160.308 7.37698 160.308 12.3001C160.308 17.5308 156 21.5308 151.077 21.5308C146.154 21.5308 141.846 17.5308 141.846 12.3001C141.846 7.37698 145.539 3.06928 151.077 3.06928Z" fill="black" />
<path d="M115.385 0.915283V17.8384L99.077 0.915283H98.1539V23.6845H100.923V6.76144L117.231 23.6845H118.154V0.915283H115.385Z" fill="black" />
<path d="M24.6155 17.8384V0.915283H27.3847V23.6845H26.4616L10.1539 6.76144V23.6845H7.38469V0.915283H8.30777L24.6155 17.8384Z" fill="black" />
</svg>
<h2 class="font-medium text-4xl md:text-6xl">Ni vu, ni connu !</h2>
</div>
</div>
<div class="video-container w-auto h-[500px] md:w-full md:h-auto ">
<div x-data="videoAnimation( true )" class="plyr__video flex justify-center h-full ">
<video x-ref="videoPlayer" autoplay loop muted playsinline>
<source src="/videos/incognito/incognito.mp4" type="video/mp4" media="(min-width: 768px)">
<source src="/videos/incognito/incognito.mp4" type="video/mp4" media="(max-width: 767px)">
<source src="/videos/magic.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</video>
</div>
<script>
function videoAnimation(enableGsap = false) {
return {
enableGsap: enableGsap,
plyr: null,
init() {
// Initialisation de Plyr
this.plyr = new Plyr(this.$refs.videoPlayer, {
autoplay: true,
controls: ["play"]
});
if (this.enableGsap) {
this.initGsap();
}
},
initGsap() {
gsap.registerPlugin(ScrollTrigger);
const video = this.$refs.videoPlayer;
const container = document.querySelector('.container');
if (video) {
const containerWidth = container.offsetWidth;
const trigger = gsap.fromTo(
this.plyr.elements.container, {
width: "100vw"
}, {
width: (containerWidth - 32),
marginLeft: "16px",
marginRight: "16px",
ease: "power1.out",
"border-radius": "8px",
scrollTrigger: {
trigger: video,
start: 'top-=450 top',
end: "top-=50 top",
scrub: true,
once: true,
// markers: true, // Pour debug, à retirer en production
}
}
);
} else {
console.error("L'élément vidéo n'a pas été trouvé dans le DOM.");
}
}
};
}
</script>
</div>
<div class="container px-0 flex flex-col gap-14 md:gap-28" x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="flex flex-col items-center gap-10 w-4/5 mx-auto" x-ref="buttonIncognito" x-ref="sliderIncognito" x-bind:class="{ 'invisible': !shown, 'visible': shown }" x-transition:enter="transition-opacity duration-300" x-transition:leave="transition-opacity duration-300">
<p class="font-medium text-xl tmd:ext-2xl self-start">INCOGNITO, une offre d'aides auditives alliant discrétion, performances et prix le plus juste pour vous permettre de bien entendre sans compromis.</p>
<div class="flex flex-col md:flex-row gap-4">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto w-full md:w-auto justify-center btn btn-audio-subtle ">
En savoir plus
</a>
</div>
</div>
</div>
<div x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="container" x-ref="sliderIncognito" x-bind:class="{ 'invisible': !shown, 'visible': shown }" x-transition:enter="transition-opacity duration-300" x-transition:leave="transition-opacity duration-300">
<div x-data="initCarouselcarousel1294627816()" x-init="init()" class="relative w-full h-full mx-auto">
<div class="flex justify-between items-center mb-8 ">
<h2 class="text-3xl font-semibold ">La gamme INCOGNITO</h2>
<div class="flex items-center justify-center space-x-4 ">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="hidden sm:inline-flex mx-auto btn btn-audio-subtle ">
Voir toute la collection
</a>
<div class=" hidden sm:flex flex space-x-2">
<button type="button" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-prev-carousel-1294627816 before:border-none btn btn-audio-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
</svg>
</button>
<button type="button" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-next-carousel-1294627816 before:border-none btn btn-audio-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div x-ref="swiperContainer" id="carousel-1294627816" class="swiper md:h-full">
<div class="swiper-wrapper ">
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1294627816-0">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito1.png" alt="Incognito A.I BTE R 1600" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito1.jpeg" alt="Incognito A.I BTE R 1600 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito A.I BTE R 1600</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
9,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1294627816-1">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito2.png" alt="Incognito IC16 G7 SLIM RIC LI" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito2.jpeg" alt="Incognito IC16 G7 SLIM RIC LI - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito IC16 G7 SLIM RIC LI</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Mini contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1294627816-2">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito3.png" alt="Incognito A.I CIC 312 WL 2400" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito3.png" alt="Incognito A.I CIC 312 WL 2400 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito A.I CIC 312 WL 2400</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Intra auriculaire</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
9,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1294627816-3">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito1.png" alt="Incognito A.I BTE R 1600" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito1.jpeg" alt="Incognito A.I BTE R 1600 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito A.I BTE R 1600</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
9,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1294627816-4">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito2.png" alt="Incognito IC16 G7 SLIM RIC LI" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito2.jpeg" alt="Incognito IC16 G7 SLIM RIC LI - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito IC16 G7 SLIM RIC LI</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Mini contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-1294627816 swiper-pagination swiper-audio" :class="isMagicDark ? 'swiper-dark' : 'swiper-light'"></div>
<div class="flex sm:hidden mt-6">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto btn btn-audio-subtle ">
Voir toute la collection
</a>
</div>
</div>
</div>
<script>
function initCarouselcarousel1294627816() {
return {
swiper: null,
options: {
"color": "audio",
"slidesPerView": {
"mobile": 1.2,
"tablet": 2.2,
"desktop": 3
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false,
"showTitle": true,
"title": "La gamme INCOGNITO",
"useDynamicTheming": true,
"paginationClass": "swiper-audio",
"CTA": {
"label": "Voir toute la collection",
"href": "https://www.afflelou.com/",
"external": true,
"color": "audio"
}
},
componentId: 'carousel-1294627816',
init() {
this.initSwiper();
if (typeof this.customFunction === 'function') {
this.customFunction();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
},
1024: {
slidesPerView: this.options.slidesPerView.desktop
}
},
on: {
slideChange: () => this.updateSliderTheme(),
},
});
this.updateSliderTheme();
},
updateSliderTheme() {
const activeSlide = this.swiper.slides[this.swiper.activeIndex];
const theme = activeSlide.getAttribute('data-slider-theme');
this.sliderTheme = theme || 'light';
},
customFunction() {
// Custom function can be defined here and overridden outside.
}
};
}
</script>
</div>
</div>
</div>
</div>
<div id="telemedecine" x-intersect.threshold.30="enterSection('telemedecine')">
<div class="px-0 flex flex-col gap-14 md:gap-28 pt-20 md:pt-48 ">
<div class="container">
<div class="flex flex-col gap-6 w-4/5 mx-auto">
<h3 class="text-3xl font-semibold text-left text-neutral-500 uppercase">Telemedecine</h3>
<h2 class="font-medium text-4xl md:text-6xl">Gagnez un temps précieux.</h2>
</div>
</div>
<div class="flex justify-center w-auto h-[500px] md:w-full md:h-auto ">
<picture x-data="imageAnimation( true )" class=" overflow-hidden">
<source srcset="/img/telemedecine/telemedecine.jpg" media="(min-width: 640px)" />
<img x-ref="image" src="/img/telemedecine/telemedecineMobile.png" alt="Description de l'image" class="object-cover w-full h-full" loading="lazy" />
</picture>
<script>
function imageAnimation(enableGsap = false) {
return {
enableGsap: enableGsap,
init() {
if (this.enableGsap) {
this.initGsap();
}
},
initGsap() {
gsap.registerPlugin(ScrollTrigger);
const image = this.$refs.image;
const container = document.querySelector('.container');
if (image) {
const containerWidth = container.offsetWidth;
gsap.fromTo(
image, {
width: "100vw"
}, {
width: (containerWidth - 32),
marginLeft: "16px",
marginRight: "16px",
ease: "power1.out",
"border-radius": "8px",
scrollTrigger: {
trigger: image,
start: 'top-=450 top',
end: "top-=200 top",
scrub: true,
once: true,
// markers: true, // Pour debug, à retirer en production
}
}
);
} else {
console.error("L'élément image n'a pas été trouvé dans le DOM.");
}
}
};
}
</script>
</div>
<div class="container px-0 flex flex-col gap-14 md:gap-28" x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="flex flex-col items-center gap-10 w-4/5 mx-auto" x-ref="buttontelemedecine" x-ref="slidertelemedecine" x-bind:class="{ 'invisible': !shown, 'visible': shown }" x-transition:enter="transition-opacity duration-300" x-transition:leave="transition-opacity duration-300">
<p class="font-medium text-xl tmd:ext-2xl self-start">Téléconsultez avec un ophtalmologue depuis l’un de nos magasins.</p>
<h4 class="text-neutral-800">ALAIN AFFLELOU vous permet de bénéficier d'une téléconsultation avec un ophtalmologue qui réalisera à distance un examen complet de la vue. C'est un service innovant avec ou sans rendez-vous disponible dans nos magasins ALAIN AFFLELOU équipés près de chez vous.</h4>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/telemedecine/telemedecine2.png" alt="Description de l'image" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prise en charge par des ophtalmologues et orthoptistes diplômés.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/telemedecine/telemedecine3.jpg" alt="Description de l'image" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Tarifs conventionnés sans dépassement d'honoraires.</span>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto w-full md:w-auto justify-center btn btn-dark-subtle btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre rendez-vous
</a>
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto w-full md:w-auto justify-center before:border-0 btn btn-dark-subtle ">
En savoir plus
</a>
</div>
</div>
</div>
</div>
</div>
<div id="magic-toggle-container" :class="{
'dark': isMagicDark,
'light': !isMagicDark
}" class="hidden md:flex justify-center mt-10 sticky bottom-4 w-full z-10" x-transition>
<div class="flex flex-row justify-between align-middle gap-4 w-fit anchorMagic">
<div class="flex flex-row justify-between items-center gap-1 p-1 rounded-full backdrop-blur-2xl dark" :class="{ 'dark': isMagicDark, 'light': !isMagicDark }">
<div class="inline-flex items-center">
<a id="paginationAnchor-magic" href="#magic" class="toggle-magic toggle-magic-classic ">
Magic
</a>
</div>
<div class="inline-flex items-center">
<a id="paginationAnchor-incognito" href="#incognito" class="toggle-magic toggle-magic-audio ">
Incognito
</a>
</div>
<div class="inline-flex items-center">
<a id="paginationAnchor-telemedecine" href="#telemedecine" class="toggle-magic toggle-magic-classic ">
Téléconsultation
</a>
</div>
</div>
<div class="rounded-full backdrop-blur-2xl p-1 dark" :class="{ 'dark': isMagicDark, 'light': !isMagicDark }">
<div class="inline-flex items-center">
<a id="paginationAnchor-" href="#our-commitment" class="toggle-magic toggle-magic-classic ">
Passer
</a>
</div>
</div>
</div>
</div>
</div>
<script>
function stickyToggle() {
return {
activeSection: null,
isToggleSticky: false,
isIntersecting: false,
themeApplied: {}, // To track if a theme has already been applied once
highestThemeApplied: 0, // Priority level of the highest theme already applied
isMagicDark: false,
// Associates each section with a priority level
priorityMap: {
magic: 1,
incognito: 2,
telemedecine: 3
},
enterSection(sectionId) {
// Deactivates the previous active section if it exists
if (this.activeSection && this.activeSection !== sectionId) {
const previousSection = document.querySelector(`#paginationAnchor-${this.activeSection}`);
if (previousSection) {
previousSection.classList.remove('active');
}
}
// Activates the new section
this.activeSection = sectionId;
const activationSection = document.querySelector(`#paginationAnchor-${sectionId}`);
if (activationSection) {
activationSection.classList.add('active');
}
// Applies the theme for the section if not already done
this.applyThemeForSection(sectionId);
this.updateToggleState();
},
updateToggleState() {
// Toggles sticky if activeSection is defined
this.isToggleSticky = this.activeSection !== null;
this.isIntersecting = this.activeSection === null;
},
applyThemeForSection(sectionId) {
const currentPriority = this.priorityMap[sectionId];
// Applies the theme only if the priority level of the section
// is higher than the highest applied priority level
if (this.themeApplied[sectionId] || currentPriority <= this.highestThemeApplied) return;
const colorMap = {
magic: {
backgroundColor: '#262626',
color: '#FFFFFF'
},
incognito: {
backgroundColor: '#E5E5E5',
color: 'black'
},
telemedecine: {
backgroundColor: '#FFFFFF',
color: 'black'
},
};
const colors = colorMap[sectionId];
if (colors) {
gsap.to(this.$refs.magicPaginationAnchor, {
backgroundColor: colors.backgroundColor,
color: colors.color,
duration: 2,
});
// Marks the section as "themed" to avoid repetition
this.themeApplied[sectionId] = true;
// Sets isMagicDark depending on the active section
this.isMagicDark = sectionId === 'magic';
// Updates the highest priority level applied
this.highestThemeApplied = currentPriority;
}
},
init() {
// Initializes default values
this.activeSection = null;
this.updateToggleState();
this.themeApplied = {
magic: false,
incognito: false,
telemedecine: false,
};
this.highestThemeApplied = 0; // Initially, no theme has been applied
},
};
}
</script>
<div class="relative my-16 overflow-hidden">
<div id="our-commitment" class="absolute -mt-[250px]"></div>
<div class="flex flex-col justify-center gap-6 lg:mx-[144px]">
<div x-data="initCarouselcarousel12296326()" x-init="init()" class="relative w-full h-full mx-auto">
<div class="flex justify-between items-center mb-8 ">
<h2 class="text-3xl font-semibold ">Nos engagements pour bien voir et bien entendre</h2>
<div class="flex items-center justify-center space-x-4 ">
<div class=" hidden sm:flex flex space-x-2">
<button type="button" class="carousel-button-prev-carousel-12296326 before:border-none btn btn-dark-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
</svg>
</button>
<button type="button" class="carousel-button-next-carousel-12296326 before:border-none btn btn-dark-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div x-ref="swiperContainer" id="carousel-12296326" class="swiper md:h-full">
<div class="swiper-wrapper ">
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-12296326-0">
<div x-data="hyva.modal()" @click="show('opticTestModal', $event)" class="relative min-w-[80%] h-[484px] bg-center rounded-lg cursor-pointer bg-cover" style="background-image: url('/img/commitment/test-optic.png');">
<div class="absolute inset-0 bg-black/10 rounded-lg"></div>
<h2 class="absolute top-6 left-6 font-medium text-white text-2xl">Test de vue gratuit</h2>
<div class="absolute bottom-6 right-6">
<button type="button" class=" btn btn-light btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7V11.25H7C6.58579 11.25 6.25 11.5858 6.25 12C6.25 12.4142 6.58579 12.75 7 12.75H11.25V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.75H17C17.4142 12.75 17.75 12.4142 17.75 12C17.75 11.5858 17.4142 11.25 17 11.25H12.75V7Z" fill="currentColor" />
</svg>
</button>
</div>
<div x-cloak x-bind="overlay('opticTestModal')" x-spread="overlay('opticTestModal')" class="fixed inset-0 top-32 bg-black bg-opacity-50 backdrop-blur-xl z-50 overflow-y-auto cursor-default">
<div class="fixed flex w-full justify-center items-start text-left z-40 min-h-screen">
<div x-ref="opticTestModal" role="dialog" aria-modal="true" class="relative bg-white shadow-xl rounded-3xl p-10 w-[960px] my-10">
<div class="sticky top-6 flex justify-end -mr-4" @click.stop="hide()">
<button type="button" class=" btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="flex flex-col md:mx-8 mb-8">
<span class="font-medium text-normal">Êtes vous sûr de bien voir ?</span>
<h2 class="font-medium text-3xl">Test de vue gratuit</h2>
<picture>
<source srcset="/img/commitment/eyetest2.png" media="(min-width: 640px)" />
<img x-ref="image" src="/img/telemedecine/telemedecineMobile.png" alt="test de vue gratuit" class="object-cover object-center my-6 rounded-lg w-full h-full" loading="lazy" />
</picture>
<div class="flex flex-col gap-4">
<h2 class="font-medium text-3xl">Testez* gratuitement votre vue</h2>
<p>Aujourd’hui, les troubles visuels touchent environ 70% de la population française.Il est donc essentiel de faire contrôler votre vue régulièrement. Nous avons des solutions pour vous !</p>
</div>
<div class="flex flex-col gap-6 my-8">
<div class="flex flex-col gap-4 my-12">
<span class="text-xl font-medium mb-2">Faire vérifier votre vue en magasin, c'est simple et rapide !</span>
<div class="flex flex-col my-8 gap-4 lg:grid lg:grid-rows-2 lg:grid-flow-col gap-6">
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/phone2.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prendre un rendez-vous dans le magasin de votre choix.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/letter.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Notre opticien effectue une vérification de votre vue.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/eyes3.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">N'hésitez pas à apporter votre ordonnance.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/lunette.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">On vous aide à trouver la meilleure solution pour votre confort visuel</span>
</div>
</div>
</div>
<div class="bg-neutral-100 rounded-lg w-full flex flex-col">
<div class="flex flex-col m-9 gap-2">
<div class="flex flex-row items-center gap-1 mb-4">
<span><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM9.25 11C9.25 10.5858 9.58579 10.25 10 10.25H12C12.2489 10.25 12.4815 10.3734 12.621 10.5795C12.7606 10.7856 12.7888 11.0475 12.6964 11.2785L11.5192 14.2215C11.3221 14.7141 11.685 15.25 12.2155 15.25H13C13.4142 15.25 13.75 15.5858 13.75 16C13.75 16.4142 13.4142 16.75 13 16.75H12.2155C10.6238 16.75 9.5353 15.1423 10.1265 13.6644L10.8922 11.75H10C9.58579 11.75 9.25 11.4142 9.25 11ZM12 7C11.4478 7 11 7.44772 11 8C11 8.55228 11.4478 9 12 9H12.1C12.6523 9 13.1 8.55228 13.1 8C13.1 7.44772 12.6523 7 12.1 7H12Z" fill="currentColor" />
</svg>
</span>
<span class="text-xl font-medium">Bon à savoir : durée de validité de votre ordonnance</span>
</div>
<div class="flex flex-row items-center justify-between gap-1 bg-white px-6 w-full min-h-14 rounded-lg shadow-sm">
<span></span>
<span><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</span>
<span></span>
</div>
<div class="flex flex-row items-center justify-between gap-1 bg-white px-6 w-full min-h-14 rounded-lg shadow-sm">
<span></span>
<span><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</span>
<span></span>
</div>
<div class="flex flex-row items-center justify-between gap-1 bg-white px-6 w-full min-h-14 rounded-lg shadow-sm">
<span></span>
<span><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</span>
<span></span>
</div>
</div>
</div>
</div>
</div>
<div class="flex w-full justify-center sticky bottom-0 p-4 z-5 gap-x-4 lg:gap-x-6">
<div class="">
<button type="button" class=" btn btn-dark btn-size-large btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
'use strict';
(function() {
const modals = [];
const excludedFromFocusTrapping = new Set();
function trapFocusInNextModalWithOverlay() {
for (let idx = modals.length - 1; idx >= 0; idx--) {
const nextOnStack = modals[idx];
const nextDialogElement = nextOnStack.instance.$refs[nextOnStack.name];
if (!isOverlayDisabled(nextDialogElement)) {
hyva.trapFocus(nextDialogElement);
break;
}
}
}
function focusables(dialogElement) {
const selector = 'button, [href], input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
return Array.from(dialogElement.querySelectorAll(selector))
.filter(el => !el.hasAttribute('disabled'));
}
function firstVisible(elements) {
const a = Array.from(elements);
for (let i = 0; i < a.length; i++) {
if (a[i].offsetWidth || a[i].offsetHeight || a[i].getClientRects().length) return a[i];
}
return null;
}
function isInViewport(element) {
const rect = element && element.getBoundingClientRect();
return rect &&
rect.top >= 0 &&
rect.left >= 0 &&
rect.right <= window.innerWidth &&
rect.bottom <= window.innerHeight;
}
function setFocusAfterTransition(dialogElement, duration) {
/*
* If the dialog contains an x-focus-first element that is not within a nested dialog, set focus
* immediately from the trapFocus default, to avoid the switch after the transition duration.
*/
const nested = Array.from(dialogElement.querySelectorAll('[role="dialog"]'));
const candidates = Array.from(dialogElement.querySelectorAll('[x-focus-first]'));
next: for (let candidate of candidates) {
for (let child of nested) {
if (child.contains(candidate)) continue next;
}
setTimeout(() => candidate.focus(), 50);
break;
}
window.setTimeout(() => {
const focusElement = firstVisible(dialogElement.querySelectorAll('[x-focus-first]')) ||
focusables(dialogElement)[0] ||
null;
focusElement && isInViewport(focusElement) && focusElement.focus();
}, Math.max(1, duration));
}
function determineTrigger($refs, dialog, trigger) {
/* if show() was called without arguments use the event target as open trigger */
if (typeof trigger === 'undefined' && typeof dialog === 'object' && dialog.target instanceof HTMLElement) {
return dialog.target;
}
/* if show('name', $event) was called with the event as the second argument use the event target as trigger */
if (typeof dialog === 'string' && typeof trigger === 'object' && trigger.target instanceof HTMLElement) {
return trigger.target;
}
/* if show('name', 'trigger') was called with the ref name pr selector of the trigger element */
if (typeof trigger === 'string') {
try {
return $refs[trigger] || document.querySelector(trigger)
} catch (e) {
/* Intentionally left empty because we don't know if trigger is intended as a valid selector string */
}
}
/* if show('name', document.querySelector('...')) was called, use that as the trigger */
if (trigger instanceof Element) {
return trigger;
}
/* unknown trigger - no focus will be set when the dialog is hidden */
return null;
}
function isOverlayDisabled(dialog) {
return dialog && dialog.hasAttribute('x-no-overlay')
}
function areRemainingModalsWithoutOverlay(modals) {
const overflowDisabled = modals.map(modal => modal.instance.$refs[modal.name]).filter(isOverlayDisabled);
return overflowDisabled.length === modals.length;
}
window.hyva.modal = function(options) {
const config = Object.assign({
dialog: 'dialog',
duration: 300,
/* ms before allowing subsequent hiding of modals for nested modals (see transition duration) */
transitionEnter: 'transition ease-out duration-300',
transitionEnterStart: 'opacity-0',
transitionEnterEnd: 'opacity-100',
transitionLeave: 'transition ease-in duration-300',
transitionLeaveStart: 'opacity-100',
transitionLeaveEnd: 'opacity-0',
}, options);
let lastHide = 0;
return {
opened: {},
show(dialog, trigger) {
console.log('show');
const focusTargetAfterHide = determineTrigger(this.$refs, dialog, trigger);
const name = typeof dialog === 'string' ? dialog : config.dialog;
const dialogElement = this.$refs[name];
if (!dialogElement) {
console.error(`Use $modal->getShowJs() in the open trigger, or specify a custom name with\n$modal->withDialogRefName("my-name") and use show("my-name", $event).`);
return;
}
const useOverlay = !dialogElement.hasAttribute('x-no-overlay');
if (this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.add('!transform-none');
}
}
dialogElement.scrollTop = 0;
/* Prevent adding the same modal on the stack twice */
if (this.opened[name]) {
return;
}
if (focusTargetAfterHide) {
focusTargetAfterHide.setAttribute('aria-expanded', 'true');
}
this.opened[name] = true;
useOverlay && this.$nextTick(() => hyva.trapFocus(dialogElement));
setFocusAfterTransition(dialogElement, config.duration);
const frame = {
name,
instance: this,
focusTarget: focusTargetAfterHide,
time: Date.now()
};
modals.push(frame);
if (useOverlay) {
document.body.classList.add('overflow-hidden');
}
return new Promise(resolve => frame.resolve = resolve);
},
cancel() {
this.hide(false);
},
ok() {
this.hide(true);
},
hide(value) {
// Guard against Escape being pressed multiple times before a transition is finished, otherwise
// this function will pop further dialogs from the stack but the display will not update.
console.log('Hiding modal:', value);
if (Date.now() - lastHide < config.duration) {
return;
}
lastHide = Date.now();
const modal = modals.pop() || {};
const name = modal.name;
this.opened[name] = false;
hyva.releaseFocus(modal.instance.$refs[modal.name])
trapFocusInNextModalWithOverlay();
const nextFocusAfterHide = modal.focusTarget;
nextFocusAfterHide && setTimeout(() => {
nextFocusAfterHide.setAttribute('aria-expanded', 'false');
nextFocusAfterHide.focus()
}, config.duration);
if (modals.length === 0 || areRemainingModalsWithoutOverlay(modals)) {
document.body.classList.remove('overflow-hidden');
}
if (this.$refs && this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.remove('!transform-none');
}
}
modal.resolve(value);
},
overlay(dialog) {
const name = typeof dialog === 'string' ? dialog : config.dialog;
return {
['x-show']() {
return this.opened[name]
},
['x-transition:enter']: config.transitionEnter,
['x-transition:enter-start']: config.transitionEnterStart,
['x-transition:enter-end']: config.transitionEnterEnd,
['x-transition:leave']: config.transitionLeave,
['x-transition:leave-start']: config.transitionLeaveStart,
['x-transition:leave-end']: config.transitionLeaveEnd,
['@hyva-modal-show.window'](event) {
event.detail && event.detail.dialog === name && this.show(name, event.detail.focusAfterHide)
}
};
}
};
}
window.hyva.modal.peek = () => modals.length > 0 && modals[modals.length - 1]
window.hyva.modal.pop = function() {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
modal.instance.hide();
}
}
window.hyva.modal.excludeSelectorsFromFocusTrap = function(selectors) {
typeof selectors === 'string' || selectors instanceof String ?
excludedFromFocusTrapping.add(selectors) :
selectors.map(selector => excludedFromFocusTrapping.add(selector));
}
window.hyva.modal.eventListeners = {
keydown: event => {
if (event.key === 'Escape') {
window.hyva.modal.pop();
}
},
/* generic modal @click.outside handler */
click: event => {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
const dialog = modal.instance.$refs[modal.name];
if (modal.time + 50 < Date.now() && // if last click processing is more than 50ms ago
!isOverlayDisabled(dialog) && // if dialog has overlay
!dialog.contains(event.target)) { // if click is outside of dialog
modal.instance.hide();
}
}
}
};
document.addEventListener('keydown', window.hyva.modal.eventListeners.keydown);
document.addEventListener('click', window.hyva.modal.eventListeners.click);
})();
</script>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-12296326-1">
<div x-data="hyva.modal()" @click="show('audioTestModal', $event)" class="relative min-w-[80%] h-[484px] bg-center rounded-lg cursor-pointer bg-cover" style="background-image: url('/img/commitment/audiotest.png');">
<div class="absolute inset-0 bg-black/10 rounded-lg"></div>
<h2 class="absolute top-6 left-6 font-medium text-white text-2xl">Test d'audition gratuit</h2>
<div class="absolute bottom-6 right-6">
<button type="button" class=" btn btn-light btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7V11.25H7C6.58579 11.25 6.25 11.5858 6.25 12C6.25 12.4142 6.58579 12.75 7 12.75H11.25V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.75H17C17.4142 12.75 17.75 12.4142 17.75 12C17.75 11.5858 17.4142 11.25 17 11.25H12.75V7Z" fill="currentColor" />
</svg>
</button>
</div>
<div x-cloak x-bind="overlay('audioTestModal')" x-spread="overlay('audioTestModal')" class="fixed inset-0 top-32 bg-black bg-opacity-50 backdrop-blur-xl z-50 overflow-y-auto cursor-default">
<div class="fixed flex w-full justify-center items-start text-left z-40 min-h-screen">
<div x-ref="audioTestModal" role="dialog" aria-modal="true" class="relative bg-white shadow-xl rounded-3xl p-10 w-[960px] my-10">
<div class="sticky top-6 flex justify-end -mr-4" @click.stop="hide()">
<button type="button" class=" btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="flex flex-col md:mx-8 mb-8">
<span class="font-medium text-normal">Tester son audition est aussi simple que de tester sa vue.</span>
<h2 class="font-medium text-3xl">Test auditif gratuit*</h2>
<picture>
<source srcset="/img/commitment/audio-test.png" media="(min-width: 640px)" />
<img x-ref="image" src="/img/commitment/audiotest.png" alt="test de vue gratuit" class="object-cover object-center my-6 rounded-lg w-full h-full" loading="lazy" />
</picture>
<div class="flex flex-col gap-4">
<h2 class="font-medium text-3xl">Pourquoi se faire dépister ?</h2>
<p>Le dépistage est la première étape vers une bonne santé auditive. Pour cela, vous pouvez réaliser un test auditif par un professionnel de santé, médecin ORL ou audioprothésiste diplômé d’État.
Ce test a pour but de suivre l’évolution de votre audition et de déceler une possible perte auditive.
La prise en charge précoce d’un trouble auditif est la clé pour conserver son bien-être auditif le plus longtemps possible.</p>
<span>
<a href="#" class=" text-base link-leading-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
Link
</a>
</span>
</div>
<div class="flex flex-col gap-6 my-8">
<div class="flex flex-col lg:flex-row bg-neutral-100 rounded-lg w-full gap-9 p-9">
<img src="/img/commitment/goodmood.png" alt="/img/commitment/goodmood.png" class="h-[295px] lg:h-[425px] rounded-lg object-cover object-center lg:w-1/2">
<div class="lg:w-1/2">
<span class="text-xl font-medium">Comment se passe le test ?</span>
<div>
<ol class="flex flex-col list-decimal pl-5 my-4 gap-6">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</div>
<div class="flex flex-col gap-4 my-9">
<h2 class="text-xl font-medium">Être rappelé pour prendre rendez-vous</h2>
<p>Complétez le formulaire ci-dessous et nos conseillers vous rappelleront dans les plus brefs délais du lundi au vendredi de 10h à 12h et de 14h à 17h.</p>
</div>
</div>
</div>
<div class="relative flex flex-col bg-neutral-100 rounded-lg w-full gap-9 p-9 z-10">
<div class="flex flex-col gap-y-4">
<span class="font-medium">Civilité</span>
<div class="flex flex-row gap-6">
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Madame</span>
</label>
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Monsieur</span>
</label>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label>
<input type="text" placeholder="Nom" class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500">
</label>
<label>
<input type="text" placeholder="Prénom" class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500">
</label>
<label>
<input type="text" placeholder="Email" class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500">
</label>
<div class="flex flex-col lg:flex-row gap-2">
<select class="border-neutral-300 rounded-md inline-block md:w-auto w-full">
<option value="" selected>France (+33)</option>
<option value="">Antigua-et-Barbuda (+1268)</option>
<option value="">République centrafricaine (+236)</option>
</select>
<input type="text" placeholder="Téléphone" class="flex border-neutral-300 lg:w-3/4 rounded-md placeholder:text-neutral-500">
</div>
</div>
<div class="flex flex-col gap-y-4">
<span class="font-medium">Je possède déjà une ordonnance d'ORL</span>
<div class="flex flex-row gap-6">
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Oui</span>
</label>
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Non</span>
</label>
</div>
</div>
<div>
<label class="selection-control-label selection-control-size-sm">
<input type="checkbox">
<span>J’accepte de recevoir des offres et actualités de la part des enseignes du Groupe Afflelou** (Opticien et Acousticien).</span>
</label>
</div>
<div class="flex justify-center w-full">
<button type="button" class=" btn btn-audio btn-size-large btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.15544 3.68525C7.94039 3.50031 7.66543 3.39987 7.3818 3.40266L7.3749 3.4027H4.57004C4.40787 3.40289 4.24752 3.43683 4.09918 3.50235C3.95075 3.56792 3.81759 3.66367 3.70819 3.78352C3.59879 3.90336 3.51554 4.04468 3.46375 4.19846C3.41248 4.35069 3.39314 4.51184 3.40692 4.67185C3.70295 7.45044 4.64886 10.1204 6.16815 12.4656L6.1715 12.4708C7.55193 14.6432 9.39372 16.485 11.5661 17.8654L11.5716 17.8689C13.906 19.3828 16.5626 20.3284 19.3284 20.6301C19.4887 20.6438 19.6501 20.6242 19.8024 20.5727C19.9566 20.5206 20.0982 20.4368 20.2182 20.3268C20.3381 20.2167 20.4337 20.0829 20.4989 19.9337C20.5641 19.7846 20.5975 19.6235 20.5968 19.4607V19.4579V16.6527C20.5968 16.6469 20.5969 16.6411 20.597 16.6353C20.6041 16.3487 20.5057 16.0694 20.3203 15.8507C20.1356 15.6326 19.8774 15.4899 19.5946 15.4493C18.6456 15.3239 17.7139 15.0916 16.8171 14.757L16.8155 14.7564C16.6063 14.6777 16.379 14.6607 16.1604 14.7073C15.9424 14.7538 15.7423 14.8617 15.5836 15.0182L15.5824 15.0194L14.3976 16.2041C14.1744 16.4274 13.8295 16.4739 13.5551 16.3179C11.1043 14.9244 9.07516 12.8952 7.68163 10.4445C7.52558 10.17 7.57214 9.82515 7.79538 9.60192L8.98137 8.41592C9.13784 8.25722 9.24569 8.05708 9.29218 7.8391C9.33879 7.62054 9.32177 7.39321 9.24314 7.18403L9.24255 7.18245C8.90791 6.28567 8.67567 5.35396 8.55024 4.40505C8.51001 4.1253 8.36977 3.86957 8.15544 3.68525ZM7.37172 2.00009C7.99438 1.99486 8.59782 2.21575 9.06999 2.62181C9.5431 3.02869 9.85212 3.59371 9.93945 4.21157L9.94036 4.21801C10.0518 5.06331 10.2586 5.89328 10.5566 6.69209L10.5561 6.69051C10.729 7.1507 10.7665 7.65083 10.6639 8.13165C10.5614 8.61247 10.3232 9.05381 9.97748 9.40339L9.97472 9.40618L9.17237 10.2085C10.3338 12.0846 11.9149 13.6657 13.791 14.8271L14.5961 14.022C14.9457 13.6763 15.387 13.4381 15.8679 13.3356C16.3484 13.2331 16.8481 13.2704 17.3081 13.4431C18.1067 13.7411 18.9364 13.9477 19.7815 14.0592L19.7878 14.06C20.4123 14.1481 20.9827 14.4627 21.3905 14.944C21.7962 15.4228 22.0127 16.0334 21.9994 16.6607V19.4564C22.0007 19.814 21.9273 20.168 21.7841 20.4956C21.6406 20.8237 21.4302 21.1182 21.1664 21.3603C20.9025 21.6024 20.591 21.7867 20.2518 21.9014C19.9126 22.0161 19.5532 22.0587 19.1965 22.0265L19.1839 22.0252C16.1986 21.7008 13.3309 20.681 10.8111 19.0475C8.467 17.5574 6.47942 15.5698 4.98932 13.2257C3.3501 10.6944 2.32997 7.81274 2.01151 4.81391L2.01044 4.80297C1.97831 4.44742 2.02056 4.08908 2.13451 3.75076C2.24846 3.41244 2.4316 3.10156 2.67228 2.8379C2.91296 2.57424 3.20591 2.36358 3.53246 2.21934C3.85902 2.07509 4.21203 2.00043 4.56903 2.00009H7.37172Z" fill="currentColor" />
</svg>
Être rappelé
</button>
</div>
<p class="text-xs text-neutral-400">
En complétant le présent formulaire et en cliquant sur « être rappelé », je suis informé(e) et j’accepte que mes données personnelles soient traitées par la société LION SENECA/France AUDIO, en qualité de responsable de traitement afin de me recontacter pour organiser mon essayage d’aides auditives conformément à sa politique de confidentialité.
Mes données personnelles pourront également être utilisées, avec mon consentement, par les sociétés LION SENECA/France AUDIO et ALAIN AFFLELOU FRANCHISEUR pour m’envoyer de la prospection commerciale.
Pour en savoir plus sur le traitement de vos données et sur vos droits, consultez la politique de confidentialité Alain Afflelou Acousticien.
</p>
</div>
<div class="flex flex-col gap-2 text-neutral-500 text-xs mt-4">
<p>* Sous réserve d’une prescription médicale.</p>
<p>** Les sociétés Alain Afflelou Franchiseur et Lion/Seneca France Audio.</p>
</div>
<div class="flex w-full justify-center sticky bottom-0 p-4 z-5 gap-x-4 lg:gap-x-6">
<div class="">
<button type="button" class=" btn btn-audio btn-size-large btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.15544 3.68525C7.94039 3.50031 7.66543 3.39987 7.3818 3.40266L7.3749 3.4027H4.57004C4.40787 3.40289 4.24752 3.43683 4.09918 3.50235C3.95075 3.56792 3.81759 3.66367 3.70819 3.78352C3.59879 3.90336 3.51554 4.04468 3.46375 4.19846C3.41248 4.35069 3.39314 4.51184 3.40692 4.67185C3.70295 7.45044 4.64886 10.1204 6.16815 12.4656L6.1715 12.4708C7.55193 14.6432 9.39372 16.485 11.5661 17.8654L11.5716 17.8689C13.906 19.3828 16.5626 20.3284 19.3284 20.6301C19.4887 20.6438 19.6501 20.6242 19.8024 20.5727C19.9566 20.5206 20.0982 20.4368 20.2182 20.3268C20.3381 20.2167 20.4337 20.0829 20.4989 19.9337C20.5641 19.7846 20.5975 19.6235 20.5968 19.4607V19.4579V16.6527C20.5968 16.6469 20.5969 16.6411 20.597 16.6353C20.6041 16.3487 20.5057 16.0694 20.3203 15.8507C20.1356 15.6326 19.8774 15.4899 19.5946 15.4493C18.6456 15.3239 17.7139 15.0916 16.8171 14.757L16.8155 14.7564C16.6063 14.6777 16.379 14.6607 16.1604 14.7073C15.9424 14.7538 15.7423 14.8617 15.5836 15.0182L15.5824 15.0194L14.3976 16.2041C14.1744 16.4274 13.8295 16.4739 13.5551 16.3179C11.1043 14.9244 9.07516 12.8952 7.68163 10.4445C7.52558 10.17 7.57214 9.82515 7.79538 9.60192L8.98137 8.41592C9.13784 8.25722 9.24569 8.05708 9.29218 7.8391C9.33879 7.62054 9.32177 7.39321 9.24314 7.18403L9.24255 7.18245C8.90791 6.28567 8.67567 5.35396 8.55024 4.40505C8.51001 4.1253 8.36977 3.86957 8.15544 3.68525ZM7.37172 2.00009C7.99438 1.99486 8.59782 2.21575 9.06999 2.62181C9.5431 3.02869 9.85212 3.59371 9.93945 4.21157L9.94036 4.21801C10.0518 5.06331 10.2586 5.89328 10.5566 6.69209L10.5561 6.69051C10.729 7.1507 10.7665 7.65083 10.6639 8.13165C10.5614 8.61247 10.3232 9.05381 9.97748 9.40339L9.97472 9.40618L9.17237 10.2085C10.3338 12.0846 11.9149 13.6657 13.791 14.8271L14.5961 14.022C14.9457 13.6763 15.387 13.4381 15.8679 13.3356C16.3484 13.2331 16.8481 13.2704 17.3081 13.4431C18.1067 13.7411 18.9364 13.9477 19.7815 14.0592L19.7878 14.06C20.4123 14.1481 20.9827 14.4627 21.3905 14.944C21.7962 15.4228 22.0127 16.0334 21.9994 16.6607V19.4564C22.0007 19.814 21.9273 20.168 21.7841 20.4956C21.6406 20.8237 21.4302 21.1182 21.1664 21.3603C20.9025 21.6024 20.591 21.7867 20.2518 21.9014C19.9126 22.0161 19.5532 22.0587 19.1965 22.0265L19.1839 22.0252C16.1986 21.7008 13.3309 20.681 10.8111 19.0475C8.467 17.5574 6.47942 15.5698 4.98932 13.2257C3.3501 10.6944 2.32997 7.81274 2.01151 4.81391L2.01044 4.80297C1.97831 4.44742 2.02056 4.08908 2.13451 3.75076C2.24846 3.41244 2.4316 3.10156 2.67228 2.8379C2.91296 2.57424 3.20591 2.36358 3.53246 2.21934C3.85902 2.07509 4.21203 2.00043 4.56903 2.00009H7.37172Z" fill="currentColor" />
</svg>
Être rappelé
</button>
</div>
<div class="">
<button type="button" class=" btn btn-audio-subtle btn-size-large btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
<div class="">
<button type="button" class=" btn btn-audio-subtle btn-size-large btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
'use strict';
(function() {
const modals = [];
const excludedFromFocusTrapping = new Set();
function trapFocusInNextModalWithOverlay() {
for (let idx = modals.length - 1; idx >= 0; idx--) {
const nextOnStack = modals[idx];
const nextDialogElement = nextOnStack.instance.$refs[nextOnStack.name];
if (!isOverlayDisabled(nextDialogElement)) {
hyva.trapFocus(nextDialogElement);
break;
}
}
}
function focusables(dialogElement) {
const selector = 'button, [href], input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
return Array.from(dialogElement.querySelectorAll(selector))
.filter(el => !el.hasAttribute('disabled'));
}
function firstVisible(elements) {
const a = Array.from(elements);
for (let i = 0; i < a.length; i++) {
if (a[i].offsetWidth || a[i].offsetHeight || a[i].getClientRects().length) return a[i];
}
return null;
}
function isInViewport(element) {
const rect = element && element.getBoundingClientRect();
return rect &&
rect.top >= 0 &&
rect.left >= 0 &&
rect.right <= window.innerWidth &&
rect.bottom <= window.innerHeight;
}
function setFocusAfterTransition(dialogElement, duration) {
/*
* If the dialog contains an x-focus-first element that is not within a nested dialog, set focus
* immediately from the trapFocus default, to avoid the switch after the transition duration.
*/
const nested = Array.from(dialogElement.querySelectorAll('[role="dialog"]'));
const candidates = Array.from(dialogElement.querySelectorAll('[x-focus-first]'));
next: for (let candidate of candidates) {
for (let child of nested) {
if (child.contains(candidate)) continue next;
}
setTimeout(() => candidate.focus(), 50);
break;
}
window.setTimeout(() => {
const focusElement = firstVisible(dialogElement.querySelectorAll('[x-focus-first]')) ||
focusables(dialogElement)[0] ||
null;
focusElement && isInViewport(focusElement) && focusElement.focus();
}, Math.max(1, duration));
}
function determineTrigger($refs, dialog, trigger) {
/* if show() was called without arguments use the event target as open trigger */
if (typeof trigger === 'undefined' && typeof dialog === 'object' && dialog.target instanceof HTMLElement) {
return dialog.target;
}
/* if show('name', $event) was called with the event as the second argument use the event target as trigger */
if (typeof dialog === 'string' && typeof trigger === 'object' && trigger.target instanceof HTMLElement) {
return trigger.target;
}
/* if show('name', 'trigger') was called with the ref name pr selector of the trigger element */
if (typeof trigger === 'string') {
try {
return $refs[trigger] || document.querySelector(trigger)
} catch (e) {
/* Intentionally left empty because we don't know if trigger is intended as a valid selector string */
}
}
/* if show('name', document.querySelector('...')) was called, use that as the trigger */
if (trigger instanceof Element) {
return trigger;
}
/* unknown trigger - no focus will be set when the dialog is hidden */
return null;
}
function isOverlayDisabled(dialog) {
return dialog && dialog.hasAttribute('x-no-overlay')
}
function areRemainingModalsWithoutOverlay(modals) {
const overflowDisabled = modals.map(modal => modal.instance.$refs[modal.name]).filter(isOverlayDisabled);
return overflowDisabled.length === modals.length;
}
window.hyva.modal = function(options) {
const config = Object.assign({
dialog: 'dialog',
duration: 300,
/* ms before allowing subsequent hiding of modals for nested modals (see transition duration) */
transitionEnter: 'transition ease-out duration-300',
transitionEnterStart: 'opacity-0',
transitionEnterEnd: 'opacity-100',
transitionLeave: 'transition ease-in duration-300',
transitionLeaveStart: 'opacity-100',
transitionLeaveEnd: 'opacity-0',
}, options);
let lastHide = 0;
return {
opened: {},
show(dialog, trigger) {
console.log('show');
const focusTargetAfterHide = determineTrigger(this.$refs, dialog, trigger);
const name = typeof dialog === 'string' ? dialog : config.dialog;
const dialogElement = this.$refs[name];
if (!dialogElement) {
console.error(`Use $modal->getShowJs() in the open trigger, or specify a custom name with\n$modal->withDialogRefName("my-name") and use show("my-name", $event).`);
return;
}
const useOverlay = !dialogElement.hasAttribute('x-no-overlay');
if (this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.add('!transform-none');
}
}
dialogElement.scrollTop = 0;
/* Prevent adding the same modal on the stack twice */
if (this.opened[name]) {
return;
}
if (focusTargetAfterHide) {
focusTargetAfterHide.setAttribute('aria-expanded', 'true');
}
this.opened[name] = true;
useOverlay && this.$nextTick(() => hyva.trapFocus(dialogElement));
setFocusAfterTransition(dialogElement, config.duration);
const frame = {
name,
instance: this,
focusTarget: focusTargetAfterHide,
time: Date.now()
};
modals.push(frame);
if (useOverlay) {
document.body.classList.add('overflow-hidden');
}
return new Promise(resolve => frame.resolve = resolve);
},
cancel() {
this.hide(false);
},
ok() {
this.hide(true);
},
hide(value) {
// Guard against Escape being pressed multiple times before a transition is finished, otherwise
// this function will pop further dialogs from the stack but the display will not update.
console.log('Hiding modal:', value);
if (Date.now() - lastHide < config.duration) {
return;
}
lastHide = Date.now();
const modal = modals.pop() || {};
const name = modal.name;
this.opened[name] = false;
hyva.releaseFocus(modal.instance.$refs[modal.name])
trapFocusInNextModalWithOverlay();
const nextFocusAfterHide = modal.focusTarget;
nextFocusAfterHide && setTimeout(() => {
nextFocusAfterHide.setAttribute('aria-expanded', 'false');
nextFocusAfterHide.focus()
}, config.duration);
if (modals.length === 0 || areRemainingModalsWithoutOverlay(modals)) {
document.body.classList.remove('overflow-hidden');
}
if (this.$refs && this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.remove('!transform-none');
}
}
modal.resolve(value);
},
overlay(dialog) {
const name = typeof dialog === 'string' ? dialog : config.dialog;
return {
['x-show']() {
return this.opened[name]
},
['x-transition:enter']: config.transitionEnter,
['x-transition:enter-start']: config.transitionEnterStart,
['x-transition:enter-end']: config.transitionEnterEnd,
['x-transition:leave']: config.transitionLeave,
['x-transition:leave-start']: config.transitionLeaveStart,
['x-transition:leave-end']: config.transitionLeaveEnd,
['@hyva-modal-show.window'](event) {
event.detail && event.detail.dialog === name && this.show(name, event.detail.focusAfterHide)
}
};
}
};
}
window.hyva.modal.peek = () => modals.length > 0 && modals[modals.length - 1]
window.hyva.modal.pop = function() {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
modal.instance.hide();
}
}
window.hyva.modal.excludeSelectorsFromFocusTrap = function(selectors) {
typeof selectors === 'string' || selectors instanceof String ?
excludedFromFocusTrapping.add(selectors) :
selectors.map(selector => excludedFromFocusTrapping.add(selector));
}
window.hyva.modal.eventListeners = {
keydown: event => {
if (event.key === 'Escape') {
window.hyva.modal.pop();
}
},
/* generic modal @click.outside handler */
click: event => {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
const dialog = modal.instance.$refs[modal.name];
if (modal.time + 50 < Date.now() && // if last click processing is more than 50ms ago
!isOverlayDisabled(dialog) && // if dialog has overlay
!dialog.contains(event.target)) { // if click is outside of dialog
modal.instance.hide();
}
}
}
};
document.addEventListener('keydown', window.hyva.modal.eventListeners.keydown);
document.addEventListener('click', window.hyva.modal.eventListeners.click);
})();
</script>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-12296326-2">
<div x-data="hyva.modal()" @click="show('teleconsultingModal', $event)" class="relative min-w-[80%] h-[484px] bg-center rounded-lg cursor-pointer bg-cover" style="background-image: url('/img/commitment/commitment-teleconsultant.jpg');">
<div class="absolute inset-0 bg-black/10 rounded-lg"></div>
<h2 class="absolute top-6 left-6 font-medium text-white text-2xl">Téléconsultation</h2>
<div class="absolute bottom-6 right-6">
<button type="button" class=" btn btn-light btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7V11.25H7C6.58579 11.25 6.25 11.5858 6.25 12C6.25 12.4142 6.58579 12.75 7 12.75H11.25V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.75H17C17.4142 12.75 17.75 12.4142 17.75 12C17.75 11.5858 17.4142 11.25 17 11.25H12.75V7Z" fill="currentColor" />
</svg>
</button>
</div>
<div x-cloak x-bind="overlay('teleconsultingModal')" x-spread="overlay('teleconsultingModal')" class="fixed inset-0 top-32 bg-black bg-opacity-50 backdrop-blur-xl z-50 overflow-y-auto cursor-default">
<div class="fixed flex w-full justify-center items-start text-left z-40 min-h-screen">
<div x-ref="teleconsultingModal" role="dialog" aria-modal="true" class="relative bg-white shadow-xl rounded-3xl p-10 w-[960px] my-10">
<div class="sticky top-6 flex justify-end -mr-4" @click.stop="hide()">
<button type="button" class=" btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="flex flex-col md:mx-8 mb-8">
<span class="font-medium text-normal">Proximité, Innovation et Praticité</span>
<h2 class="font-medium text-3xl">Téléconsultation ophtalmologique</h2>
<picture>
<source srcset="/img/commitment/commitment-teleconsultant.jpg" media="(min-width: 640px)" />
<img x-ref="image" src="/img/telemedecine/telemedecineMobile.png" alt="téléconsultation" class="object-cover object-center my-6 rounded-lg w-full h-full" loading="lazy" />
</picture>
<div class="flex flex-col gap-4">
<h2 class="font-medium text-3xl">Gagnez un temps precieux !</h2>
<p>ALAIN AFFLELOU vous permet de bénéficier d'une téléconsultation avec un Ophtalmologue qui réalisera à distance
un examen complet de la vue. C'est un service innovant avec ou sans rendez-vous disponible <br> dans nos magasins
Alain Afflelou équipés près de chez vous.</p>
</div>
<div class="flex flex-col gap-6 my-8">
<div class="flex flex-col my-8 gap-4 ">
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/eye.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">ALAIN AFFLELOU prend soin de votre santé visuelle</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/eyetest.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prise en charge par des ophtalmologistes et orthoptistes diplômés</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/contente.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Tarifs conventionnés sans dépassement d'honoraires</span>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-6">
<div class="min-h-[496px] bg-neutral-100 rounded-lg lg:w-1/2 flex flex-col">
<div class="flex flex-col mx-4 my-9 md:mx-9 ">
<span class="text-xl font-medium">Déroulement de la <br> téléconsultation</span>
<div>
<ol class="flex flex-col list-decimal pl-5 my-4 gap-6">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<div class="flex flex-row items-center gap-1 mx-9 mb-9">
<span><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM9.25 11C9.25 10.5858 9.58579 10.25 10 10.25H12C12.2489 10.25 12.4815 10.3734 12.621 10.5795C12.7606 10.7856 12.7888 11.0475 12.6964 11.2785L11.5192 14.2215C11.3221 14.7141 11.685 15.25 12.2155 15.25H13C13.4142 15.25 13.75 15.5858 13.75 16C13.75 16.4142 13.4142 16.75 13 16.75H12.2155C10.6238 16.75 9.5353 15.1423 10.1265 13.6644L10.8922 11.75H10C9.58579 11.75 9.25 11.4142 9.25 11ZM12 7C11.4478 7 11 7.44772 11 8C11 8.55228 11.4478 9 12 9H12.1C12.6523 9 13.1 8.55228 13.1 8C13.1 7.44772 12.6523 7 12.1 7H12Z" fill="currentColor" />
</svg>
</span>
<span>Assurez-vous de la disponibilité de la salle en prenant <b>rendez-vous</b></span>
</div>
</div>
<div class="min-h-[496px] bg-neutral-100 rounded-lg lg:w-1/2 flex flex-col justify-between">
<div class="flex flex-col mx-4 my-9 md:mx-9 flex-grow gap-6">
<span class="text-xl font-medium">À ne pas oublier lors de votre<br> venue :</span>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/cartevitale.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prendre un rendez-vous dans le magasin de votre choix.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/phone.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prendre un rendez-vous dans le magasin de votre choix.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/cb.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prendre un rendez-vous dans le magasin de votre choix.</span>
</div>
</div>
</div>
</div>
<div>
<div class="my-10">
<span class="text-xl font-medium">Questions fréquentes</span>
<div x-data="{ open: null }" class="divide-y border-y my-6">
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Quels sont les avantages de la téléconsultation ophtalmologique ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<span>La téléconsultation ophtalmologique proposée par Alain Afflelou présente plusieurs avantages...</span>
<ul class="list-disc pl-5 mt-2">
<li>Lutte contre les déserts médicaux</li>
<li>Pas de rendez-vous préalable nécessaire</li>
<li>Réduction des délais d'attente</li>
<li>Consultation immédiate</li>
<li>Technologie innovante</li>
<li>Dépistage de pathologies</li>
<li>Suivi médical de votre vision plus régulière</li>
</ul>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Quels sont les équipements utilisés durant la téléconsultation ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<p>Lors de la téléconsultation ophtalmologique proposée par Alain Afflelou...</p>
<ul class="list-disc pl-5 mt-2">
<li>Frontofocomètre</li>
<li>Auto-réfractomètre</li>
<li>Réfractomètre binoculaire</li>
<li>Tonométrie</li>
<li>Pachymétrie</li>
<li>Topographie</li>
<li>Rétinographie</li>
</ul>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Est-ce que le service est gratuit ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<p>Le service de téléconsultation ophtalmologique proposé par Alain Afflelou n'est pas gratuit, mais il est proposé au tarif conventionné, c'est-à-dire sans dépassement d'honoraires.
Cela signifie que les consultations sont facturées selon les tarifs fixés par la sécurité sociale, ce qui permet aux patients de bénéficier d'une prise en charge partielle ou totale par leur assurance maladie, en fonction de leur couverture.</p>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Suis-je obligé d'acheter après ma téléconsultation ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<p>Non, vous êtes libre d'acheter vos lunettes, lentilles ou autres équipements où vous le souhaitez après avoir reçu l'ordonnance à la suite de la téléconsultation.
Il n'y a aucune obligation d'achat dans les magasins Alain Afflelou qui proposent ce service.</p>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Pour quels motifs puis-je faire un rendez-vous en téléconsultation ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<div class="space-y-4">
<p>Vous pouvez prendre un rendez-vous pour plusieurs motifs, principalement liés à la correction visuelle et au dépistage de certaines pathologies.</p>
<p>Comme par exemple :</p>
<ul class="list-disc pl-5">
<li>Renouvellement ou primo-prescription de lunettes,</li>
<li>Renouvellement de lentilles,</li>
<li>Renouvellement de lunettes et lentilles.</li>
</ul>
<p>Un dépistage des pathologies sera systématiquement réalisé, cependant si vous êtes atteint d'une pathologie déjà connue (DMLA, cataracte, glaucome...) il sera préférable de consulter un ophtalmologue en physique. Aussi, la téléconsultation n'est pas adaptée pour des cas d'œil rouge, de conjonctivite, orgelet ou autre infection de ce type.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex w-full justify-center sticky bottom-0 p-4 z-5 gap-x-4 lg:gap-x-6">
<div class="">
<button type="button" class=" btn btn-dark btn-size-large btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
'use strict';
(function() {
const modals = [];
const excludedFromFocusTrapping = new Set();
function trapFocusInNextModalWithOverlay() {
for (let idx = modals.length - 1; idx >= 0; idx--) {
const nextOnStack = modals[idx];
const nextDialogElement = nextOnStack.instance.$refs[nextOnStack.name];
if (!isOverlayDisabled(nextDialogElement)) {
hyva.trapFocus(nextDialogElement);
break;
}
}
}
function focusables(dialogElement) {
const selector = 'button, [href], input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
return Array.from(dialogElement.querySelectorAll(selector))
.filter(el => !el.hasAttribute('disabled'));
}
function firstVisible(elements) {
const a = Array.from(elements);
for (let i = 0; i < a.length; i++) {
if (a[i].offsetWidth || a[i].offsetHeight || a[i].getClientRects().length) return a[i];
}
return null;
}
function isInViewport(element) {
const rect = element && element.getBoundingClientRect();
return rect &&
rect.top >= 0 &&
rect.left >= 0 &&
rect.right <= window.innerWidth &&
rect.bottom <= window.innerHeight;
}
function setFocusAfterTransition(dialogElement, duration) {
/*
* If the dialog contains an x-focus-first element that is not within a nested dialog, set focus
* immediately from the trapFocus default, to avoid the switch after the transition duration.
*/
const nested = Array.from(dialogElement.querySelectorAll('[role="dialog"]'));
const candidates = Array.from(dialogElement.querySelectorAll('[x-focus-first]'));
next: for (let candidate of candidates) {
for (let child of nested) {
if (child.contains(candidate)) continue next;
}
setTimeout(() => candidate.focus(), 50);
break;
}
window.setTimeout(() => {
const focusElement = firstVisible(dialogElement.querySelectorAll('[x-focus-first]')) ||
focusables(dialogElement)[0] ||
null;
focusElement && isInViewport(focusElement) && focusElement.focus();
}, Math.max(1, duration));
}
function determineTrigger($refs, dialog, trigger) {
/* if show() was called without arguments use the event target as open trigger */
if (typeof trigger === 'undefined' && typeof dialog === 'object' && dialog.target instanceof HTMLElement) {
return dialog.target;
}
/* if show('name', $event) was called with the event as the second argument use the event target as trigger */
if (typeof dialog === 'string' && typeof trigger === 'object' && trigger.target instanceof HTMLElement) {
return trigger.target;
}
/* if show('name', 'trigger') was called with the ref name pr selector of the trigger element */
if (typeof trigger === 'string') {
try {
return $refs[trigger] || document.querySelector(trigger)
} catch (e) {
/* Intentionally left empty because we don't know if trigger is intended as a valid selector string */
}
}
/* if show('name', document.querySelector('...')) was called, use that as the trigger */
if (trigger instanceof Element) {
return trigger;
}
/* unknown trigger - no focus will be set when the dialog is hidden */
return null;
}
function isOverlayDisabled(dialog) {
return dialog && dialog.hasAttribute('x-no-overlay')
}
function areRemainingModalsWithoutOverlay(modals) {
const overflowDisabled = modals.map(modal => modal.instance.$refs[modal.name]).filter(isOverlayDisabled);
return overflowDisabled.length === modals.length;
}
window.hyva.modal = function(options) {
const config = Object.assign({
dialog: 'dialog',
duration: 300,
/* ms before allowing subsequent hiding of modals for nested modals (see transition duration) */
transitionEnter: 'transition ease-out duration-300',
transitionEnterStart: 'opacity-0',
transitionEnterEnd: 'opacity-100',
transitionLeave: 'transition ease-in duration-300',
transitionLeaveStart: 'opacity-100',
transitionLeaveEnd: 'opacity-0',
}, options);
let lastHide = 0;
return {
opened: {},
show(dialog, trigger) {
console.log('show');
const focusTargetAfterHide = determineTrigger(this.$refs, dialog, trigger);
const name = typeof dialog === 'string' ? dialog : config.dialog;
const dialogElement = this.$refs[name];
if (!dialogElement) {
console.error(`Use $modal->getShowJs() in the open trigger, or specify a custom name with\n$modal->withDialogRefName("my-name") and use show("my-name", $event).`);
return;
}
const useOverlay = !dialogElement.hasAttribute('x-no-overlay');
if (this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.add('!transform-none');
}
}
dialogElement.scrollTop = 0;
/* Prevent adding the same modal on the stack twice */
if (this.opened[name]) {
return;
}
if (focusTargetAfterHide) {
focusTargetAfterHide.setAttribute('aria-expanded', 'true');
}
this.opened[name] = true;
useOverlay && this.$nextTick(() => hyva.trapFocus(dialogElement));
setFocusAfterTransition(dialogElement, config.duration);
const frame = {
name,
instance: this,
focusTarget: focusTargetAfterHide,
time: Date.now()
};
modals.push(frame);
if (useOverlay) {
document.body.classList.add('overflow-hidden');
}
return new Promise(resolve => frame.resolve = resolve);
},
cancel() {
this.hide(false);
},
ok() {
this.hide(true);
},
hide(value) {
// Guard against Escape being pressed multiple times before a transition is finished, otherwise
// this function will pop further dialogs from the stack but the display will not update.
console.log('Hiding modal:', value);
if (Date.now() - lastHide < config.duration) {
return;
}
lastHide = Date.now();
const modal = modals.pop() || {};
const name = modal.name;
this.opened[name] = false;
hyva.releaseFocus(modal.instance.$refs[modal.name])
trapFocusInNextModalWithOverlay();
const nextFocusAfterHide = modal.focusTarget;
nextFocusAfterHide && setTimeout(() => {
nextFocusAfterHide.setAttribute('aria-expanded', 'false');
nextFocusAfterHide.focus()
}, config.duration);
if (modals.length === 0 || areRemainingModalsWithoutOverlay(modals)) {
document.body.classList.remove('overflow-hidden');
}
if (this.$refs && this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.remove('!transform-none');
}
}
modal.resolve(value);
},
overlay(dialog) {
const name = typeof dialog === 'string' ? dialog : config.dialog;
return {
['x-show']() {
return this.opened[name]
},
['x-transition:enter']: config.transitionEnter,
['x-transition:enter-start']: config.transitionEnterStart,
['x-transition:enter-end']: config.transitionEnterEnd,
['x-transition:leave']: config.transitionLeave,
['x-transition:leave-start']: config.transitionLeaveStart,
['x-transition:leave-end']: config.transitionLeaveEnd,
['@hyva-modal-show.window'](event) {
event.detail && event.detail.dialog === name && this.show(name, event.detail.focusAfterHide)
}
};
}
};
}
window.hyva.modal.peek = () => modals.length > 0 && modals[modals.length - 1]
window.hyva.modal.pop = function() {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
modal.instance.hide();
}
}
window.hyva.modal.excludeSelectorsFromFocusTrap = function(selectors) {
typeof selectors === 'string' || selectors instanceof String ?
excludedFromFocusTrapping.add(selectors) :
selectors.map(selector => excludedFromFocusTrapping.add(selector));
}
window.hyva.modal.eventListeners = {
keydown: event => {
if (event.key === 'Escape') {
window.hyva.modal.pop();
}
},
/* generic modal @click.outside handler */
click: event => {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
const dialog = modal.instance.$refs[modal.name];
if (modal.time + 50 < Date.now() && // if last click processing is more than 50ms ago
!isOverlayDisabled(dialog) && // if dialog has overlay
!dialog.contains(event.target)) { // if click is outside of dialog
modal.instance.hide();
}
}
}
};
document.addEventListener('keydown', window.hyva.modal.eventListeners.keydown);
document.addEventListener('click', window.hyva.modal.eventListeners.click);
})();
</script>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-12296326-3">
<div x-data="hyva.modal()" @click="show('visagismModal', $event)" class="relative min-w-[80%] h-[484px] bg-center rounded-lg cursor-pointer bg-cover" style="background-image: url('/img/commitment/visagism.png');">
<div class="absolute inset-0 bg-black/10 rounded-lg"></div>
<h2 class="absolute top-6 left-6 font-medium text-white text-2xl">Visagisme</h2>
<div class="absolute bottom-6 right-6">
<button type="button" class=" btn btn-light btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7V11.25H7C6.58579 11.25 6.25 11.5858 6.25 12C6.25 12.4142 6.58579 12.75 7 12.75H11.25V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.75H17C17.4142 12.75 17.75 12.4142 17.75 12C17.75 11.5858 17.4142 11.25 17 11.25H12.75V7Z" fill="currentColor" />
</svg>
</button>
</div>
<div x-cloak x-bind="overlay('visagismModal')" x-spread="overlay('visagismModal')" class="fixed inset-0 top-32 bg-black bg-opacity-50 backdrop-blur-xl z-50 overflow-y-auto cursor-default">
<div class="fixed flex w-full justify-center items-start text-left z-40 min-h-screen">
<div x-ref="visagismModal" role="dialog" aria-modal="true" class="relative bg-white shadow-xl rounded-3xl p-10 w-[960px] my-10">
<div class="sticky top-6 flex justify-end -mr-4" @click.stop="hide()">
<button type="button" class=" btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="flex flex-col md:mx-8 mb-8">
<span class="font-medium text-normal">Notre engagement</span>
<h2 class="font-medium text-3xl">Visagisme</h2>
<picture>
<source srcset="/img/commitment/commitment-teleconsultant.jpg" media="(min-width: 640px)" />
<img x-ref="image" src="/img/telemedecine/telemedecineMobile.png" alt="téléconsultation" class="object-cover object-center my-6 rounded-lg w-full h-full" loading="lazy" />
</picture>
<div class="flex flex-col gap-4">
<h2 class="font-medium text-3xl">Notre engagement pour votre vision</h2>
<p>Description de l'engagement...</p>
</div>
<div class="flex flex-col gap-6 my-8">
<div class="flex flex-col my-8 gap-4 ">
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/eye.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">ALAIN AFFLELOU prend soin de votre santé visuelle</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/eyetest.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prise en charge par des ophtalmologistes et orthoptistes diplômés</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/contente.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Tarifs conventionnés sans dépassement d'honoraires</span>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-6">
<div class="min-h-[496px] bg-neutral-100 rounded-lg lg:w-1/2 flex flex-col">
<div class="flex flex-col mx-4 my-9 md:mx-9 ">
<span class="text-xl font-medium">Déroulement de la téléconsultation</span>
<div>
<ol class="flex flex-col list-decimal pl-5 my-4 gap-6">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<div class="flex flex-row items-center gap-1 mx-9 mb-9">
<span><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM9.25 11C9.25 10.5858 9.58579 10.25 10 10.25H12C12.2489 10.25 12.4815 10.3734 12.621 10.5795C12.7606 10.7856 12.7888 11.0475 12.6964 11.2785L11.5192 14.2215C11.3221 14.7141 11.685 15.25 12.2155 15.25H13C13.4142 15.25 13.75 15.5858 13.75 16C13.75 16.4142 13.4142 16.75 13 16.75H12.2155C10.6238 16.75 9.5353 15.1423 10.1265 13.6644L10.8922 11.75H10C9.58579 11.75 9.25 11.4142 9.25 11ZM12 7C11.4478 7 11 7.44772 11 8C11 8.55228 11.4478 9 12 9H12.1C12.6523 9 13.1 8.55228 13.1 8C13.1 7.44772 12.6523 7 12.1 7H12Z" fill="currentColor" />
</svg>
</span>
<span>Assurez-vous de la disponibilité de la salle en prenant <b>rendez-vous</b></span>
</div>
</div>
<div class="min-h-[496px] bg-neutral-100 rounded-lg lg:w-1/2 flex flex-col justify-between">
<div class="flex flex-col mx-4 my-9 md:mx-9 flex-grow gap-6">
<span class="text-xl font-medium">À ne pas oublier lors de votre<br> venue :</span>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/cartevitale.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prendre un rendez-vous dans le magasin de votre choix.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/phone.jpeg" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prendre un rendez-vous dans le magasin de votre choix.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/commitment/cb.png" alt="" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prendre un rendez-vous dans le magasin de votre choix.</span>
</div>
</div>
</div>
</div>
<div>
<div class="my-10">
<span class="text-xl font-medium">Questions fréquentes</span>
<div x-data="{ open: null }" class="divide-y border-y my-6">
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Quels sont les avantages de la téléconsultation ophtalmologique ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<span>La téléconsultation ophtalmologique proposée par Alain Afflelou présente plusieurs avantages...</span>
<ul class="list-disc pl-5 mt-2">
<li>Lutte contre les déserts médicaux</li>
<li>Pas de rendez-vous préalable nécessaire</li>
<li>Réduction des délais d'attente</li>
<li>Consultation immédiate</li>
<li>Technologie innovante</li>
<li>Dépistage de pathologies</li>
<li>Suivi médical de votre vision plus régulière</li>
</ul>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Quels sont les équipements utilisés durant la téléconsultation ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<p>Lors de la téléconsultation ophtalmologique proposée par Alain Afflelou...</p>
<ul class="list-disc pl-5 mt-2">
<li>Frontofocomètre</li>
<li>Auto-réfractomètre</li>
<li>Réfractomètre binoculaire</li>
<li>Tonométrie</li>
<li>Pachymétrie</li>
<li>Topographie</li>
<li>Rétinographie</li>
</ul>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Est-ce que le service est gratuit ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<p>Le service de téléconsultation ophtalmologique proposé par Alain Afflelou n'est pas gratuit, mais il est proposé au tarif conventionné, c'est-à-dire sans dépassement d'honoraires.
Cela signifie que les consultations sont facturées selon les tarifs fixés par la sécurité sociale, ce qui permet aux patients de bénéficier d'une prise en charge partielle ou totale par leur assurance maladie, en fonction de leur couverture.</p>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Suis-je obligé d'acheter après ma téléconsultation ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<p>Non, vous êtes libre d'acheter vos lunettes, lentilles ou autres équipements où vous le souhaitez après avoir reçu l'ordonnance à la suite de la téléconsultation.
Il n'y a aucune obligation d'achat dans les magasins Alain Afflelou qui proposent ce service.</p>
</div>
</div>
<div x-data="{ expanded: false }" class=" text-neutral-800">
<h2 class="font-semibold">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full py-4 ">
<span class="flex flex-wrap gap-3">
Pour quels motifs puis-je faire un rendez-vous en téléconsultation ?
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class="py-4 text-sm">
<div class="space-y-4">
<p>Vous pouvez prendre un rendez-vous pour plusieurs motifs, principalement liés à la correction visuelle et au dépistage de certaines pathologies.</p>
<p>Comme par exemple :</p>
<ul class="list-disc pl-5">
<li>Renouvellement ou primo-prescription de lunettes,</li>
<li>Renouvellement de lentilles,</li>
<li>Renouvellement de lunettes et lentilles.</li>
</ul>
<p>Un dépistage des pathologies sera systématiquement réalisé, cependant si vous êtes atteint d'une pathologie déjà connue (DMLA, cataracte, glaucome...) il sera préférable de consulter un ophtalmologue en physique. Aussi, la téléconsultation n'est pas adaptée pour des cas d'œil rouge, de conjonctivite, orgelet ou autre infection de ce type.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex w-full justify-center sticky bottom-0 p-4 z-5 gap-x-4 lg:gap-x-6">
<div class="">
<button type="button" class=" btn btn-dark btn-size-large btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
'use strict';
(function() {
const modals = [];
const excludedFromFocusTrapping = new Set();
function trapFocusInNextModalWithOverlay() {
for (let idx = modals.length - 1; idx >= 0; idx--) {
const nextOnStack = modals[idx];
const nextDialogElement = nextOnStack.instance.$refs[nextOnStack.name];
if (!isOverlayDisabled(nextDialogElement)) {
hyva.trapFocus(nextDialogElement);
break;
}
}
}
function focusables(dialogElement) {
const selector = 'button, [href], input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
return Array.from(dialogElement.querySelectorAll(selector))
.filter(el => !el.hasAttribute('disabled'));
}
function firstVisible(elements) {
const a = Array.from(elements);
for (let i = 0; i < a.length; i++) {
if (a[i].offsetWidth || a[i].offsetHeight || a[i].getClientRects().length) return a[i];
}
return null;
}
function isInViewport(element) {
const rect = element && element.getBoundingClientRect();
return rect &&
rect.top >= 0 &&
rect.left >= 0 &&
rect.right <= window.innerWidth &&
rect.bottom <= window.innerHeight;
}
function setFocusAfterTransition(dialogElement, duration) {
/*
* If the dialog contains an x-focus-first element that is not within a nested dialog, set focus
* immediately from the trapFocus default, to avoid the switch after the transition duration.
*/
const nested = Array.from(dialogElement.querySelectorAll('[role="dialog"]'));
const candidates = Array.from(dialogElement.querySelectorAll('[x-focus-first]'));
next: for (let candidate of candidates) {
for (let child of nested) {
if (child.contains(candidate)) continue next;
}
setTimeout(() => candidate.focus(), 50);
break;
}
window.setTimeout(() => {
const focusElement = firstVisible(dialogElement.querySelectorAll('[x-focus-first]')) ||
focusables(dialogElement)[0] ||
null;
focusElement && isInViewport(focusElement) && focusElement.focus();
}, Math.max(1, duration));
}
function determineTrigger($refs, dialog, trigger) {
/* if show() was called without arguments use the event target as open trigger */
if (typeof trigger === 'undefined' && typeof dialog === 'object' && dialog.target instanceof HTMLElement) {
return dialog.target;
}
/* if show('name', $event) was called with the event as the second argument use the event target as trigger */
if (typeof dialog === 'string' && typeof trigger === 'object' && trigger.target instanceof HTMLElement) {
return trigger.target;
}
/* if show('name', 'trigger') was called with the ref name pr selector of the trigger element */
if (typeof trigger === 'string') {
try {
return $refs[trigger] || document.querySelector(trigger)
} catch (e) {
/* Intentionally left empty because we don't know if trigger is intended as a valid selector string */
}
}
/* if show('name', document.querySelector('...')) was called, use that as the trigger */
if (trigger instanceof Element) {
return trigger;
}
/* unknown trigger - no focus will be set when the dialog is hidden */
return null;
}
function isOverlayDisabled(dialog) {
return dialog && dialog.hasAttribute('x-no-overlay')
}
function areRemainingModalsWithoutOverlay(modals) {
const overflowDisabled = modals.map(modal => modal.instance.$refs[modal.name]).filter(isOverlayDisabled);
return overflowDisabled.length === modals.length;
}
window.hyva.modal = function(options) {
const config = Object.assign({
dialog: 'dialog',
duration: 300,
/* ms before allowing subsequent hiding of modals for nested modals (see transition duration) */
transitionEnter: 'transition ease-out duration-300',
transitionEnterStart: 'opacity-0',
transitionEnterEnd: 'opacity-100',
transitionLeave: 'transition ease-in duration-300',
transitionLeaveStart: 'opacity-100',
transitionLeaveEnd: 'opacity-0',
}, options);
let lastHide = 0;
return {
opened: {},
show(dialog, trigger) {
console.log('show');
const focusTargetAfterHide = determineTrigger(this.$refs, dialog, trigger);
const name = typeof dialog === 'string' ? dialog : config.dialog;
const dialogElement = this.$refs[name];
if (!dialogElement) {
console.error(`Use $modal->getShowJs() in the open trigger, or specify a custom name with\n$modal->withDialogRefName("my-name") and use show("my-name", $event).`);
return;
}
const useOverlay = !dialogElement.hasAttribute('x-no-overlay');
if (this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.add('!transform-none');
}
}
dialogElement.scrollTop = 0;
/* Prevent adding the same modal on the stack twice */
if (this.opened[name]) {
return;
}
if (focusTargetAfterHide) {
focusTargetAfterHide.setAttribute('aria-expanded', 'true');
}
this.opened[name] = true;
useOverlay && this.$nextTick(() => hyva.trapFocus(dialogElement));
setFocusAfterTransition(dialogElement, config.duration);
const frame = {
name,
instance: this,
focusTarget: focusTargetAfterHide,
time: Date.now()
};
modals.push(frame);
if (useOverlay) {
document.body.classList.add('overflow-hidden');
}
return new Promise(resolve => frame.resolve = resolve);
},
cancel() {
this.hide(false);
},
ok() {
this.hide(true);
},
hide(value) {
// Guard against Escape being pressed multiple times before a transition is finished, otherwise
// this function will pop further dialogs from the stack but the display will not update.
console.log('Hiding modal:', value);
if (Date.now() - lastHide < config.duration) {
return;
}
lastHide = Date.now();
const modal = modals.pop() || {};
const name = modal.name;
this.opened[name] = false;
hyva.releaseFocus(modal.instance.$refs[modal.name])
trapFocusInNextModalWithOverlay();
const nextFocusAfterHide = modal.focusTarget;
nextFocusAfterHide && setTimeout(() => {
nextFocusAfterHide.setAttribute('aria-expanded', 'false');
nextFocusAfterHide.focus()
}, config.duration);
if (modals.length === 0 || areRemainingModalsWithoutOverlay(modals)) {
document.body.classList.remove('overflow-hidden');
}
if (this.$refs && this.$refs.swiperContainer && this.$refs.swiperContainer.querySelector) {
const swiperWrapper = this.$refs.swiperContainer.querySelector('.swiper-wrapper');
if (swiperWrapper) {
swiperWrapper.classList.remove('!transform-none');
}
}
modal.resolve(value);
},
overlay(dialog) {
const name = typeof dialog === 'string' ? dialog : config.dialog;
return {
['x-show']() {
return this.opened[name]
},
['x-transition:enter']: config.transitionEnter,
['x-transition:enter-start']: config.transitionEnterStart,
['x-transition:enter-end']: config.transitionEnterEnd,
['x-transition:leave']: config.transitionLeave,
['x-transition:leave-start']: config.transitionLeaveStart,
['x-transition:leave-end']: config.transitionLeaveEnd,
['@hyva-modal-show.window'](event) {
event.detail && event.detail.dialog === name && this.show(name, event.detail.focusAfterHide)
}
};
}
};
}
window.hyva.modal.peek = () => modals.length > 0 && modals[modals.length - 1]
window.hyva.modal.pop = function() {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
modal.instance.hide();
}
}
window.hyva.modal.excludeSelectorsFromFocusTrap = function(selectors) {
typeof selectors === 'string' || selectors instanceof String ?
excludedFromFocusTrapping.add(selectors) :
selectors.map(selector => excludedFromFocusTrapping.add(selector));
}
window.hyva.modal.eventListeners = {
keydown: event => {
if (event.key === 'Escape') {
window.hyva.modal.pop();
}
},
/* generic modal @click.outside handler */
click: event => {
if (modals.length > 0) {
const modal = modals[modals.length - 1];
const dialog = modal.instance.$refs[modal.name];
if (modal.time + 50 < Date.now() && // if last click processing is more than 50ms ago
!isOverlayDisabled(dialog) && // if dialog has overlay
!dialog.contains(event.target)) { // if click is outside of dialog
modal.instance.hide();
}
}
}
};
document.addEventListener('keydown', window.hyva.modal.eventListeners.keydown);
document.addEventListener('click', window.hyva.modal.eventListeners.click);
})();
</script>
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-12296326 swiper-pagination swiper-light"></div>
<div class="flex sm:hidden mt-6">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" class="mx-auto btn btn-dark-subtle ">
Voir toute la collection
</a>
</div>
</div>
</div>
<script>
function initCarouselcarousel12296326() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 1.3,
"tablet": 2.3,
"desktop": 4
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false
},
componentId: 'carousel-12296326',
init() {
this.initSwiper();
if (typeof this.customFunction === 'function') {
this.customFunction();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
},
1024: {
slidesPerView: this.options.slidesPerView.desktop
}
},
on: {
slideChange: () => this.updateSliderTheme(),
},
});
this.updateSliderTheme();
},
updateSliderTheme() {
const activeSlide = this.swiper.slides[this.swiper.activeIndex];
const theme = activeSlide.getAttribute('data-slider-theme');
this.sliderTheme = theme || 'light';
},
customFunction() {
// Custom function can be defined here and overridden outside.
}
};
}
</script>
</div>
</div>
<div class="flex justify-center m-16 md:block md:mx-56 md:my-16">
<div class="homepage-newsletter max-md:w-[343px] lg:w-full md:h-auto flex flex-col md:flex-row">
<div class=" flex items-center justify-center">
<div class="w-full max-w-[662px] aspect-square">
<img src="/img/newletter-img.jpeg" alt="Newsletter" class="w-full h-full object-cover rounded-lg">
</div>
</div>
<div class="p-6 md:p-0 md:pl-6 lg:p-24 ">
<div class="flex flex-col w-full max-w-full md:max-w-[90%] lg:max-w-[450px]">
<span class="font-bold text-dark-50 pb-1">Newsletter</span>
<span class="text-3xl lg:text-5xl text-neutral-800 font-medium pt-1 pb-6">10% de réduction sur votre première commande !</span>
<span class="lg:text-xl text-neutral-800">Abonnez-vous à la newsletter et recevez une réduction de 10% sur votre prochain achat sur afflelou.com</span>
</div>
<div class="flex flex-col lg:flex-row gap-2 lg:gap-4 justify-center md:justify-between pt-6 lg:pt-12 pb-6 md:max-w-[90%]">
<label>
<input type="text" placeholder="Saisissez votre adresse e-mail" class="border-neutral-300 w-full md:w-[242px] h-[40px] rounded-md placeholder:text-neutral-500">
</label>
<button type="button" class=" btn btn-dark btn-size-newsletter">
S'abonner
</button>
</div>
<div class="w-full max-w-full md:max-w-[90%] lg:max-w-[450px]">
<span class="text-xs md:text-sm text-neutral-600">
En vous abonnant, vous acceptez que votre e-mail soit utilisé pour recevoir des offres et actualités.
Vous pouvez utiliser le lien présent dans chaque email pour vous désabonner.
</span>
</div>
</div>
</div>
</div>
{% render "@hero" %}
{% render "@appointment-main" %}
{% render "@paginationanchor" %}
<div class="relative my-16 overflow-hidden">
<div id="our-commitment" class="absolute -mt-[250px]"></div>
{% render "@our-commitment" %}
</div>
<div class="flex justify-center m-16 md:block md:mx-56 md:my-16">
{% render "@newsletter" %}
</div>
/* No context defined. */
No notes defined.