templates/tour/index_by_category.html.twig line 907

Open in your IDE?
  1. {% extends 'base-V3.html.twig' %}
  2. {% block stylesheets %}
  3.     <!--
  4.         <link rel="stylesheet" href="{#{ asset('assets/v3/css/homepage.css') }#}">
  5.     -->
  6.     <link rel="stylesheet" href="{{ asset('assets/v3/css/swiper.min.css') }}">
  7.     <link rel="stylesheet" href="{{ asset('assets/v3/css/theme.min.css') }}">
  8.     <link rel="stylesheet" href="{{ asset('assets/v3/css/flatpickr.min.css') }}">
  9.     <link rel="preconnect" href="https://fonts.googleapis.com">
  10.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  11.     <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  12.     <link rel="preconnect" href="https://fonts.googleapis.com">
  13.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14.     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  15.     <style>
  16.     {% set cdn = "/cdn-cgi/image/width=1600" %}
  18.     .destination-voyages-en-couple {
  19.         /* background-image: url({{ api_base_path ~ cdn ~ "/images/Visuel-encouple-odasie1.png"}} ); */
  20.         background-image: url("../../assets/images/thematiques/voyages-en-couple.svg")
  21.         background-size: cover;
  22.     }
  24.     .destination-voyages-en-famille {
  25.         background-image: url({{ api_base_path ~ cdn ~ "/images/Visuel-enfamille-odasie.png"}} );
  26.         background-size: cover;
  27.     }
  29.     .destination-voyages-entre-amis {
  30.         background-image: url({{ api_base_path ~ cdn ~ "/images/Visuel-entreamis-odasie.png"}} );
  31.         background-size: cover;
  32.     }
  34.     .destination-voyages-en-groupe {
  35.         background-image: url({{ api_base_path ~ cdn ~ "/images/Visuel-group2-odasie.png"}} );
  36.         background-size: cover;
  37.     }
  39.     .destination-voyages-de-noces {
  40.         background-image: url({{ api_base_path ~ cdn ~ "/images/Visuel-noces-odasie.png"}} );
  41.         background-size: cover;
  42.     }
  44.     .destination-all {
  45.         background-image: url({{ api_base_path ~ cdn ~ "/images/destinations.jpg"}} );
  46.         background-size: cover;
  47.     }
  49.     body, html {
  50.         overflow-x: hidden;
  51.     }
  53.     {% set cdn = '/cdn-cgi/image/width=1600' %}
  54.     #search-container-wrapper {
  55.         /* background-image: url('../../assets/images/thematiques/header-background.png'); */
  56.         background-image: url("{{ api_base_path ~ cdn ~ '/images/thematiques/header-background.png' }}");
  57.         background-color: #0c629b;
  58.         background-blend-mode: multiply;
  59.         flex-direction: column;
  60.         align-items: center;
  61.         justify-content: unset;
  62.         position: relative;
  63.         overflow: hidden;
  64.         height: 1100px;
  65.         max-height: unset !important;
  66.     }
  68.     /* #search-container-wrapper::before {
  69.         content: '';
  70.         width: 100%;
  71.         height: 100%;
  72.         position: absolute;
  73.     }
  75.     .blueLayer {
  76.         position: absolute;
  77.         width: 100%;
  78.         height: 100%;
  79.         background-color: rgba(0, 58, 98, 0.7);
  80.     } */
  82.     .tourtype-title-container {
  83.         display: flex;
  84.         flex-direction: column;
  85.         align-items: center;
  86.         z-index: 5;
  87.         padding-top: 20px;
  88.     }
  90.     .voyage {
  91.         font-family: 'Roboto', sans-serif;
  92.         color: #FFC20E;
  93.         font-size: 110px;
  94.         font-weight: 700;
  95.         text-transform: uppercase;
  96.     }
  98.     .tour-type-libelle {
  99.         font-family: 'Sacramento', cursive;
  100.         font-size: 170px;
  101.         color: white;
  102.         color: white;
  103.         line-height: 0;
  104.         margin-bottom: 120px;
  105.         color: white;
  106.     }
  108.     .visuelHeader {
  109.         margin-bottom: 50px;
  110.         position: relative;
  111.         /* width: 722px; */
  112.         max-width: 722px;
  113.         max-height: 500px;
  114.         height: 500px;
  115.         display: flex;
  116.         justify-content: center;
  117.         padding: 0 20px;
  118.     }
  120.     .header-contact-button {
  121.         background-color: #FFC20E;
  122.         font-family: 'Roboto', sans-serif;
  123.         font-size: 16px;
  124.         font-weight: 300;
  125.         padding: 5px 25px;
  126.         border-radius: 25px;
  127.         z-index: 5;
  128.         text-align: center
  129.     }
  131.     .toursContainer {
  132.         position: relative;
  133.     }
  135.     .format {
  136.         height: 350px;
  137.         position: absolute;
  138.         top: -250px;
  139.         left: 50%;
  140.         transform: translateX(-50%);
  141.         background-color: white;
  142.         z-index: 10;
  143.         width: 100%;
  144.         clip-path: ellipse(60% 80% at 50% 100%);
  145.     }
  147.     /*.toursContainer::before {
  148.         content: '';
  149.         position: absolute;
  150.         top: -160px;
  151.         left: 50%;
  152.         width: 100%;
  153.         height: 320px;
  154.         background-color: white;
  155.         border-radius: 50%;
  156.         transform: translateX(-50%);
  157.     }
  159.     .tourSectionTitleWrapper {
  160.         position: absolute;
  161.         left: 50%;
  162.         top: -100px;
  163.         transform: translateX(-50%);
  164.         margin: 0 !important;
  165.     }*/
  167.     .tourSectionTitleWrapper {
  168.         position: absolute;
  169.         left: 50%;
  170.         transform: translateX(-50%);
  171.         top: -100px;
  172.         z-index: 15;
  173.         padding: 0;
  174.         margin: 0 !important;
  175.     }
  177.     .tourSectionTitle {
  178.         font-family: 'Roboto', sans-serif;
  179.         font-size: 40px;
  180.         font-weight: 400;
  181.         position: relative;
  182.         z-index: 10;
  183.     }
  185.     #nos-tours {
  186.         position: relative;
  187.         z-index: 10;
  188.         padding-top: 20px;
  189.     }
  191.     .tour-card-introduction {
  192.         overflow-y: hidden !important;
  193.     }
  195.     .odasiePlus-section {
  196.         position: relative;
  197.         z-index: 10;
  198.     }
  199.     
  200.     /* media queries under 1365px */
  201. /*     @media screen and (max-width: 1365px) {
  202.         .tour-card-background {
  203.         height: auto !important;
  204.         margin: -25% auto !important;
  205.         }
  206.         .tour-card-image {
  207.         overflow-y: hidden !important;
  208.         }
  209.     } */
  211.     .loadingSpeed {
  212.         filter: blur(10px); /* Appliquer un flou initial */
  213.         transition: filter 0.5s ease; /* Ajouter une transition pour l'effet de fondu */
  214.     }
  216.     .loadingSpeed.loaded {
  217.         filter: none; /* Supprimer le filtre une fois l'image chargée */
  218.         transition: filter 0.5s ease;
  219.     }
  221.     .paysVignette{
  222.         position: absolute;
  223.         right: 0;
  224.         border-radius: 0 10px 0 0;
  225.         padding: 5px 10px;
  226.         background: rgb(253, 29, 29);
  227.         background: linear-gradient(90deg, rgb(219, 25, 25) 0%, rgb(255, 98, 36) 100%);
  228.         color: #fff;
  229.         z-index: 999;
  230.     }
  232.     .lieuFlex ul{
  233.         display: flex;
  234.         justify-content: center;
  235.     }
  237.     .highlights{
  238.         background-color: #D9D9D9;
  239.     }
  241.     #tourCard {
  242.         height: 550px !important;
  243.     }
  245.     .tour-suggestions {
  246.     width: 95%;
  247.     overflow: hidden;
  248.     margin-top: 30px;
  249.     margin-bottom: 20px;
  250.     padding-bottom: 60px;
  251.     z-index: 5;
  252.     }
  254.     .tour-suggestions h2 {
  255.     text-align: center;
  256.     color: #FFFFFF;
  257.     margin-bottom: 10px;
  258.     margin-top: 30px;
  259.     }
  261.     .subtitle-roboto {
  262.     font-size: 40px;
  263.     }
  265.     .subtitle-sacramento {
  266.     font-family: "Sacramento", cursive;
  267.     font-size: 64px;
  268.     }
  270.     .tour-cards-container {
  271.     height: 500px;
  272.     overflow-x: auto;
  273.     display: flex;
  274.     justify-content: start;
  275.     margin-left: 4%;
  276.     }
  278.     .tour {
  279.     margin-right: 8px;
  280.     }
  282.     .tour-card {
  283.     width: 320px !important;
  284.     height: 460px !important;
  285.     min-height: 0 !important;
  286.     border-radius: 11px;
  287.     font-family: "Roboto", sans-serif;
  288.     display: flex;
  289.     flex-direction: column;
  290.     position: relative;
  291.     }
  293.     .tour-card::after {
  294.     content: "";
  295.     border-radius: 11px;
  296.     position: absolute;
  297.     top: 0;
  298.     left: 0;
  299.     right: 0;
  300.     left: 0;
  301.     background-color: inherit !important;
  302.     }
  304.     .tour-card:hover::after {
  305.     bottom: -40px;
  306.     z-index: -5;
  307.     }
  309.     .tour-card:hover .tour-card-hover {
  310.     opacity: 1;
  311.     }
  313.     .tour-card-image {
  314.     width: 100%;
  315.     height: 50%;
  316.     position: relative;
  317.     }
  319.     .tour-card-background {
  320.     position: absolute;
  321.     top: 0;
  322.     left: 0;
  323.     width: 100%;
  324.     height: 100%;
  325.     border-radius: 11px 11px 0 0;
  326.     transition: 0.3s ease-in-out;
  327.     }
  329.     .tour-card:hover .tour-card-background {
  330.     filter: brightness(130%);
  331.     }
  333.     .tour-card .content {
  334.     height: 50%;
  335.     min-height:50%;
  336.     }
  338.     .price {
  339.     position: absolute;
  340.     left: 0;
  341.     bottom: 0;
  342.     background: none !important;
  343.     background-color: #FFC20E !important;
  344.     color: black !important;
  345.     padding-left: 10px;
  346.     padding-right: 10px;
  347.     height: 26px;
  348.     border-radius: 0 11px 0 0;
  349.     text-align: center;
  350.     vertical-align: middle;
  351.     display: flex;
  352.     align-items: center;
  353.     }
  355.     .price small {
  356.     font-size: 12px;
  357.     margin-right: 10px;
  358.     }
  360.     .price strong {
  361.     font-size: 14px;
  362.     font-weight: 700;
  363.     }
  365.     .tour-card-title {
  366.     font-size: 14px !important;
  367.     font-weight: 700;
  368.     text-transform: uppercase;
  369.     line-height: normal
  370.     }
  372.     .tour-card-introduction {
  373.     font-size: 15px;
  374.     line-height: normal;
  375.     font-family: 'roboto light' !important;
  376.     font-weight: 500;
  377.     line-height:normal !important;
  378.     height: 100px !important;
  379.     max-height: 100px !important;
  380.     }
  382.     .highlights {
  383.     background-color: #D9D9D9;
  384.     font-weight: 700;
  385.     font-size: 13;
  386.     text-align: center;
  387.     display: flex;
  388.     height: 30px;
  389.     width: 100%;
  390.     justify-content: space-evenly;
  391.     overflow: hidden;
  392.     height: 50px;
  393.     }
  395.     .highlights li {
  396.     font-size: 13px;
  397.     }
  399.     .tour-suggestions-button {
  400.     margin: auto;
  401.     }
  403.     .tour-card-bottom {
  404.     font-size: 14px;
  405.     font-weight: 700;
  406.     }
  408.     .tour-card-hover {
  409.     display: flex;
  410.     width: 100%;
  411.     height: 30px;
  412.     justify-content: center;
  413.     position: absolute;
  414.     bottom: -30px;
  415.     opacity: 0;
  416.     background: none !important;
  417.     background-color: transparent;
  418.     float: none;
  419.     }
  421.     .tour-card-hover a {
  422.     width: 90% !important;
  423.     border-radius: 5px;
  424.     background-color: #34DFA1;
  425.     font-size: 12px;
  426.     float: none;
  427.     }
  429.     .discover-section {
  430.     margin-top: 40px;
  431.     margin-bottom: 30px;
  432.     width: 90%;
  433.     display: flex;
  434.     justify-content: space-between;
  435.     z-index: 5;
  436.     }
  438.     .discover-section-subtitle {
  439.     width: 50%;
  440.     display: flex;
  441.     flex-direction: column;
  442.     align-items: end;
  443.     }
  445.     .discover-section-subtitle {
  446.     text-align: end;
  447.     }
  449.     .discover-section-text-wrapper {
  450.     width: 40%
  451.     }
  453.     .discover-subtitle-roboto {
  454.     font-size: 60px;
  455.     color:#FFFFFF;
  456.     font-weight: 300;
  457.     text-transform: uppercase;
  458.     }
  460.     .discover-subtitle-sacramento {
  461.     font-family: "Sacramento", cursive;
  462.     font-size: 109px;
  463.     color:#fd5224;
  464.     margin-bottom: 10px;
  465.     }
  467.     .discover-section-text {
  468.     color:#FFFFFF;
  469.     font-size: 24px;
  470.     text-align: justify;
  471.     }
  473.     .tour-config-section {
  474.     position: relative;
  475.     width: 100%;
  476.     min-height: 680px;
  477.     margin: 0;
  478.     padding: 0;
  479.     padding-top: 30px;
  480.     display: flex;
  481.     flex-direction: column;
  482.     align-items: center;
  483.     overflow: hidden;
  484.     }
  486.     .tour-config-background {
  487.     height: 100%;
  488.     position: absolute;
  489.     top:0 ;
  490.     left: 0;
  491.     z-index: -5;
  492.     }
  494.     .tour-config-section-title {
  495.     color:#FFFFFF;
  496.     width: 100%;
  497.     font-size: 36px;
  498.     text-align: center;
  499.     margin-bottom: 30px;
  500.     }
  502.     .config-tour-form-wrapper {
  503.     width: 80%;
  504.     height: 500px;
  505.     display: flex;
  506.     justify-content: space-evenly;
  507.     }
  509.     .celebration-bottom-form {
  510.     width: 100%;
  511.     }
  513.     #form-container {
  514.     display: flex;
  515.     flex-direction: column;
  516.     align-items: center;
  517.     width: 100%;
  518.     height: 300px;
  519.     justify-content: space-between;
  520.     }
  522.     #widget-container {
  523.     color:#FFFFFF;
  524.     width: 100%;  
  525.     }
  527.     .widget-number-wrapper {
  528.     display: flex;
  529.     justify-content: space-evenly;
  530.     width: 300px;
  531.     }
  533.     .widget-number-wrapper span:first-child  {
  534.     font-family: 'Roboto', sans-serif;
  535.     font-size: 24px;
  536.     font-weight: 700;
  537.     }
  539.     .widget-wrapper {
  540.     display:flex;
  541.     flex-direction: column;
  542.     border: 0.5px solid white;
  543.     border-radius: 5px;
  544.     min-width: 250px;
  545.     max-width: 300px;
  546.     }
  548.     .label-wrapper {
  549.     margin-left: 10px;
  550.     position: relative;
  551.     display: flex;
  552.     height: 30px;
  553.     }
  555.     .label-wrapper:hover {
  556.     cursor: pointer;
  557.     }
  559.     .label-wrapper label {
  560.     position: absolute;
  561.     left: 30px;
  562.     top: 5px;
  563.     }
  565.     .fa-arrow-left {
  566.     padding: 0.2em;
  567.     border: 2px solid #FFFFFF;
  568.     border-radius: 50%;
  569.     margin-right: 5px;
  570.     width: 10px;
  571.     height: 10px;
  572.     margin-top: 7px;
  573.     position: absolute;
  574.     }
  576.     .arrow-down {
  577.     transform: rotate(-90deg);
  578.     }
  580.     .label-separator {
  581.     width: 90%;
  582.     height: 0.3px;
  583.     background-color: #ffffff;
  584.     margin-top: 10px;
  585.     margin-bottom: 10px;
  586.     }
  588.     .choice-wrapper {
  589.     display: flex;
  590.     width: 90%;
  591.     margin-left: 10px;
  592.     align-items: center;
  593.     }
  595.     .checkbox-input {
  596.     display: block;
  597.     width: 15px;
  598.     height: 15px;
  599.     min-width: 15px;
  600.     min-height: 15px;
  601.     border: 1px solid #ffffff;
  602.     position: relative;
  603.     display: flex;
  604.     align-items: center;
  605.     justify-content: center;
  606.     margin-right: 10px;
  607.     }
  609.     .hide-form,
  610.     .hide-datepicker {
  611.     display: none;
  612.     }
  614.     .checkbox-input-check {
  615.     width: 70%;
  616.     height: 70%;
  617.     border-radius: 2px;
  618.     background-color: #ffffff;
  619.     display: none;
  620.     }
  622.     .show-checked {
  623.     display: block;
  624.     }
  626.     .details-mobile, .price-mobile {
  627.     display: none;
  628.     }
  630.     .tour-config-buttons-wrapper {
  631.     display: flex;
  632.     flex-direction: column;
  633.     align-items: center;
  634.     height: 120px;
  635.     justify-content: space-evenly;
  636.     }
  638.     .btn-see-trip, .btn-search-trip {
  639.     border-radius: 35px;
  640.     width: 170px;
  641.     height: 30px;
  642.     display:  flex;
  643.     align-items: center;
  644.     justify-content: center;
  645.     flex-wrap: nowrap;
  646.     border: 0;
  647.     }
  649.     .btn-see-trip {
  650.     background-color: #ffffff;
  651.     color: black;
  652.     font-weight: 300;
  653.     font-size: 16px;
  654.     transition: 0.5s ease;
  655.     }
  657.     .btn-see-trip:hover {
  658.     background-color:#fd5224;;
  659.     color: #ffffff;
  660.     }
  662.     .btn-search-trip {
  663.     background: transparent;
  664.     color: #ffffff;
  665.     font-size: 14px;
  666.     border: 1px solid #ffffff;
  667.     }
  669.     .btn-search-trip span {
  670.     margin-right: 5px;
  671.     }
  673.     .tour-destinations {
  674.     display: none;
  675.     }
  677.      .odasiePlus-container {
  678.         padding-right: 0;
  679.         padding-left: 0;
  680.     }
  682.     #actus-et-avis {
  683.         color: white;
  684.         /* background-color: #232323; */
  685.         background-image: url('/assets/images/pays-footer-background.png');
  686.         background-size: cover;
  687.         background-color: #002042e5;
  688.         background-blend-mode: soft-light;
  689.         position: relative;
  690.     }
  692.     .temoignage {
  693.         width: 400px;
  694.         height: 110px;
  695.         font-family: 'Roboto', sans-serif;
  696.         font-size: 12px;
  697.         font-weight 300;
  698.         padding-bottom: 10px;
  699.         margin-top: 10px;
  700.         border-bottom: 1px solid #ffffff
  701.     }
  703.     .temoignageImage {
  704.         justify-content: space-between;
  705.         align-items: center;}
  707.     .temoignageImage img {
  708.         width: 75px !important;
  709.         height: 75px !important;
  710.         border-radius: 50% !important;
  711.     }
  713.     .temoignage-auteur {
  714.         padding-left: 0 !important;
  715.     }
  717.     .temoignageContent {
  718.         display: flex;
  719.         flex-direction: column;
  720.         justify-content: space-between;
  721.     }
  723.     .temoignageContent p {
  724.         margin: 0;
  725.     }
  727.     .temoignage-separator {
  728.         display: none;
  729.     }
  731.     .temoignages-button:hover,
  732.     .actus-button:hover {
  733.         background-color: red;
  734.         color: white !important;
  735.         justify-content: start;
  736.         transition: 0.3S ease;
  737.     }
  741.     @media screen and (max-width: 1365px) {
  743.     .separator, .separator-bottom {
  744.         display: none;
  745.     }
  747.     .tour-suggestions h2 {
  748.         display: flex;
  749.         flex-direction: column;
  750.         width: 100%;
  751.         align-items: start;
  752.         justify-content: space-between;
  753.         margin-top: 0;
  754.     }
  756.     .subtitle-roboto {
  757.         font-size: 20px
  758.     }
  760.     /* .tour-card-title {
  761.         height: unset;
  762.         min-height: none !important;
  763.     }
  765.     .subtitle-sacramento {
  766.         font-size: 40px;
  767.     }
  769.     .subtitle-optional {
  770.         display: none;
  771.     }
  773.     .tour-suggestions {
  774.         height: 310px;
  775.         width: 95%;
  776.     }
  778.     .tour-suggestions h2 {
  779.         margin-left: 10px;
  780.     }
  782.     .tour-card-container {
  783.         overflow-x: scroll;
  784.         overflow-y: hidden;
  785.         width: 100%;
  786.         height: 250px;
  787.         display: flex;
  788.     }
  790.     .tour-card-wrapper {
  791.         width: 290px;
  792.         height: 226px;
  793.         margin-right: 15px;
  794.     }
  796.     .swiper-wrapper {
  797.         height: 250px;
  798.     }
  800.     #right-sibling {
  801.         height: unset !important;
  802.     }
  804.     .tour-card {
  805.         width: 290px !important;
  806.         height: 226px !important;
  807.         border-radius: 11px;
  808.     }
  810.     .tour-card:hover .tour-card-hover,
  811.     .tour-card:hover::after {
  812.         display: none;  
  813.     }
  815.     .tour-card-title {
  816.         font-weight: 400
  817.     }
  819.     .tour-card-background {
  820.         border-radius: 11px 11px 0 0
  821.     }
  823.     .tour-card-image {
  824.         width: 100%;
  825.         height: 138px;
  826.         border-radius: 11px 11px 0 0;
  827.     }
  829.     .highlights,
  830.     .voyage-duree-desktop,
  831.     .tour-card-introduction,
  832.     .price,
  833.     .tour-card-button {
  834.         display: none;
  835.     }
  837.     .tour-card-title {
  838.         width: 100%;
  839.         text-align: start;
  840.         font-size: 14px
  841.     }
  843.     .details-mobile {
  844.         display: flex;
  845.         width: 100%;
  846.         font-size: 10px;
  847.         font-family: 'Roboto', sans-serif;
  848.         color: 969696
  849.     }
  851.     .price-mobile {
  852.         display: flex;
  853.         font-size: 12px;
  854.         text-transform: lowercase;
  855.     }
  857.     .price-mobile-price {
  858.         color: #FF4601;
  859.     }
  861.     .price-mobile-person {
  862.         color: #969696;
  863.     } */
  865.     .tour-config-section-title {
  866.         width: 80%;
  867.         font-size:22px;
  868.     }
  870.     #form-container {
  871.         height: 400px;
  872.     }
  874.     #widget-container {
  875.         align-items: center;
  876.         display: flex;
  877.         flex-direction: column;
  878.     }
  880.     .widget-wrapper {
  881.         margin-bottom: 20px;
  882.         min-width: auto;
  883.         padding-right: 20px;
  884.         padding-left: 10px;
  885.         padding-top: 2px;
  886.         padding-bottom: 2px;
  887.         align-items: center;
  888.         justify-content: center;
  889.     }
  891.     .widget-number-wrapper {
  892.         margin-bottom: 0 !important;
  893.     }
  895.     .widget-number-wrapper>span {
  896.         display: none;
  897.     }
  899.     .label-wrapper {
  900.         align-items: center;
  901.     }
  903.     .label-wrapper label {
  904.         position: static;
  905.     }
  907.     .fa-arrow-left {
  908.         margin-top: 0;
  909.         position: relative;
  910.     }
  912.     .widget-label {
  913.         position: static !important;
  914.         margin-bottom: 0;
  915.     }
  917.     }
  919.     @media screen and (min-width:1366px)
  920.     and (max-width: 1700px) {
  922.     .tour-card-container {
  923.         overflow-x: scroll;
  924.         overflow-y: hidden;
  925.         width: 100%;
  926.         display: flex;
  927.     }
  929.     }
  931.     @media screen and (max-width: 600px) {
  932.         .voyage {
  933.             font-size: 80px
  934.         }
  935.         .tour-type-libelle {
  936.             font-size: 100px;
  937.             margin-bottom: unset;
  938.         }
  939.         #search-container-wrapper {
  940.             /* min-height: 900px; */
  941.             padding-bottom: 200px;
  942.             height: unset
  943.         }
  944.         .tourSectionTitle {
  945.             font-size: 30px;
  946.         }
  947.         .visuelHeader {
  948.             margin-top: 50px;
  949.             /* min-height: 535px; */
  950.             height: unset;
  951.         }
  952.         .format {
  953.             top: -220px;
  954.         }
  955.     }
  957.     @media screen and (max-width: 450px) {
  959.     .subtitle-sacramento {
  960.         font-size: 5px;
  961.     }
  963.     .discover-subtitle-roboto {
  964.         font-size: 28px
  965.     }
  967.     .discover-subtitle-sacramento {
  968.         font-size: 50px
  969.     }
  971.     .separator {
  972.         display: none;
  973.     }
  975.     .label-separator {
  976.         margin-left: 10px;
  977.     }
  979.     .choice-wrapper {
  980.         width: auto;
  981.     }
  983.     .flatpickr-mobile {
  984.         margin-left: 10px;
  985.     }
  987.     .tourSectionTitle {
  988.         font-size: 24px
  989.     }
  991.     .format {
  992.         display: none
  993.     }
  995.     .tourSectionTitleWrapper {
  996.         position: static;
  997.         transform: unset
  998.     }
  1000.     #search-container-wrapper {
  1001.         padding-bottom: 50px;
  1002.     }
  1004.     .tour-type-libelle {
  1005.         font-size: 80px;
  1006.     }
  1008.     }
  1010.     @media screen and (min-width: 1921px) {
  1012.     .tour-cards-container {
  1013.         justify-content: center;
  1014.     }
  1015. }
  1017.     </style>
  1018. {% endblock %}  
  1020. {% block keywords %} {{ seo.meta_keywords is defined ? meta_keywords : parent() }} {% endblock %}
  1021. {% block description %} {{ seo.meta_description is defined ? seo.meta_description|striptags|e : parent() }} {% endblock %}
  1022. {% set firstPartTitle =  'Voyages à thèmes'|trans %}
  1023. {% block title %} {{ seo.meta_title is defined ? firstPartTitle ~ ' - ' ~ seo.meta_title ~ " - " ~  parent() : parent() }} {% endblock %}
  1025. {% block layout %}option-com_woa_tour view-category layout-default{% endblock %}
  1026. {% block bodyClass %}class="p-topbar"{% endblock %}
  1027. {% block body %}
  1029.     <section class="container-fluid p-0 justify-content-center">
  1030.         <div id="search-container-wrapper" {# class="destination-{{ slug }}" #}>
  1031.             <div class="blueLayer"></div>
  1032.             <div class="tourtype-title-container">
  1033.                 <span class='voyage'>voyage</span>
  1034.                 <span class="tour-type-libelle">{{ typeLibelle }}</span>
  1035.             </div>
  1036.             <div class="visuelHeader">
  1037.                 {% set cdn = "/cdn-cgi/image/width=700" %}
  1038.                 {# <img class="img-fluid" src="../../assets/images/thematiques/{{ slug }}.svg" alt=""> #}
  1039.                 <img class='img-fluid' src="{{ api_base_path ~ cdn ~ '/images/thematiques/' ~ slug ~ '.svg' }}" alt="">
  1040.             </div>
  1041.             <div class="row d-flex justify-content-center container-fluid">
  1042.                 <a href="{{ path('contact_sur_mesure_1')}}" class="header-contact-button">
  1043.                     Nous contacter pour un voyage sur-mesure
  1044.                 </a>
  1045.             </div>
  1046.             <div id="search-container" class='d-none'>
  1047.                 <div class="container mb-3 d-none d-md-block">
  1048.                     {#% include 'destination/_index_search.html.twig' %#}
  1049.                     {# barre de recherche #}
  1051.                     <form class="search-container-inner d-none" action="" method="GET"> 
  1052.                     
  1053.                         <div class="d-md-flex justify-content-md-center align-items-md-center no-gutters">
  1054.                             <div class="form-group mr-md-2 mr-lg-1">
  1055.                                 <label  for="arrival">{% trans %}Arrivée{% endtrans %}</label>
  1056.                                 <input value="{% if arrival is defined and arrival is not null %}{{ arrival }}{% else %}{{ "now"|date("d/m/Y") }}{% endif %}"  class="form-control datepicker-start" id="arrival" name="arrival" type="text" placeholder="{% if app.request.getLocale() == "fr" %}jj-mm-aaaa{% else %}dd-mm-yyyy{% endif %}" required >
  1057.                             </div>
  1058.                             <div class="form-group mr-md-2 mr-lg-1">
  1059.                                 <label for="duration_range">{% trans %}Durée du séjour{% endtrans %}</label>
  1060.                                 <select class="form-control" id="duration_range" name="duration_range">
  1061.                                     <option {% if duration_range is defined and duration_range not in [1,2,3] %}selected{% endif %}  value="">{% trans %}Toutes{% endtrans %}</option>
  1062.                                     <option {% if duration_range is defined and duration_range == 1 %}selected{% endif %} value="1">{% trans %}Moins de 14 jours{% endtrans %}</option>.
  1063.                                     <option {% if duration_range is defined and duration_range == 2 %}selected{% endif %} value="2">{% trans %}14 à 20 jours{% endtrans %}</option>
  1064.                                     <option {% if duration_range is defined and duration_range == 3 %}selected{% endif %} value="3">{% trans %}21 jours ou plus{% endtrans %}</option>
  1065.                                 </select>
  1066.                             </div>
  1067.                             <div class="form-group mr-md-2 mr-lg-1">
  1068.                                 <label for="category">{% trans %}Thème{% endtrans %}</label>
  1069.                                 <select class="form-control w-lg-75" id="category" name="category">
  1070.                                     <option selected hidden value="#">{% trans %}Choisir un thème{% endtrans %}</option>
  1071.                                     {# {{ render(url('render_theme_collection', { 
  1072.                                         'template': 'theme_input',
  1073.                                         'sort': 't.ordre',
  1074.                                         'direction': 'ASC',
  1075.                                         'value': category|default(null)
  1076.                                         } 
  1077.                                     )) }}  #}
  1078.                                     {% if navigation.themes.children is defined %}
  1079.                                         {% for voyage_theme in navigation.themes.children %}  
  1080.                                             {% if voyage_theme.path|replace({'/' : ""}) != "contact-sur-mesure" %}
  1081.                                                 <option value="{{ voyage_theme.path|replace({'/' : ""}) }}">
  1082.                                                     {{ voyage_theme.label }}
  1083.                                                 </option>
  1084.                                             {% endif %}
  1085.                                         {% endfor %}
  1086.                                     {% endif %}
  1087.                                 </select>  
  1088.                             </div>
  1089.                             <div class="align-self-end mb-3">
  1090.                                 <button type="submit" 
  1091.                                     class="btn btn-block bgRedGradient text-white"
  1092.                                     style="background: none; background-color: #FFC20E; color: black !important">{% trans %}Départ{% endtrans %}
  1093.                                 </button>
  1094.                             </div>
  1095.                         </div>
  1096.                     </form>
  1097.                 </div>
  1098.             </div>
  1099.         </div>
  1100.     </section>
  1102.     <!-- Mobile -->
  1103.     <section class="d-block d-md-none">
  1104.         {#% include 'destination/_index_search.html.twig' %#}
  1105.     </section>
  1106.     <!-- FIN Mobile -->
  1107.     <div class="toursContainer">
  1108.         <div class="format"></div>
  1109.         <section class="mainSection tourSectionTitleWrapper">
  1110.             <div class="row">
  1111.                 <div class="col ml-10 mt-4 text-center tourSectionTitle">
  1112.                     Nos voyages {{ typeLibelle }}
  1113.                     {# {{ render(url('render_theme', { 
  1114.                         'template': 'theme_informations',
  1115.                         'titleTagName': 'h1',
  1116.                         'slug': slug
  1117.                         } 
  1118.                     )) }} #} 
  1119.                 </div>
  1120.             </div>
  1121.         </section>
  1122.         <section id='nos-tours' class="mainSection">
  1123.             <div class="container-fluid text-center pb-4">
  1124.                 {{ render(url('render_voyage_collection', { 
  1125.                             'template': 'pays_voyages_v3',
  1126.                             'perPage': 6,
  1127.                             'theme': slug,
  1128.                             'page': page,
  1129.                             'duree' : duration_range
  1130.                             } 
  1131.                             )) }} 
  1132.             </div>
  1133.         </section>
  1134.     </div>
  1135.     <section id="visiteAutrePays" class="mainSection my-3 py-md-5 d-none">
  1136.         <div class="row justify-content-center mx-0">
  1137.             <div class="col-md-6 col-12 px-0 ">
  1138.                 <p class="text-uppercase font-weight-bold">{% trans %}Vous voulez visiter un autre pays avec Ôdasie ?{% endtrans %}</p>
  1139.             </div>
  1140.         </div>
  1141.         <div class="row justify-content-center mx-0">
  1142.             <div class="col-md-6 col-12 px-0">
  1143.                 <div class="row mx-0">
  1144.                     <div class="col-10 col-md-10 pl-0 pr-1">
  1145.                         <select class="w-100 h-100 dropdown-dark" name="goToCountry" id="goToCountry">
  1146.                             <option selected disabled hidden value="#">{% trans %}Choisir une destination{% endtrans %}</option>
  1147.                             {% for country in countries %}
  1148.                                 {% if country.libelle != "Birmanie - Myanmar" %}
  1149.                                     <option value="{{country.slug}}">{{country.libelle}}</option>
  1150.                                 {% endif %}
  1151.                             {% endfor %}
  1152.                         </select>
  1153.                     </div>
  1154.                     <div class="col col-md px-0">
  1155.                         <button id="btnGoToCountry" type="button" class="btn btn-block btn-dark">GO!</button>
  1156.                     </div>
  1157.                 </div>
  1158.             </div>
  1159.         </div>
  1160.     </section>
  1161.     <section>
  1162.         <div class="container-fluid odasiePlus-container">
  1163.             <div class="row footerVoyageList d-none">
  1164.                 <div class="col order-2 order-md-1">
  1165.                     <div class="row mx-0 justify-content-center">
  1166.                         <div id="odasiePlusContainer" class="col-6 px-0 text-white">
  1167.                             <div class="odasiePlusTitle"><p class="text-uppercase mb-0 mx-auto mx-md">{% trans %}NOUVEAU{% endtrans %}</p></div>
  1168.                             <div class="odasiePlusSubtitle h2 mb-0 text-uppercase ">{% trans %}L'application Ôdasie+{% endtrans %}</div>
  1169.                             <hr>
  1170.                             <div class="h6 odasiePlusSubSubtitle">{% trans %}Votre compagnon de voyage sur-mesure{% endtrans %}</div>
  1171.                             <!-- location icons and dotted line -->
  1172.                             <div id="cursors" class="row mt-4 mx-md-4" >
  1173.                                 <div class="col px-0">
  1174.                                     <svg  height="48" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  1175.                                         <path d="M8.50008 10.5C9.073 10.5 9.56362 10.2959 9.97196 9.88754C10.3803 9.47921 10.5841 8.98893 10.5834 8.41671C10.5834 7.84379 10.3792 7.35317 9.97091 6.94483C9.56258 6.5365 9.0723 6.33268 8.50008 6.33337C7.92716 6.33337 7.43654 6.53754 7.02821 6.94587C6.61987 7.35421 6.41605 7.84449 6.41675 8.41671C6.41675 8.98962 6.62091 9.48025 7.02925 9.88858C7.43758 10.2969 7.92786 10.5007 8.50008 10.5ZM8.50008 18.1563C10.6181 16.2118 12.1893 14.4452 13.2136 12.8563C14.2379 11.2674 14.7501 9.85699 14.7501 8.62504C14.7501 6.73268 14.1466 5.18337 12.9397 3.97712C11.7327 2.77087 10.2529 2.1674 8.50008 2.16671C6.74661 2.16671 5.2664 2.77018 4.05946 3.97712C2.85251 5.18407 2.24939 6.73337 2.25008 8.62504C2.25008 9.85768 2.76223 11.2684 3.78654 12.8573C4.81084 14.4462 6.38203 16.2125 8.50008 18.1563ZM8.50008 20.9167C5.70494 18.5382 3.61744 16.3292 2.23758 14.2896C0.85772 12.25 0.167442 10.3618 0.166748 8.62504C0.166748 6.02087 1.0046 3.94622 2.68029 2.40108C4.35598 0.855943 6.29591 0.083374 8.50008 0.083374C10.7049 0.083374 12.6452 0.855943 14.3209 2.40108C15.9966 3.94622 16.8341 6.02087 16.8334 8.62504C16.8334 10.3612 16.1431 12.2493 14.7626 14.2896C13.382 16.3299 11.2945 18.5389 8.50008 20.9167Z" fill="white"/>
  1176.                                     </svg>
  1177.                                     <p>{% trans %}Jour{% endtrans %} 1</p>
  1178.                                 </div>
  1179.                                 <div class="col px-0">
  1180.                                     <svg  height="48" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  1181.                                         <path d="M8.50008 10.5C9.073 10.5 9.56362 10.2959 9.97196 9.88754C10.3803 9.47921 10.5841 8.98893 10.5834 8.41671C10.5834 7.84379 10.3792 7.35317 9.97091 6.94483C9.56258 6.5365 9.0723 6.33268 8.50008 6.33337C7.92716 6.33337 7.43654 6.53754 7.02821 6.94587C6.61987 7.35421 6.41605 7.84449 6.41675 8.41671C6.41675 8.98962 6.62091 9.48025 7.02925 9.88858C7.43758 10.2969 7.92786 10.5007 8.50008 10.5ZM8.50008 18.1563C10.6181 16.2118 12.1893 14.4452 13.2136 12.8563C14.2379 11.2674 14.7501 9.85699 14.7501 8.62504C14.7501 6.73268 14.1466 5.18337 12.9397 3.97712C11.7327 2.77087 10.2529 2.1674 8.50008 2.16671C6.74661 2.16671 5.2664 2.77018 4.05946 3.97712C2.85251 5.18407 2.24939 6.73337 2.25008 8.62504C2.25008 9.85768 2.76223 11.2684 3.78654 12.8573C4.81084 14.4462 6.38203 16.2125 8.50008 18.1563ZM8.50008 20.9167C5.70494 18.5382 3.61744 16.3292 2.23758 14.2896C0.85772 12.25 0.167442 10.3618 0.166748 8.62504C0.166748 6.02087 1.0046 3.94622 2.68029 2.40108C4.35598 0.855943 6.29591 0.083374 8.50008 0.083374C10.7049 0.083374 12.6452 0.855943 14.3209 2.40108C15.9966 3.94622 16.8341 6.02087 16.8334 8.62504C16.8334 10.3612 16.1431 12.2493 14.7626 14.2896C13.382 16.3299 11.2945 18.5389 8.50008 20.9167Z" fill="white"/>
  1182.                                     </svg>
  1183.                                     <p>{% trans %}Jour{% endtrans %} 2</p>
  1184.                                 </div>
  1185.                                 <div class="col px-0">
  1186.                                     <svg  height="48" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  1187.                                         <path d="M8.50008 10.5C9.073 10.5 9.56362 10.2959 9.97196 9.88754C10.3803 9.47921 10.5841 8.98893 10.5834 8.41671C10.5834 7.84379 10.3792 7.35317 9.97091 6.94483C9.56258 6.5365 9.0723 6.33268 8.50008 6.33337C7.92716 6.33337 7.43654 6.53754 7.02821 6.94587C6.61987 7.35421 6.41605 7.84449 6.41675 8.41671C6.41675 8.98962 6.62091 9.48025 7.02925 9.88858C7.43758 10.2969 7.92786 10.5007 8.50008 10.5ZM8.50008 18.1563C10.6181 16.2118 12.1893 14.4452 13.2136 12.8563C14.2379 11.2674 14.7501 9.85699 14.7501 8.62504C14.7501 6.73268 14.1466 5.18337 12.9397 3.97712C11.7327 2.77087 10.2529 2.1674 8.50008 2.16671C6.74661 2.16671 5.2664 2.77018 4.05946 3.97712C2.85251 5.18407 2.24939 6.73337 2.25008 8.62504C2.25008 9.85768 2.76223 11.2684 3.78654 12.8573C4.81084 14.4462 6.38203 16.2125 8.50008 18.1563ZM8.50008 20.9167C5.70494 18.5382 3.61744 16.3292 2.23758 14.2896C0.85772 12.25 0.167442 10.3618 0.166748 8.62504C0.166748 6.02087 1.0046 3.94622 2.68029 2.40108C4.35598 0.855943 6.29591 0.083374 8.50008 0.083374C10.7049 0.083374 12.6452 0.855943 14.3209 2.40108C15.9966 3.94622 16.8341 6.02087 16.8334 8.62504C16.8334 10.3612 16.1431 12.2493 14.7626 14.2896C13.382 16.3299 11.2945 18.5389 8.50008 20.9167Z" fill="white"/>
  1188.                                     </svg>
  1189.                                     <p>{% trans %}Jour{% endtrans %} 3</p>
  1190.                                 </div>
  1191.                                 <div class="col px-0">
  1192.                                     <svg  height="48" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  1193.                                         <path d="M8.50008 10.5C9.073 10.5 9.56362 10.2959 9.97196 9.88754C10.3803 9.47921 10.5841 8.98893 10.5834 8.41671C10.5834 7.84379 10.3792 7.35317 9.97091 6.94483C9.56258 6.5365 9.0723 6.33268 8.50008 6.33337C7.92716 6.33337 7.43654 6.53754 7.02821 6.94587C6.61987 7.35421 6.41605 7.84449 6.41675 8.41671C6.41675 8.98962 6.62091 9.48025 7.02925 9.88858C7.43758 10.2969 7.92786 10.5007 8.50008 10.5ZM8.50008 18.1563C10.6181 16.2118 12.1893 14.4452 13.2136 12.8563C14.2379 11.2674 14.7501 9.85699 14.7501 8.62504C14.7501 6.73268 14.1466 5.18337 12.9397 3.97712C11.7327 2.77087 10.2529 2.1674 8.50008 2.16671C6.74661 2.16671 5.2664 2.77018 4.05946 3.97712C2.85251 5.18407 2.24939 6.73337 2.25008 8.62504C2.25008 9.85768 2.76223 11.2684 3.78654 12.8573C4.81084 14.4462 6.38203 16.2125 8.50008 18.1563ZM8.50008 20.9167C5.70494 18.5382 3.61744 16.3292 2.23758 14.2896C0.85772 12.25 0.167442 10.3618 0.166748 8.62504C0.166748 6.02087 1.0046 3.94622 2.68029 2.40108C4.35598 0.855943 6.29591 0.083374 8.50008 0.083374C10.7049 0.083374 12.6452 0.855943 14.3209 2.40108C15.9966 3.94622 16.8341 6.02087 16.8334 8.62504C16.8334 10.3612 16.1431 12.2493 14.7626 14.2896C13.382 16.3299 11.2945 18.5389 8.50008 20.9167Z" fill="white"/>
  1194.                                     </svg>
  1195.                                     <p>{% trans %}Jour{% endtrans %} 4</p>
  1196.                                 </div>
  1197.                                 <div class="col px-0">
  1198.                                 </div>
  1199.                             </div>
  1200.                             <div id="cursorsLine" class="row mx-md-4">
  1201.                                 <ul class="odasiePlusDayByDayFooter w-100">
  1202.                                     <li>
  1203.                                     </li>
  1204.                                     <li>
  1205.                                     </li>
  1206.                                     <li>
  1207.                                     </li>
  1208.                                     <li>
  1209.                                     </li>
  1210.                                     <li><div>▶</div></li>
  1211.                                 </ul>
  1212.                             </div>
  1213.                             <!-- END location icons and dotted line -->
  1214.                             <div id="odasiePlusImage" class="w-100 text-center mt-3">
  1215.                                 <img class="loadingSpeed" data-link="{{ asset('assets/v3/images/appInt.png')}}" src="{{ asset('assets/v3/images/appInt.png')}}" alt=""> 
  1216.                             </div>
  1217.                             <div class="row justify-content-center mt-5 mb-3 mb-md mx-0">
  1218.                                 <div class="col-8 text-center">
  1219.                                     <a href="#" class="btn btn-block btn-light odasiePlusLink">{% trans %}En savoir plus sur ÔDASIE+{% endtrans %}</a>
  1220.                                 </div>
  1221.                             </div>
  1222.                             
  1223.                         </div>  
  1224.                     </div>
  1226.                 </div>
  1227.                 <div class="col order-1 order-md-2">
  1228.                     <div id="avisContainer" class="overflow-hidden h-100 container-fluid">
  1229.                         {% set avisSurLesVoyagesEn = {
  1230.                             1 : "Les avis sur les voyages en Thaïlande" | trans,
  1231.                             2 : "Les avis sur les voyages en Indonésie" | trans,
  1232.                             3 : "Les avis sur les voyages au Cambodge" | trans,
  1233.                             4 : "Les avis sur les voyages au Sri Lanka" | trans,
  1234.                             5 : "Les avis sur les voyages au Vietnam" | trans,
  1235.                             6 : "Les avis sur les voyages aux Philippines" | trans,
  1236.                             7 : "Les avis sur les voyages en Malaisie" | trans,
  1237.                             8 : "Les avis sur les voyages au Laos" | trans,
  1238.                             9 : "Les avis sur les voyages en Chine" | trans,
  1239.                             10 : "Les avis sur les voyages en Birmanie - Myanmar" | trans,
  1240.                             12 : "Les avis sur les voyages au Népal" | trans
  1241.                         } %}
  1242.                         
  1243.                         <div class="row mx-0 justify-content-center">
  1244.                             <div class="col-md-9 col-12">
  1245.                                 <div class="avisContainerTitle text-uppercase font-weight-bold text-white pt-5">{{ "Les avis sur les voyages"| trans }}</div>
  1246.                                 <div class="d-flex flex-column mt-3 scroller">
  1247.                                     {% for temoignage in temoignages %}
  1248.                                     <div class="d-flex temoignage" style="">
  1249.                                         <div class="d-flex temoignageImage">
  1250.                                             <a href="{#{{ path('tour_show', {'slug': temoignage.voyage_slug })}}#}" title="{{ temoignage.voyage_libelle}}">
  1251.                                                 {#% set urlImage = "https://picsum.photos/seed/picsum/200/300" %#}
  1252.                                             
  1253.                                                 {% set urlImage = api_base_path ~ '/uploads/' ~ temoignage.image_entite ~ '/' ~ temoignage.image_path %}
  1254.                 
  1255.                                                 <img class="loadingSpeed" data-link="{{ urlImage }}" style="width:100px;height:100px; object-fit:cover;border-radius:60px !important;" alt="{#{{ temoignage.voyage_libelle}}#}" src="{{ urlImage }}"/>
  1256.                                             </a>
  1257.                                             <span class="text-white lineHnormal"><small>{{ temoignage.temoignage_auteur }}</small></span>
  1258.                                         </div>
  1259.                                         <div class="text-white temoignageContent">
  1260.                 
  1261.                                             <p class="lineHnormal"><small>{{ temoignage.pays_libelle|striptags|truncate(130, true)|raw }}</small></p>
  1262.                                             <p class="lineHnormal"><small>{{ temoignage.voyage_libelle|striptags|truncate(130, true)|raw }}</small></p>
  1263.                                             <p class="lineHnormal"><small>{{ temoignage.temoignage_date|date('d/m/Y')}} Par Odasie</small></p>
  1264.                 
  1265.                                             <p class="lineHnormal"><small>{{ temoignage.temoignage_contenu|striptags|truncate(130, true)|raw }}.</small></p>
  1266.                                             <p class="lineHnormal"><small>{{ temoignage.temoignage_points_forts|striptags|truncate(130, true)|raw }}</small></p>
  1267.                                         </div>
  1268.                                     </div>
  1269.                                     <hr>
  1270.                                         
  1271.                                     {% endfor %}
  1272.                                     {# <div class="d-flex" style="width: 70%;">
  1273.                                         <div class="d-flex flex-column">
  1274.                                             <img src="{{ asset('assets/v3/images/Ellipse2.png') }}" alt="" srcset="">
  1275.                                             <p class="text-center lineHnormal"><small>Phil - 28 ans</small></p>
  1276.                                         </div>
  1277.                                         <div class="ml-3 mr-2">
  1278.                                             <p class="titleActu"><b>Parcs nationaux et randonnées à Chiang Mai : 3 lieux à visiter.</b></p>
  1279.                                             <p class="lineHnormal"><small>11/04/2023 Par Odasie</small></p>
  1280.                                             <p class="lineHnormal"><small>Si vous souhaitez profiter de votre voyage en Thaïlande pour admirer les paysages verdoyants du nord, un trek en pleine nature est l’idéal. Entre parcs nationaux, temples, cascades, éléphants sauvages et autres surprises, votre balade sur les sentiers…</small></p>
  1281.                                             <p class="lineHnormal"><small>Lire la suite</small></p>
  1282.                                         </div>
  1283.                                     </div> #}
  1284.                 
  1285.                                 </div>
  1286.                             </div>
  1287.                         </div>
  1288.                         
  1289.                         <div class="row mx-0 justify-content-center">
  1290.                             <div class="col-md-9 col-12">
  1291.                                 {% if temoignages|length > 0 %}
  1292.                                 <div class="row">
  1293.                                     <div class="col-11 mb-4">
  1294.                                         <a href="{{ path("blog_index")}}" id="btnSeeAllTestimonies" class="btn btn-block btn-dark">{% trans %}Voir tous les avis{% endtrans %}</a>
  1295.                                     </div>
  1296.                                 </div> 
  1297.                                 {% endif %}
  1298.                             </div>
  1299.                         </div>
  1300.                         
  1301.                     </div>
  1302.                 </div>
  1303.             </div>
  1304.             {% include "_footer-app.html.twig" %}
  1305.         </div>
  1306.     </section>
  1307.     <section id="actus-et-avis" class='pb-5'>
  1308.     <div class="d-none d-md-block {# mt-5 #} text-light pt-5">
  1309.         <div class="container-fluid">
  1310.             <div class="row justify-content-center">
  1311.                 <div class="text-center">
  1312.                     <span class="h1">Actus & Avis</span>
  1313.                 </div>
  1314.             </div>
  1315.         </div>
  1316.     </div>
  1317.     <div class="d-none d-md-block ">
  1318.         <div class="container-fluid">
  1319.             <div class="row mt-5">
  1320.                 <div class="col-1"></div>
  1321.                 <div class="col-7" style="min-height:400px;">
  1322.                     <span class="h2 ml-3">ACTUS</span>
  1323.                     <div class="mod_articles_latest-latestnews d-flex flex-wrap">
  1324.                         {{ render(url('render_content_collection', { 
  1325.                                     'template': 'home_news',
  1326.                                     'zone': 'blog',
  1327.                                     'limit' : 4,
  1328.                                     'sort' : 'c.date_crea',
  1329.                             
  1330.                                     'direction' : 'DESC',
  1331.                                     'agentTours': false,
  1332.                                     } 
  1333.                         )) }}
  1334.                     </div>
  1335.                 </div>
  1336.                 <div class="temoignages-section col-4">
  1337.                     <div class="h-100 pb-5" style="margin-left: 25px;">
  1338.                         <span class="h2">DERNIERS AVIS</span>
  1339.                         <div class="mt-4 scroller" style="overflow-y:scroll; height:inherit;">
  1340.                             {% for temoignage in temoignages|slice(0, 5) %}
  1341.                                 {% include "_temoignage_apercu.html.twig" %}
  1342.                             {% endfor %}
  1343.                         </div>
  1344.                         
  1345.                     </div>
  1346.                     
  1347.                     <div>
  1348.                         {# <div class="d-flex justify-content-center mt-2">
  1349.                             <a class="linkNormal" href="#">Voir tout les avis</a>
  1350.                         </div> #}
  1351.                     </div>
  1352.                 </div>
  1353.             </div>
  1354.             <div class="row mt-3">
  1355.                 <div class="col-1"></div>
  1356.                 <div class="col-7 mt-4">
  1357.                     <div>
  1358.                         <div class="d-flex justify-content-center text-dark">
  1359.                             <a class="linkNormal default-button white-button actus-button" href="{{ path("blog_index")}}">Voir toutes nos actus</a>
  1360.                         </div>
  1361.                     </div>
  1362.                 </div>
  1363.                 <div class="col-4 mt-4 d-flex justify-content-center text-dark">
  1364.                     <a href="{{ path('review_index') }}" class="default-button white-button temoignages-button">Voir tous les avis</a>
  1365.                 </div>
  1366.             </div>
  1367.             <div class="row">
  1368.                 <div class="col-12 d-none d-md-block">
  1369.                     <div class="d-flex justify-content-center mt-5" style="width:100%">
  1370.                     <span class="mr-3" style="width: 20%;text-align:end">
  1371.                         <b>Vous disposez d’un petit budget ?</b>
  1372.                         <p class="lineHnormal mt-2">Voyages en petit groupe, promotions du moment, gardez un oeil sur cet espace où nous mettrons en avant nos offres les plus avantageuses!</p>
  1373.                     </span>
  1374.                         <img class="logoTravel" src="{{ asset('assets/v3/images/iconTravel.png') }}" alt="" srcset="">
  1375.                     </div>
  1376.                 </div>   
  1377.             </div>
  1378.         </div>
  1379.     </div>
  1380.     
  1381.     <div>
  1382.         {# <div class="d-block d-md-none mt-5 backgroundDarkGray text-light">
  1383.             <div class="row justify-content-center">
  1384.                 <div class="text-center">
  1385.                     <span class="h1">Actus & Avis</span>
  1386.                 </div>
  1387.             </div>
  1388.         </div> #}
  1389.         <div class="d-block d-md-none row pt-5">
  1390.             <span class="h2 ml-4">ACTUS</span>
  1391.             <div class="mod_articles_latest-latestnews d-flex justify-content-center flex-wrap mt-3">
  1392.                 {{ render(url('render_content_collection', { 
  1393.                             'template': 'home_news',
  1394.                             'zone': 'blog',
  1395.                             'limit' : 3,
  1396.                             'sort' : 'c.date_crea',
  1397.                             'direction' : 'DESC',
  1398.                             'agentTours': false,
  1399.                             } 
  1400.                 )) }}
  1401.             </div>
  1403.         </div>
  1405.         <div class="d-block d-md-none mt-5">
  1406.             <span class="h2 ml-2">DERNIERS AVIS</span>
  1407.             <div class="d-flex flex-column align-items-center mt-3 scroller">
  1408.             {% for temoignage in temoignages|slice(0, 5) %}
  1409.                 <div class="d-flex" style="width: 95%;">
  1410.                     <div class="d-flex flex-column">
  1411.                         <a href="{#{{ path('tour_show', {'slug': temoignage.voyage_slug })}}#}" title="{{ temoignage.voyage_libelle}}">
  1412.                         {% set urlImage = api_base_path ~ '/uploads/' ~ temoignage.image_entite ~ '/' ~ temoignage.image_path %}
  1413.                         {# {% set urlImage = "https://picsum.photos/200/300?random=" ~ random(1, 10) %} #}
  1414.                         {# {{ asset('assets/v3/images/review/' ~ temoignage.image_path ~ '') }} #}
  1415.                             <img class="loadingSpeed avisMobile" src="" data-link="{{ urlImage }}" style="width:100px;height:100px; object-fit:cover;border-radius:50% !important;" alt="{#{{ temoignage.voyage_libelle}}#}"/>
  1416.                         </a>
  1417.                         <p class="text-center lineHnormal pl-3"><small>{{ temoignage.temoignage_auteur }}</small></p>
  1418.                     </div>
  1419.                     <div class="ml-3 mr-2">
  1420.                         <p class="lineHnormal"><small>{{ temoignage.pays_libelle|striptags|truncate(130, true)|raw }}</small></p>
  1421.                         <p class="lineHnormal"><small>{{ temoignage.voyage_libelle|striptags|truncate(130, true)|raw }}</small></p>
  1422.                         {# <p class="lineHnormal"><small>{{ temoignage.temoignage_date|date('d/m/Y')}} Par Odasie</small></p> #}
  1424.                         {# <p class="lineHnormal"><small>{{ temoignage.temoignage_contenu|striptags|truncate(130, true)|raw }}.</small></p> #}
  1425.                         {# <p class="lineHnormal"><small>{{ temoignage.temoignage_points_forts|striptags|truncate(130, true)|raw }}</small></p> #}
  1426.                         <p class="lineHnormal">
  1427.                             <small>{{ temoignage.temoignage_contenu|striptags|truncate(130, true)|raw }}.</small>
  1428.                             <a href="{{ path('review_index', {'reviewId': temoignage.temoignage_id}) }}">Lire la suite</a>    
  1429.                         </p>
  1430.                     </div>
  1431.                 </div>
  1432.             {% endfor %}
  1434.             
  1435.             </div>
  1436.         </div>
  1437.     </div>
  1438.     </section>
  1440. {% endblock %}
  1442. {% block javascripts %}
  1443.     {{ parent() }}
  1444.     <script>var currentLocale='fr';</script>
  1445.     <script>
  1446.         var formValid = false;
  1447.         $('form.search-container-inner').on('submit', function(e) {
  1450.             //TODO : 
  1451.             //1 - obtenir le thème recherché par l'utilisateur
  1452.             //2 - modifier la propriété 'action' du formulaire 
  1453.             let category = $("#category").val();
  1454.             if(category == "#"){
  1455.                 //impossible de valider le formulaire
  1456.             }else{
  1457.                 //Definir l'action
  1458.                 let path = "/" + currentLocale + "/" + category;
  1459.                 $('form.search-container-inner').attr("action",path);
  1460.             }
  1462.             //var arrival = $('#arrival').val();
  1463.             //if (!formValid) {
  1464. //
  1465.             //    if (arrival.match(/^[0-9]{2}-[0-9]{2}-[0-9]{4}$/) == null) {
  1466.             //        e.preventDefault();
  1467.             //        //alert('Veuillez vérifier le format de date.');
  1468.             //        return;
  1469.             //    }
  1470.             //    else {
  1471.             //        formValid = true;
  1472.             //    }
  1473.             //}
  1474.             $(this).submit();
  1475.         })
  1476.     </script>
  1477.     <script src="{{ asset('assets/v2/js/flatpickr.min.js') }}"></script>
  1478.     <script src="{{ asset('assets/v2/js/flatpickr.fr.min.js') }}"></script>
  1479.     <script src="{{ asset('assets/v2/js/destination.min.js') }}"></script>
  1480.     <script src="{{ asset('assets/v2/js/swiper.min.js') }}"></script>
  1481.     <script src="{{ asset('assets/v2/js/home.min.js') }}"></script>
  1482.     <script>
  1483.         var boolIsMobile = false;
  1484.         if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
  1485.             boolIsMobile = true;
  1486.         }
  1488.         console.log('boolIsMobile',boolIsMobile);    
  1489.     </script>
  1490.     <script>
  1491.         let baseUrl = "{{ app.request.getSchemeAndHttpHost()}}";
  1492.         let locale = "{{ app.request.getLocale()}}";
  1494.         $("#btnGoToCountry").on("click",function(){
  1495.             let val = $('#goToCountry').find(":selected").val();
  1496.             if(val != "#"){
  1497.                 document.location.href= baseUrl + "/"+ locale +"/" + val;
  1498.             }
  1499.         });
  1501.         if(boolIsMobile){
  1502.             var coupDeCoeurSlider = new Swiper(".swiper",{
  1503.                 // Optional parameters
  1504.                 slidesPerView :1,
  1505.                 allowTouchMove : false,
  1506.                 // Navigation arrows
  1507.                 navigation: {
  1508.                     nextEl: '.swiper-button-next',
  1509.                     prevEl: '.swiper-button-prev',
  1510.                 },
  1512.                 // And if we need scrollbar
  1513.                 scrollbar: {
  1514.                     el: '.swiper-scrollbar',
  1515.                 },
  1516.                 breakpoints: {
  1517.                     /* 550 */320: {
  1518.                     slidesPerView: /* 2 */ 1,
  1519.                     spaceBetween: 20
  1520.                     },
  1521.                     /* 768 */ 720: {
  1522.                     slidesPerView: 2,
  1523.                     spaceBetween: 20
  1524.                     },
  1525.                     1200: {
  1526.                     slidesPerView: 3,
  1527.                     spaceBetween: 20
  1528.                     },
  1529.                     2650: {
  1530.                     slidesPerView: 7,
  1531.                     spaceBetween: 10
  1532.                     },
  1533.                     2250: {
  1534.                     slidesPerView: 6,
  1535.                     spaceBetween: 10
  1536.                     },
  1537.                     1850: {
  1538.                     slidesPerView: 5,
  1539.                     spaceBetween: 10
  1540.                     },
  1541.                     // when window width is >= 480px
  1542.                     1450: {
  1543.                     slidesPerView: 4,
  1544.                     spaceBetween: 10
  1545.                     },
  1546.                     1000: {
  1547.                     slidesPerView: 3,
  1548.                     spaceBetween: 10
  1549.                     },
  1550.                     // when window width is >= 640px
  1551.                     800: {
  1552.                     slidesPerView: 2,
  1553.                     spaceBetween: 10
  1554.                     }
  1555.                 },
  1556.             });
  1557.         }else{
  1558.             var coupDeCoeurSlider = new Swiper(".swiper",{
  1559.                 // Optional parameters
  1560.                 slidesPerView :4,
  1561.                 spaceBetween: 30,
  1562.                 allowTouchMove : false,
  1563.                 breakpoints: {
  1564.                     320: {
  1565.                     slidesPerView: 1,
  1566.                     spaceBetween: 20
  1567.                     },
  1568.                     860: {
  1569.                     slidesPerView: 2,
  1570.                     spaceBetween: 5
  1571.                     },
  1572.                     1200: {
  1573.                     slidesPerView: 3,
  1574.                     spaceBetween: 5
  1575.                     },
  1576.                     1530: {
  1577.                     slidesPerView: 4,
  1578.                     spaceBetween: 5
  1579.                     },
  1580.                     2650: {
  1581.                     slidesPerView: 7,
  1582.                     spaceBetween: 10
  1583.                     },
  1584.                     2250: {
  1585.                     slidesPerView: 6,
  1586.                     spaceBetween: 10
  1587.                     },
  1588.                     1890: {
  1589.                     slidesPerView: 5,
  1590.                     spaceBetween: 10
  1591.                     },
  1592.                     // when window width is >= 480px
  1593.                     /* 1450: {
  1594.                     slidesPerView: 4,
  1595.                     spaceBetween: 10
  1596.                     }, */
  1597.                     /* 1000: {
  1598.                     slidesPerView: 3,
  1599.                     spaceBetween: 10
  1600.                     }, */
  1601.                     // when window width is >= 640px
  1602.                     /* 800: {
  1603.                     slidesPerView: 2,
  1604.                     spaceBetween: 10
  1605.                     } */
  1606.                 },
  1608.                 // Navigation arrows
  1609.                 navigation: {
  1610.                     nextEl: '.swiper-button-next',
  1611.                     prevEl: '.swiper-button-prev',
  1612.                 },
  1614.                 // And if we need scrollbar
  1615.                 scrollbar: {
  1616.                     el: '.swiper-scrollbar',
  1617.                 },
  1618.             });
  1619.         }
  1621.     // Fonction à exécuter lorsque l'élément devient visible
  1622.     function gestionIntersection(entries, observer) {
  1623.     entries.forEach((entry) => {
  1624.         if (entry.isIntersecting) {
  1625.         // L'élément est visible à l'écran
  1626.         if(entry.target.localName == "img"){
  1627.             if(entry.target.dataset.link != ""){
  1628.                 entry.target.src = `${entry.target.dataset.link}`
  1629.                 entry.target.classList.add("loaded");
  1630.                 entry.target.dataset.link = "";
  1631.             }
  1632.             
  1633.         } else {
  1634.             if(entry.target.dataset.link != ""){
  1635.                 entry.target.style.backgroundImage = `url('${entry.target.dataset.link}')` 
  1636.                 entry.target.classList.add("loaded");
  1637.                 entry.target.dataset.link = "";
  1638.             }
  1639.                 
  1640.         }
  1641.         
  1642.         // Vous pouvez exécuter ici le code que vous souhaitez lorsque l'élément devient visible.
  1643.         // Par exemple, lancer une animation ou charger du contenu supplémentaire.
  1644.         }
  1645.     });
  1646.     }
  1648.     // Options pour l'observateur Intersection Observer
  1649.     const options = {
  1650.     root: null, // Le viewport est la racine par défaut
  1651.     rootMargin: "0px", // Aucune marge supplémentaire
  1652.     threshold: 0.1, // Détecter lorsque 50% de l'élément est visible
  1653.     };
  1655.     // Créer l'observateur Intersection Observer
  1656.     const observer = new IntersectionObserver(gestionIntersection, options);
  1658.     // Sélectionnez l'élément que vous souhaitez observer
  1659.     const elementToObserve = document.querySelectorAll(".loadingSpeed");
  1661.     // Commencez à observer l'élément
  1662.     elementToObserve.forEach((element) => {
  1663.         observer.observe(element);
  1664.     });  
  1666.         
  1667.     </script>
  1669.     <script>
  1670.         // récupérer le nombre de destinations
  1671.         $(document).ready(function() {
  1672.             let detailsMobile = document.querySelectorAll('.details-mobile');
  1673.             $(detailsMobile).each(function() {
  1674.                 let destinationsNumber = $(this).find('li').length;
  1675.                 $(this).find('.destinations-mobile').html(destinationsNumber + ' destinations')
  1676.             })
  1677.         })
  1678.     </script>
  1680. {% endblock %}