src/Flexy/FrontBundle/Themes/CoWorking/templates/home/index.html.twig line 1

  1. {% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}
  3. {% block body %}
  4.     <link rel="shortcut icon" href="{{asset("themes/coworking/images/logo-black.png")}}" />
  5.     <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  7.     <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  8.  <style>
  9.  
  11. .cardsMobile {
  12.        display: none;
  13. }
  14. .cardsDesktop {
  15.        display: block;
  16. }
  17.  
  18.             .img-container{
  19.             padding-top:12px;
  20.         }
  21.         .img-bureaux{
  22.             object-fit:cover;
  23.             width:100%;
  24.             height:100%;
  25.         }
  26.         
  27.      
  28.         
  29.         .block-bureaux{
  30.             width:270px; 
  31.             height:140px; 
  32.             background-image:url('themes/coworking/front/images/Screenshot__30__1-removebg-preview 3.png');
  33.             background-position:bottom; 
  34.             background-repeat:no-repeat; 
  35.             background-size:40%;
  36.         }
  37.         .block-bureaux img{
  38.             width:70%;
  39.         }
  40.         .block-bureaux p{
  41.             font-family:'Lato', sans-serif;
  42.             font-weight: 600; 
  43.             letter-spacing:8px; 
  44.             text-transform: uppercase; 
  45.             font-size: 13px;
  46.              
  47.         }
  49.         select:required:invalid {
  50.            color: #666;
  51.            background-color:rgba(232, 232, 234, 1);
  52.         }
  53.         option[value=""][disabled] {
  54.             display: none;
  55.         }
  56.         option {
  57.             color: #000;
  58.             
  59.         }
  60.         .image-for-brx{
  61.             z-index:0; 
  62.             margin-left:-50px; 
  63.         }
  64.         .text-for-brx{
  65.             z-index:1; 
  66.             padding:27px 30px 30px 40px; 
  67.             margin-left:70px; 
  68.             background-color:white; 
  69.             filter:drop-shadow(0 12px 33px rgba(0, 0, 0, 0.05));
  70.         }
  72.         .card-brx{
  73.             padding: 18px 5px 18px 5px;
  74.         }
  75.     
  76.         @media(max-width:991px){
  77.             .text-for-brx{
  78.                 margin-left:0; 
  79.             }
  80.             .image-for-brx{
  81.                 margin:auto;
  82.             }
  83.         }
  84.         @media only screen and (max-width: 1200px) {
  85.             .img-container{
  86.                 height:70vh;
  87.                 width:100%;
  88.                 padding:0;
  89.             }
  90.             
  91.             .block-bureaux{
  92.                 width:220px;
  93.                 height:130px;
  94.                 display:none;
  95.             }
  96.             .block-bureaux img{
  97.                 width:60%;
  98.             }
  99.             .block-bureaux p{
  100.                 font-size:10px;
  101.             }
  102.         }
  103.         
  104.         button.btn.btn-formulaire {
  105.             background: #FCD46B;
  106.             color: white;
  107.             font-weight: 500;
  108.             border-radius: 0px;
  109.             text-transform: uppercase;
  110.             font-size: 13px;
  111.             padding-left: 20px;
  112.             padding-right: 25px;
  113.         }
  114.         
  115.         button.btn.btn-formulaire:hover{
  116.              background: #ffffff40;
  117.         }
  118.         button.btn.btn-date {
  119.             background: #ffffff40;
  120.             border: 1px solid white;
  121.             color: white;
  122.             font-weight: 500;
  123.             border-radius: 0px;
  124.             text-transform: uppercase;
  125.             font-size: 13px;
  126.            
  127.         }
  128.         
  129.           button.btn.btn-date:hover{
  130.             background: #ffd86e;
  131.         }
  133.        
  134.        
  135.           .divMobile{
  136.             display:none;
  137.         }
  138.         
  139.             .container.mobile-version{
  140.                 display: none;
  141.             }
  142.         
  143.             @media (max-width:767px) {
  144.                 
  145.                 .container.laptop-version {
  146.                     display: none;
  147.                 }
  148.                 .container.mobile-version{
  149.                     display: block !important;
  150.                 }
  151.                 html, body {
  152.                   overflow-x: hidden  !important;
  153.                 }
  154.                 body {
  155.                   position: relative !important;
  156.                 }
  157.              .bureaux-desc{
  158.                 display:flex;
  159.                 justify-content: center; 
  160.              }
  161.              .btn-res{
  162.                 margin-top: 10px;
  163.              }
  164.              /*img-fluid w-100 object-fit-cover{*/
  165.              /*    display:none;*/
  166.              /*}*/
  167.              
  168.                 .image-section{
  169.             display:inline;
  170.         }
  171.              .image-for-brx{
  172.                 margin:auto;
  173.             }
  174.             .text-for-brx{
  175.                 margin-left:0; 
  176.             }
  177.             
  178.             .w-75 {
  179.                 width:100% !important;
  180.             }
  181.             
  182.         .divDesktop{
  183.             display:none;
  184.         } 
  185.         .divMobile{
  186.             display:block;
  187.         }
  188.         
  189.         .cardsMobile {
  190.        display: block;
  191.         }
  192.         
  193.          .cardsDesktop {
  194.        display: none;
  195.         }
  196.         
  197.         .flip-card-inner {
  198.    
  199.             width: 170px;
  200.             height: 170px;
  201.         }
  202.         
  203.         button.btn.btn-formulaire {
  204.             background: #FCD46B;
  205.             color: white;
  206.             font-weight: 500;
  207.             border-radius: 0px;
  208.             text-transform: uppercase;
  209.             font-size: 13px;
  210.             padding-left: 20px;
  211.             padding-right: 25px;
  212.             position: relative;
  213.             top: -55px;
  214.         }
  215.       
  216.       .w-50{
  217.           width:80% !important;
  218.       }
  219.       iframe{
  220.           width:100% !important;
  221.           /*margin-right: 0px;*/
  222.           /*margin-left: -20px;*/
  223.       }
  224.       
  225.       .p-5 {
  226.           padding: 0rem!important;
  227.       }
  228.       .gmap_canvas{
  229.         width: 322px !important;
  230. }
  231.       }
  232.    
  234.         
  235.         
  236.     
  237.     /* GRID SYSTEM - CSS */
  240. @font-face {
  241.   
  242.   src: url(/public/fonts/DidactGothic-Regular.ttf);
  243. }
  245. .textPatchword{
  246.   /**/
  247.   font-family: "Montserrat", Sans-serif;
  248. }
  249. /* Grid System: Settings */
  250. .grid-settings {
  251.   position: fixed; 
  252.   width: 200px;
  253.   top: 80px;
  254.   right: 20px; 
  255.   z-index: 9999; 
  256. }
  258. /* Grid System: Grids */
  259. .grid-system {
  260.   text-align: center;
  261.   position: fixed;
  262.   right: 0;
  263.   left: 0; 
  264.   margin-right: auto;
  265.   margin-left: auto;
  266.   height: 100vh;
  267.   z-index: 1;
  268.   visibility: visible;
  269. }
  270. .grid-system div[class^="col-"] {
  271.     border-left: 1px dotted rgba(0, 0, 0, 0.2);
  272.     height: 100vh;
  273. }
  274. .grid-system div[class^="col-"]:last-child {
  275.     border-right: 1px dotted rgba(0, 0, 0, 0.2);
  276. }
  277. .grid-system .col-div {
  278.     background-color: rgba(0, 0, 0, 0.025);
  279.     border: none !important; 
  280.     padding-top: 15px; 
  281.     color: rgba(0, 0, 0, 0.3);
  282. }
  284. /* Grid System: Light Theme */
  285. .grid-system.light .col-div { 
  286.   background-color: rgba(255, 255, 255, 0.025); 
  287.   color: rgba(255, 255, 255, 0.3);
  288. }
  289. .grid-system.light div[class^="col-"], 
  290. .grid-system.light div[class^="col-"]:last-child { 
  291.   border-color: rgba(255, 255, 255, 0.2);
  292. }
  294. /* FOR DEMO PURPOSES ONLY: */
  295. .bg-dark h1, .bg-dark h2 {
  296.   color: #fff;
  297. }
  298. .bg-dark p {
  299.   color: rgba(255, 255, 255, .5);
  300. }
  301. .grid-settings .card-body p {
  302.   color: #212529;;
  303. }
  304.     
  305.  main{
  306.  /* background: #F6F4FE;*/
  307.       /*background: linear-gradient(#F6F4FE, #908f91);*/
  308.       /*background: linear-gradient(90deg, rgb(227 227 227) 0%, rgba(120,90,157,1) 53%, rgb(77 45 105) 100%);*/
  309.      
  310.  background-image: url(/public/images/fond.png);
  311.  background-size: cover;*/
  312.     background-repeat: no-repeat;
  313. }
  314.  main{
  315.  /* background: #F6F4FE;*/
  316.   padding-top: 1.5%;
  317.    padding-bottom: 2%;
  318.   
  319. }
  322. .fa-linkedin{
  323.   color: #1565C0;
  324.   font-size: 30px;
  325.  /* float:right; */
  326. }
  327. .btn-light{
  328.     background: white;
  329.     border-radius: 54px;
  330.     padding: 15px 30px;
  331.     width: 200px;
  332.     font-weight: 500;
  333. }
  335. #divBg {    
  336.    
  337.      background-position: right 5% bottom 50%;
  338.   /*background-image: url(/public/images/bgBackground.png);*/
  339.       background-size: cover;
  340.      /* position: absolute;*/
  341.       top: 0px;
  342.       right: 0px;
  343.       bottom: 0px;
  344.      
  345. }
  351. .Img{
  352.  width:600px;
  353.  height:200px;
  354. }
  355. .logo{
  356.    width: 30%;
  357. }
  360.  .btn-light{
  361.    position: relative;
  362.     top: 100%;
  363. }
  364. @media only screen and (max-width: 600px) {
  365.   .btn-light{
  366.     background: white;
  367.     border-radius: 54px;
  368.     padding: 15px 1px;
  369.     width: 150px;
  370.     font-weight: 500;
  371. }
  372. .Img{
  373.     width:100%;
  374. }
  375. .logo{
  376.     width:40%;
  377. }
  378. .btn-light{
  379.    position: relative;
  380.     top:0;
  381. }
  382.  
  383. }
  385.  @import url('https://fonts.cdnfonts.com/css/montserrat');
  386.  @import url('https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/demo/css/montserrat-bold.ttf'); 
  387.  
  388.  p,button{  font-family: 'Montserrat', sans-serif;
  389. }
  390.  
  391. h1{  
  392.     font-family: 'Montserrat', sans-serif;
  393.     font-weight: 800;
  394. }
  396.  
  397. /* css For whatsap**/
  399. .wrapperX {
  400.   display: flex;
  401.   justify-content: space-between;
  402.   align-items: flex-start;
  403.   margin: auto;
  404.   max-width: 800px;
  405. }
  409. .titlePourQuoi:after {
  410.     content: '';
  411.     display: block;
  412.     width: 40px;
  413.     height: 5px;
  414.     background: #c6c9ce;
  415.     margin: 0;
  416.     margin-top: 15px;
  417.     border-radius: 3px;
  418.     
  419. }
  421. .bloc-text-a-propos-right {
  422.   position: relative;
  423.   right: 30px;
  424.   height: 185px;
  425. }
  429. /*.flip-card {*/
  430. /*  background-color: transparent;*/
  431. /*  width: 300px;*/
  432. /*  height: 300px;*/
  433. /*  perspective: 1000px;*/
  434. /*}*/
  436. /*.flip-card-inner {*/
  437. /*  position: relative;*/
  438. /*  width: 270px;*/
  439. /*  height: 215px;*/
  440. /*  text-align: center;*/
  441. /*  transition: transform 0.6s;*/
  442. /*  transform-style: preserve-3d;*/
  443. /*  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
  444. /*  backface-visibility: hidden;*/
  445. /*  -moz-backface-visibility: hidden;*/
  446. /*}*/
  448. /*.flip-card:focus {*/
  449. /*    outline: 0;*/
  450. /*}*/
  452. /*.flip-card:hover .flip-card-inner,*/
  453. /*.flip-card:focus .flip-card-inner{*/
  454. /*  transform: rotateY(180deg);*/
  455. /*}*/
  457. /*.flip-card-front,*/
  458. /*.flip-card-back {*/
  459. /*  position: absolute;*/
  460. /*  width: 100%;*/
  461. /*  height: 100%;*/
  462. /*}*/
  464. /*.flip-card-front {*/
  465. /*  background-color: rgba(255, 255, 255, 1);*/
  466. /*  color: black;*/
  467. /*  z-index: 2;*/
  468.   /*display: flex;*/
  469. /*  justify-content: center;*/
  470. /*  align-items: center;*/
  471. /*}*/
  473. /*.flip-card-back {*/
  474. /*    background-color: rgba(255, 255, 255, 1); */
  475. /*      color: white;*/
  476. /*      transform: rotateY(180deg);*/
  477. /*      z-index: 1;*/
  478.       /*display: flex;*/
  479. /*      justify-content: center;*/
  480. /*      align-items: center;*/
  481. /*       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
  482. /*}*/
  486.  @media (max-width:767px) {
  487.         
  488.         .flip-card-inner {
  489.    
  490.             width: 170px !important;
  491.             height: 240px!important;
  492.         }
  493.         
  494.         .flip-card {
  495.        
  496.         height: 250px;
  497.        
  498.         }
  499.    
  500.       }
  501.       
  502.       
  506. /***/
  509. .flip-card {
  510.   background-color: transparent;
  511.   width: 300px;
  512.   height: 300px;
  513.   perspective: 1000px;
  514. }
  516. .flip-card-inner {
  517.   position: relative;
  518.   width: 100%;
  519.   height: 100%;
  520.   text-align: center;
  521.   transition: transform 0.6s;
  522.   transform-style: preserve-3d;
  523.   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  524. }
  526. .flip-card:hover .flip-card-inner {
  527.   transform: rotateY(180deg);
  528. }
  530. .flip-card-front, .flip-card-back {
  531.   position: absolute;
  532.   width: 100%;
  533.   height: 100%;
  534.   -webkit-backface-visibility: hidden;
  535.   backface-visibility: hidden;
  536. }
  538. .flip-card-front {
  539.   background-color: rgba(255, 255, 255, 1);
  540.   color: black;
  541. }
  543. .flip-card-back {
  544.   background-color: #ffffff;
  545.   color: white;
  546.   transform: rotateY(180deg);
  547. }
  549. /** début carousel */
  550.     
  551.   
  552. #cCarousel {
  553.   position: relative;
  554.   max-width: 1300px;
  555.   margin: auto;
  556. }
  558. #cCarousel .arrow {
  559.   position: absolute;
  560.   top: 50%;
  561.   display: flex;
  562.   width: 45px;
  563.   height: 45px;
  564.   justify-content: center;
  565.   align-items: center;
  566.   border-radius: 50%;
  567.   z-index: 1;
  568.   font-size: 26px;
  569.   color: white;
  570.   background: #00000072;
  571.   cursor: pointer;
  572. }
  574. #cCarousel #prev {
  575.   left: 0px;
  576. }
  578. #cCarousel #next {
  579.   right: 0px;
  580. }
  582. #carousel-vp {
  583.   width: 940px;
  584.   height: 500px;
  585.   display: flex;
  586.   align-items: center;
  587.   position: relative;
  588.   overflow: hidden;
  589.   margin: auto;
  590. }
  592. @media (max-width: 770px) {
  593.   #carousel-vp {
  594.     width: 510px;
  595.   }
  596. }
  598. @media (max-width: 510px) {
  599.   #carousel-vp {
  600.     width: 250px;
  601.   }
  602. }
  604. #cCarousel #cCarousel-inner {
  605.   display: flex;
  606.   position: absolute;
  607.   transition: 0.3s ease-in-out;
  608.   gap: 40px;
  609.   left: 0px;
  610. }
  612. .cCarousel-item {
  613.   width: 280px;
  614.   /*height: 365px;*/
  615.   border: 2px solid white;
  616.   border-radius: 15px;
  617.   overflow: hidden;
  618.   display: flex;
  619.   flex-direction: column;
  620. }
  622. .cCarousel-item img {
  623.   width: 100%;
  624.   object-fit: cover;
  625.   min-height: 246px;
  626.   color: white;
  627. }
  629. .cCarousel-item .infos {
  630.   height: 100%;
  631.   display: flex;
  632.   flex-direction: column;
  633.   align-items: center;
  634.   justify-content: space-around;
  635.   background: white;
  636.   color: black;
  637. }
  639. .cCarousel-item .infos button {
  640.   background: #222;
  641.   padding: 10px 30px;
  642.   border-radius: 15px;
  643.   color: white;
  644.   font-size: 1rem;
  645.   font-weight: bold;
  646.   cursor: pointer;
  647. }
  648. article.cCarousel-item{
  649.     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  650.     padding: 4px;
  651. }
  653.     .lire-suite{
  654.         color: black;
  655.         text-decoration: underline;
  656.         font-weight: 600;
  657.     }
  659. .custom-hr {
  660.       width: 30px;
  661.       border: 0;
  662.       border-top: 2px solid black; 
  663.       margin: 10px auto; /* Center align the hr */
  664.     }
  665.  
  666.         /* General Styling */
  669.  @keyframes scroll {
  670.      0% {
  671.          transform: translateX(0);
  672.     }
  673.      100% {
  674.          transform: translateX(calc(-250px * 7));
  675.     }
  676. }
  677.  .slider {
  678.      background: white;
  679.      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
  680.      height: 100px;
  681.      margin: auto;
  682.      overflow: hidden;
  683.      position: relative;
  684.     width: 100%;
  685. }
  686.  .slider::before, .slider::after {
  687.      background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  688.      content: "";
  689.      height: 100px;
  690.      position: absolute;
  691.      width: 200px;
  692.      z-index: 2;
  693. }
  694.  .slider::after {
  695.      right: 0;
  696.      top: 0;
  697.      transform: rotateZ(180deg);
  698. }
  699.  .slider::before {
  700.      left: 0;
  701.      top: 0;
  702. }
  703.  .slider .slide-track {
  704.      animation: scroll 25s linear infinite;
  705.      display: flex;
  706.      width: calc(250px * 14);
  707. }
  708.  .slider .slide {
  709.      height: 100px;
  710.      width: 250px;
  711. }
  713. /***/
  714. /* external css: flickity.css */
  716. * {
  717.   -webkit-box-sizing: border-box;
  718.   box-sizing: border-box;
  719. }
  721. body { font-family: sans-serif; }
  723. .gallery {
  724.   background: #EEE;
  725. }
  727. .gallery-cell {
  728.   width: 350px;
  729.   height: 200px;
  730.   margin-right: 10px;
  731.   /*background: #8C8;*/
  732.   /*counter-increment: gallery-cell;*/
  733. }
  735. /* cell number */
  736. .gallery-cell:before {
  737.   display: block;
  738.   text-align: center;
  739.   /*content: counter(gallery-cell);*/
  740.   line-height: 200px;
  741.   font-size: 80px;
  742.   color: white;
  743. }
  747. .flickity-enabled.is-draggable .flickity-viewport {
  749.     height: 270PX !important;
  750. }
  751. .flickity-page-dots{
  752.     display:none;
  753. }
  754. .fw-light p {
  755.    margin: 0px 0 0 0;
  756. }
  758.  .divReuninonWeb{
  759.                 
  760.                  background-image: url('{{ asset("uploads/front-images/picSalleReunion22.png") }}');
  761.                background-repeat: no-repeat;
  762.     background-size: 100% 100%;
  763.     height: 405px;
  764.             }
  765. </style>
  767.       <div class="row divDesktop">
  768.       <div class="col-sm-4" style="background-image:url({{asset('uploads/front-images/pictureBureaux2.png')}});background-repeat: no-repeat;background-size: 100% 100%;height: 405px;">
  769.       
  770.                                 <a href="{{path('reservationbureaux')}}" style="position: absolute;bottom: 20px;left: 40%;">
  771.                                     <button class="btn btn-formulaire">
  772.                                     {{"RÉSERVER"|trans({},"front")}}    
  773.                                     </button>
  774.                             </a>
  775.                     
  776.       </div>
  777.      <div class="col-sm-4 divReuninonWeb" >
  778.           
  779.                                 <a href="{{path('reservationsallereuninon')}}" style="position: absolute;bottom: 20px;left: 40%;">
  780.                                     <button class="btn btn-formulaire" >
  781.                                     {{"RÉSERVER"|trans({},"front")}}
  782.                                     </button>
  783.                             </a>
  784.                     
  785.       </div>
  786.       {#<div class="col-sm-4" style="background-image:url({{asset('uploads/front-images/picFreework2Final.png')}});background-repeat: no-repeat;background-size: 100% 100%;height:  405px;">#}
  787.       
  788.             {#                    <a href="{{path('reservationfreework')}}" style="position: absolute;bottom: 20px;left: 40%;">#}
  789.       {#                              <button class="btn btn-formulaire">#}
  790.       {#                              {{"RÉSERVER"|trans({},"front")}}#}
  791.       {#                              </button>#}
  792.             {#                </a>#}
  793.                     
  794.       {#</div>#}
  795.       <div class="col-sm-4" style="background-image:url({{asset('uploads/front-images/picFreework2.png')}});background-repeat: no-repeat;background-size: 100% 100%;height:  405px;">
  796.       
  797.                                 <a href="{{path('reservationfreework')}}" style="position: absolute;bottom: 20px;left: 40%;">
  798.                                     <button class="btn btn-formulaire">
  799.                                     {{"RÉSERVER"|trans({},"front")}}
  800.                                     </button>
  801.                             </a>
  802.                     
  803.       </div>
  808. </div>
  809.       <div class="divMobile">
  810.             <div>
  811.                 <div class="col-md-12"  id="divImagesHeaderMobile" style="padding: 0px;">
  812.                     
  813.                     
  814.                       <div class="d-flex align-items-center justify-content-center" style="background-image:url({{asset('uploads/front-images/picBureax2Mobile.png')}});height:215px;background-size: 100% 100%;">
  815.                           
  816.                          
  818.                        
  819.                          <a href="{{path('reservationbureaux')}}" class="btn btn-formulaire"  
  820.                      style="
  821.                             background: #FCD46B;
  822.                             color: white;
  823.                             font-weight: 500;
  824.                             border-radius: 0px;
  825.                             text-transform: uppercase;
  826.                             font-size: 13px;
  827.                             padding-left: 26px;
  828.                             padding-right: 26px;
  829.                             position: relative;
  830.                             bottom: -70px;">
  831.                          RÉSERVER
  832.                          </a>
  833.                     </div>
  834.                    
  835.                     
  836.                     
  837.                     
  838.                        <div class="d-flex align-items-center justify-content-center"  style="background-image:url({{asset('uploads/front-images/pictureSalleReunino2Mobile.png')}});height:215px;background-size: 100% 100%;">
  839.                       {#picFree2Mobile.png#}
  840.                       {#pictureSalleReunino2Mobile.png#}
  843.                            <a href="{{path('reservationsallereuninon')}}"  class="btn btn-formulaire"  style="
  844.                             background: #FCD46B;
  845.                             color: white;
  846.                             font-weight: 500;
  847.                             border-radius: 0px;
  848.                             text-transform: uppercase;
  849.                             font-size: 13px;
  850.                             padding-left: 26px;
  851.                             padding-right: 26px;
  852.                             position: relative;
  853.                             bottom: -70px;">RÉSERVER</a>
  854.                     </div>
  855.                    
  856.                     
  857.                     
  858.                        <div class="d-flex align-items-center justify-content-center"  style="background-image:url({{asset('uploads/front-images/picFree2Mobile.png')}});height:215px;background-size: 100% 100%;">
  859.                      
  860.                          <a href="{{path('reservationfreework')}}"   class="btn btn-formulaire" style="
  861.                             background: #FCD46B;
  862.                             color: white;
  863.                             font-weight: 500;
  864.                             border-radius: 0px;
  865.                             text-transform: uppercase;
  866.                             font-size: 13px;
  867.                             padding-left: 26px;
  868.                             padding-right: 26px;
  869.                             position: relative;
  870.                            bottom: -70px;">RÉSERVER</a>
  871.                     </div>
  872.                  
  873.                   
  874.                 </div>
  875.                 
  876.             </div>
  877.         </div>
  879.   
  880.   
  881.   
  882.   
  883.     <div class="container" style="margin-top:93px;" id="a-propos">
  884.                     <div class="row">
  885.                          <div class="col-lg-12" style="display: flex;background: #fbf9ed;padding: 30px;">
  886.                         
  887.                             <div class="col-lg-12">
  888.                                 <div>
  889.                                  <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titlePourQuoi"> {{contentPageHome.firstTitleSection}} </h1>
  890.                                 
  891.                                     <div>
  892.                                         <i>
  893.                                             <p class="font-italic p-3" style="font-size:13px;">
  894.                                             {{contentPageHome.firstTextSection|raw()}}  
  895.                                 </i>
  896.                                     </div>
  897.                                 </div>
  898.     </div>
  899.         
  900.                                          
  901.                 </div>
  902.                     </div>
  903.                 </div>
  904.   
  906.    <!-- Flickity HTML init -->
  907.     <div class="gallery js-flickity" data-flickity-options='{ "wrapAround": true,"autoPlay": 1700 }' style="margin-top: 5%;">
  908.         {% for gallery in contentPageHome.gallerieHomes %}
  909.               <div class="gallery-cell">
  910.                       <img loading="lazy"  src="uploads/coworking/{{gallery.path}}" width="100%" alt="" />
  911.               </div>
  912.         {% endfor %}
  913.     </div>
  916.   
  917.         <div class="container-fluid" style="margin-top:93px;" id="nos-atouts">
  918.             {#<div style="height:2px; width:30px; background-color: rgba(0, 0, 143, 1); margin-left: auto; margin-right: auto;"></div>#}
  919.             <div class="text-center" style="padding-top: 20px;">
  920.                     <h1 style="font-size: 34px;color: black;margin-bottom:22px;">{{contentPageHome.secondTitleSection|raw()}} </h1>
  921.                 </div>
  922.       
  923.             
  925.             </div>
  927.  
  928.     
  929.     <div class="container-fluid pb-3 cardsDesktop">
  930.         <div class="row gy-3 gx-0 m-auto">
  931.             <div class="col-12 col-sm-6 col-md-3 text-center ">
  932.                 
  933.                 
  934.                 
  935.                 
  936.                 
  937.                 <div class="flip-card" tabIndex="0">
  938.                   <div class="flip-card-inner" >
  939.                     <div class="flip-card-front">
  940.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_247.png">
  941.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  942.                             {{contentPageHome.textCard1}} 
  943.                         </p>
  944.                     </div>
  945.                    
  946.                     <div class="flip-card-back" style="transform: rotateX(360deg) !important;">
  947.                         <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_247.png">
  948.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  949.                          {{contentPageHome.textFlipCard1|raw()}} 
  950.                     </p>
  951.                     </div>
  952.                   </div>
  953.                 </div>
  954.             </div>
  955.             
  956.             <div class="col-12 col-sm-6 col-md-3 text-center ">
  957.                 <div class="flip-card" tabIndex="0">
  958.                   <div class="flip-card-inner" >
  959.                     <div class="flip-card-front" >
  960.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"src="themes/coworking/front/images/icon_LOCALISATION.png">
  961.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  962.                              {{contentPageHome.textCard2}}
  965.                         </p>
  966.                     </div>
  967.                    
  968.                     <div class="flip-card-back">
  969.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_LOCALISATION.png">
  970.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  971.                       
  972.                             {{contentPageHome.textFlipCard2|raw()}}
  973.                     </p>
  974.                     </div>
  975.                   </div>
  976.                 </div>
  977.             </div>
  978.             <div class="col-12 col-sm-6 col-md-3 text-center ">
  979.                 <div class="flip-card" tabIndex="0">
  980.                   <div class="flip-card-inner" >
  981.                     <div class="flip-card-front" >
  982.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_NAPROOM.png">
  983.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  984.                          
  985.                              {{contentPageHome.textCard3}}
  987.                         </p>
  988.                     </div>
  989.                    
  990.                     <div class="flip-card-back">
  991.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_NAPROOM.png">
  992.                         
  993.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  994.                             {{contentPageHome.textFlipCard3|raw()}}
  995.                     </p>
  996.                     </div>
  997.                   </div>
  998.                 </div>
  999.             </div>
  1000.             <div class="col-12 col-sm-6 col-md-3 text-center ">
  1001.                 <div class="flip-card" tabIndex="0">
  1002.                   <div class="flip-card-inner" >
  1003.                     <div class="flip-card-front">
  1004.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_PARKING.png">
  1005.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1006.                            {{contentPageHome.textCard4}}
  1007.                         </p>
  1008.                     </div>
  1009.                    
  1010.                     <div class="flip-card-back">
  1011.                           <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_PARKING.png">
  1012.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1013.                          {{contentPageHome.textFlipCard4|raw()}}
  1014.                     </p>
  1015.                     </div>
  1016.                   </div>
  1017.                 </div>
  1018.             </div>
  1019.         </div>
  1021.     </div>
  1022.     <div class="container-fluid pb-3 cardsDesktop">
  1023.         <div class="row gy-3 gx-0 m-auto">
  1024.           <div class="col-12 col-sm-6 col-md-3 text-center ">
  1025.                 <div class="flip-card" tabIndex="0">
  1026.                   <div class="flip-card-inner" >
  1027.                       
  1028.                     <div class="flip-card-front" >
  1029.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_FITNESS.png">
  1030.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1031.                       {{contentPageHome.textCard5}}
  1032.                         </p>
  1033.                     </div>
  1034.                    
  1035.                     <div class="flip-card-back">
  1036.                           <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_FITNESS.png">
  1037.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1038.                         {{contentPageHome.textFlipCard5|raw()}}
  1039.                     </p>
  1040.                     </div>
  1041.                   </div>
  1042.                 </div>
  1043.             </div>
  1044.             <div class="col-12 col-sm-6 col-md-3 text-center ">
  1045.                 <div class="flip-card" tabIndex="0">
  1046.                   <div class="flip-card-inner" >
  1047.                     <div class="flip-card-front" >
  1048.                          <img loading="lazy"  class="img-fluid w-25 pt-3"  style="width: 40%!important;" src="themes/coworking/front/images/icon_RESTAURATION.png">
  1049.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1050.                              {{contentPageHome.textCard6}}
  1051.                         </p>
  1052.                     </div>
  1053.                    
  1054.                     <div class="flip-card-back">
  1055.                       <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_RESTAURATION.png">
  1056.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1057.                           {{contentPageHome.textFlipCard6|raw()}}
  1058.                         </p>
  1059.                     </div>
  1060.                   </div>
  1061.                 </div>
  1062.             </div>
  1063.             <div class="col-12 col-sm-6 col-md-3 text-center ">
  1064.                 <div class="flip-card" tabIndex="0">
  1065.                   <div class="flip-card-inner" >
  1066.                       
  1067.                     <div class="flip-card-front">
  1068.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_STAND.png">
  1069.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1070.                          {{contentPageHome.textCard7}}
  1071.                         </p>
  1072.                     </div>
  1073.                    
  1074.                     <div class="flip-card-back">
  1075.                         <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_STAND.png">
  1076.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1077.                       {{contentPageHome.textFlipCard7|raw()}}
  1078.                 </p>
  1079.                     </div>
  1080.                   </div>
  1081.                 </div>
  1082.             </div>
  1083.             <div class="col-12 col-sm-6 col-md-3 text-center ">
  1084.                 <div class="flip-card" tabIndex="0">
  1085.                   <div class="flip-card-inner">
  1086.                      
  1087.                     <div class="flip-card-front" >
  1088.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_MASSAGE.png">
  1089.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1090.                          {{contentPageHome.textCard8}} 
  1091.                         </p>
  1092.                     </div>
  1093.                    
  1094.                     <div class="flip-card-back">
  1095.                          <img loading="lazy"  class="img-fluid w-25 pt-3"style="width: 40%!important;"  src="themes/coworking/front/images/icon_MASSAGE.png">
  1096.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1097.                          {{contentPageHome.textFlipCard8|raw()}}
  1098.                     </p>
  1099.                     </div>
  1100.                   </div>
  1101.                 </div>
  1102.             </div>
  1103.             <!--<div class="w-100 d-none d-block "></div>-->
  1104.             
  1105.         </div>
  1107.     </div>
  1109.  {#    <div class="container-fluid pb-3 cardsMobile">#}
  1110.     {#    <div class="row gy-3 gx-0 m-auto">#}
  1111.     {#        <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1112.     {#            <div class="flip-card" tabIndex="0">#}
  1113.  {#                 <div class="flip-card-inner" >#}
  1114.  {#                   <div class="flip-card-front" style="background-image: url(/themes/coworking/front/images/icon247.png);">#}
  1115.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/247.jpg">#}
  1116.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1117.  {#                           Espace de travail accessible 24h/24 7j/7#}
  1118.  {#                       </p>#}
  1119.  {#                   </div>#}
  1120.                    
  1121.  {#                   <div class="flip-card-back">#}
  1122.  {#                       <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/247.jpg">#}
  1123.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1124.     {#                    Espace de travail accessible 24h/24 7j/7#}
  1125.     {#                </p>#}
  1126.  {#                   </div>#}
  1127.  {#                 </div>#}
  1128.  {#               </div>#}
  1129.     {#        </div>#}
  1130.             
  1131.     {#        <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1132.     {#            <div class="flip-card" tabIndex="0">#}
  1133.  {#                 <div class="flip-card-inner" >#}
  1134.  {#                   <div class="flip-card-front" style="background-image: url(/themes/coworking/front/images/iconLOCALISATION.png);">#}
  1135.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/LOCALISATION.jpg">#}
  1136.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1137.  {#                           Emplacement unique à Casablanca #}
  1140.  {#                       </p>#}
  1141.  {#                   </div>#}
  1142.                    
  1143.  {#                   <div class="flip-card-back">#}
  1144.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/LOCALISATION.jpg">#}
  1145.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1146.                       
  1147.  {#                           Emplacement à 2 pas de la mosquée Hassan 2 , en face de la foire d’exposition de Casablanca, proche du centre ville et du centre d’affaire Marina.#}
  1148.     {#                </p>#}
  1149.  {#                   </div>#}
  1150.  {#                 </div>#}
  1151.  {#               </div>#}
  1152.     {#        </div>#}
  1153.     {#        <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1154.     {#            <div class="flip-card" tabIndex="0">#}
  1155.  {#                 <div class="flip-card-inner" >#}
  1156.  {#                   <div class="flip-card-front"  style="background-image: url(/themes/coworking/front/images/iconNAPROOM.png);">#}
  1157.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/NAPROOM.jpg">#}
  1158.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1159.                          
  1160.  {#                               Nap room#}
  1162.  {#                       </p>#}
  1163.  {#                   </div>#}
  1164.                    
  1165.  {#                   <div class="flip-card-back">#}
  1166.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/NAPROOM.jpg">#}
  1167.                         
  1168.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1169.     {#                    Nap room#}
  1172.     {#                </p>#}
  1173.  {#                   </div>#}
  1174.  {#                 </div>#}
  1175.  {#               </div>#}
  1176.     {#        </div>#}
  1177.     {#        <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1178.     {#            <div class="flip-card" tabIndex="0">#}
  1179.  {#                 <div class="flip-card-inner" >#}
  1180.  {#                   <div class="flip-card-front" style="background-image: url(/themes/coworking/front/images/iconPARKING.png);">#}
  1181.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/PARKING.jpg">#}
  1182.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1183.  {#                           L’accès au parking privé.#}
  1184.  {#                       </p>#}
  1185.  {#                   </div>#}
  1186.                    
  1187.  {#                   <div class="flip-card-back">#}
  1188.  {#                         <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/PARKING.jpg">#}
  1189.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1190.     {#                     L’accès au parking privé.#}
  1191.     {#                </p>#}
  1192.  {#                   </div>#}
  1193.  {#                 </div>#}
  1194.  {#               </div>#}
  1195.     {#        </div>#}
  1196.     {#    </div>#}
  1198.     {#</div>#}
  1199.     {#<div class="container-fluid pb-3 cardsMobile">#}
  1200.     {#    <div class="row gy-3 gx-0 m-auto">#}
  1201.     {#      <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1202.     {#            <div class="flip-card" tabIndex="0">#}
  1203.  {#                 <div class="flip-card-inner" >#}
  1204.                       
  1205.  {#                   <div class="flip-card-front" style="background-image: url(/themes/coworking/front/images/iconFITNESS.png);">#}
  1206.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/FITNESS.jpg">#}
  1207.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1208.  {#                          Gaming & Fitness#}
  1209.  {#                       </p>#}
  1210.  {#                   </div>#}
  1211.                    
  1212.  {#                   <div class="flip-card-back">#}
  1213.  {#                         <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/FITNESS.jpg">#}
  1214.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1215.     {#                    Gaming & Fitness#}
  1216.     {#                </p>#}
  1217.  {#                   </div>#}
  1218.  {#                 </div>#}
  1219.  {#               </div>#}
  1220.     {#        </div>#}
  1221.     {#        <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1222.     {#            <div class="flip-card" tabIndex="0">#}
  1223.  {#                 <div class="flip-card-inner" >#}
  1224.  {#                   <div class="flip-card-front" style="background-image: url(/themes/coworking/front/images/iconRESTAURATION.png);">#}
  1225.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/RESTAURATION.jpg">#}
  1226.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1227.  {#                          Restauration#}
  1228.  {#                       </p>#}
  1229.  {#                   </div>#}
  1230.                    
  1231.  {#                   <div class="flip-card-back">#}
  1232.  {#                     <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/RESTAURATION.jpg">#}
  1233.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1234.  {#                          Restauration#}
  1235.  {#                       </p>#}
  1236.  {#                   </div>#}
  1237.  {#                 </div>#}
  1238.  {#               </div>#}
  1239.     {#        </div>#}
  1240.     {#        <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1241.     {#            <div class="flip-card" tabIndex="0">#}
  1242.  {#                 <div class="flip-card-inner" >#}
  1243.                       
  1244.  {#                   <div class="flip-card-front" style="background-image: url(/themes/coworking/front/images/iconSTAND.png);">#}
  1245.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/STAND.jpg">#}
  1246.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1247.  {#                         Stands & pop up stores#}
  1248.  {#                       </p>#}
  1249.  {#                   </div>#}
  1250.                    
  1251.  {#                   <div class="flip-card-back">#}
  1252.  {#                       <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/STAND.jpg">#}
  1253.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1254.     {#                   Stands & pop up stores#}
  1255.     {#                </p>#}
  1256.  {#                   </div>#}
  1257.  {#                 </div>#}
  1258.  {#               </div>#}
  1259.     {#        </div>#}
  1260.     {#        <div class="col-12 col-sm-6 col-md-3 text-center ">#}
  1261.     {#            <div class="flip-card" tabIndex="0">#}
  1262.  {#                 <div class="flip-card-inner">#}
  1263.                      
  1264.  {#                   <div class="flip-card-front"  style="background-image: url(/themes/coworking/front/images/iconMASSAGE.png);">#}
  1265.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/MASSAGE.jpg">#}
  1266.  {#                       <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1267.  {#                           Centre de beauté et bien être.#}
  1268.  {#                       </p>#}
  1269.  {#                   </div>#}
  1270.                    
  1271.  {#                   <div class="flip-card-back">#}
  1272.  {#                        <img loading="lazy"  class="img-fluid w-25 pt-3" src="themes/coworking/front/images/MASSAGE.jpg">#}
  1273.  {#                        <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">#}
  1274.     {#                    Centre de beauté et bien être.#}
  1275.     {#                </p>#}
  1276.  {#                   </div>#}
  1277.  {#                 </div>#}
  1278.  {#               </div>#}
  1279.     {#        </div>#}
  1280.     {#        <!--<div class="w-100 d-none d-block "></div>-->#}
  1281.             
  1282.     {#    </div>#}
  1284.     {#</div>#}
  1285.     
  1286.     
  1287.     
  1288.     
  1289.     <div class="col-sm-12 text-center mt-5 cardsMobile">
  1290.                 
  1291.                     <span class="divider-text mb-5"></span>
  1292.                     <div class="" style="background-color:rgba(178, 78, 69, 0.04)">
  1293.                         <div class="row text-center d-flex justify-content-center">
  1294.                             <div class="col-6">
  1295.                                   <div class="flip-card" tabIndex="0">
  1296.                   <div class="flip-card-inner" >
  1297.                     <div class="flip-card-front">
  1298.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_247.png">
  1299.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1300.                            {{contentPageHome.textCard1}}
  1301.                         </p>
  1302.                     </div>
  1303.                    
  1304.                     <div class="flip-card-back">
  1305.                         <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_247.png">
  1306.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1307.                         {{contentPageHome.textFlipCard1|raw()}}
  1308.                     </p>
  1309.                     </div>
  1310.                   </div>
  1311.                 </div>
  1312.                             </div>
  1313.                             <div class="col-6">
  1314.                                  <div class="flip-card" tabIndex="0">
  1315.                   <div class="flip-card-inner" >
  1316.                     <div class="flip-card-front" >
  1317.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"src="themes/coworking/front/images/icon_LOCALISATION.png">
  1318.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1319.                              {{contentPageHome.textCard2}}
  1322.                         </p>
  1323.                     </div>
  1324.                    
  1325.                     <div class="flip-card-back">
  1326.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_LOCALISATION.png">
  1327.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1328.                       
  1329.                         {{contentPageHome.textFlipCard2|raw()}}
  1330.                                    </p>
  1331.                     </div>
  1332.                   </div>
  1333.                 </div>
  1334.                             </div>
  1335.                                 <div class="col-6">
  1336.                                    <div class="flip-card" tabIndex="0">
  1337.                   <div class="flip-card-inner" >
  1338.                     <div class="flip-card-front" >
  1339.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_NAPROOM.png">
  1340.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1341.                          
  1342.                                     {{contentPageHome.textCard3}}
  1344.                         </p>
  1345.                     </div>
  1346.                    
  1347.                     <div class="flip-card-back">
  1348.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_NAPROOM.png">
  1349.                         
  1350.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1351.                              {{contentPageHome.textFlipCard3|raw()}}
  1352.                     </p>
  1353.                     </div>
  1354.                   </div>
  1355.                 </div>
  1356.                                    </div> 
  1357.                                         <div class="col-6">
  1358.                                              <div class="flip-card" tabIndex="0">
  1359.                   <div class="flip-card-inner" >
  1360.                     <div class="flip-card-front">
  1361.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;" src="themes/coworking/front/images/icon_PARKING.png">
  1362.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1363.                              {{contentPageHome.textCard4}}
  1364.                         </p>
  1365.                     </div>
  1366.                    
  1367.                     <div class="flip-card-back">
  1368.                           <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_PARKING.png">
  1369.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1370.                             {{contentPageHome.textFlipCard4|raw()}}
  1371.                     </p>
  1372.                     </div>
  1373.                   </div>
  1374.                 </div>
  1375.                                     </div>        
  1376.                         
  1377.                         
  1378.                         </div>
  1379.                                                                                                                                                                                                                                                                                                                                                                     </div>
  1380.                                                                                                                                                                                                                                                                                                                                                                     </div>
  1381.         <div class="col-sm-12 text-center mt-2 cardsMobile">
  1382.                     
  1383.                     <span class="divider-text mb-5"></span>
  1384.                     <div class="" style="background-color:rgba(178, 78, 69, 0.04)">
  1385.                         <div class="row text-center d-flex justify-content-center">
  1386.                             <div class="col-6">
  1387.                                  <div class="flip-card" tabIndex="0">
  1388.                   <div class="flip-card-inner" >
  1389.                       
  1390.                     <div class="flip-card-front" >
  1391.                          <img loading="lazy"  class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_FITNESS.png">
  1392.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1393.                            {{contentPageHome.textCard5}}
  1394.                         </p>
  1395.                     </div>
  1396.                    
  1397.                     <div class="flip-card-back">
  1398.                           <img loading="lazy"  class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_FITNESS.png">
  1399.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1400.                          {{contentPageHome.textFlipCard5|raw()}}
  1402.                     </p>
  1403.                     </div>
  1404.                   </div>
  1405.                 </div>
  1406.                             </div>
  1407.                             <div class="col-6">
  1408.                                  <div class="flip-card" tabIndex="0">
  1409.                   <div class="flip-card-inner" >
  1410.                     <div class="flip-card-front" >
  1411.                          <img loading="lazy"  class="img-fluid w-25 pt-3"   style="width: 40%!important;"  src="themes/coworking/front/images/icon_RESTAURATION.png">
  1412.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1413.                             {{contentPageHome.textCard6}}
  1414.                         </p>
  1415.                     </div>
  1416.                    
  1417.                     <div class="flip-card-back">
  1418.                       <img loading="lazy"  class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_RESTAURATION.png">
  1419.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1420.                              {{contentPageHome.textFlipCard6|raw()}}
  1421.                         </p>
  1422.                     </div>
  1423.                   </div>
  1424.                 </div>
  1425.                             </div>
  1426.                             <div class="col-6">
  1427.                                  <div class="flip-card" tabIndex="0">
  1428.                   <div class="flip-card-inner" >
  1429.                       
  1430.                     <div class="flip-card-front">
  1431.                          <img loading="lazy"  class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_STAND.png">
  1432.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1433.                         {{contentPageHome.textCard7}}
  1434.                         </p>
  1435.                     </div>
  1436.                    
  1437.                     <div class="flip-card-back">
  1438.                         <img loading="lazy"  class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_STAND.png">
  1439.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1440.                           {{contentPageHome.textFlipCard7|raw()}}
  1442.                     </p>
  1443.                     </div>
  1444.                   </div>
  1445.                 </div>
  1446.                              </div> 
  1447.                             <div class="col-6">
  1448.                                  <div class="flip-card" tabIndex="0">
  1449.                   <div class="flip-card-inner">
  1450.                      
  1451.                     <div class="flip-card-front"  >
  1452.                          <img loading="lazy"  class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_MASSAGE.png">
  1453.                         <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1454.                             {{contentPageHome.textCard8}}
  1455.                         </p>
  1456.                     </div>
  1457.                    
  1458.                     <div class="flip-card-back">
  1459.                          <img loading="lazy"  class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_MASSAGE.png">
  1460.                          <p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
  1461.                          {{contentPageHome.textFlipCard8|raw()}} 
  1462.                     </p>
  1463.                     </div>
  1464.                   </div>
  1465.                 </div>
  1466.                             </div>        
  1467.                         
  1468.                         
  1469.                         </div>
  1470.                 </div>
  1471.             </div>                                                                                                                                                                                                                                                                                                                                                            
  1472.                                                                                                                                                                                                                                                                                                                                                                     
  1475.                 </div>
  1476. </div>
  1478.      
  1479.                  <div class="text-center" style="padding-top: 20px;">
  1480.                             <h1 style="font-size: 34px;color: black;margin-bottom:22px;"><a href="{{ path('news')}}" >Nos actualités</a></h1>
  1481.                         </div>
  1482.               
  1483.         
  1484.              <section>
  1485.           <div id="cCarousel">
  1486.             <div class="arrow" id="prev"><i class="fa-solid fa-chevron-left"></i></div>
  1487.             <div class="arrow" id="next"><i class="fa-solid fa-chevron-right"></i></div>
  1488.         
  1489.             <div id="carousel-vp">
  1490.               <div id="cCarousel-inner"> 
  1491.               {% for news in newsAnnonce %}     
  1492.               <article class="cCarousel-item">
  1493.                   <img loading="lazy"  src="/uploads/coworking/{{ news.image }}" alt="Moon">
  1494.                   <div class="infos">
  1495.                     <h3 style="font-size:22px;line-height: 40px;" class="title-article">{{ news.title }}  </h3>
  1496.                     <hr class="custom-hr">
  1497.                  <p>{{ news.description|slice(0, 100) ~ '...' }}</p>
  1498.                     <a href="{{path('actualite',{id:news.id})}}" class="lire-suite">Lire la suite</a>
  1499.                   </div>
  1500.                 </article>
  1501.                  {% endfor %}
  1502.                 
  1503.                 
  1504.                 
  1505.                 
  1506.               </div>
  1507.             </div>
  1508.           </div>
  1509.         </section>
  1510.     
  1511.  
  1513.     <div class="container-fluid p-5" style="margin-top:0px;  background-color:rgba(249, 249, 249, 1);">
  1514.              <div class="row align-items-center g-0 gap-3">
  1517.             <div class="container-fluid" style="margin-top:93px; background-color: rgba(249, 249, 249, 1); ">
  1519.             
  1521.                 <div class="text-center" style="padding-top: 40px;">
  1523.                      <h1  style=" color: black; margin-bottom:22px;">Découvrez notre univers</h1>
  1524.                     {#<div style="height:3px; width:30px; margin-top:22px; background-color: rgba(0, 0, 143, 1); margin-left: auto; margin-right: auto;"></div>#}
  1525.                     <div class="m-auto w-50">
  1526.                     {#<p style="width:80%; margin:auto;padding-bottom:10%;font-family: 'Archivo', sans-serif; line-height:27px; font-weight:400;font-size: 14px; color: rgba(17, 17, 17, 0.8);"> Découvrez notre espace de co-working en 3D    </p>#}
  1527.                         
  1528.                              
  1529.                     </div>
  1530.                     <div class="mt-5 w-100">
  1531.                      {#<iframe width="560" height="315" src="https://www.youtube.com/embed/GeKD5d88QjM?si=Vi9zBFTXmrPXAHzx" style="width:80%; height:350px;" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>#}
  1532.                      <iframe width="560" height="315" src=" {{contentPageHome.linkYoutube}}" style="width:80%; height:400px;" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  1533.                 
  1534.                  
  1535.                                   </div>
  1536.                 </div>
  1538.             </div>
  1539.         </div>
  1541.     </div>
  1542.     
  1543.     
  1544.                 <div class="container laptop-version" style="margin-top:93px;" id="melliber-Appart">
  1545.                     <div class="row">
  1546.                      <a href="https://www.melliber-apparthotel.com" id="HotelAppart" target="_blank" style="color: #a5a5a5;">
  1547.                          <div class="col-lg-12 " style="display: flex;">
  1548.                                     
  1549.                                          
  1550.                                         
  1551.                                          <div class="col-lg-7 col-sm-12"> 
  1552.                                           <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titlePourQuoi"> {{contentPageHome.thirdTitleSection}} </h1>
  1553.                                                 <p class="mt-3" style="text-align: justify;">
  1554.                                                     {{contentPageHome.thirdTextSection|raw()}} 
  1555.                                             </p>
  1556.                                          </div> 
  1557.                                           <div class="col-lg-5 col-sm-12">
  1558.                                            
  1559.                                             <img loading="lazy"  src="/themes/coworking/front/images/picture_Meliber.png" style="width: 100%;"> 
  1560.                                          </div> 
  1561.                 </div>
  1562.                     </a>
  1563.                     </div>
  1564.                 </div>
  1565.                 
  1566.                 
  1567.                 <div class="container mobile-version" style="margin-top:93px;" id="melliber" >
  1568.                     <div class="row">
  1569.                          <a href="https://www.melliber-apparthotel.com" id="HotelAppart" target="_blank" style="color: #a5a5a5;">
  1570.                          <div class="col-lg-12 ">
  1571.                                     
  1572.                                          
  1573.                                         <div class="col-lg-5 col-sm-12">
  1574.                                          <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titlePourQuoi">  {{contentPageHome.thirdTitleSection}} </h1>
  1576.                                             <img loading="lazy"  src="/themes/coworking/front/images/picture_Meliber.png" style="width: 100%;"> 
  1577.                                          </div> 
  1578.                                          <div class="col-lg-7 col-sm-12"> 
  1579.                                                 <p class="mt-3" style="">
  1580.                                                     {{contentPageHome.thirdTextSection|raw()}} 
  1581.                                             </p>
  1582.                                          </div> 
  1583.                                           
  1584.                 </div>
  1585.                 </a>
  1586.                     </div>
  1587.                 </div>
  1588.                 
  1589.                 
  1590.                     
  1591.         <div class="text-center" style="padding-top: 4%;">
  1592.                     <h1 style="font-size: 34px;color: black;margin-bottom:22px;">Nos Réferences</h1>
  1593.                 </div>
  1594.       
  1595.      <section>
  1596.  
  1597.  
  1598.            <div class="slider">
  1599.     <div class="slide-track">
  1600.        {% for ref in reference %}   
  1601.         <div class="slide">
  1602.             <img loading="lazy"  src="/uploads/coworking/{{ ref.image }}" height="100" width="250" alt="" />
  1603.         </div>
  1604.       {% endfor  %}
  1605.         {% for ref in reference %}   
  1606.         <div class="slide">
  1607.             <img loading="lazy"  src="/uploads/coworking/{{ ref.image }}" height="100" width="250" alt="" />
  1608.         </div>
  1609.       {% endfor  %}  
  1610.         
  1611.         
  1612.     </div>
  1613.     </div>
  1614.   </section>
  1616.         <div class="container-fluid" style="margin-top:93px;" id="contactezNous">
  1617.             <div class="col-md-12" style=" background-color: rgba(240, 240, 240, 1);">
  1618.                 <div class="text-center" style="padding-top:70px;">
  1619.                     <h1 class="h2" style=" color: black;margin-bottom:22px;">Contactez-nous</h1>
  1620.                     {#<div style="height:3px; width:30px; margin-top:22px; background-color: rgba(0, 0, 143, 1); margin-left: auto; margin-right: auto;"></div>#}
  1621.                     <div class="m-auto w-50">
  1622.                     
  1623.                     </div>
  1624.                 </div>
  1625.                 <div class="row">
  1626.                     <div class="col-sm-6">
  1627.                 <form id="formForMobile" class="m-auto mt-4 p-3" style="width:64%;" action="{{path('sendEmailFromPageContact')}}" method="POST">
  1628.                             <div class="row gy-3 gx-5">
  1629.                                  <div class="col-md-12">
  1630.                                     {% for label, messages in app.flashes %}
  1631.                                         {% for message in messages %}
  1632.                                             <div class="alert alert-{{ label }} alert-dismissible fade show text-center" role="alert" style="font-size: 13px;">
  1633.                                                 {{ message }}
  1634.                                                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  1635.                                                     <span aria-hidden="true">&times;</span>
  1636.                                                 </button>
  1637.                                             </div>
  1638.                                         {% endfor %}
  1639.                                     {% endfor %}
  1640.                                 </div>
  1641.                                 <div class="col-md-6">
  1642.                                     <input class="w-100" type="text"  name="fullName"    {% set searchString = '/en' %} {% if searchString in app.request.uri %} placeholder="Full name" {% else %} placeholder="Nom complet" {% endif %} style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
  1643.     border: 2px solid #ffffff !important;" required>
  1644.                                 </div>
  1645.                                 <div class="col-md-6">
  1646.                                     <input class="w-100" type="text" name="phone"     {% set searchString = '/en' %} {% if searchString in app.request.uri %} placeholder="Phone" {% else %} placeholder="Téléphone" {% endif %} style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
  1647.     border: 2px solid #ffffff !important;">
  1648.                                 </div>
  1649.                                 <div class="col-md-12">
  1650.                                     <input class="w-100" type="email" name="email"   placeholder="email@example.com" style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
  1651.     border: 2px solid #ffffff !important;" required>
  1652.                                 </div>
  1653.                             </div>
  1654.                             <div class="mt-4">
  1655.                                 <textarea  name="message" style="font-size:12px" class="form-control w-100 border-0 rounded-0" id="textAreaExample" rows="6"  required></textarea>
  1656.                             </div>
  1657.                             <div class="row py-3">
  1658.                                 <div class="col-12">
  1659.                                     <input class="float-end" type="submit"   {% set searchString = '/en' %} {% if searchString in app.request.uri %} value="Send"  {% else %} value="envoyer" {% endif %}style="border: none; background-color: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 1); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-family:'PT Sans', sans-serif; height: 45px; width: 180px;">
  1660.                                 </div>
  1661.                             </div>
  1662.                         
  1663.                         </form>
  1664.                     </div>
  1665.                     <div class="col-sm-6"> 
  1666.                         <div class="mapouter"><div class="gmap_canvas"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13292.106768506852!2d-7.633346!3d33.6046119!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7d30e93c2d56f%3A0xcc3100e8f00d75d2!2sCOWORK%26LIVE!5e0!3m2!1sen!2sma!4v1698228599408!5m2!1sen!2sma" frameborder="0" scrolling="no" style="width: 430px; height: 400px;"></iframe><style>.mapouter{position:relative;height:400px;width:430px}.gmap_canvas{overflow:hidden;height:400px;width:430px}.gmap_canvas iframe{position:relative;z-index:2}.gmap_canvas a{top:0;z-index:0}</style><a href="https://www.eireportingonline.com">ei reporting</a></div></div>
  1667.                     
  1668.                     {#<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13292.106768506852!2d-7.633346!3d33.6046119!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7d30e93c2d56f%3A0xcc3100e8f00d75d2!2sCOWORK%26LIVE!5e0!3m2!1sen!2sma!4v1698228599408!5m2!1sen!2sma" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>#}
  1669.                     
  1670.                     </div>
  1671.                 </div>
  1672.                 
  1674.             </div>
  1675.             
  1676.             
  1677.         </div>
  1678.         
  1680.     
  1681.         
  1682.         
  1683.         {#<div class="wrapperX">#}
  1684.   {#          <a target="_blank" href="https://api.whatsapp.com/send?phone=&text=" id="whatsapp-button" style="position:fixed; bottom:10px; right:10px; width:50px; z-index:999;"><img loading="lazy"  style="width:100%;" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPHBhdGggc3R5bGU9ImZpbGw6I0VERURFRDsiIGQ9Ik0wLDUxMmwzNS4zMS0xMjhDMTIuMzU5LDM0NC4yNzYsMCwzMDAuMTM4LDAsMjU0LjIzNEMwLDExNC43NTksMTE0Ljc1OSwwLDI1NS4xMTcsMCAgUzUxMiwxMTQuNzU5LDUxMiwyNTQuMjM0UzM5NS40NzYsNTEyLDI1NS4xMTcsNTEyYy00NC4xMzgsMC04Ni41MS0xNC4xMjQtMTI0LjQ2OS0zNS4zMUwwLDUxMnoiLz4KPHBhdGggc3R5bGU9ImZpbGw6IzU1Q0Q2QzsiIGQ9Ik0xMzcuNzEsNDMwLjc4Nmw3Ljk0NSw0LjQxNGMzMi42NjIsMjAuMzAzLDcwLjYyMSwzMi42NjIsMTEwLjM0NSwzMi42NjIgIGMxMTUuNjQxLDAsMjExLjg2Mi05Ni4yMjEsMjExLjg2Mi0yMTMuNjI4UzM3MS42NDEsNDQuMTM4LDI1NS4xMTcsNDQuMTM4UzQ0LjEzOCwxMzcuNzEsNDQuMTM4LDI1NC4yMzQgIGMwLDQwLjYwNywxMS40NzYsODAuMzMxLDMyLjY2MiwxMTMuODc2bDUuMjk3LDcuOTQ1bC0yMC4zMDMsNzQuMTUyTDEzNy43MSw0MzAuNzg2eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRkVGRUZFOyIgZD0iTTE4Ny4xNDUsMTM1Ljk0NWwtMTYuNzcyLTAuODgzYy01LjI5NywwLTEwLjU5MywxLjc2Ni0xNC4xMjQsNS4yOTcgIGMtNy45NDUsNy4wNjItMjEuMTg2LDIwLjMwMy0yNC43MTcsMzcuOTU5Yy02LjE3OSwyNi40ODMsMy41MzEsNTguMjYyLDI2LjQ4Myw5MC4wNDFzNjcuMDksODIuOTc5LDE0NC43NzIsMTA1LjA0OCAgYzI0LjcxNyw3LjA2Miw0NC4xMzgsMi42NDgsNjAuMDI4LTcuMDYyYzEyLjM1OS03Ljk0NSwyMC4zMDMtMjAuMzAzLDIyLjk1Mi0zMy41NDVsMi42NDgtMTIuMzU5ICBjMC44ODMtMy41MzEtMC44ODMtNy45NDUtNC40MTQtOS43MWwtNTUuNjE0LTI1LjZjLTMuNTMxLTEuNzY2LTcuOTQ1LTAuODgzLTEwLjU5MywyLjY0OGwtMjIuMDY5LDI4LjI0OCAgYy0xLjc2NiwxLjc2Ni00LjQxNCwyLjY0OC03LjA2MiwxLjc2NmMtMTUuMDA3LTUuMjk3LTY1LjMyNC0yNi40ODMtOTIuNjktNzkuNDQ4Yy0wLjg4My0yLjY0OC0wLjg4My01LjI5NywwLjg4My03LjA2MiAgbDIxLjE4Ni0yMy44MzRjMS43NjYtMi42NDgsMi42NDgtNi4xNzksMS43NjYtOC44MjhsLTI1LjYtNTcuMzc5QzE5My4zMjQsMTM4LjU5MywxOTAuNjc2LDEzNS45NDUsMTg3LjE0NSwxMzUuOTQ1Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" /></a>#}
  1685.   {#       </div>#}
  1686.   
  1687.   
  1688.           
  1689.         {#  <a href="https://api.whatsapp.com/send?phone=662135956&text=Bonjour" target=”_blank” class="whatsapp-btn">#}
  1690.         {#  <i class="bi bi-whatsapp"></i>#}
  1691.         {#</a>#}
  1692. {% endblock %}
  1694. {% block javascripts %}
  1695.  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  1697. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  1698. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  1699. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  1701. <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  1702. <script>
  1703.   
  1705. function toggle(id) {
  1706.   a = document.getElementById('toggle_'+id);
  1707.   b = document.getElementById('display_'+id);
  1708.     if (a.style.display=='block') {
  1709.       a.style.display='none';
  1710.       b.innerHTML='En savoir plus';
  1711.     }
  1712.     else {
  1713.       a.style.display='block';
  1714.       b.innerHTML='Voir moins';
  1715.   }
  1716. }
  1718. const $prev = $("#prev");
  1719. const $next = $("#next");
  1721. let $carouselVp = $("#carousel-vp");
  1722. let $cCarouselInner = $("#cCarousel-inner");
  1723. let $cards = $(".cCarousel-item");
  1725. let carouselInnerWidth = $cCarouselInner[0].getBoundingClientRect().width;
  1726. let leftValue = 0;
  1728. // Variable used to set the carousel movement value (card's width + gap)
  1729. const totalMovementSize =
  1730.   parseFloat($cards[0].getBoundingClientRect().width) +
  1731.   parseFloat($cCarouselInner.css("gap"));
  1733. // Clone cards for infinite loop
  1734. $cards.each(function () {
  1735.   $(this).clone().appendTo($cCarouselInner);
  1736. });
  1738. // Update the new total width of the carousel
  1739. carouselInnerWidth = $cCarouselInner[0].getBoundingClientRect().width;
  1741. $prev.on("click", () => {
  1742.   if (leftValue === 0) {
  1743.     // Jump to the end of the carousel for seamless looping
  1744.     leftValue = -(
  1745.       carouselInnerWidth / 2 -
  1746.       $carouselVp[0].getBoundingClientRect().width
  1747.     );
  1748.     $cCarouselInner.css("left", leftValue + "px");
  1749.   } else {
  1750.     leftValue += totalMovementSize;
  1751.     $cCarouselInner.css("left", leftValue + "px");
  1752.   }
  1753. });
  1755. $next.on("click", () => {
  1756.   const carouselVpWidth = $carouselVp[0].getBoundingClientRect().width;
  1758.   if (carouselInnerWidth - Math.abs(leftValue) <= carouselVpWidth) {
  1759.     // Jump to the beginning of the carousel for seamless looping
  1760.     leftValue = 0;
  1761.     $cCarouselInner.css("left", leftValue + "px");
  1762.   } else {
  1763.     leftValue -= totalMovementSize;
  1764.     $cCarouselInner.css("left", leftValue + "px");
  1765.   }
  1766. });
  1769.   
  1771. $("#typed").typed({
  1772.           strings: ["Emplacement à 2 pas de la mosquée Hassan 2 ,", "en face de la foire d’exposition de Casablanca", "proche du centre ville et du centre d’affaire Marina."],
  1773.           typeSpeed: 100,
  1774.           startDelay: 0,
  1775.           backSpeed: 60,
  1776.           backDelay: 2000,
  1777.           loop: true,
  1778.           cursorChar: "|",
  1779.           contentType: 'html'
  1780.       });
  1790. </script>
  1791. {% endblock %}