templates/specilites/philart.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Maison Eiffel - Philart
  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">Philart</h2>
  251.                             <p class='about-text'>
  252.                                 Injection sous cutanée en microgoutelette de polynucléotides dans les zones déshydratées comme le cou, les mains, le cuir chevelu, le front et la peau du visage.
  253.                                 <br/>Correction des ridules avec une action hydratante et antioxydante.
  254.                                 <br/>Redonne de l’élasticité et du tonus à la peau.
  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/4_ Philart.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">Text 3</p>
  280.                     </div>
  281.                     <div class="detail-circle">
  282.                         <h3 class="details-circle-title">Durabilité</h3>
  283.                         <p class="details-circle-text">Text 4</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 1</h4>
  290.                             <p class="detail-timeline-text">j-0</p>
  291.                         </div>
  292.                         <div class="detail-timeline-event">
  293.                             <h4 class="detail-timeline-title">Injection 2</h4>
  294.                             <p class="detail-timeline-text">j-21</p>
  295.                         </div>
  296.                         <div class="detail-timeline-event">
  297.                             <h4 class="detail-timeline-title">Injection 3</h4>
  298.                             <p class="detail-timeline-text">j-21</p>
  299.                         </div>
  300.                         <div class="detail-timeline-event detail-timeline-event-last">
  301.                             <h4 class="detail-timeline-title">Nouvelle injection</h4>
  302.                             <p class="detail-timeline-text">+/- 3 mois</p>
  303.                         </div>
  304.                         <div class="detail-timeline-arrow">
  305.                             <div class="detail-timeline-arrow-line"></div>
  306.                             <div class="detail-timeline-arrow-line"></div>
  307.                         </div>
  308.                     </div>
  309.                 </div>
  310.             </section>
  311.             <section class="section-doctor specialite">
  312.                 <div class="container-img-doctor" data-aos="fade-right" data-aos-duration="1500">
  313.                     <img class="doctor-img specialite" src="{{ asset('assets/spe/philart/1.png') }}" alt="docteur"/>
  314.                     <div class="square-border-doctor specialite"></div>
  315.                 </div>
  316.                 <div class="container-info-doctor" data-aos="fade-left" data-aos-duration="1500">
  317.                     <h1 class="title-doctor specialite">Déroulé du soin
  318.                     </h1>
  319.                     <ul>
  320.                         <li>
  321.                             <div class="circle">
  322.                                 1
  323.                             </div>
  324.                             Nettoyage de la zone
  325.                         </li>
  326.                         <li>
  327.                             <div class="circle">
  328.                                 2
  329.                             </div>
  330.                             Repérage des zones nécessitant l’injection des Polynucléotides
  331.                         </li>
  332.                         <li>
  333.                             <div class="circle">
  334.                                 3
  335.                             </div>
  336.                             Injection aux points repérés
  337.                         </li>
  338.                         <li>
  339.                             <div class="circle">
  340.                                 4
  341.                             </div>
  342.                             Nettoyage après la séance avec antiseptique
  343.                         </li>
  344.                     </ul>
  345.                 </div>
  346.                 <div class="square-border-info n1"></div>
  347.                 <div class="square-border-info n2"></div>
  348.             </section>
  349.             <div class="about-us nosBesoin">
  350.                 <div class="container-about-infos">
  351.                     <div class="about-info" data-aos="fade-right" data-aos-duration="1500">
  352.                         <h2 class="title-about">Optimisation du soin</h2>
  353.                         <p class='about-text'>
  354.                             <span>48h après la séance :</span><br/>
  355.                             - Ne pas faire de sauna, Haman.<br/>
  356.                             - Pas de sport.<br/>
  357.                             - Dans les jours qui suivent masser les volumes injectés et appliquer une crème cicatrisante sur les points d’injection.<br />
  358.                         </p>
  359.                     </div>
  360.                 </div>
  361.                 <div class="about-image-container" data-aos="fade-left" data-aos-duration="1500">
  362.                     <img class="about-img" src="{{ asset('assets/spe/philart/2.png') }}" alt="image d'illustration centre"/>
  363.                     <div class="about-border-square"></div>
  364.                 </div>
  365.             </div>
  366.             <div class="about-us specialite">
  367.                 <div class="container-about-infos">
  368.                     <div class="about-info" data-aos="fade-left" data-aos-duration="1500">
  369.                         <h2 class="title-about">Suis-je éligible ou pas ?</h2>
  370.                         <p class='about-text'>
  371.                             Nous ne vous proposerons pas ce traitement dans le contexte suivant :<br/><br/>
  372.                             - Un terrain allergique : contre-indication lors de poussées sévères (asthme, eczéma).
  373.                             <br/>
  374.                             - Les patients (es) atteints de maladie auto-immunes (lupus érythémateux, spondylarthrite ankylosante, collagénoses, dermatomyosite...)
  375.                             <br/>
  376.                             - En cas de doute, après analyse du dossier, des tests d’allergie à l’AH doivent être être pratiqués 6 semaines avant l’injection.
  377.                             <br/>
  378.                         </p>
  379.                     </div>
  380.                 </div>
  381.                 <div class="about-image-container" data-aos="fade-right" data-aos-duration="1500">
  382.                     <img class="about-img" src="{{ asset('assets/spe/philart/3.png') }}" alt="image d'illustration centre"/>
  383.                     <div class="about-border-square"></div>
  384.                 </div>
  385.             </div>
  386.             <br/>
  387.     
  388.             <div class="about-us nosBesoin">
  389.                 <div class="container-about-infos">
  390.                     <div class="about-info" data-aos="fade-right" data-aos-duration="1500">
  391.                         <h2 class="title-about">Un rajeunissement ciblé et confortable</h2>
  392.                         <p class="about-text besoin">
  393.                             Pour plus de confort, on peut proposer une anesthésie locale par crème. L’utilisation des micro-canules rend l’injection quasi-indolore. Il est à noter que plusieurs séances peuvent être nécessaires jusqu’à l’obtention de l’effet souhaité.
  394.                             <br/>
  395.                             Un délai minimum de 21 jours devra être respecté entre deux séances. Le protocole est de 3 séances pour une jeune et de 4 séance toutes les 2 semaine pour les peaux matures.<br/>
  396.                             Un entretien est possible tout les 3 mois.
  397.                         </p>
  398.                         <br/>
  399.                         <p class="about-text besoin">
  400.                             <span>Les différentes indications :</span><br/>
  401.                             Visage, y compris le front, l’arcade sourcilière, la zone périorbitaire et les pommettes.<br/>
  402.                             Cou, décolleté et mains.
  403.                         </p>
  404.                         <br/>
  405.                     </div>
  406.                 </div>
  407.                 <div class="about-image-container" data-aos="fade-left" data-aos-duration="1500">
  408.                     <img class="about-img" src="{{ asset('assets/spe/philart/4.png') }}" alt="image d'illustration centre"/>
  409.                     <div class="about-border-square"></div>
  410.                 </div>
  411.             </div>
  412.             <!-- <div class="inner" data-aos="fade-right" data-aos-duration="1500">
  413.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="inner__text">
  414.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 <h2 class="subtitle">
  415.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  416.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 </h2>
  417.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  418.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <p class="text">
  419.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  420.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         sed diam nonumy eirmod tempor invidunt ut labore et
  421.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         dolore magna aliquyam erat, sed diam voluptua
  422.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  423.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     </p>
  424.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     <ul>
  425.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <li>
  426.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             <div class="circle">
  427.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 >
  428.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  429.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  430.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </li>
  431.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  432.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <li>
  433.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             <div class="circle">
  434.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 >
  435.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  436.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  437.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </li>
  438.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  439.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <li>
  440.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             <div class="circle">
  441.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 >
  442.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  443.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  444.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </li>
  445.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  446.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <li>
  447.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             <div class="circle">
  448.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 >
  449.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  450.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  451.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </li>
  452.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  453.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <li>
  454.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             <div class="circle">
  455.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 >
  456.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  457.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             Lorem ipsum dolor sit amet, consetetu
  458.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </li>
  459.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     </ul>
  460.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  461.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  462.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             <div class="inner__image" data-aos="fade-left" data-aos-duration="1500">
  463.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 <img src="{{ asset('assets/images/pexels-elina-fairytale-3865530.jpg') }}" alt="">
  464.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  465.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  466.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </div> -->
  467.             <div class="price" data-aos="fade-up" data-aos-duration="1500" id="section-price">
  468.                 <!--<h2 class="title-about">
  469.                     Notre grille tarifaire
  470.                 </h2>
  471.                 <div class="table-container">
  472.                     <div class="table-wrapper">
  473.                         <table>
  474.                             <tbody>
  475.                                 <tr>
  476.                                     <td class="text">Force et Vitalité du cheveu</td>
  477.                                     <td class="prix">130€</td>
  478.                                     <td class="temps">45 min</td>
  479.                                 </tr>
  480.                                 <tr>
  481.                                     <td colspan="3" style="border: none;"></td>
  482.                                 </tr>
  483.                                 <tr>
  484.                                     <td colspan="3" style="border: none;">Nos combinaisons:</td> 
  485.                                 </tr>
  486.                                 <tr>
  487.                                     <td class="text">Top Hair (Sylfirm + Mesothérapie & LED)</td>
  488.                                     <td class="prix">250€</td>
  489.                                     <td class="temps">50 min</td>
  490.                                 </tr>
  491.                             </tbody>
  492.                         </table>
  493.                         <div class="legal-notice">
  494.                             <p>Tous les tarifs affichés sont TTC (Toutes Taxes Comprises).<br>
  495.                             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>
  496.                         </div>
  497.                     </div>
  498.                 </div>-->
  499.                 <br>
  500.                 <button class="container-buttonBorder">
  501.                     <p class="buttonBorder">Prendre rendez-vous</p>
  502.                     <p class="border-buttonBorder"></p>
  503.                     <p class="back-buttonBorder"></p>
  504.                 </button>
  505.             </div>
  506.             <br>
  507.             <br>
  508.             <footer>
  509.             <div class="footerNew-container">
  510.                 <div class="footerNew-left">
  511.                 <div class="footerNew-contact-info">
  512.                     <div class="footerNew-contact-item">
  513.                     <div class="footerNew-icon-circle">
  514.                         <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">
  515.                         <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" />
  516.                         </svg>
  517.                     </div>
  518.                     <a href="tel:0153700512"> 01 53 70 05 12</a>
  519.                     </div>
  520.                     <div class="footerNew-contact-item">
  521.                     <div class="footerNew-icon-circle">
  522.                         <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">
  523.                         <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" />
  524.                         </svg>
  525.                     </div>
  526.                     <a href="mailto:contact@maison-eiffel-esthetique.fr">Envoyez-nous un message</a>
  527.                     </div>
  528.                     <div class="footerNew-contact-item">
  529.                     <div class="footerNew-icon-circle">
  530.                         <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">
  531.                         <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" />
  532.                         <circle cx="12" cy="12" r="3" />
  533.                         </svg>
  534.                     </div>
  535.                     <a href="#">Nous trouver</a>
  536.                     </div>
  537.                 </div>
  538.                 </div>
  539.                 <div class="footerNew-right">
  540.                 <div class="footerNew-column">
  541.                     <h4>Nos spécialités</h4>
  542.                     <ul>
  543.                     <li><a href="/specialites/epilation-laser">Épilation laser</a></li>
  544.                     <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  545.                     <li><a href="/specialites/injection">Injection</a></li>
  546.                     <li><a href="#">Polynucléotides</a></li>
  547.                     <li><a href="/specialites/morpheus">Morpheus</a></li>
  548.                     <li><a href="#">Virtu RF</a></li>
  549.                     </ul>
  550.                 </div>
  551.                 <div class="footerNew-column">
  552.                     <h4>Vos besoins</h4>
  553.                     <ul class="footerNew-dropdown">
  554.                         <li>
  555.                         <button class="footerNew-dropdown-button">Qualité de peau</button>
  556.                         <ul class="footerNew-submenu">
  557.                             <li><a href="/specialites/peeling">Peeling</a></li>
  558.                             <li><a href="/specialites/laser-resurfacing">Laser resurfacing</a></li>
  559.                             <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  560.                             <li><a href="/specialites/microneedling">Microneedling</a></li>
  561.                         </ul>
  562.                         </li>
  563.                         <li>
  564.                         <button class="footerNew-dropdown-button">Relâchement cutané</button>
  565.                         <ul class="footerNew-submenu">
  566.                             <li><a href="/specialites/virturf">Virtu RF</a></li>
  567.                         </ul>
  568.                         </li>
  569.                         <li>
  570.                         <button class="footerNew-dropdown-button">Vieillissement cutané</button>
  571.                         <ul class="footerNew-submenu">
  572.                             <li><a href="/specialites/philart">Philart</a></li>
  573.                         </ul>
  574.                         </li>
  575.                         <li>
  576.                         <button class="footerNew-dropdown-button">Densité des cheveux</button>
  577.                         <ul class="footerNew-submenu">
  578.                             <li><a href="/specialites/philart">Polynucléotides cheveux (Philart Mésothérapie)</a></li>
  579.                         </ul>
  580.                         </li>
  581.                         <li>
  582.                         <button class="footerNew-dropdown-button">Amincissement</button>
  583.                         <ul class="footerNew-submenu">
  584.                             <li><a href="/specialites/cryolipolyse">Cryolipolyse</a></li>
  585.                         </ul>
  586.                         </li>
  587.                         <li>
  588.                         <button class="footerNew-dropdown-button">Rides et ridules</button>
  589.                         <ul class="footerNew-submenu">
  590.                             <li><a href="#">Philart</a></li>
  591.                             <li><a href="/specialites/morpheus">Morpheus</a></li>
  592.                             <li><a href="#">Injections et Toxine</a></li>
  593.                         </ul>
  594.                         </li>
  595.                     </ul>
  596.                     </div>
  597.                 <div class="footerNew-column">
  598.                     <h4>Actualités</h4>
  599.                     <ul>
  600.                     <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>
  601.                     <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>
  602.                     <li><a href="/article/les-3-soins-stars-de-la-parisienne-pour-bien-commencer-la-saison">Les 3 soins stars</a></li>
  603.                     <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>
  604.                     </ul>
  605.                 </div>
  606.                 </div>
  607.             </div>
  608.             <div class="footerNew-bottom">
  609.                 <p>&copy; 2024 | <a href="/mentions-legales">Mentions légales</a> | <a href="/politique-de-confidentialite">Politique de confidentialité</a></p>
  610.             </div>
  611.             </footer>
  612.         </div>
  613.         <script src="public/js/script.js"></script>
  614.         <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  615.         <script>
  616.             AOS.init();
  617.         </script>
  618.         <script>
  619.     function openSpecialites() {
  620.     const menu = document.getElementById('deroulant-spe');
  621.     
  622.     // Toggle le menu
  623.     if(menu.style.display === "none" || menu.style.display === "") {
  624.         menu.style.display = 'block';
  625.         
  626.         // Ajoute un écouteur pour détecter les clics en dehors
  627.         document.addEventListener('click', closeOnClickOutside);
  628.     } else {
  629.         menu.style.display = 'none';
  630.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  631.     }
  632.     }
  633.     // Fonction qui ferme le menu si on clique à l'extérieur
  634.     function closeOnClickOutside(event) {
  635.     const menu = document.getElementById('deroulant-spe');
  636.     const button = document.getElementById('menuButton'); // Le bouton qui ouvre le menu
  637.     // Si l'élément cliqué n'est pas le menu ni le bouton, on referme le menu
  638.     if (!menu.contains(event.target) && !button.contains(event.target)) {
  639.         menu.style.display = 'none';
  640.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  641.     }
  642.     }
  643.             document.querySelectorAll('.footerNew-dropdown-button').forEach(button => {
  644.         button.addEventListener('click', () => {
  645.             const parentLi = button.parentElement;
  646.             // Toggle active class
  647.             parentLi.classList.toggle('active');
  648.             // Close other open menus (optional, for better UX)
  649.             document.querySelectorAll('.footerNew-dropdown li').forEach(li => {
  650.             if (li !== parentLi) {
  651.                 li.classList.remove('active');
  652.             }
  653.             });
  654.         });
  655.         });
  656. </script>
  657.     {% endblock %}