templates/specilites/injection.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Maison Eiffel - Injection
  3. {% endblock %}
  4. {% block stylesheets %}
  5.     <style rel="stylesheet">
  6.         .table-container {
  7.             width: 100%;
  8.             max-width: 90%;
  9.             margin-left: 5%;
  10.             overflow-x: auto;
  11.             display: flex;
  12.             justify-content: center;
  13.         }
  14.         .table-wrapper {
  15.             border: 1px solid #E0C15B;
  16.             border-radius: 8px;
  17.             padding: 12px;
  18.             background-color: #fff;
  19.             position: relative;
  20.             width: 100%;
  21.         }
  22.         table {
  23.             width: 100%;
  24.             border-collapse: collapse;
  25.         }
  26.         td {
  27.             padding: 8px 12px;
  28.             text-align: left;
  29.             border-bottom: 1px solid #E0C15B;
  30.         }
  31.         .text {
  32.             font-weight: bold;
  33.             width: 30%;
  34.         }
  35.         .prix, .temps {
  36.             text-align: right;
  37.             padding: 8px 4px;
  38.         }
  39.         .prix {
  40.             width: 50%;
  41.         }
  42.         .temps {
  43.             width: 50%;
  44.         }
  45.         tr:last-child td {
  46.             border-bottom: 1px solid #E0C15B;
  47.         }
  48.         .legal-notice {
  49.             font-size: 9px;
  50.             color: #555;
  51.             margin-top: 16px;
  52.             text-align: center;
  53.         }
  54.         @media (max-width: 600px) {
  55.             .table-container {
  56.                 width: 80%;
  57.                 margin-left: 10%;
  58.             }
  59.             .table-wrapper {
  60.                 width: 100%;
  61.             }
  62.             table {
  63.                 font-size: 14px;
  64.             }
  65.             td {
  66.                 padding: 6px 8px;
  67.             }
  68.             .text {
  69.                 font-weight: bold;
  70.                 width: auto;
  71.             }
  72.             .prix, .temps {
  73.                 width: auto;
  74.             }
  75.         }
  76.     </style>
  77. {% endblock %}
  78. {% block body %}
  79.     <div class="mainContainer" id="container-specialtes">
  80.         <header class="header">
  81.             <div class="header__top">
  82.                 <p class="adress-top">
  83.                     <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">
  84.                         <i class='fas fa-map-marker-alt'></i>
  85.                         Nous trouver sur la carte</a>
  86.                     <a href="/avis">
  87.                         <i class="far fa-star"></i>
  88.                         Avis certifiés</a>
  89.                 </p>
  90.             </div>
  91.             <div class="header__main">
  92.                 <div class="header__main__content">
  93.                     <a href="{{ path('home') }}" class="logo">
  94.                         <img src="{{ asset('assets/images/logo.png') }}" alt=""></a>
  95.                     <ul class='menu'>
  96.                         <li>
  97.                             <a href="{{ path('home') }}">Notre centre</a>
  98.                         </li>
  99.                         <li id="menuButton" class="deroul-specialites" onclick="openSpecialites()">
  100.                             <a>Nos spécialités</a>
  101.                         </li>
  102.                         <li class="deroul-specialites">
  103.                             <a href="{{ path('besoins') }}">Vos besoins</a>
  104.                         </li>
  105.                         <li>
  106.                             <a href="{{ path('blog') }}">Blog</a>
  107.                         </li>
  108.                         <li>
  109.                             <a href="{{ path('avis') }}">Avis</a>
  110.                         </li>
  111.                         <li class="link-contact">
  112.                             <a href="{{ path('contact') }}">Contact</a>
  113.                             <div class="link-border-contact"></div>
  114.                             <div class="link-back-contact"></div>
  115.                         </li>
  116.                     </ul>
  117.                     <label class="mobile-menu-btn">
  118.                         <i class="fas fa-bars" onclick='displayMenu()' id='open'></i>
  119.                         <i class="fas fa-times" onclick='closeMenu()' id='close'></i>
  120.                     </label>
  121.                     <div class="adress">
  122.                         <div class="adress-box">
  123.                             <strong>
  124.                                 <a href="tel:0153700512" style="color:black;">
  125.                                     <i class="far fa-calendar"></i>
  126.                                     01 53 70 05 12</strong>
  127.                             </a>
  128.                             <br>
  129.                             <a href="https://www.treatwell.fr/salon/maison-eiffel-esthetique/">Rendez-vous</a>
  130.                         </div>
  131.                     </div>
  132.                     <div class="header__list" id='header__list'>
  133.                         <ul class="menu-mobile">
  134.                             <li>
  135.                                 <a href="{{ path('home') }}">Notre centre</a>
  136.                             </li>
  137.                             <li class="deroul-mobile">
  138.                                 <button class="menuonclick" onclick="openSousMenu()">
  139.                                     Nos specialites
  140.                                     <img class="arrowdown" src="{{ asset('assets/images/arrow-down.png') }}" alt="arrow down"></button>
  141.                                 <ul class="deroul-click">
  142.                                     <li>
  143.                                         <a href="#">lorem ipsum</a>
  144.                                     </li>
  145.                                     <li>
  146.                                         <a href="#">lorem ipsum</a>
  147.                                     </li>
  148.                                     <li>
  149.                                         <a href="#">lorem ipsum</a>
  150.                                     </li>
  151.                                     <li>
  152.                                         <a href="#">lorem ipsum</a>
  153.                                     </li>
  154.                                     <li>
  155.                                         <a href="#">lorem ipsum</a>
  156.                                     </li>
  157.                                     <li>
  158.                                         <a href="#">lorem ipsum</a>
  159.                                     </li>
  160.                                 </ul>
  161.                             </li>
  162.                             <li>
  163.                                 <a href="{{ path('besoins') }}">Vos besoins</a>
  164.                             </li>
  165.                             <li>
  166.                                 <a href="{{ path('blog') }}">Blog</a>
  167.                             </li>
  168.                             <li>
  169.                                 <a href="{{ path('avis') }}">
  170.                                     Avis
  171.                                 </a>
  172.                             </li>
  173.                             <li>
  174.                                 <a href="{{ path('contact') }}">
  175.                                     Contact
  176.                                 </a>
  177.                             </li>
  178.                         </ul>
  179.                     </div>
  180.                 </div>
  181.                 <ul class="deroul n1" id="deroulant-spe">
  182.                     <li>
  183.                         <a href="{{ path('specialites_plasma') }}">Plasma</a>
  184.                     </li>
  185.                     <li>
  186.                         <a href="{{ path('specialites_injection') }}">Injection</a>
  187.                     </li>
  188.                     <li>
  189.                         <a href="{{ path('specialites_toxine') }}">Toxine</a>
  190.                     </li>
  191.                     <li>
  192.                         <a href="{{ path('specialites_philart') }}">Philart</a>
  193.                     </li>
  194.                     <li>
  195.                         <a href="{{ path('specialites_morpheus') }}">Morpheus</a>
  196.                     </li>
  197.                     <li>
  198.                                         <a href="{{ path('specialites_morpheus') }}">Virtu RF</a>
  199.                                     </li>
  200.                     <li>
  201.                         <a href="{{ path('specialites_laser-resurfacing') }}">Laser resurfacing</a>
  202.                     </li>
  203.                     <li>
  204.                         <a href="{{ path('specialites_epilation-laser') }}">Epilation laser</a>
  205.                     </li>
  206.                     <li>
  207.                         <a href="{{ path('specialites_cryolipolyse') }}">Cryolipolyse</a>
  208.                     </li>
  209.                     <li>
  210.                         <a href="{{ path('specialites_peeling') }}">Peeling</a>
  211.                     </li>
  212.                     <li>
  213.                         <a href="{{ path('specialites_peel-mask-creme') }}">Peel Mask</a>
  214.                     </li>
  215.                     <li>
  216.                         <a href="{{ path('specialites_radiofrequence') }}">Radiofréquence</a>
  217.                     </li>
  218.                     <li>
  219.                         <a href="{{ path('specialites_luminotherapie') }}">Luminotherapie</a>
  220.                     </li>
  221.                     <li>
  222.                         <a href="{{ path('specialites_hydrafacial') }}">Hydrafacial</a>
  223.                     </li>
  224.                     <li>
  225.                         <a href="{{ path('specialites_microneedling') }}">Microneedling</a>
  226.                     </li>
  227.                     <li>
  228.                         <a href="{{ path('specialites_blanchiment-dentaire') }}">Blanchiment Dentaire</a>
  229.                     </li>
  230.                     <li>
  231.                         <a href="{{ path('specialites_drainage-cardiosynchronise-stendo') }}">Drainage</a>
  232.                     </li>
  233.                     <li>
  234.                         <a href="{{ path('specialites_mesotherapie-capillaire') }}">Mésothérapie Capillaire</a>
  235.                     </li>
  236.                 </ul>
  237.             </header>
  238.             <div class="wrapper">
  239.                 <input type="radio" name="slider" checked id="el">
  240.                 <input type="radio" name="slider" id="me">
  241.                 <input type="radio" name="slider" id="hy">
  242.                 <input type="radio" name="slider" id="sv">
  243.                 <input type="radio" name="slider" id="sc">
  244.                 <input type="radio" name="slider" id="tp">
  245.             </div>
  246.             <section style="padding-top:130px;">
  247.                 <div class="about-us">
  248.                     <div class="container-about-infos">
  249.                         <div class="about-info" data-aos="fade-right" data-aos-duration="1500">
  250.                             <h2 class="title-about">Injection "botox"</h2>
  251.                             <p class='about-text'>
  252.                                 Injection sous cutané dans les muscles responsable des rides du lion, les pattes d’oie et du front.
  253.                                 <br/>Résultat naturel, sûr et durable jusqu’à 6 mois.
  254.                                 <br/>Lissage naturel des rides du tiers supérieur du visage. Effet bonne mine, reposé.
  255.                             </p>
  256.                         </div>
  257.                     </div>
  258.                     
  259.                     <div class="about-image-container" data-aos="fade-left" data-aos-duration="1500">
  260.                         <div class="video-container-test" style="text-align: center;">
  261.                             <video controls autoplay muted loop width="600">
  262.                                 <source src="{{asset('assets/videos/11_ Injections.mp4')}}" type="video/mp4">
  263.                                 Your browser does not support the video tag.
  264.                             </video>
  265.                         </div>
  266.                     </div>
  267.                 </div>
  268.                 <div class="detail-circle-container">
  269.                     <div class="detail-circle">
  270.                         <h3 class="details-circle-title">Éviction Sociale</h3>
  271.                         <p class="details-circle-text">Non</p>
  272.                     </div>
  273.                     <div class="detail-circle">
  274.                         <h3 class="details-circle-title">Douleur</h3>
  275.                         <p class="details-circle-text">2/10</p>
  276.                     </div>
  277.                     <div class="detail-circle circle-price" onclick="window.location='#section-price';">
  278.                         <h3 class="details-circle-title">Coût</h3>
  279.                         <p class="details-circle-text">Voir prix</p>
  280.                     </div>
  281.                     <div class="detail-circle">
  282.                         <h3 class="details-circle-title">Durabilité</h3>
  283.                         <p class="details-circle-text">6 mois</p>
  284.                     </div>
  285.                 </div>
  286.                 <div class="detail-timeline-containers">
  287.                     <div class="detail-timeline">
  288.                         <div class="detail-timeline-event detail-timeline-event-first">
  289.                             <h4 class="detail-timeline-title">Injection</h4>
  290.                             <p class="detail-timeline-text">j-0</p>
  291.                         </div>
  292.                         <div class="detail-timeline-event">
  293.                             <h4 class="detail-timeline-title">Contrôle</h4>
  294.                             <p class="detail-timeline-text">j-15</p>
  295.                         </div>
  296.                         <div class="detail-timeline-event detail-timeline-event-last">
  297.                             <h4 class="detail-timeline-title">Nouvelle injection</h4>
  298.                             <p class="detail-timeline-text">+/- 6 mois</p>
  299.                         </div>
  300.                         <div class="detail-timeline-arrow">
  301.                             <div class="detail-timeline-arrow-line"></div>
  302.                             <div class="detail-timeline-arrow-line"></div>
  303.                         </div>
  304.                     </div>
  305.                 </div>
  306.             </section>
  307.             <section class="section-doctor specialite">
  308.                 <div class="container-img-doctor" data-aos="fade-right" data-aos-duration="1500">
  309.                     <img class="doctor-img specialite" src="{{ asset('assets/spe/injection/1.png') }}" alt="docteur"/>
  310.                     <div class="square-border-doctor specialite"></div>
  311.                 </div>
  312.                 <div class="container-info-doctor" data-aos="fade-left" data-aos-duration="1500">
  313.                     <h1 class="title-doctor specialite">Déroulé du soin
  314.                     </h1>
  315.                     <p class="text-doctor specialite">
  316.                         Amont, Crème anesthésiante, Venir demaquillé
  317.                     </p>
  318.                     <ul>
  319.                         <li>
  320.                             <div class="circle">
  321.                                 1
  322.                             </div>
  323.                             Nettoyage de la zone
  324.                         </li>
  325.                         <li>
  326.                             <div class="circle">
  327.                                 2
  328.                             </div>
  329.                             Analyse du visage en dynamique et au repos
  330.                         </li>
  331.                         <li>
  332.                             <div class="circle">
  333.                                 3
  334.                             </div>
  335.                             Injection des points repérés
  336.                         </li>
  337.                         <li>
  338.                             <div class="circle">
  339.                                 4
  340.                             </div>
  341.                             Nettoyage après la séance avec antiseptique
  342.                         </li>
  343.                     </ul>
  344.                 </div>
  345.                 <div class="square-border-info n1"></div>
  346.                 <div class="square-border-info n2"></div>
  347.             </section>
  348.             <div class="about-us nosBesoin">
  349.                 <div class="container-about-infos">
  350.                     <div class="about-info" data-aos="fade-right" data-aos-duration="1500">
  351.                         <h2 class="title-about">Optimisation du soin</h2>
  352.                         <p class='about-text besoin'>
  353.                             <span>Avant la séance :</span><br/>
  354.                             - Eviter l’aspirine 15 jours avant l’injection.
  355.                         </p><br />
  356.                         <p class='about-text'>
  357.                             <span>Après la séance :</span><br/>
  358.                             - Ne pas porter de casque, casquette, chapeau, etc…
  359.                             <br/>
  360.                             - Ne pas faire de sauna, Haman.
  361.                             <br/>
  362.                             - Pas de sport.
  363.                         </p>
  364.                     </div>
  365.                 </div>
  366.                 <div class="about-image-container" data-aos="fade-left" data-aos-duration="1500">
  367.                     <img class="about-img" src="{{ asset('assets/spe/injection/2.png') }}" alt="image d'illustration centre"/>
  368.                     <div class="about-border-square"></div>
  369.                 </div>
  370.             </div>
  371.             <div class="about-us specialite">
  372.                 <div class="container-about-infos">
  373.                     <div class="about-info" data-aos="fade-left" data-aos-duration="1500">
  374.                         <h2 class="title-about">Suis-je éligible ou pas ?</h2>
  375.                         <p class='about-text'>
  376.                             Nous ne vous proposerons pas ce traitement dans le contexte suivant :<br/>
  377.                             - Certaines maladies neuro-musculaires comme la myasthénie.
  378.                             <br/>
  379.                             - La grossesse et l’allaitement.<br/>
  380.                             <br/>La toxine botulique est contre-indiquée en cas d’hypersensibilité connue à la neurotoxine botulinique A ou à la sérum-albumine, et de traitement par les aminosides (famille d’antibiotiques dont font partie notamment l’Amiklin et la Gentalline).
  381.                         </p>
  382.                     </div>
  383.                 </div>
  384.                 <div class="about-image-container" data-aos="fade-right" data-aos-duration="1500">
  385.                     <img class="about-img" src="{{ asset('assets/spe/injection/3.png') }}" alt="image d'illustration centre"/>
  386.                     <div class="about-border-square"></div>
  387.                 </div>
  388.             </div>
  389.             <br/>
  390.             <div class="about-us nosBesoin">
  391.                 <div class="container-about-infos">
  392.                     <div class="about-info" data-aos="fade-right" data-aos-duration="1500">
  393.                         <br/>
  394.                         <p class="about-text besoin">
  395.                             Si on commence les injections à partir de 40 ans on peut prévenir le vieillissement et retrouver un visage rajeuni.<br/><br/>
  396.                             Le médecin va commencer par réaliser une analyse en dynamique et au repose des rides d’expression. Ceci afin de déterminer les points d’injection en fonction de vos muscles.
  397.                             <br/>Après une asepsie du visage, le médecin va injecter de toutes petites doses de toxine dans les muscles. La toxine va petit à petit inhiber la force de contraction de ceci en les mettant au repos, ce qui va permettre l’atténuation progressive des rides sans pour autant figé les visage et ses expressions. Les résultats définitifs seront visibles 15 jours après la première injection. Un contrôle pourra être fait à ce moment là.
  398.                         </p>
  399.                         <br/>
  400.                     </div>
  401.                 </div>
  402.                 <div class="about-image-container" data-aos="fade-left" data-aos-duration="1500">
  403.                     <img class="about-img" src="{{ asset('assets/spe/injection/1.png') }}" alt="image d'illustration centre"/>
  404.                     <div class="about-border-square"></div>
  405.                 </div>
  406.             </div>
  407.             <!-- <div class="inner" data-aos="fade-right" data-aos-duration="1500">
  408.                                                                                                                                                                                                                                              <div class="inner__text">
  409.                                                                                                                                                                                                                                                 <h2 class="subtitle">
  410.                                                                                                                                                                                                                                                     Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  411.                                                                                                                                                                                                                                                 </h2>
  412.                                                                                                                                                                                                                                     
  413.                                                                                                                                                                                                                                                <p class="text">
  414.                                                                                                                                                                                                                                                                                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  415.                                                                                                                                                                                                                                                                         sed diam nonumy eirmod tempor invidunt ut labore et
  416.                                                                                                                                                                                                                                                                         dolore magna aliquyam erat, sed diam voluptua
  417.                                                                                                                                                                                                                                     
  418.                                                                                                                                                                                                                                                     </p>
  419.                                                                                                                                                                                                                                                     <ul>
  420.                                                                                                                                                                                                                                                         <li>
  421.                                                                                                                                                                                                                                                             <div class="circle">
  422.                                                                                                                                                                                                                                                                 >
  423.                                                                                                                                                                                                                                                             </div>
  424.                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  425.                                                                                                                                                                                                                                                         </li>
  426.                                                                                                                                                                                                                                     
  427.                                                                                                                                                                                                                                                         <li>
  428.                                                                                                                                                                                                                                                             <div class="circle">
  429.                                                                                                                                                                                                                                                                 >
  430.                                                                                                                                                                                                                                                             </div>
  431.                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  432.                                                                                                                                                                                                                                                         </li>
  433.                                                                                                                                                                                                                                     
  434.                                                                                                                                                                                                                                                         <li>
  435.                                                                                                                                                                                                                                                             <div class="circle">
  436.                                                                                                                                                                                                                                                                 >
  437.                                                                                                                                                                                                                                                             </div>
  438.                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  439.                                                                                                                                                                                                                                                         </li>
  440.                                                                                                                                                                                                                                     
  441.                                                                                                                                                                                                                                                         <li>
  442.                                                                                                                                                                                                                                                             <div class="circle">
  443.                                                                                                                                                                                                                                                                 >
  444.                                                                                                                                                                                                                                                             </div>
  445.                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  446.                                                                                                                                                                                                                                                         </li>
  447.                                                                                                                                                                                                                                     
  448.                                                                                                                                                                                                                                                         <li>
  449.                                                                                                                                                                                                                                                             <div class="circle">
  450.                                                                                                                                                                                                                                                                 >
  451.                                                                                                                                                                                                                                                             </div>
  452.                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  453.                                                                                                                                                                                                                                                         </li>
  454.                                                                                                                                                                                                                                                     </ul>
  455.                                                                                                                                                                                                                                             </div>
  456.                                                                                                                                                                                                                                     
  457.                                                                                                                                                                                                                                             <div class="inner__image" data-aos="fade-left" data-aos-duration="1500">
  458.                                                                                                                                                                                                                                                 <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt="">
  459.                                                                                                                                                                                                                                             </div>
  460.                                                                                                                                                                                                                                     
  461.                                                                                                                                                                                                                                         </div> -->
  462.             <div class="price" data-aos="fade-up" data-aos-duration="1500" id="section-price">
  463.                 <h2 class="title-about">
  464.                     Notre grille tarifaire
  465.                 </h2>
  466.                 <div class="table-container">
  467.                     <div class="table-wrapper">
  468.                         <table>
  469.                             <tbody>
  470.                                 <tr>
  471.                                     <td class="text">Toxine Botulique</td>
  472.                                     <td class="prix">350€</td>
  473.                                     <td class="temps"></td>
  474.                                 </tr>
  475.                                 <tr>
  476.                                     <td class="text">Acide Hyaluronique</td>
  477.                                     <td class="prix">400€</td>
  478.                                     <td class="temps"></td>
  479.                                 </tr>
  480.                             </tbody>
  481.                         </table>
  482.                         <div class="legal-notice">
  483.                             <p>Tous les tarifs affichés sont TTC (Toutes Taxes Comprises).<br>
  484.                             La prestation délivrée par votre professionnel de santé ne fait pas l’objet d’un conventionnement. Dès lors, elle n’est pas prise en charge par la sécurité sociale. Le montant des honoraires doit cependant être déterminé avec tact et mesure.</p>
  485.                         </div>
  486.                     </div>
  487.                 </div>
  488.                 <br>
  489.                 <button class="container-buttonBorder">
  490.                     <p class="buttonBorder">Prendre rendez-vous</p>
  491.                     <p class="border-buttonBorder"></p>
  492.                     <p class="back-buttonBorder"></p>
  493.                 </button>
  494.             </div>
  495.             <br>
  496.             <br>
  497.             <footer>
  498.             <div class="footerNew-container">
  499.                 <div class="footerNew-left">
  500.                 <div class="footerNew-contact-info">
  501.                     <div class="footerNew-contact-item">
  502.                     <div class="footerNew-icon-circle">
  503.                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
  504.                         <path d="M21 15.8V18a2 2 0 0 1-2 2h-1a16.009 16.009 0 0 1-13-13V5a2 2 0 0 1 2-2h2.2a1 1 0 0 1 1 .76l.72 3.18a1 1 0 0 1-.27.95L8.53 9.47a12 12 0 0 0 6 6l1.58-1.58a1 1 0 0 1 .95-.27l3.18.72a1 1 0 0 1 .76 1Z" />
  505.                         </svg>
  506.                     </div>
  507.                     <a href="tel:0153700512"> 01 53 70 05 12</a>
  508.                     </div>
  509.                     <div class="footerNew-contact-item">
  510.                     <div class="footerNew-icon-circle">
  511.                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
  512.                         <path d="M21 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2m18 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8m18 0L12 13 3 8" />
  513.                         </svg>
  514.                     </div>
  515.                     <a href="mailto:contact@maison-eiffel-esthetique.fr">Envoyez-nous un message</a>
  516.                     </div>
  517.                     <div class="footerNew-contact-item">
  518.                     <div class="footerNew-icon-circle">
  519.                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
  520.                         <path d="M12 2a10 10 0 0 1 10 10c0 7.5-10 10-10 10S2 19.5 2 12A10 10 0 0 1 12 2Z" />
  521.                         <circle cx="12" cy="12" r="3" />
  522.                         </svg>
  523.                     </div>
  524.                     <a href="#">Nous trouver</a>
  525.                     </div>
  526.                 </div>
  527.                 </div>
  528.                 <div class="footerNew-right">
  529.                 <div class="footerNew-column">
  530.                     <h4>Nos spécialités</h4>
  531.                     <ul>
  532.                     <li><a href="/specialites/epilation-laser">Épilation laser</a></li>
  533.                     <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  534.                     <li><a href="/specialites/injection">Injection</a></li>
  535.                     <li><a href="#">Polynucléotides</a></li>
  536.                     <li><a href="/specialites/morpheus">Morpheus</a></li>
  537.                     <li><a href="#">Virtu RF</a></li>
  538.                     </ul>
  539.                 </div>
  540.                 <div class="footerNew-column">
  541.                     <h4>Vos besoins</h4>
  542.                     <ul class="footerNew-dropdown">
  543.                         <li>
  544.                         <button class="footerNew-dropdown-button">Qualité de peau</button>
  545.                         <ul class="footerNew-submenu">
  546.                             <li><a href="/specialites/peeling">Peeling</a></li>
  547.                             <li><a href="/specialites/laser-resurfacing">Laser resurfacing</a></li>
  548.                             <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  549.                             <li><a href="/specialites/microneedling">Microneedling</a></li>
  550.                         </ul>
  551.                         </li>
  552.                         <li>
  553.                         <button class="footerNew-dropdown-button">Relâchement cutané</button>
  554.                         <ul class="footerNew-submenu">
  555.                             <li><a href="/specialites/virturf">Virtu RF</a></li>
  556.                         </ul>
  557.                         </li>
  558.                         <li>
  559.                         <button class="footerNew-dropdown-button">Vieillissement cutané</button>
  560.                         <ul class="footerNew-submenu">
  561.                             <li><a href="/specialites/philart">Philart</a></li>
  562.                         </ul>
  563.                         </li>
  564.                         <li>
  565.                         <button class="footerNew-dropdown-button">Densité des cheveux</button>
  566.                         <ul class="footerNew-submenu">
  567.                             <li><a href="/specialites/philart">Polynucléotides cheveux (Philart Mésothérapie)</a></li>
  568.                         </ul>
  569.                         </li>
  570.                         <li>
  571.                         <button class="footerNew-dropdown-button">Amincissement</button>
  572.                         <ul class="footerNew-submenu">
  573.                             <li><a href="/specialites/cryolipolyse">Cryolipolyse</a></li>
  574.                         </ul>
  575.                         </li>
  576.                         <li>
  577.                         <button class="footerNew-dropdown-button">Rides et ridules</button>
  578.                         <ul class="footerNew-submenu">
  579.                             <li><a href="#">Philart</a></li>
  580.                             <li><a href="/specialites/morpheus">Morpheus</a></li>
  581.                             <li><a href="#">Injections et Toxine</a></li>
  582.                         </ul>
  583.                         </li>
  584.                     </ul>
  585.                     </div>
  586.                 <div class="footerNew-column">
  587.                     <h4>Actualités</h4>
  588.                     <ul>
  589.                     <li><a href="/article/morpheus-une-avancee-spectaculaire-dans-le-domaine-de-la-beaute-a-tester-a-la-maison-eiffel">Morpheus : Une avancée spectaculaire</a></li>
  590.                     <li><a href="/article/le-centre-esthetique-maison-eiffel-recommande-4-soins-pour-avoir-une-peau-lumineuse-en-plein-hiver">4 soins pour une peau lumineuse</a></li>
  591.                     <li><a href="/article/les-3-soins-stars-de-la-parisienne-pour-bien-commencer-la-saison">Les 3 soins stars</a></li>
  592.                     <li><a href="/article/lasers-peeling-radiofrequence-des-traitements-de-reference-pour-une-peau-parfaite">Traitements de référence pour une peau parfaite</a></li>
  593.                     </ul>
  594.                 </div>
  595.                 </div>
  596.             </div>
  597.             <div class="footerNew-bottom">
  598.                 <p>&copy; 2024 | <a href="/mentions-legales">Mentions légales</a> | <a href="/politique-de-confidentialite">Politique de confidentialité</a></p>
  599.             </div>
  600.             </footer>
  601.         </div>
  602.         <script src="public/js/script.js"></script>
  603.         <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  604.         <script>
  605.             AOS.init();
  606.         </script>
  607.         <script>
  608.     function openSpecialites() {
  609.     const menu = document.getElementById('deroulant-spe');
  610.     
  611.     // Toggle le menu
  612.     if(menu.style.display === "none" || menu.style.display === "") {
  613.         menu.style.display = 'block';
  614.         
  615.         // Ajoute un écouteur pour détecter les clics en dehors
  616.         document.addEventListener('click', closeOnClickOutside);
  617.     } else {
  618.         menu.style.display = 'none';
  619.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  620.     }
  621.     }
  622.     // Fonction qui ferme le menu si on clique à l'extérieur
  623.     function closeOnClickOutside(event) {
  624.     const menu = document.getElementById('deroulant-spe');
  625.     const button = document.getElementById('menuButton'); // Le bouton qui ouvre le menu
  626.     // Si l'élément cliqué n'est pas le menu ni le bouton, on referme le menu
  627.     if (!menu.contains(event.target) && !button.contains(event.target)) {
  628.         menu.style.display = 'none';
  629.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  630.     }
  631.     }
  632.             document.querySelectorAll('.footerNew-dropdown-button').forEach(button => {
  633.         button.addEventListener('click', () => {
  634.             const parentLi = button.parentElement;
  635.             // Toggle active class
  636.             parentLi.classList.toggle('active');
  637.             // Close other open menus (optional, for better UX)
  638.             document.querySelectorAll('.footerNew-dropdown li').forEach(li => {
  639.             if (li !== parentLi) {
  640.                 li.classList.remove('active');
  641.             }
  642.             });
  643.         });
  644.         });
  645. </script>
  646.     {% endblock %}