{% extends 'base.html.twig' %}{% block title %}Maison Eiffel - Plasma{% endblock %}{% block stylesheets %} <style rel="stylesheet"> .table-container { width: 100%; max-width: 90%; margin-left: 5%; overflow-x: auto; display: flex; justify-content: center; } .table-wrapper { border: 1px solid #E0C15B; border-radius: 8px; padding: 12px; background-color: #fff; position: relative; width: 100%; } table { width: 100%; border-collapse: collapse; } td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #E0C15B; } .text { font-weight: bold; width: 30%; } .prix, .temps { text-align: right; padding: 8px 4px; } .prix { width: 50%; } .temps { width: 50%; } tr:last-child td { border-bottom: 1px solid #E0C15B; } .legal-notice { font-size: 9px; color: #555; margin-top: 16px; text-align: center; } @media (max-width: 600px) { .table-container { width: 80%; margin-left: 10%; } .table-wrapper { width: 100%; } table { font-size: 14px; } td { padding: 6px 8px; } .text { font-weight: bold; width: auto; } .prix, .temps { width: auto; } } </style>{% endblock %}{% block body %} <div class="mainContainer" id="container-specialtes"> <header class="header"> <div class="header__top"> <p class="adress-top"> <a target="_blank" href="https://www.google.fr/maps/place/Maison+Esth%C3%A9tique/@48.8615633,2.2789474,16.69z/data=!4m6!3m5!1s0x47e66f5e9a727869:0x49ccc3d8e92e5224!8m2!3d48.8614277!4d2.2820639!16s%2Fg%2F11pxx2nfx0?entry=ttu"> <i class='fas fa-map-marker-alt'></i> Nous trouver sur la carte</a> <a href="/avis"> <i class="far fa-star"></i> Avis certifiés</a> </p> </div> <div class="header__main"> <div class="header__main__content"> <a href="{{ path('home') }}" class="logo"> <img src="{{ asset('assets/images/logo.png') }}" alt=""> </a> <ul class='menu'> <li> <a href="{{ path('home') }}">Notre centre</a> </li> <li id="menuButton" class="deroul-specialites" onclick="openSpecialites()"> <a>Nos spécialités</a> </li> <li class="deroul-specialites"> <a href="{{ path('besoins') }}">Vos besoins</a> </li> <li> <a href="{{ path('blog') }}">Blog</a> </li> <li> <a href="{{ path('avis') }}">Avis</a> </li> <li class="link-contact"> <a href="{{ path('contact') }}">Contact</a> <div class="link-border-contact"></div> <div class="link-back-contact"></div> </li> </ul> <label class="mobile-menu-btn"> <i class="fas fa-bars" onclick='displayMenu()' id='open'></i> <i class="fas fa-times" onclick='closeMenu()' id='close'></i> </label> <div class="adress"> <div class="adress-box"> <strong> <a href="tel:0153700512" style="color:black;"> <i class="far fa-calendar"></i> 01 53 70 05 12</strong> </a> <br> <a href="https://www.treatwell.fr/salon/maison-eiffel-esthetique/">Rendez-vous</a> </div> </div> <div class="header__list" id='header__list'> <ul class="menu-mobile"> <li> <a href="{{ path('home') }}">Notre centre</a> </li> <li class="deroul-mobile"> <button class="menuonclick" onclick="openSousMenu()"> Nos specialites <img class="arrowdown" src="{{ asset('assets/images/arrow-down.png') }}" alt="arrow down"></button> <ul class="deroul-click"> <li> <a href="#">lorem ipsum</a> </li> <li> <a href="#">lorem ipsum</a> </li> <li> <a href="#">lorem ipsum</a> </li> <li> <a href="#">lorem ipsum</a> </li> <li> <a href="#">lorem ipsum</a> </li> <li> <a href="#">lorem ipsum</a> </li> </ul> </li> <li> <a href="{{ path('besoins') }}">Vos besoins</a> </li> <li> <a href="{{ path('blog') }}">Blog</a> </li> <li> <a href="{{ path('avis') }}"> Avis </a> </li> <li> <a href="{{ path('contact') }}"> Contact </a> </li> </ul> </div> </div> <ul class="deroul n1" id="deroulant-spe"> <li> <a href="{{ path('specialites_plasma') }}">Plasma</a> </li> <li> <a href="{{ path('specialites_injection') }}">Injection</a> </li> <li> <a href="{{ path('specialites_toxine') }}">Toxine</a> </li> <li> <a href="{{ path('specialites_philart') }}">Philart</a> </li> <li> <a href="{{ path('specialites_morpheus') }}">Morpheus</a> </li> <li> <a href="{{ path('specialites_morpheus') }}">Virtu RF</a> </li> <li> <a href="{{ path('specialites_laser-resurfacing') }}">Laser resurfacing</a> </li> <li> <a href="{{ path('specialites_epilation-laser') }}">Epilation laser</a> </li> <li> <a href="{{ path('specialites_cryolipolyse') }}">Cryolipolyse</a> </li> <li> <a href="{{ path('specialites_peeling') }}">Peeling</a> </li> <li> <a href="{{ path('specialites_peel-mask-creme') }}">Peel Mask</a> </li> <li> <a href="{{ path('specialites_radiofrequence') }}">Radiofréquence</a> </li> <li> <a href="{{ path('specialites_luminotherapie') }}">Luminotherapie</a> </li> <li> <a href="{{ path('specialites_hydrafacial') }}">Hydrafacial</a> </li> <li> <a href="{{ path('specialites_microneedling') }}">Microneedling</a> </li> <li> <a href="{{ path('specialites_blanchiment-dentaire') }}">Blanchiment Dentaire</a> </li> <li> <a href="{{ path('specialites_drainage-cardiosynchronise-stendo') }}">Drainage</a> </li> <li> <a href="{{ path('specialites_mesotherapie-capillaire') }}">Mésothérapie Capillaire</a> </li> </ul> </header> <div class="wrapper"> <input type="radio" name="slider" checked id="el"> <input type="radio" name="slider" id="me"> <input type="radio" name="slider" id="hy"> <input type="radio" name="slider" id="sv"> <input type="radio" name="slider" id="sc"> <input type="radio" name="slider" id="tp"> <!--<nav> <label for="el" class="label">Epilation laser</label> <label for="me" class="label">Medecine esthetique</label> <label for="hy" class="label">Hydrafacial</label> <label for="sv" class="lanel">Soins Visages</label> <label for="sc" class="label">Soins capillaires</label> <label for="tp" class="label">Traitements de peau</label> <div class="slider"></div> </nav>--> <section> <div class="content content-1"> <div class="hero video-hero" data-aos="fade-up" data-aos-duration="1500"> <video class="video-hero-content" id="hero-video" autoplay muted loop onclick="toggleSound()"> <source src="../../assets/videos/video_demo.mp4" type="video/mp4"/> Votre navigateur ne prend pas en charge la lecture de vidéos HTML5. </video> <div class="sound-icon" onclick="toggleSound()"> <img id="sound-image" src="../../assets/images/speaker-muted.png" alt="Activer/désactiver le son"> </div> </div> <div class="hero speciality-hero" data-aos="fade-up" data-aos-duration="1500"> <h1> Plasma IQ </h1> <p class="text" data-aos="fade-up" data-aos-duration="1500"> Laser plasmatique qui induit une rétractation et un resserrement des tissus cutanés au niveau tiers supérieur de visage, lèvres supérieures, rides cou et décolleté, ride de l’oreille, cicatrices d’acné. </p> <div class="btn"> <a href="{{ path('contact') }}"> En savoir plus </a> </div> </div> </div> <div class="content content-2"> <div class="hero speciality-hero2"> <h1> Médécine esthétique </h1> <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. </p> <div class="btn"> <a href="{{ path('contact') }}"> En savoir plus </a> </div> </div> </div> <div class="content content-3"> <div class="hero speciality-hero3"> <h1> Hydrafacial </h1> <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. </p> <div class="btn"> <a href="{{ path('contact') }}"> En savoir plus </a> </div> </div> </div> <div class="content content-4"> <div class="hero speciality-hero"> <h1> Soins visages </h1> <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. </p> <div class="btn"> <a href="{{ path('contact') }}"> En savoir plus </a> </div> </div> </div> <div class="content content-5"> <div class="hero speciality-hero"> <h1> Soins capillaires </h1> <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. </p> <div class="btn"> <a href="{{ path('contact') }}"> En savoir plus </a> </div> </div> </div> <div class="content content-6"> <div class="hero speciality-hero6"> <h1> Traitementsde la peau </h1> <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. </p> <div class="btn"> <a href="{{ path('contact') }}"> En savoir plus </a> </div> </div> </div> </section> </div> <!-- <div class="inner"> <div class="inner__text"> <div class="inner__text__content"> <h2 class="subtitle" data-aos="fade-right" data-aos-duration="1500"> Des traitements adaptes </h2> <p class="text" data-aos="fade-right" data-aos-duration="1500"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia, doloribus? Tenetur totam laboriosam cupiditate accusantium nam, maiores, animi ratione iusto dolore illo dolor nihil ad ipsum aspernatur illum exercitationem quos! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia, doloribus? Tenetur totam laboriosam cupiditate accusantium nam, maiores, animi ratione iusto dolore illo dolor nihil ad ipsum aspernatur illum exercitationem quos! </p> </div> </div> <div class="inner__image" data-aos="fade-left" data-aos-duration="1500"> <div class="inner__image__content"> <div class="item"> <img src="{{ asset('assets/pictos/skincare.svg') }}" alt=""> <span>Hydrafacial</span> </div> <div class="item"> <img src="{{ asset('assets/pictos/organ-nose.svg') }}" alt=""> <span>Mesotherapie</span> </div> <div class="item"> <img src="{{ asset('assets/pictos/hair-root-skin.svg') }}" alt=""> <span>Peeling</span> </div> </div> </div> </div> --> <section> <div class="detail-circle-container"> <div class="detail-circle"> <h3 class="details-circle-title">Éviction Sociale</h3> <p class="details-circle-text">10 jours</p> </div> <div class="detail-circle"> <h3 class="details-circle-title">Douleur</h3> <p class="details-circle-text">6/10</p> </div> <div class="detail-circle circle-price" onclick="window.location='#section-price';"> <h3 class="details-circle-title">Coût</h3> <p class="details-circle-text">Text 3</p> </div> <div class="detail-circle"> <h3 class="details-circle-title">Durabilité</h3> <p class="details-circle-text">+/- 3 ans</p> </div> </div> <div class="detail-timeline-containers"> <div class="detail-timeline"> <div class="detail-timeline-event detail-timeline-event-first"> <h4 class="detail-timeline-title">Séance</h4> <p class="detail-timeline-text">j-0</p> </div> <div class="detail-timeline-event"> <h4 class="detail-timeline-title">Fin de l'éviction</h4> <p class="detail-timeline-text">j-10</p> </div> <div class="detail-timeline-event"> <h4 class="detail-timeline-title">Résultats visibles</h4> <p class="detail-timeline-text">j-28</p> </div> <div class="detail-timeline-event detail-timeline-event-last"> <h4 class="detail-timeline-title">Nouvelle séance(s)</h4> <p class="detail-timeline-text">3 ans</p> </div> <div class="detail-timeline-arrow"> <div class="detail-timeline-arrow-line"></div> <div class="detail-timeline-arrow-line"></div> </div> </div> </div> </section> <section class="section-doctor specialite"> <div class="container-img-doctor" data-aos="fade-right" data-aos-duration="1500"> <img class="doctor-img specialite" src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt="docteur"/> <div class="square-border-doctor specialite"></div> </div> <div class="container-info-doctor" data-aos="fade-left" data-aos-duration="1500"> <h1 class="title-doctor specialite">Déroulé du soin </h1> <p class="text-doctor specialite"> Amont, Crème anesthésiante, Venir demaquillé </p> <ul> <li> <div class="circle"> 1 </div> Nettoyage de la zone </li> <li> <div class="circle"> 2 </div> Séchage de celle ci </li> <li> <div class="circle"> 3 </div> Traitement au laser Plasma </li> <li> <div class="circle"> 4 </div> Nettoyage après la séance avec antiseptique </li> <li> <div class="circle"> 5 </div> Application d’un masque Hydrocalm pendant 10mn </li> </ul> </div> <div class="square-border-info n1"></div> <div class="square-border-info n2"></div> </section> <div class="about-us n2"> <div class="container-about-infos specialite"> <div class="about-info" data-aos="fade-right" data-aos-duration="1500"> <h2 class="title-about">Optimisation du soin</h2> <p class='about-text'> Eviter le soleil pendant 2 semaines avant la séance <br/> Pendant 48 heures post traitement : éviter le sport intensif, la chaleur, la vapeur et bien sûr le soleil. <br/> Après 48 heures : rajouter l’écran solaire dès le matin, et crèmes de jour et de nuit prescrites par le Docteur. Eviter tout maquillage pendant une semaine post traitement. <br/>Après une semaine : continuer la crème solaire 2 mois minimum, maquillage possible des rougeurs. </p> </div> </div> <div class="about-image-container specialite" data-aos="fade-left" data-aos-duration="1500"> <div class="inner__image__content"> <div class="item"> <img src="{{ asset('assets/pictos/skincare.svg') }}" alt=""> <span>Hydrafacial</span> </div> <div class="item"> <img src="{{ asset('assets/pictos/organ-nose.svg') }}" alt=""> <span>Mesotherapie</span> </div> <div class="item"> <img src="{{ asset('assets/pictos/hair-root-skin.svg') }}" alt=""> <span>Peeling</span> </div> </div> </div> </div> <!-- <div class="inner"> <div class="inner__image" data-aos="fade-right" data-aos-duration="1500"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> </div> <div class="inner__text" data-aos="fade-left" data-aos-duration="1500"> <h2 class="subtitle"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </h2> <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem</div> </div> --> <div class="about-us specialite"> <div class="container-about-infos"> <div class="about-info" data-aos="fade-left" data-aos-duration="1500"> <h2 class="title-about">Suis-je éligible ou pas ?</h2> <p class='about-text'> Nous ne vous proposerons pas ce traitement dans le contexte suivant :<br/><br/> - lésions inflammatoires ou infectieuses aigües sur la zone de traitement : Herpes, infection, psoriasis, eczéma<br/> - pacemaker<br/> - implant métallique dans la zone de traitement<br/> - troubles de la coagulation, traitements anti coagulants, angiome, tatouage,..sur la zone de traitement<br/> - phototypes foncés<br/> - grossesse<br/> </p> </div> </div> <div class="about-image-container" data-aos="fade-right" data-aos-duration="1500"> <img class="about-img" src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt="image d'illustration centre"/> <div class="about-border-square"></div> </div> </div> <br/> <br/> <div class='container-text-specialites'> <p class="title-specialites">Facelift Los Angeles</p> <p class="text-specialites"> La séance se déroule comme ceci. Le praticien approche la pointe de l’aiguille de l’appareil Plasma IQ de la peau. Sans contact ni effraction cutanée à 1mm de distance de la peau un flash lumineux se génère, produisant une grande quantité de chaleur limitée au point de tir. </p> <p class="text-specialites"> Cette chaleur dégagée riche en ions et électrons va provoquer la vaporisation des cellules superficielles de la peau : celles-ci se rétractent immédiatement, et chaque impact de traitement est alors matérialisé par une petite croûte de carbonisation de moins d’un millimètre de diamètre. Le praticien détermine des points de tir précis en fonction de l'indication à traiter Chaque tir dure moins d’une seconde. </p> <p class="text-specialites"> Dès que le traitement est terminé, le praticien applique de la glace pour refroidir les paupières puis il désinfecte la peau en tapotant sans retirer les croûtes de carbonisation. </p> <p class="text-specialites"> La séance provoque un léger inconfort peut être ressenti pendant l’opération. Il n’y a pas lieu de s’inquiéter au cas où cela se produirait car il s’agit d’une sensation normale qui dépend de l’emplacement de la peau ciblée par le traitement. <br/>Une crème anesthésiante vous sera appliquée 1 heure avant au cabinet afin de rendre le traitement plus confortable. </p> </div> <div class="about-us nosBesoin"> <div class="container-about-infos"> <div class="about-info" data-aos="fade-right" data-aos-duration="1500"> <p class="about-text besoin"> Le Plasma IQ est une méthode novatrice qui permet sans aucune chirurgie de lisser la peau froissée ou abimée. </p> <br/> <p class="about-text besoin"> C’est un type d’énergie différent qui utilise un microfaisceau ciblé d’énergie plasmatique qui par ionisation locale permet une rétractation directe de la peau traitée sans nuire ou affecter la peau environnante. Cette procédure permet d’obtenir des très bons résultats en 1 à 3 séances, selon les cas. La durabilité des résultats ont été observé jusqu’a 3ans. <br/>C’est une méthode de traitement de plus en plus courante et minimale, qui est beaucoup plus simple que les solutions chirurgicales et réduit le temps de l’éviction sociale. </p> <br/> </div> </div> <div class="about-image-container" data-aos="fade-left" data-aos-duration="1500"> <img class="about-img" src="https://www.datocms-assets.com/42733/1623074174-21c361d440b9f12e96db4f0c7eee59e590fcd666.png?auto=format&crop=focalpoint&fit=crop&fm=jpg&fp-x=0.72&fp-y=0.44&h=603&q=60&w=516" alt="image d'illustration centre"/> <div class="about-border-square"></div> </div> </div> <!-- <div class="inner" data-aos="fade-right" data-aos-duration="1500"> <div class="inner__text"> <h2 class="subtitle"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </h2> <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua </p> <ul> <li> <div class="circle"> > </div> Lorem ipsum dolor sit amet, consetetu </li> <li> <div class="circle"> > </div> Lorem ipsum dolor sit amet, consetetu </li> <li> <div class="circle"> > </div> Lorem ipsum dolor sit amet, consetetu </li> <li> <div class="circle"> > </div> Lorem ipsum dolor sit amet, consetetu </li> <li> <div class="circle"> > </div> Lorem ipsum dolor sit amet, consetetu </li> </ul> </div> <div class="inner__image" data-aos="fade-left" data-aos-duration="1500"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> </div> </div> --> <div class="price" data-aos="fade-up" data-aos-duration="1500" id="section-price"> <h2 class="subtitle"> Notre grille tarifaire selon vos besoins </h2> <div class="price__list"> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> </div> <div class="price__list"> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> <div class="price-card"> <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt=""> <h3> Skinbooster </h3> <p class="amount"> A partir de 200 € </p> </div> </div> <br> <button class="container-buttonBorder"> <p class="buttonBorder">Prendre rendez-vous</p> <p class="border-buttonBorder"></p> <p class="back-buttonBorder"></p> </button> </div> <br> <br> <footer class="sectionFooter"> <div class="containerFooter"> <div class="containerTopFooter"> <ul class="containerLinkNavFooter"> <li class="linkNavFooter"> <a>Notre centre</a> </li> <li class="linkNavFooter"> <a>Nos spécialités</a> </li> <li class="linkNavFooter"> <a>Vos besoins</a> </li> <li class="linkNavFooter"> <a>Blog</a> </li> <li class="linkNavFooter"> <a>Avis</a> </li> <li class="linkNavFooter"> <a>Contact</a> </li> </ul> <div class="adress-box"> Paris 11 <br> <span> <i class="far fa-calendar"></i> 01 36 78 94 25<br></span> <a href="https://www.treatwell.fr/">Prendre Rdv</a> </div> </div> <div class="containerBottomFooter"> <div class="containerTextFooter"> <p class="textFooter">© 2023 Maison Eiffel.</p> <p class="textFooter">Tous les droits sont réservés.</p> </div> <div class="containerTextFooter"> <p class="textFooter">Politique relative aux cookies</p> </div> <div class="containerTextFooter"> <p class="textFooter">Politique de confidentialité</p> </div> <div class="containerTextFooter"> <p class="textFooter">Termes et conditions</p> </div> <div class="containerTextFooter"> <p class="textFooter">Déclaration d'accessibilité </p> </div> <div class="containerTextFooter"> <p class="textFooter">Site map</p> </div> <div class="containerReseauxFooter"> <a class="linkReseauFooter"><img src="{{ asset('assets/images/instagram.png') }}"/></a> <a class="linkReseauFooter"><img src="{{ asset('assets/images/youtube.png') }}"/></a> <a class="linkReseauFooter"><img src="{{ asset('assets/images/tik-tok.png') }}"/></a> </div> </div> </div> <div class="lineFooter"></div> <div class="lineFooter2"></div> <div class="lineFooter3"></div> <div class="lineFooter4"></div> </footer> </div> <script src="public/js/script.js"></script> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script> <script> function openSpecialites() { const menu = document.getElementById('deroulant-spe'); // Toggle le menu if(menu.style.display === "none" || menu.style.display === "") { menu.style.display = 'block'; // Ajoute un écouteur pour détecter les clics en dehors document.addEventListener('click', closeOnClickOutside); } else { menu.style.display = 'none'; document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur } } // Fonction qui ferme le menu si on clique à l'extérieur function closeOnClickOutside(event) { const menu = document.getElementById('deroulant-spe'); const button = document.getElementById('menuButton'); // Le bouton qui ouvre le menu // Si l'élément cliqué n'est pas le menu ni le bouton, on referme le menu if (!menu.contains(event.target) && !button.contains(event.target)) { menu.style.display = 'none'; document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur } }</script> {% endblock %}