templates/front/product-option/new_index2.html.twig line 1

Open in your IDE?
  1. {% extends 'front/layout.html.twig' %}
  3. {% if product.metaTitle %}
  4.     {% block title %}
  5.         {{ product.metaTitle | trans({}, "pageCmsTranslate") }}
  6.     {% endblock %}
  7. {% endif %}
  8. {% if product.metaDescription %}
  9.     {% block metaDescription %}
  10.         <meta name="description" content="{{ product.metaDescription | trans({}, "pageCmsTranslate") }}">
  11.     {% endblock %}
  12. {% endif %}
  14. {% block googleTagManagerDataLayer %}
  15.     {% include 'google_tag.html.twig' with {'titlePage':'product option','categoryPage':'product-details','navigation_category1':'','navigation_category2':'','navigation_category3':'' }   %}
  16. {% endblock %}
  17. {% block stylesheets %}
  18.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
  19.     {{ encore_entry_link_tags('color_lab_product') }}
  20.     {{ parent() }}
  21. {% endblock %}
  22. {% macro value(cart,object,name) %}
  23.     {% if object %}
  24.         {% if cart|access(object) %}
  25.             {% set obj = cart|access(object) %}
  26.             value="{% if obj|access(name) %}{{ obj|access(name) }}{% endif %}"
  27.         {% else %}
  28.             value=""
  29.         {% endif %}
  30.     {% else %}
  31.         value="{% if cart|access(name) %}{{ cart|access(name) }}{% endif %}"
  32.     {% endif %}
  33. {% endmacro %}
  34. {% block body %}
  35.     {% include 'front/header.html.twig' %}
  36.     {% set currentPath = app.request.requesturi %}
  37.     <script>
  38.         var isMobile = "{{ app.request.get('isMobile') }}";
  39.         var str1 = '?';
  40.         var str2 = '{{ currentPath }}';
  41.         str2 = str2.replace(/&amp;/g, '&');
  42.         if(str2.indexOf('isMobile') != -1){
  43.             var str2 = str2.substring(0 ,str2.indexOf('isMobile') - 1);
  44.         }
  45.         var str3 = '?';
  46.         if(str2.indexOf(str1) != -1){
  47.             str3 = '&';
  48.         }
  49.         if($( window ).width() > 768 ) {
  50.             if(isMobile == '1'){
  51.                 window.location.replace(str2+str3+"isMobile=0");
  52.             }
  53.         }else {
  54.             if(isMobile != '1') {
  55.                 window.location.replace(str2+str3+"isMobile=1");
  56.             }
  57.         }
  58.     </script>
  59.     <input type="hidden" id="newPage" value="1">
  60.     <input type="hidden" id="designId" value="{% if cartDetail  %}{{ cartDetail.templateIdCrello }}{% endif %}">
  61.     <input type="hidden" name="tokenDetail" id="tokenDetail" value="{% if cartDetail  %}{{ cartDetail.token }}{% endif %}">
  62.     {% set productObject = null %}
  63.     {% if cartDetail and cartDetail.product %}
  64.         {% set productObject = cartDetail.product %}
  65.     {% elseif  app.request.get('product') %}
  66.          {% set productObject =  getProductById(app.request.get('product')) %}
  67.     {% endif %}
  68.     {% set isMobileInterface = false %}
  69.     {% if app.request.get('isMobile') == '1' %}
  70.         {#mobile#}
  71.         {% set isMobileInterface = true %}
  72.         <input type="hidden" value="1" id="isMobileInterface">
  73.         <div class="productIndexOptionNewMobile">
  74.             {% if cartDetail %}
  75.                 {% set idProduct = cartDetail.product.id %}
  76.             {% else %}
  77.                 {% if app.request.get('product') %}
  78.                     {% set idProduct = app.request.get('product') %}
  79.                 {% endif %}
  80.             {% endif %}
  81.             <input value="{{ idProduct }}" checked="checked" data-new-page="1" style="display: none" data-url="{{ path('product_option') }}?product={{ idProduct }}" type="radio" name="productOption" >
  83.             <div class="col-12 pl-0 pr-0 linkTitreFirstProduct" >
  84.                 <a href="{{ path('besoin_produits') }}" class="paddingMobileOptionProduct">
  85.                     <svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" fill="none">
  86.                         <path d="M9 2L2 9L9 16" stroke="#211E1D" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  87.                     </svg>
  88.                     <span class="">{{ product.getTypeProductName() }}</span>
  89.                 </a>
  90.             </div>
  91.             {% set dataLivraisonArray2 = getDataLivraisonWithOrNotImprimeur() %}
  92.             <div class="blocLivraisonBesoinProduct">
  93.                 <div class="bloc1LivraisonBesoinProduct">
  94.                     <p style="display: flex;margin-bottom:0px">
  95.                     <span>
  96.                         đźš€
  97.                     </span>
  98.                         <span class="bloc1LivraisonBesoinProductText">
  99.                         {{ 'Commandez avant 17h, livrĂ© aujourd’hui chez vous !' | trans({}, "productTranslate") }}
  100.                     </span>
  101.                     </p>
  102.                 </div>
  103.                 {% if dataLivraisonArray2.addresse.addresseAdresse %}
  104.                     <div class="bloc2LivraisonBesoinProduct">
  105.                         <p style="">
  106.                         <span>
  107.                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  108.                               <g clip-path="url(#clip0_39_1752)">
  109.                                 <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="#323232"/>
  110.                               </g>
  111.                               <defs>
  112.                                 <clipPath id="clip0_39_1752">
  113.                                   <rect width="24" height="24" fill="white"/>
  114.                                 </clipPath>
  115.                               </defs>
  116.                             </svg>
  117.                         </span>
  118.                             <span class="bloc1LivraisonBesoinProductText">
  119.                             {{ dataLivraisonArray2.addresse.addresseAdresse }}
  120.                         </span>
  121.                         </p>
  122.                         {% if dataLivraisonArray2.time %}
  123.                             <p style="border-top: 0.5px solid #DDD;">
  124.                                 <span>
  125.                                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  126.                                       <g clip-path="url(#clip0_39_1755)">
  127.                                         <path d="M7 2V13H10V22L17 10H13L17 2H7Z" fill="#323232"/>
  128.                                       </g>
  129.                                       <defs>
  130.                                         <clipPath id="clip0_39_1755">
  131.                                           <rect width="24" height="24" fill="white"/>
  132.                                         </clipPath>
  133.                                       </defs>
  134.                                     </svg>
  135.                                 </span>
  136.                                 <span class="bloc1LivraisonBesoinProductText">
  137.                                     Livraison {{ dataLivraisonArray2.time.day|lower  }} dĂ©s {{  dataLivraisonArray2.time.time|split(' ')[0] }}
  138.                                 </span>
  139.                             </p>
  140.                         {% endif %}
  141.                     </div>
  142.                 {% endif %}
  143.                 <div class="bloc3LivraisonBesoinProduct">
  144.                     <div class="bloc3LivraisonBesoinProductStr">
  145.                         <h4 class="mt-0">{{ 'Voici les options disponibles Ă  cette adresse' | trans({}, "productTranslate") }} :</h4>
  146.                         <div class="bloc3LivraisonBesoinProductStrDispo">
  147.                             {% if dataLivraisonArray2.dataLivraison is defined and dataLivraisonArray2.dataLivraison.imprimeurZoneChalandise %}
  148.                                 <p style="">
  149.                                 <span class="livStatusNew2Green">
  150.                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  151.                                         <rect width="20" height="20" rx="10" fill="#8CC378"/>
  152.                                         <path d="M6 10.2L8.86364 13L15 7" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
  153.                                     </svg>
  154.                                 </span>
  155.                                     <span>Livraison 30 min</span>
  156.                                 </p>
  157.                             {% endif %}
  158.                             {% if dataLivraisonArray2.dataLivraison is defined and dataLivraisonArray2.dataLivraison.imprimeurPointRetrait %}
  159.                                 <p style="">
  160.                                 <span class="livStatusNew2Green">
  161.                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  162.                                         <rect width="20" height="20" rx="10" fill="#8CC378"/>
  163.                                         <path d="M6 10.2L8.86364 13L15 7" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
  164.                                     </svg>
  165.                                 </span>
  166.                                     <span>Point retrait 1h</span>
  167.                                 </p>
  168.                             {% endif %}
  169.                             {% if dataLivraisonArray2.dataLivraison is defined and (dataLivraisonArray2.dataLivraison.imprimeurLivraisonNationalJ5 or dataLivraisonArray2.dataLivraison.imprimeurLivraisonNational) %}
  170.                                 <p style="">
  171.                                 <span class="livStatusNew2Green">
  172.                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  173.                                         <rect width="20" height="20" rx="10" fill="#8CC378"/>
  174.                                         <path d="M6 10.2L8.86364 13L15 7" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
  175.                                     </svg>
  176.                                 </span>
  177.                                     <span>Livraison 48h/J+5</span>
  178.                                 </p>
  179.                             {% endif %}
  181.                         </div>
  182.                     </div>
  183.                 </div>
  184.                 <div class="bloc4LivraisonBesoinProduct">
  185.                     <a class="ratingListeBtnAccueil" style="">
  186.                         {% set ratingCopeesTab = getRatingCopeesTab() %}
  187.                         <span>4.6</span>
  188.                         {#<span>{% if ratingCopeesTab.rating is defined %}{{ getRatingCopees() }}{% endif %}</span>#}
  189.                         <span class="etoileGoogle">
  190.                             <svg xmlns="http://www.w3.org/2000/svg" width="80" height="20" viewBox="0 0 100 20" fill="none">
  191.                                 <path d="M9.36032 1.28746C9.62296 0.758848 10.377 0.75885 10.6397 1.28746L12.7847 5.60461C12.8887 5.81394 13.0885 5.95914 13.3198 5.99337L18.0884 6.69931C18.6723 6.78574 18.9054 7.50291 18.4838 7.91605L15.0408 11.2901C14.8738 11.4537 14.7975 11.6887 14.8364 11.9192L15.6386 16.6726C15.7368 17.2546 15.1268 17.6979 14.6036 17.4246L10.3307 15.1927C10.1235 15.0845 9.87649 15.0845 9.6693 15.1927L5.39641 17.4246C4.87322 17.6979 4.26316 17.2546 4.36139 16.6726L5.16361 11.9192C5.20251 11.6887 5.12617 11.4537 4.95923 11.2901L1.51621 7.91605C1.09463 7.50291 1.32765 6.78574 1.91156 6.69931L6.68025 5.99337C6.91147 5.95914 7.11132 5.81394 7.21533 5.60461L9.36032 1.28746Z" fill="#FEA500"/>
  192.                                 <path d="M29.3603 1.28746C29.623 0.758848 30.377 0.75885 30.6397 1.28746L32.7847 5.60461C32.8887 5.81394 33.0885 5.95914 33.3198 5.99337L38.0884 6.69931C38.6723 6.78574 38.9054 7.50291 38.4838 7.91605L35.0408 11.2901C34.8738 11.4537 34.7975 11.6887 34.8364 11.9192L35.6386 16.6726C35.7368 17.2546 35.1268 17.6979 34.6036 17.4246L30.3307 15.1927C30.1235 15.0845 29.8765 15.0845 29.6693 15.1927L25.3964 17.4246C24.8732 17.6979 24.2632 17.2546 24.3614 16.6726L25.1636 11.9192C25.2025 11.6887 25.1262 11.4537 24.9592 11.2901L21.5162 7.91605C21.0946 7.50291 21.3277 6.78574 21.9116 6.69931L26.6802 5.99337C26.9115 5.95914 27.1113 5.81394 27.2153 5.60461L29.3603 1.28746Z" fill="#FEA500"/>
  193.                                 <path d="M49.3603 1.28746C49.623 0.758848 50.377 0.75885 50.6397 1.28746L52.7847 5.60461C52.8887 5.81394 53.0885 5.95914 53.3198 5.99337L58.0884 6.69931C58.6723 6.78574 58.9054 7.50291 58.4838 7.91605L55.0408 11.2901C54.8738 11.4537 54.7975 11.6887 54.8364 11.9192L55.6386 16.6726C55.7368 17.2546 55.1268 17.6979 54.6036 17.4246L50.3307 15.1927C50.1235 15.0845 49.8765 15.0845 49.6693 15.1927L45.3964 17.4246C44.8732 17.6979 44.2632 17.2546 44.3614 16.6726L45.1636 11.9192C45.2025 11.6887 45.1262 11.4537 44.9592 11.2901L41.5162 7.91605C41.0946 7.50291 41.3277 6.78574 41.9116 6.69931L46.6802 5.99337C46.9115 5.95914 47.1113 5.81394 47.2153 5.60461L49.3603 1.28746Z" fill="#FEA500"/>
  194.                                 <path d="M69.3603 1.28746C69.623 0.758848 70.377 0.75885 70.6397 1.28746L72.7847 5.60461C72.8887 5.81394 73.0885 5.95914 73.3198 5.99337L78.0884 6.69931C78.6723 6.78574 78.9054 7.50291 78.4838 7.91605L75.0408 11.2901C74.8738 11.4537 74.7975 11.6887 74.8364 11.9192L75.6386 16.6726C75.7368 17.2546 75.1268 17.6979 74.6036 17.4246L70.3307 15.1927C70.1235 15.0845 69.8765 15.0845 69.6693 15.1927L65.3964 17.4246C64.8732 17.6979 64.2632 17.2546 64.3614 16.6726L65.1636 11.9192C65.2025 11.6887 65.1262 11.4537 64.9592 11.2901L61.5162 7.91605C61.0946 7.50291 61.3277 6.78574 61.9116 6.69931L66.6802 5.99337C66.9115 5.95914 67.1113 5.81394 67.2153 5.60461L69.3603 1.28746Z" fill="#FEA500"/>
  195.                                 <path d="M89.3692 1.18774C89.6377 0.682086 90.3623 0.682087 90.6308 1.18774L92.9046 5.4689C93.0079 5.66328 93.195 5.79922 93.4118 5.83734L98.186 6.67691C98.7499 6.77607 98.9738 7.46515 98.5759 7.87682L95.2069 11.3623C95.0539 11.5205 94.9825 11.7405 95.0132 11.9584L95.6901 16.7585C95.77 17.3254 95.1838 17.7513 94.6694 17.5001L90.3134 15.373C90.1156 15.2765 89.8844 15.2765 89.6866 15.373L85.3306 17.5001C84.8161 17.7513 84.23 17.3254 84.3099 16.7585L84.9868 11.9584C85.0175 11.7405 84.9461 11.5205 84.7931 11.3623L81.4241 7.87682C81.0262 7.46514 81.2501 6.77607 81.814 6.67691L86.5882 5.83734C86.805 5.79922 86.9921 5.66328 87.0954 5.46889L89.3692 1.18774Z" fill="#6A6A6A"/>
  196.                                 <mask id="mask0_3_61" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="80" y="0" width="10" height="20">
  197.                                 <rect x="80" width="10" height="20" fill="#D9D9D9"/>
  198.                                 </mask>
  199.                                 <g mask="url(#mask0_3_61)">
  200.                                 <path d="M89.3692 1.18774C89.6377 0.682086 90.3623 0.682087 90.6308 1.18774L92.9046 5.4689C93.0079 5.66328 93.195 5.79922 93.4118 5.83734L98.186 6.67691C98.7499 6.77607 98.9738 7.46515 98.5759 7.87682L95.2069 11.3623C95.0539 11.5205 94.9825 11.7405 95.0132 11.9584L95.6901 16.7585C95.77 17.3254 95.1838 17.7513 94.6694 17.5001L90.3134 15.373C90.1156 15.2765 89.8844 15.2765 89.6866 15.373L85.3306 17.5001C84.8161 17.7513 84.23 17.3254 84.3099 16.7585L84.9868 11.9584C85.0175 11.7405 84.9461 11.5205 84.7931 11.3623L81.4241 7.87682C81.0262 7.46514 81.2501 6.77607 81.814 6.67691L86.5882 5.83734C86.805 5.79922 86.9921 5.66328 87.0954 5.46889L89.3692 1.18774Z" fill="#FEA500"/>
  201.                                 </g>
  202.                             </svg>
  203.                         </span>
  204.                         sur
  205.                         <span style="vertical-align: middle;">
  206.                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  207.                             <path d="M22.56 12.25C22.56 11.47 22.49 10.72 22.36 10H12V14.26H17.92C17.66 15.63 16.88 16.79 15.71 17.57V20.34H19.28C21.36 18.42 22.56 15.6 22.56 12.25Z" fill="#4285F4"></path>
  208.                             <path d="M12 23C14.97 23 17.46 22.02 19.28 20.34L15.71 17.57C14.73 18.23 13.48 18.63 12 18.63C9.13999 18.63 6.70999 16.7 5.83999 14.1H2.17999V16.94C3.98999 20.53 7.69999 23 12 23Z" fill="#34A853"></path>
  209.                             <path d="M5.84 14.09C5.62 13.43 5.49 12.73 5.49 12C5.49 11.27 5.62 10.57 5.84 9.91001V7.07001H2.18C1.43 8.55001 1 10.22 1 12C1 13.78 1.43 15.45 2.18 16.93L5.03 14.71L5.84 14.09Z" fill="#FBBC05"></path>
  210.                             <path d="M12 5.38C13.62 5.38 15.06 5.94 16.21 7.02L19.36 3.87C17.45 2.09 14.97 1 12 1C7.69999 1 3.98999 3.47 2.17999 7.07L5.83999 9.91C6.70999 7.31 9.13999 5.38 12 5.38Z" fill="#EA4335"></path>
  211.                         </svg>
  212.                     </span>
  213.                     </a>
  214.                 </div>
  215.             </div>
  217.             <div class="col-12 paddingMobileOptionProduct" >
  218.                 <h3 class="productTitreMobile">{{ product.productTitreMobile|trans({}, "productTranslate") }}</h3>
  219.             </div>
  220.             <div class="col-12">
  221.                 <div class="imageOptionProductMobile">
  222.                     <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
  223.                         <div class="carousel-inner">
  224.                             {% for item in product.productImageMobile %}
  225.                                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  226.                                     <img src="{{ asset('imageSite/'~item.image) }}" alt="Hills">
  227.                                 </div>
  228.                             {% endfor %}
  229.                         </div>
  231.                         <ol class="carousel-indicators list-inline">
  232.                             {% for item in product.productImageMobile %}
  233.                                 <li class="list-inline-item {% if loop.first %}active{% endif %}">
  234.                                     <a id="carousel-selector-0"{% if loop.first %}class="selected" {% endif %}  data-slide-to="{{ loop.index0 }}" data-target="#custCarousel">
  235.                                         <img src="{{ asset('imageSite/'~item.image) }}" class="img-fluid">
  236.                                     </a>
  237.                                 </li>
  238.                             {% endfor %}
  239.                         </ol>
  240.                     </div>
  241.                 </div>
  242.             </div>
  244.             <div id="optionsBlocMobile" class="paddingMobileOptionProduct">
  246.             </div>
  248.             <div id="quantityBlocNew" class="paddingMobileOptionProduct">
  250.             </div>
  251.             <div id="optionsBlocDescriptionMobile" class="paddingMobileOptionProduct">
  252.                 <div id="nosLovesPrinter">
  254.                 </div>
  255.             </div>
  256.             <div class="paddingMobileOptionProduct row_select_ca1 oghtml5">
  257.                 <div class="Comm_adress">
  258.                     <h3>{{ 'Votre adresse' | trans({}, "productTranslate") }}</h3>
  259.                     <div role="group" class="form-group">
  260.                         <input id="addresseLiv" name="addresseLiv" type="text" class="form-control adresee-google-map" placeholder=" "
  261.                                 {% if app.session.get('addresseAdresse') %} value="{{ app.session.get('addresseAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','adresse') }} {% endif %} >
  262.                         <label for="addresseLiv" class="d-block form-control-placeholder"> {{ 'Commencez Ă  saisir la première ligne de votre adresse' | trans({}, "productTranslate") }}</label>
  263.                         <input type="hidden" id="longLiv"  {% if app.session.get('longiAdresse') %} value="{{ app.session.get('longiAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','longi') }}{% endif %} name="longLiv">
  264.                         <input type="hidden" id="latLiv" {% if app.session.get('latAdresse') %} value="{{ app.session.get('latAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','lat') }}{% endif %} name="latLiv">
  265.                         <input type="hidden" id="codePostalLiv" {% if app.session.get('postalcodeAdresse') %} value="{{ app.session.get('postalcodeAdresse') }}" {% else %} {{ _self.value(cart,'adresseLivraison','codePostal') }}{% endif %} name="codePostalLiv">
  266.                         <input type="hidden" id="CountryLiv" value="{% if app.session.get('CountryLiv') %}{{ app.session.get('CountryLiv') }}{% else %}{% if cart.adresseLivraison.country is defined  %}{{ cart.adresseLivraison.country }}{% endif %}{% endif %}" name="CountryLiv">
  267.                         <input type="hidden" value="{% if app.session.get('CountryCodeLiv') %}{{ app.session.get('CountryCodeLiv') }}{% else %}{% if cart.adresseLivraison.countryCode is defined %}{{ cart.adresseLivraison.countryCode }}{% endif %}{% endif%}" name="CountryCodeLiv" id="CountryCodeLiv">
  268.                         <input type="hidden" id="cityLiv" {% if app.session.get('cityAdresse') %} value="{{ app.session.get('cityAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','city') }}{% endif %} name="cityLiv">
  269.                     </div>
  270.                 </div>
  271.                 <div id="modeLivraison">
  273.                 </div>
  274.                 {% if cartDetail.id is not defined  %}
  275.                     <div id="crelloButtons" class="crelloButtonsBlock crelloButtonsNew">
  277.                     </div>
  278.                 {% endif %}
  280.                 {% if cartDetail  %}
  281.                     {% include 'front/product-option/productPreviewModal.html.twig'  with {'isMobileInterface':isMobileInterface } %}
  282.                     {% if cartDetail.product.typeProduct  in [ constant('App\\Entity\\Product::PHOTOS')]%}
  283.                         <div class="txt_selectca mb-2" style=""> <a href="#" style="" class="crelloBtnImportPhotos crelloBtnImportNow" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  284.                     {% else %}
  285.                         {% if cartDetail.templateIdCrello  %}
  286.                             <div class="txt_selectca mb-2" style="min-height: 43px;"> <a href="#" style="color: #fff;" class="crelloBtn btnMobileImport" >{{ 'Vous pouvez Ă©diter votre crĂ©ation sur' | trans({}, "productTranslate") }} <img  width="130px"  src="{{ asset('/images/ininfoselectF.svg') }}" ></a></div>
  287.                             <input type="hidden" id="designUrl" value="">
  288.                             <input type="hidden" id="designType" value="{{ cartDetail.productAttribute.format.designTypeCrello }}">
  289.                             <input type="hidden" id="customDesignType" value="{{ cartDetail.productAttribute.format.designTypeCustomCrello }}">
  290.                             <input type="hidden" id="sideBarDesignType" value="{{ cartDetail.productAttribute.format.designTypeSideBarCrello }}">
  291.                         {% elseif cartDetail.colorLabTokenProduct and cartDetail.colorLabIdProduct %}
  292.                             <div class="txt_selectca" style="min-height: 43px;">
  293.                                 <a href="#" style="color: #fff;" class="crelloBtn btnMobileImport" >
  294.                                     {{ 'Vous pouvez Ă©diter votre crĂ©ation sur' | trans({}, "productTranslate") }}
  295.                                     <svg viewBox="0 0 201 60" xmlns="http://www.w3.org/2000/svg" class="c-navbar__logo" style=" width: 95px;margin-left: 10px;"><g fill-rule="nonzero" fill="none"><g id="shape" fill-rule="nonzero" fill="none"><path id="shape-1" d="M7.33 24.8A22.05 22.05 0 0 1 28.67 7.9c3.28 0 6.39.75 9.18 2.06a21.35 21.35 0 0 1 7.5 5.71c.69.79.56 2.02-.21 2.68-.78.65-1.97.57-2.67-.2a17.92 17.92 0 0 0-13.8-6.41c-8.86 0-16.43 6.4-17.9 15.13-.08.97-.9 1.75-1.88 1.75l-6.96-.04h-.21a1.92 1.92 0 0 1-1.68-2.1 29.2 29.2 0 0 1 9.59-18.2 28.7 28.7 0 0 1 40.87 2.67c.7.78.62 1.97-.16 2.67-.82.7-2 .62-2.7-.17a25.24 25.24 0 0 0-8.52-6.4 24.94 24.94 0 0 0-10.37-2.23A25.04 25.04 0 0 0 4.18 24.8h3.15Z" fill="#E65545" class="shape"></path><path id="shape-2" d="M40.02 20.07c.7.78.61 1.98-.17 2.67-.78.7-1.96.62-2.66-.16a11.4 11.4 0 0 0-3.8-2.88 11.3 11.3 0 0 0-15.53 7.48c-.3 1-1.32 1.6-2.34 1.36a1.95 1.95 0 0 1-1.35-2.3 14.94 14.94 0 0 1 14.58-11.3 15 15 0 0 1 6.19 1.31 15.2 15.2 0 0 1 5.08 3.82Z" fill="#363D40" class="shape"></path><path id="shape-3" d="M42.4 41.78a1.9 1.9 0 1 1 2.86 2.5 21.62 21.62 0 0 1-7.5 5.64 21.84 21.84 0 0 1-23.26-3.17A22.1 22.1 0 0 1 6.96 33.2c0-1.03.86-1.9 1.93-1.9h6.96c.33 0 .66.09.9.25.53.2.94.66 1.1 1.28a11.3 11.3 0 0 0 3.98 6.12 11.26 11.26 0 0 0 6.92 2.34c1.64 0 3.2-.37 4.63-.98a11.3 11.3 0 0 0 3.81-2.84 1.89 1.89 0 0 1 2.83 2.5 14.97 14.97 0 0 1-20.48 1.98 15.27 15.27 0 0 1-4.96-6.82l-3.32-.04c1.01 3.4 3 6.45 5.7 8.75A18.1 18.1 0 0 0 36.2 46.5c2.38-1.1 4.5-2.71 6.18-4.72h.02Z" fill="#2A4B8C" class="shape"></path><path id="shape-4" d="M47.63 46.59c.7-.78 1.89-.87 2.7-.2.79.69.87 1.88.17 2.66a28.8 28.8 0 0 1-40.92 2.67 29.05 29.05 0 0 1-9.54-18.2 1.9 1.9 0 1 1 3.77-.46 25.25 25.25 0 0 0 8.27 15.83 25.18 25.18 0 0 0 16.67 6.33c7.25 0 14.14-3.15 18.88-8.63Z" fill="#1196D9" class="shape"></path></g><path id="text" d="M144.54 30.97c.58-2.55 3.07-3.58 5.5-3.62 2.16-.08 2.49-2.47 1.01-3.2-.7-.34-1.96-.21-2.62-.09-1.43.2-2.74.74-3.85 1.69l-.12.08c-.02-.5-.22-1-.57-1.36-.66-.66-1.64-.57-2.3-.04-.45.37-.65.9-.65 1.48v15c0 .5.12 1.03.45 1.4.7.74 2.21.7 2.78-.12a2 2 0 0 0 .37-1.28v-9.94Zm-29.08 9.98V18.4c0-.2-.04-.41-.08-.58a1.75 1.75 0 0 0-2.87-.9 1.9 1.9 0 0 0-.57.9c-.04.17-.04.37-.04.58v22.56c-.06.58.17 1.15.61 1.52a1.8 1.8 0 0 0 2.34 0c.28-.24.45-.57.53-.94.04-.16.08-.37.08-.58v-.01ZM80.07 16.7c-1.97-.5-4-.62-6.02-.37-5.36.8-9.7 4.76-10.97 10.03-1.52 6.33 1.39 12.74 7.29 15.46a15.07 15.07 0 0 0 9.87.74 13.8 13.8 0 0 0 5.6-3.04c.17-.17.3-.3.38-.42.49-.7.45-1.52-.13-2.1a1.76 1.76 0 0 0-1.72-.53c-.4.09-.73.3-1.02.54a9.7 9.7 0 0 1-3.64 2.18c-2.46.78-5.41.7-7.79-.41-4.67-2.18-6.67-7.65-5.03-12.62a9.62 9.62 0 0 1 7.2-6.42c2.01-.37 4.3-.16 6.19.66.99.45 1.9 1.08 2.66 1.85l.45.33c.2.12.37.16.53.2.62.17 1.27 0 1.68-.4.45-.42.62-1.03.45-1.6 0-.17-.08-.3-.16-.46-.25-.37-.61-.7-.9-.99a12.99 12.99 0 0 0-4.92-2.63Zm22.94 11.84c1.8 1.64 2.34 3.54 2.09 5.92a6.25 6.25 0 0 1-1.43 3.33 6.04 6.04 0 0 1-8.6.45c-1.48-1.44-1.97-3.08-1.93-5.1a6 6 0 0 1 9.87-4.6Zm-12.2 9.9a9.95 9.95 0 0 0 4.13 3.79 10.56 10.56 0 0 0 8.85-.2 9.75 9.75 0 0 0 3.23-2.84 9.38 9.38 0 0 0 1.77-4.73 9.4 9.4 0 0 0-1.8-6.74c-3.65-4.6-10-5.35-14.38-1.44a9.5 9.5 0 0 0-3.07 6.2 9.76 9.76 0 0 0 1.26 5.97l.01-.01Zm94.4-12.49v-7.6c0-.58-.16-1.07-.57-1.44a1.85 1.85 0 0 0-2.37 0c-.41.37-.62.86-.62 1.44V40.9c0 .2.04.41.08.58.2.86.86 1.23 1.68 1.31.82-.08 1.44-.45 1.68-1.31.04-.25.08-.45.08-.7a8.59 8.59 0 0 0 3.98 2.06c2.41.4 4.5.12 6.63-1.16a9.94 9.94 0 0 0 2.79-2.91c1.82-3.2 1.9-7.09.24-10.36-1.3-2.22-2.95-3.7-5.49-4.4a9.07 9.07 0 0 0-6.22.62c-.74.4-1.23.78-1.89 1.31v.01Zm8.32 1.81c2.05 1.27 2.82 3.33 2.82 5.63-.04 1.81-.36 3.17-1.51 4.56-1 1.2-2.5 1.85-4.06 1.77a5.27 5.27 0 0 1-5.16-3.5 8.65 8.65 0 0 1-.16-5.09 5.8 5.8 0 0 1 2.05-3.08 5.78 5.78 0 0 1 6.02-.29ZM174 28.91a2 2 0 0 0-.38-.53c-1.76-1.77-5.49-1.4-7.25.04-.73.7-1.64.94-2.45.24-.45-.4-.66-.9-.54-1.52.2-1.19 1.8-2.1 2.83-2.55 3.15-1.35 7.45-1.06 9.83 1.11a7.36 7.36 0 0 1 2.05 4.32c.08.53.12 1.15.12 1.73v9.12c0 .2-.04.41-.08.58-.33 1.35-1.93 1.85-2.91.86-.2-.16-.33-.41-.45-.66a2.07 2.07 0 0 1-.08-.49 8.76 8.76 0 0 1-6.76 1.8 6.4 6.4 0 0 1-1.27-.32 5.09 5.09 0 0 1-2.05-1.2 5.74 5.74 0 0 1-1.64-6.08c1.15-3.37 4.3-4.4 7.5-4.23 1.51.04 2.99.33 4.1.5 0-.91-.09-1.9-.58-2.72h.01Zm.56 8.22v-2.3c-.86-.2-2-.37-3.19-.45-1.76-.08-4.59.04-5.04 2.14a2.65 2.65 0 0 0 1.85 3.04c2.13.7 5.12-.58 6.38-2.43Zm-42.51-8.59c1.76 1.64 2.3 3.54 2.05 5.96a6.13 6.13 0 0 1-1.44 3.29 6.04 6.04 0 0 1-8.6.45 6.52 6.52 0 0 1-1.88-5.1 6.3 6.3 0 0 1 2.09-4.6 6.05 6.05 0 0 1 7.78 0Zm-12.25 9.9a9.44 9.44 0 0 0 4.14 3.79c2.9 1.23 6.02 1.2 8.85-.2a9.58 9.58 0 0 0 5.04-7.56 9.58 9.58 0 0 0-1.85-6.71c-3.6-4.6-9.95-5.34-14.37-1.44a9.41 9.41 0 0 0-3.08 6.17c-.16 2.18.2 4.07 1.27 5.96v-.01Zm39.36 2.47V18.35c0-.25-.04-.41-.08-.62a1.48 1.48 0 0 0-.53-.86c-.66-.6-1.67-.6-2.33 0-.3.24-.5.53-.58.9-.04.17-.08.37-.08.58V40.9c0 .2.04.41.08.58.08.37.25.7.53.94.66.58 1.72.58 2.38 0 .25-.24.45-.57.53-.94.04-.17.08-.37.08-.58v.01Z" fill="#363D40"></path></g></svg>
  296.                                 </a>
  297.                             </div>
  298.                             <input type="hidden" id="designUrl" value="">
  299.                             <input type="hidden" id="designColorLabTokenProduct" value="{{ cartDetail.colorLabTokenProduct }}">
  300.                             <input type="hidden" id="designColorLabIdProduct" value="{{ cartDetail.colorLabIdProduct }}">
  301.                         {% else %}
  302.                             <div class="txt_selectca" style=""> <a href="#" style="" class="crelloBtnImport crelloBtnImportNow btnMobileImport" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  303.                             <input type="checkbox" name="isFontBlanc" class="hide" checked="checked" value="{{ cartDetail.mauvaisFormat }}" id="isFontBlanc">
  304.                             <input type="file" multiple id="fileDesign" name="fileDesign[]" style="display: none;"  accept="image/png, image/jpeg, image/jpg, application/pdf" >
  305.                             <input type="hidden" id="fileDesignUrl" value="{{ cartDetail.filePapier }}">
  306.                             <input type="hidden" id="fileDesignFirstImage" value="{{ cartDetail.filePapierFirstImage }}">
  307.                         {% endif %}
  308.                     {% endif %}
  309.                 {% endif %}
  310.             </div>
  312.             <div class="mt-3 text-center" {% if cartDetail.id is defined %}id="addToCartCrelloCartDetailMobile"{% endif %}>
  313.                 <a href="#" class="btnNoir pl-5 pr-5" id="addToCartCrello" style="{% if cartDetail.id is not defined %}display:none;{% endif %}">{{ 'Continuer' | trans({}, "productTranslate") }}</a>
  314.             </div>
  315.             <div id="blockMarginBottom"></div>
  316.             <div id="blockDetailMobile">
  318.             </div>
  319.         </div>
  320.         <div class="modal mdl1 verificationModalMobile"  id="verificationModal" tabindex="-1" role="dialog">
  321.             <div class="modal-dialog" style="margin-top: 6vw;" role="document">
  322.                 <div class="modal-content">
  323.                     <div class="modal-body">
  324.                         <div class="row">
  325.                             <div class="col-md-8 pb-3">
  326.                                 <img src="{{ asset('/images/carte_fond_perdu.png') }}">
  327.                             </div>
  328.                             <div class="col-md-4">
  329.                                 <h4 style="font-weight: 700;">{{ 'Fond perdu' | trans({}, "productTranslate") }}</h4>
  330.                                 <p style="text-align: left;font-size: 14px;color: #6a6666; line-height: 20px;">{{ "Avec le fond perdu, vous ĂŞtes certain de ne pas retrouver de blancs sur votre design imprimĂ©. Nous imprimons alors jusqu\'au bord du papier ou de la carte." | trans({}, "productTranslate") }}</p>
  331.                                 <h4 style="font-weight: 700;">{{ 'RĂ©gler le fond perdu' | trans({}, "productTranslate") }}</h4>
  332.                                 <ol style="text-align: left;font-size: 14px;color: #6a6666;padding-left: 10px;">
  333.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Etendez votre arrière-plan au-delĂ  des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  334.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Ne mettez aucun texte ou graphique important en dehors des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  335.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'VĂ©rifiez chaque page que vous imprimez.' | trans({}, "productTranslate") }}</li>
  336.                                 </ol>
  337.                             </div>
  339.                         </div>
  340.                     </div>
  341.                     <div class="modal-footer" style="display: block">
  342.                         <div class="btnVerificationModalMobile" style="">
  343.                             <a class="btnVerificationModalMobile2" data-dismiss="modal" aria-label="Close" href="#" style="">{{ "J\'ai compris" | trans({}, "productTranslate") }}</a>
  344.                             <a class="btnVerificationModalMobile1" style="" href="https://blog.copees.com/2021/09/28/les-traits-de-coupe-avec-fonds-perdus-quest-ce-que-cest/" target="_blank">{{ 'Nos conseils pour les fonds perdus' | trans({}, "productTranslate") }}</a>
  345.                         </div>
  346.                     </div>
  347.                 </div>
  348.             </div>
  349.         </div>
  350.     {% else %}
  351.         <style>
  352.             header,.darkHeader {
  353.                 background-color: #fff!important;
  354.                 border-bottom: 1px solid #D9D9D9;
  355.                 position: relative;
  356.             }
  357.             input#searchProductMenu {
  358.                 width: 600px !important;
  359.                 max-width: 600px;
  360.                 border: 1px solid #D9D9D9;
  361.                 border-radius: 10px;
  362.             }
  363.         </style>
  364.         {#desctop#}
  365.         <div class="productIndexOptionNewDescktop" >
  366.             <div class="row" id="productIndexOptionNew">
  367.                 <div class="col-12" >
  368.                     <p class="pLink">
  369.                         <span><a class="spanLink" href="{{ path('accueil') }}">Copees</a></span>
  370.                         <span>
  371.                     <svg xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8" fill="none">
  372.                         <path d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z" fill="#323232"/>
  373.                     </svg>
  374.                 </span>
  375.                         <span ><a class="spanLink" href="{{ path('besoin_produits') }}">Communiquer</a></span>
  376.                         <span>
  377.                     <svg xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8" fill="none">
  378.                         <path d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z" fill="#323232"/>
  379.                     </svg>
  380.                 </span>
  381.                         <span class="spanLink2">{{ product.getTypeProductName() }}</span>
  382.                     </p>
  383.                 </div>
  384.                 <div class="leftBlock" >
  385.                     <div class="bx_select row_select_ca">
  386.                         <div class="d-flex selectProductNew">
  387.                             <div class="f_family">
  388.                                 <a aria-controls="select_row_ca_add" aria-expanded="false" role="button" href="#select_row_ca_add" data-toggle="collapse" class="btn btn-primary inputSelectProduct collapsed">
  389.                            <span style="padding:0px;display: inline;font-size: 18px;font-weight:400;" id="titreProductSpan1">
  390.                                {% if cartDetail  %}
  391.                                    {% if cartDetail.product.isColorLab %}
  392.                                    {% else %}{{ 'Impression' | trans({}, "productTranslate") }}
  393.                                    {% endif %}
  394.                                {% else %}
  395.                                    {% if app.request.get('product') %}
  396.                                        {% set productById = getProductById(app.request.get('product')) %}
  397.                                        {% if productById  and productById.isColorLab %}
  398.                                        {% else %}{{ 'Impression' | trans({}, "productTranslate") }}
  399.                                        {% endif%}
  400.                                    {% endif %}
  401.                                {% endif %}
  402.                            </span>
  403.                                     <span style="padding:0px;display: inline;font-size: 18px;font-weight:400;" id="titreProduct">{% if cartDetail  %}{{ cartDetail.product.getTypeProductName() | trans({}, "productTranslate") }} {% else %}{% if app.request.get('product') %}{{ getNameProduct(app.request.get('product')) | trans({}, "productTranslate") }}{% endif %}{% endif %}</span>
  404.                                 </a>
  405.                                 <div class="collapse" id="select_row_ca_add" style="">
  406.                                     <div class="row_select_ca02 row">
  407.                                         <div class="col-12 pl-0 pr-0">
  408.                                             <h3>{{ "CrĂ©er & communiquer" | trans({}, "productTranslate") |raw }}</h3>
  409.                                             <div class=" bx_global_radio taille_full" style="max-width: 100%;">
  410.                                                 {% for item in getProductsWithoutPapier() %}
  411.                                                     <div class="taille tailleSelect">
  412.                                                         <input value="{{ item.id }}" data-new-page="1" data-url="{{ path('product_option') }}?product={{ item.id }}" type="radio" name="productOption" class="select_ca_btn01" id="cad{{ item.id }}"{% if cartDetail  and cartDetail.product.id == item.id %} checked="checked{% else %}{% if app.request.get('product') and app.request.get('product') == item.id %} checked="checked{% endif %}{% endif %}">
  413.                                                         <label for="cad{{ item.id }}" class="block taille ">{{ item.titre | trans({}, "productTranslate") }}</label>
  414.                                                     </div>
  415.                                                 {% endfor %}
  416.                                             </div>
  417.                                         </div>
  418.                                     </div>
  419.                                 </div>
  420.                             </div>
  421.                         </div>
  422.                     </div>
  423.                     <div class="col-12 p-0">
  424.                         <p class="lienSavoirPlusP mb-2"><a href="{{ product.lienSavoirPlus }}"  {% if product.lienSavoirPlusIsExtern %} target="_blank"{% endif %}>En savoir plus</a> </p>
  425.                     </div>
  426.                     <div class="row">
  427.                         <div class="col-md-12 imageProduitNewOption"  style="margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew1 }});">
  428.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew1 }};font-size: {{ product.titreBlocOptionProductTailleNew1 }};color: {{ product.titreBlocOptionProductCouleurNew1 }};">{{ product.titreBlocOptionProductNew1 }}</p>
  429.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew1 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew1 }};color: {{ product.titreBtnBlocOptionProductCouleurNew1 }}; background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew1 }};"  href="{{ product.linkBtnBlocOptionProductNew1 }}" {% if product.linkBtnBlocOptionProductNew1IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew1 }}</a>
  430.                         </div>
  431.                         <div class="col-md-12 imageProduitNewOption"  style="margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew2 }});">
  432.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew2 }};font-size: {{ product.titreBlocOptionProductTailleNew2 }};color: {{ product.titreBlocOptionProductCouleurNew2 }};">{{ product.titreBlocOptionProductNew2 }}</p>
  433.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew2 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew2 }};color: {{ product.titreBtnBlocOptionProductCouleurNew2 }};  background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew2 }};"  href="{{ product.linkBtnBlocOptionProductNew2 }}" {% if product.linkBtnBlocOptionProductNew2IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew2 }}</a>
  434.                         </div>
  435.                         <div class="col-md-6 imageProduitNewOption"  style="margin-right:12px;margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew3 }});">
  436.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew3 }};font-size: {{ product.titreBlocOptionProductTailleNew3 }};color: {{ product.titreBlocOptionProductCouleurNew3 }};">{{ product.titreBlocOptionProductNew3 }}</p>
  437.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew3 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew3 }};color: {{ product.titreBtnBlocOptionProductCouleurNew3 }}; background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew3 }};" href="{{ product.linkBtnBlocOptionProductNew3 }}" {% if product.linkBtnBlocOptionProductNew3IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew3 }}</a>
  438.                         </div>
  439.                         <div class="col-md-5 imageProduitNewOption"  style="margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew4 }});">
  440.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew4 }};font-size: {{ product.titreBlocOptionProductTailleNew4 }};color: {{ product.titreBlocOptionProductCouleurNew4 }};">{{ product.titreBlocOptionProductNew4 }}</p>
  441.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew4 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew4 }};color: {{ product.titreBtnBlocOptionProductCouleurNew4 }}; background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew4 }};" href="{{ product.linkBtnBlocOptionProductNew4 }}" {% if product.linkBtnBlocOptionProductNew4IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew4 }}</a>
  442.                         </div>
  443.                     </div>
  444.                     <div id="optionsBloc1">
  446.                     </div>
  447.                     <div class="row">
  448.                         <div class="col-md-12 besoinProduitNewOption"  style="">
  449.                             <p>Vous ne trouvez pas votre besoin ?</p>
  450.                             <a href="{{ product.lienCDemandeDevis }}" {% if product.lienCDemandeDevisIsExtern %} target="_blank"{% endif %}>Demande de devis</a>
  451.                         </div>
  452.                     </div>
  455.                 </div>
  456.                 <div class=" centerBlock">
  457.                     <div id="optionsBloc2">
  459.                     </div>
  461.                     <div id="quantityBlocNew" class="oghtml6">
  463.                     </div>
  465.                     <div class="row_select_ca1 oghtml5">
  466.                         <div class="Comm_adress">
  467.                             <h3>{{ 'Votre adresse' | trans({}, "productTranslate") }}</h3>
  468.                             <div role="group" class="form-group">
  469.                                 <input id="addresseLiv" name="addresseLiv" type="text" class="form-control adresee-google-map" placeholder=" "
  470.                                         {% if app.session.get('addresseAdresse') %} value="{{ app.session.get('addresseAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','adresse') }} {% endif %} >
  471.                                 <label for="addresseLiv" class="d-block form-control-placeholder"> {{ 'Commencez Ă  saisir la première ligne de votre adresse' | trans({}, "productTranslate") }}</label>
  472.                                 <input type="hidden" id="longLiv"  {% if app.session.get('longiAdresse') %} value="{{ app.session.get('longiAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','longi') }}{% endif %} name="longLiv">
  473.                                 <input type="hidden" id="latLiv" {% if app.session.get('latAdresse') %} value="{{ app.session.get('latAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','lat') }}{% endif %} name="latLiv">
  474.                                 <input type="hidden" id="codePostalLiv" {% if app.session.get('postalcodeAdresse') %} value="{{ app.session.get('postalcodeAdresse') }}" {% else %} {{ _self.value(cart,'adresseLivraison','codePostal') }}{% endif %} name="codePostalLiv">
  475.                                 <input type="hidden" id="CountryLiv" value="{% if app.session.get('CountryLiv') %}{{ app.session.get('CountryLiv') }}{% else %}{% if cart.adresseLivraison.country is defined  %}{{ cart.adresseLivraison.country }}{% endif %}{% endif %}" name="CountryLiv">
  476.                                 <input type="hidden" value="{% if app.session.get('CountryCodeLiv') %}{{ app.session.get('CountryCodeLiv') }}{% else %}{% if cart.adresseLivraison.countryCode is defined %}{{ cart.adresseLivraison.countryCode }}{% endif %}{% endif%}" name="CountryCodeLiv" id="CountryCodeLiv">
  477.                                 <input type="hidden" id="cityLiv" {% if app.session.get('cityAdresse') %} value="{{ app.session.get('cityAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','city') }}{% endif %} name="cityLiv">
  478.                             </div>
  479.                         </div>
  480.                         <div id="modeLivraison">
  482.                         </div>
  483.                         {% if cartDetail.id is not defined  %}
  484.                             <div id="crelloButtons" class="crelloButtonsBlock crelloButtonsNew">
  486.                             </div>
  487.                         {% endif %}
  489.                         {% if cartDetail  %}
  490.                             {% include 'front/product-option/productPreviewModal.html.twig'  with {'isMobileInterface':isMobileInterface } %}
  491.                             {% if cartDetail.product.typeProduct  in [ constant('App\\Entity\\Product::PHOTOS')]%}
  492.                                 <div class="txt_selectca mb-2" style=""> <a href="#" style="" class="crelloBtnImportPhotos crelloBtnImportNow" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  493.                             {% else %}
  494.                                 {% if cartDetail.templateIdCrello  %}
  495.                                     <div class="txt_selectca mb-2" style="min-height: 43px;"> <a href="#" style="color: #fff;" class="crelloBtn" >{{ 'Vous pouvez Ă©diter votre crĂ©ation sur' | trans({}, "productTranslate") }} <img  width="130px"  src="{{ asset('/images/ininfoselectF.svg') }}" ></a></div>
  496.                                     <input type="hidden" id="designUrl" value="">
  497.                                     <input type="hidden" id="designType" value="{{ cartDetail.productAttribute.format.designTypeCrello }}">
  498.                                     <input type="hidden" id="customDesignType" value="{{ cartDetail.productAttribute.format.designTypeCustomCrello }}">
  499.                                     <input type="hidden" id="sideBarDesignType" value="{{ cartDetail.productAttribute.format.designTypeSideBarCrello }}">
  500.                                 {% elseif cartDetail.colorLabTokenProduct and cartDetail.colorLabIdProduct %}
  501.                                     <div class="txt_selectca" style="min-height: 43px;">
  502.                                         <a href="#" style="color: #fff;" class="crelloBtn" >
  503.                                             {{ 'Vous pouvez Ă©diter votre crĂ©ation sur' | trans({}, "productTranslate") }}
  504.                                             <svg viewBox="0 0 201 60" xmlns="http://www.w3.org/2000/svg" class="c-navbar__logo" style=" width: 95px;margin-left: 10px;"><g fill-rule="nonzero" fill="none"><g id="shape" fill-rule="nonzero" fill="none"><path id="shape-1" d="M7.33 24.8A22.05 22.05 0 0 1 28.67 7.9c3.28 0 6.39.75 9.18 2.06a21.35 21.35 0 0 1 7.5 5.71c.69.79.56 2.02-.21 2.68-.78.65-1.97.57-2.67-.2a17.92 17.92 0 0 0-13.8-6.41c-8.86 0-16.43 6.4-17.9 15.13-.08.97-.9 1.75-1.88 1.75l-6.96-.04h-.21a1.92 1.92 0 0 1-1.68-2.1 29.2 29.2 0 0 1 9.59-18.2 28.7 28.7 0 0 1 40.87 2.67c.7.78.62 1.97-.16 2.67-.82.7-2 .62-2.7-.17a25.24 25.24 0 0 0-8.52-6.4 24.94 24.94 0 0 0-10.37-2.23A25.04 25.04 0 0 0 4.18 24.8h3.15Z" fill="#E65545" class="shape"></path><path id="shape-2" d="M40.02 20.07c.7.78.61 1.98-.17 2.67-.78.7-1.96.62-2.66-.16a11.4 11.4 0 0 0-3.8-2.88 11.3 11.3 0 0 0-15.53 7.48c-.3 1-1.32 1.6-2.34 1.36a1.95 1.95 0 0 1-1.35-2.3 14.94 14.94 0 0 1 14.58-11.3 15 15 0 0 1 6.19 1.31 15.2 15.2 0 0 1 5.08 3.82Z" fill="#363D40" class="shape"></path><path id="shape-3" d="M42.4 41.78a1.9 1.9 0 1 1 2.86 2.5 21.62 21.62 0 0 1-7.5 5.64 21.84 21.84 0 0 1-23.26-3.17A22.1 22.1 0 0 1 6.96 33.2c0-1.03.86-1.9 1.93-1.9h6.96c.33 0 .66.09.9.25.53.2.94.66 1.1 1.28a11.3 11.3 0 0 0 3.98 6.12 11.26 11.26 0 0 0 6.92 2.34c1.64 0 3.2-.37 4.63-.98a11.3 11.3 0 0 0 3.81-2.84 1.89 1.89 0 0 1 2.83 2.5 14.97 14.97 0 0 1-20.48 1.98 15.27 15.27 0 0 1-4.96-6.82l-3.32-.04c1.01 3.4 3 6.45 5.7 8.75A18.1 18.1 0 0 0 36.2 46.5c2.38-1.1 4.5-2.71 6.18-4.72h.02Z" fill="#2A4B8C" class="shape"></path><path id="shape-4" d="M47.63 46.59c.7-.78 1.89-.87 2.7-.2.79.69.87 1.88.17 2.66a28.8 28.8 0 0 1-40.92 2.67 29.05 29.05 0 0 1-9.54-18.2 1.9 1.9 0 1 1 3.77-.46 25.25 25.25 0 0 0 8.27 15.83 25.18 25.18 0 0 0 16.67 6.33c7.25 0 14.14-3.15 18.88-8.63Z" fill="#1196D9" class="shape"></path></g><path id="text" d="M144.54 30.97c.58-2.55 3.07-3.58 5.5-3.62 2.16-.08 2.49-2.47 1.01-3.2-.7-.34-1.96-.21-2.62-.09-1.43.2-2.74.74-3.85 1.69l-.12.08c-.02-.5-.22-1-.57-1.36-.66-.66-1.64-.57-2.3-.04-.45.37-.65.9-.65 1.48v15c0 .5.12 1.03.45 1.4.7.74 2.21.7 2.78-.12a2 2 0 0 0 .37-1.28v-9.94Zm-29.08 9.98V18.4c0-.2-.04-.41-.08-.58a1.75 1.75 0 0 0-2.87-.9 1.9 1.9 0 0 0-.57.9c-.04.17-.04.37-.04.58v22.56c-.06.58.17 1.15.61 1.52a1.8 1.8 0 0 0 2.34 0c.28-.24.45-.57.53-.94.04-.16.08-.37.08-.58v-.01ZM80.07 16.7c-1.97-.5-4-.62-6.02-.37-5.36.8-9.7 4.76-10.97 10.03-1.52 6.33 1.39 12.74 7.29 15.46a15.07 15.07 0 0 0 9.87.74 13.8 13.8 0 0 0 5.6-3.04c.17-.17.3-.3.38-.42.49-.7.45-1.52-.13-2.1a1.76 1.76 0 0 0-1.72-.53c-.4.09-.73.3-1.02.54a9.7 9.7 0 0 1-3.64 2.18c-2.46.78-5.41.7-7.79-.41-4.67-2.18-6.67-7.65-5.03-12.62a9.62 9.62 0 0 1 7.2-6.42c2.01-.37 4.3-.16 6.19.66.99.45 1.9 1.08 2.66 1.85l.45.33c.2.12.37.16.53.2.62.17 1.27 0 1.68-.4.45-.42.62-1.03.45-1.6 0-.17-.08-.3-.16-.46-.25-.37-.61-.7-.9-.99a12.99 12.99 0 0 0-4.92-2.63Zm22.94 11.84c1.8 1.64 2.34 3.54 2.09 5.92a6.25 6.25 0 0 1-1.43 3.33 6.04 6.04 0 0 1-8.6.45c-1.48-1.44-1.97-3.08-1.93-5.1a6 6 0 0 1 9.87-4.6Zm-12.2 9.9a9.95 9.95 0 0 0 4.13 3.79 10.56 10.56 0 0 0 8.85-.2 9.75 9.75 0 0 0 3.23-2.84 9.38 9.38 0 0 0 1.77-4.73 9.4 9.4 0 0 0-1.8-6.74c-3.65-4.6-10-5.35-14.38-1.44a9.5 9.5 0 0 0-3.07 6.2 9.76 9.76 0 0 0 1.26 5.97l.01-.01Zm94.4-12.49v-7.6c0-.58-.16-1.07-.57-1.44a1.85 1.85 0 0 0-2.37 0c-.41.37-.62.86-.62 1.44V40.9c0 .2.04.41.08.58.2.86.86 1.23 1.68 1.31.82-.08 1.44-.45 1.68-1.31.04-.25.08-.45.08-.7a8.59 8.59 0 0 0 3.98 2.06c2.41.4 4.5.12 6.63-1.16a9.94 9.94 0 0 0 2.79-2.91c1.82-3.2 1.9-7.09.24-10.36-1.3-2.22-2.95-3.7-5.49-4.4a9.07 9.07 0 0 0-6.22.62c-.74.4-1.23.78-1.89 1.31v.01Zm8.32 1.81c2.05 1.27 2.82 3.33 2.82 5.63-.04 1.81-.36 3.17-1.51 4.56-1 1.2-2.5 1.85-4.06 1.77a5.27 5.27 0 0 1-5.16-3.5 8.65 8.65 0 0 1-.16-5.09 5.8 5.8 0 0 1 2.05-3.08 5.78 5.78 0 0 1 6.02-.29ZM174 28.91a2 2 0 0 0-.38-.53c-1.76-1.77-5.49-1.4-7.25.04-.73.7-1.64.94-2.45.24-.45-.4-.66-.9-.54-1.52.2-1.19 1.8-2.1 2.83-2.55 3.15-1.35 7.45-1.06 9.83 1.11a7.36 7.36 0 0 1 2.05 4.32c.08.53.12 1.15.12 1.73v9.12c0 .2-.04.41-.08.58-.33 1.35-1.93 1.85-2.91.86-.2-.16-.33-.41-.45-.66a2.07 2.07 0 0 1-.08-.49 8.76 8.76 0 0 1-6.76 1.8 6.4 6.4 0 0 1-1.27-.32 5.09 5.09 0 0 1-2.05-1.2 5.74 5.74 0 0 1-1.64-6.08c1.15-3.37 4.3-4.4 7.5-4.23 1.51.04 2.99.33 4.1.5 0-.91-.09-1.9-.58-2.72h.01Zm.56 8.22v-2.3c-.86-.2-2-.37-3.19-.45-1.76-.08-4.59.04-5.04 2.14a2.65 2.65 0 0 0 1.85 3.04c2.13.7 5.12-.58 6.38-2.43Zm-42.51-8.59c1.76 1.64 2.3 3.54 2.05 5.96a6.13 6.13 0 0 1-1.44 3.29 6.04 6.04 0 0 1-8.6.45 6.52 6.52 0 0 1-1.88-5.1 6.3 6.3 0 0 1 2.09-4.6 6.05 6.05 0 0 1 7.78 0Zm-12.25 9.9a9.44 9.44 0 0 0 4.14 3.79c2.9 1.23 6.02 1.2 8.85-.2a9.58 9.58 0 0 0 5.04-7.56 9.58 9.58 0 0 0-1.85-6.71c-3.6-4.6-9.95-5.34-14.37-1.44a9.41 9.41 0 0 0-3.08 6.17c-.16 2.18.2 4.07 1.27 5.96v-.01Zm39.36 2.47V18.35c0-.25-.04-.41-.08-.62a1.48 1.48 0 0 0-.53-.86c-.66-.6-1.67-.6-2.33 0-.3.24-.5.53-.58.9-.04.17-.08.37-.08.58V40.9c0 .2.04.41.08.58.08.37.25.7.53.94.66.58 1.72.58 2.38 0 .25-.24.45-.57.53-.94.04-.17.08-.37.08-.58v.01Z" fill="#363D40"></path></g></svg>
  505.                                         </a>
  506.                                     </div>
  507.                                     <input type="hidden" id="designUrl" value="">
  508.                                     <input type="hidden" id="designColorLabTokenProduct" value="{{ cartDetail.colorLabTokenProduct }}">
  509.                                     <input type="hidden" id="designColorLabIdProduct" value="{{ cartDetail.colorLabIdProduct }}">
  510.                                 {% else %}
  511.                                     <div class="txt_selectca" style=""> <a href="#" style="" class="crelloBtnImport crelloBtnImportNow" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  512.                                     <input type="checkbox" name="isFontBlanc" class="hide" checked="checked" value="{{ cartDetail.mauvaisFormat }}" id="isFontBlanc">
  513.                                     <input type="file" multiple id="fileDesign" name="fileDesign[]" style="display: none;"  accept="image/png, image/jpeg, image/jpg, application/pdf" >
  514.                                     <input type="hidden" id="fileDesignUrl" value="{{ cartDetail.filePapier }}">
  515.                                     <input type="hidden" id="fileDesignFirstImage" value="{{ cartDetail.filePapierFirstImage }}">
  516.                                 {% endif %}
  517.                             {% endif %}
  518.                         {% endif %}
  519.                     </div>
  520.                 </div>
  521.                 <div class=" rightBlock">
  522.                     <div id="blockPanierNew">
  524.                     </div>
  525.                     <div class="nousContacter" style="margin-bottom: 34px;">
  526.                         <div id="nosLovesPrinter">
  528.                         </div>
  529.                         <h3>Nous contacter</h3>
  530.                         <div class="nousContacterContent">
  531.                             <a href="#"  data-toggle="modal" data-target="#contactModal" >
  532.                         <span>
  533.                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  534.                                 <g clip-path="url(#clip0_64_809)">
  535.                                 <path d="M6.54 5C6.6 5.89 6.75 6.76 6.99 7.59L5.79 8.79C5.38 7.59 5.12 6.32 5.03 5H6.54ZM16.4 17.02C17.25 17.26 18.12 17.41 19 17.47V18.96C17.68 18.87 16.41 18.61 15.2 18.21L16.4 17.02ZM7.5 3H4C3.45 3 3 3.45 3 4C3 13.39 10.61 21 20 21C20.55 21 21 20.55 21 20V16.51C21 15.96 20.55 15.51 20 15.51C18.76 15.51 17.55 15.31 16.43 14.94C16.33 14.9 16.22 14.89 16.12 14.89C15.86 14.89 15.61 14.99 15.41 15.18L13.21 17.38C10.38 15.93 8.06 13.62 6.62 10.79L8.82 8.59C9.1 8.31 9.18 7.92 9.07 7.57C8.7 6.45 8.5 5.25 8.5 4C8.5 3.45 8.05 3 7.5 3Z" fill="#303030"/>
  536.                                 </g>
  537.                                 <defs>
  538.                                 <clipPath id="clip0_64_809">
  539.                                 <rect width="24" height="24" fill="white"/>
  540.                                 </clipPath>
  541.                                 </defs>
  542.                             </svg>
  543.                         </span>
  544.                                 <span>Par tĂ©lĂ©phone</span>
  545.                             </a>
  546.                             <a href="#" id="contactChat">
  547.                         <span>
  548.                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  549.                                <path d="M13 2V9H3.17L2 10.17V2H13ZM14 0H1C0.45 0 0 0.45 0 1V15L4 11H14C14.55 11 15 10.55 15 10V1C15 0.45 14.55 0 14 0ZM19 4H17V13H4V15C4 15.55 4.45 16 5 16H16L20 20V5C20 4.45 19.55 4 19 4Z" fill="#303030"/>
  550.                             </svg>
  551.                         </span>
  552.                                 <span>Via notre chat</span>
  553.                             </a>
  554.                             <a href="{{ product.lienCalandlyOptionProduct }}"  {% if product.lienCalandlyOptionProductIsExtern %} target="_blank"{% endif %} >
  555.                                 <span>
  556.                                     <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
  557.                                         <g clip-path="url(#clip0_64_815)">
  558.                                         <path d="M21.5 12.22C21.5 6.73 17.24 3 12.5 3C7.81 3 3.5 6.65 3.5 12.28C2.9 12.62 2.5 13.26 2.5 14V16C2.5 17.1 3.4 18 4.5 18H5.5V11.9C5.5 8.03 8.63 4.9 12.5 4.9C16.37 4.9 19.5 8.03 19.5 11.9V19H11.5V21H19.5C20.6 21 21.5 20.1 21.5 19V17.78C22.09 17.47 22.5 16.86 22.5 16.14V13.84C22.5 13.14 22.09 12.53 21.5 12.22Z" fill="#303030"/>
  559.                                         <path d="M9.5 14C10.0523 14 10.5 13.5523 10.5 13C10.5 12.4477 10.0523 12 9.5 12C8.94772 12 8.5 12.4477 8.5 13C8.5 13.5523 8.94772 14 9.5 14Z" fill="#303030"/>
  560.                                         <path d="M15.5 14C16.0523 14 16.5 13.5523 16.5 13C16.5 12.4477 16.0523 12 15.5 12C14.9477 12 14.5 12.4477 14.5 13C14.5 13.5523 14.9477 14 15.5 14Z" fill="#303030"/>
  561.                                         <path d="M18.5 11.03C18.02 8.18 15.54 6 12.55 6C9.51997 6 6.25997 8.51 6.51997 12.45C8.98997 11.44 10.85 9.24 11.38 6.56C12.69 9.19 15.38 11 18.5 11.03Z" fill="#303030"/>
  562.                                         </g>
  563.                                         <defs>
  564.                                         <clipPath id="clip0_64_815">
  565.                                         <rect width="24" height="24" fill="white" transform="translate(0.5)"/>
  566.                                         </clipPath>
  567.                                         </defs>
  568.                                     </svg>
  569.                                 </span>
  570.                                 <span>Prendre RDV avec un conseiller</span>
  571.                             </a>
  572.                         </div>
  573.                     </div>
  574.                     {#<div class="nosTips">#}
  575.                         {#<h3>Nos tips</h3>#}
  576.                         {#<div class="nosTipsContent">#}
  577.                             {#{% if product.tipsProduct|length > 0 %}#}
  578.                                 {#{% for item in product.tipsProduct %}#}
  579.                                     {#<div class="nosTipsItem">#}
  580.                                         {#<h4 class="nosTipsItemTitre">#}
  581.                                             {#{{ item.titre }}#}
  582.                                             {#<a href="#" class="nosTipsItemA">#}
  583.                                                 {#<svg class="vectorPlus activeVector" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">#}
  584.                                                     {#<path d="M11.25 6.75H6.75V11.25H5.25V6.75H0.75V5.25H5.25V0.75H6.75V5.25H11.25V6.75Z" fill="#323232"/>#}
  585.                                                 {#</svg>#}
  586.                                                 {#<svg class="vectorMoins" style="margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" width="12" height="2" viewBox="0 0 12 2" fill="none">#}
  587.                                                     {#<path d="M11.25 1.75H6.75H5.25H0.75V0.25H5.25H6.75H11.25V1.75Z" fill="#323232"/>#}
  588.                                                 {#</svg>#}
  589.                                             {#</a>#}
  590.                                         {#</h4>#}
  591.                                         {#<div  class="nosTipsItemDescription" style="display: none;">#}
  592.                                             {#{{ item.description|raw }}#}
  593.                                         {#</div>#}
  594.                                     {#</div>#}
  595.                                 {#{% endfor %}#}
  596.                             {#{% endif %}#}
  598.                         {#</div>#}
  599.                     {#</div>#}
  600.                 </div>
  601.             </div>
  602.             <div  id="section2OptionNew">
  603.                 <div class="row">
  604.                     <div class="col-md-12">
  605.                         <h2 class="h2productIndexOptionNew">Besoin d'un autre produit ?</h2>
  606.                     </div>
  607.                 </div>
  608.                 <div class="row" style="display: flex;justify-content: center;padding-bottom: 60px;">
  609.                     {% if product.recommendationProduct|length > 0 %}
  610.                         {% for item in  product.recommendationProduct %}
  611.                             <div class="col-6 col-md-3 col-lg-2 col-xl-2">
  612.                                 <div class="divProductImageCommande">
  613.                                     {% if item.titre %} <span>{{ item.titre }}</span>{% endif %}
  614.                                     <a style="position: relative;" class="new_option_product_a_img" href="{{ item.link }}">
  615.                                         <img class="" src="{{ asset('imageSite/'~item.image) }}">
  616.                                     </a>
  617.                                 </div>
  618.                             </div>
  619.                         {% endfor %}
  620.                     {% endif %}
  621.                 </div>
  622.             </div>
  623.             <div  id="section3OptionNew" style="background-image: url(/imageSite/{{ product.imageBloc1OptionProduct }});">
  624.                 <div class="section3OptionNewDiv">
  625.                     <h2 class="h2productIndexOptionNew h2productIndexOptionNewSection3">{{ product.titreBloc1OptionProduct }}</h2>
  626.                     <p>{{ product.descriptionBloc1OptionProduct|raw }}</p>
  627.                     {% if product.titreBtnBloc1OptionProduct %}<a href="{{ product.linkBtnBloc1OptionProduct }}" class="btnOptionNewBloc">{{ product.titreBtnBloc1OptionProduct }}</a>{% endif %}
  628.                 </div>
  629.             </div>
  630.             <div  id="section4OptionNew">
  631.                 <div class="section4OptionNewDiv">
  632.                     <h2 class="h2productIndexOptionNew h2productIndexOptionNewSection4">{{ product.titreBloc2OptionProduct }}</h2>
  633.                     <p>{{ product.descriptionBloc2OptionProduct|raw }}</p>
  634.                     <div class="" style="text-align: center ;text-align: center;margin-top: 45px;">
  635.                         {% if product.titreBtnBloc2OptionProduct %}<a href="{{ product.linkBtnBloc2OptionProduct }}" class="btnOptionNewBloc">{{ product.titreBtnBloc2OptionProduct }}</a>{% endif %}
  636.                     </div>
  637.                 </div>
  638.             </div>
  639.             <div  id="section3OptionNew" style="background-image: url(/imageSite/{{ product.imageBloc3OptionProduct }});">
  640.                 <div class="section3OptionNewDiv">
  641.                     <h2 class="h2productIndexOptionNew h2productIndexOptionNewSection3">{{ product.titreBloc3OptionProduct }}</h2>
  642.                     <p>{{ product.descriptionBloc3OptionProduct|raw }}</p>
  643.                     {% if product.titreBtnBloc3OptionProduct %}<a href="{{ product.linkBtnBloc3OptionProduct }}" class="btnOptionNewBloc">{{ product.titreBtnBloc3OptionProduct }}</a>{% endif %}
  644.                 </div>
  645.             </div>
  646.         </div>
  647.         <div class="modal mdl1"  id="verificationModal" tabindex="-1" role="dialog">
  648.             <div class="modal-dialog" style="margin-top: 6vw;" role="document">
  649.                 <div class="modal-content">
  650.                     <div class="modal-body">
  651.                         <div class="row">
  652.                             <div class="col-md-4">
  653.                                 <h4 style="font-weight: 700;">{{ 'Fond perdu' | trans({}, "productTranslate") }}</h4>
  654.                                 <p style="text-align: left;font-size: 14px;color: #6a6666; line-height: 20px;">{{ "Avec le fond perdu, vous ĂŞtes certain de ne pas retrouver de blancs sur votre design imprimĂ©. Nous imprimons alors jusqu\'au bord du papier ou de la carte." | trans({}, "productTranslate") }}</p>
  655.                                 <h4 style="font-weight: 700;">{{ 'RĂ©gler le fond perdu' | trans({}, "productTranslate") }}</h4>
  656.                                 <ol style="text-align: left;font-size: 14px;color: #6a6666;padding-left: 10px;">
  657.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Etendez votre arrière-plan au-delĂ  des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  658.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Ne mettez aucun texte ou graphique important en dehors des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  659.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'VĂ©rifiez chaque page que vous imprimez.' | trans({}, "productTranslate") }}</li>
  660.                                 </ol>
  661.                             </div>
  662.                             <div class="col-md-8">
  663.                                 <img src="{{ asset('/images/carte_fond_perdu.png') }}">
  664.                             </div>
  665.                         </div>
  666.                     </div>
  667.                     <div class="modal-footer" style="display: block">
  668.                         <div class="mt-4" style="display: flex;justify-content: space-evenly">
  669.                             <a class="close" data-dismiss="modal" aria-label="Close" href="#" style="padding: 10px 60px;color: #000;font-size: 16px;background: #F2F3F5;border-radius: 7px;">{{ "J\'ai compris" | trans({}, "productTranslate") }}</a>
  670.                             <a style="padding: 10px 60px;color: #000;font-size: 16px;background: #c7d0d8;border-radius: 7px;" href="https://blog.copees.com/2021/09/28/les-traits-de-coupe-avec-fonds-perdus-quest-ce-que-cest/" target="_blank">{{ 'Nos conseils pour les fonds perdus' | trans({}, "productTranslate") }}</a>
  671.                         </div>
  672.                     </div>
  673.                 </div>
  674.             </div>
  675.         </div>
  676.         {% include 'front/footer.html.twig' %}
  678.     {% endif %}
  685.     <div class="modal fade" id="exampleModal01" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  686.          style="display: none;" aria-hidden="true">
  687.         <div class="modal-dialog" role="document" style="margin-top: 4vw;">
  688.             <div class="modal-content nb_des nb_des_extra" style="border-radius: 0;">
  689.                 <div class="modal-header">
  690.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  691.                         <span aria-hidden="true">Ă—</span>
  692.                     </button>
  693.                 </div>
  694.                 <div class="modal-body" id="contentModalAddToCartCrello">
  696.                 </div>
  697.             </div>
  698.         </div>
  699.     </div>
  701.     <div class="modal mdlContact"  id="contactModal" tabindex="-1" role="dialog">
  702.         <div class="modal-dialog" style="margin-top: 6vw;" role="document">
  703.             <div class="modal-content">
  704.                 <div class="modal-header">
  705.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  706.                         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
  707.                             <rect width="30" height="30" rx="10" fill="black"/>
  708.                             <path d="M22 9.41L20.59 8L15 13.59L9.41 8L8 9.41L13.59 15L8 20.59L9.41 22L15 16.41L20.59 22L22 20.59L16.41 15L22 9.41Z" fill="white"/>
  709.                         </svg>
  710.                     </button>
  711.                 </div>
  712.                 <div class="contactModalImage"  style="background-image: url(/imageSite/{{ product.imageBlocTelOptionProduct }} );"></div>
  713.                 <div class="modal-body">
  714.                     <div class="contactModalDescription">
  715.                       {{ product.descriptionBlocTelOptionProduct|raw }}
  716.                     </div>
  717.                 </div>
  719.             </div>
  720.         </div>
  721.     </div>
  722.     <div class="modal mdl1"  id="outOfStockModal" tabindex="-1" role="dialog">
  723.         <div class="modal-dialog modal-lg" style="margin-top: 3vw;">
  724.             <div class="modal-content modalProduct modalProductAtributeStock">
  726.             </div>
  727.         </div>
  728.     </div>
  729.     <div class="elfsight-app-eaf5d12e-308e-4116-bee5-690b97eaae1f" data-elfsight-app-lazy></div>
  730.     <style>
  731.         .elfsight-app-eaf5d12e-308e-4116-bee5-690b97eaae1f {
  732.             display: none;
  733.         }
  734.     </style>
  735.     <script src="https://static.elfsight.com/platform/platform.js" async></script>
  736.     <style>
  737.         footer {
  738.             padding-top: 0px;
  739.             margin-top: 0px;
  740.         }
  741.         .taille label {
  742.             padding: 0 12px;
  743.         }
  744.         .bloc_btn_crello {
  745.             margin-top: 40px;
  746.             background-color: #FDF18D;
  747.             color: #000;
  748.             min-height: 50px;
  749.             padding: 15px;
  750.             border-radius: 4px !important;
  751.             font-size: 14px;
  752.         }
  753.         .btnNoir{
  754.             color: #fff;
  755.             background-color: #000;
  756.             display: inline-block;
  757.             font-size: 12px;
  758.             padding: 15px 12px;
  759.             text-align: center;
  760.         }
  761.         .btnBlue{
  762.             color: #fff;
  763.             background-color: #5BAFF5;
  764.             display: inline-block;
  765.             font-size: 12px;
  766.             padding: 15px 12px;
  767.             text-align: center;
  768.         }
  769.         .mdl1 li::marker {
  770.             color: #6a6666;
  771.         }
  772.         .carousel-indicators li {
  773.             display: inline-block;
  774.             width: 10px;
  775.             height: 10px;
  776.             margin: 1px;
  777.             text-indent: -999px;
  778.             cursor: pointer;
  779.             background-color: #fff\9;
  780.             background-color: #fff;
  781.             border: 1px solid #000;
  782.             border-radius: 10px;
  783.         }
  784.         .carousel-indicators .active {
  785.             width: 12px;
  786.             height: 12px;
  787.             margin: 0;
  788.             background-color: #000;
  789.         }
  790.         .menu_left {
  791.             flex: 0 0 34%;
  792.             max-width: 34%;
  793.             position: initial;
  794.             padding-left: 0;
  795.             text-align: left;
  796.         }
  797.         .menu_right {
  798.             flex: 0 0 66%;
  799.             max-width: 66%;
  800.             padding-right: 40px !important;
  801.         }
  802.         .tooltip-inner h2 {
  803.             font-family: AktivGrotesk-Medium;
  804.             font-size: 16px;
  805.             font-weight: 400;
  806.             line-height: 18.91px;
  807.             text-align: center;
  808.             margin-top: 8px;
  809.             border-bottom: 1px solid #fff;
  810.             margin-bottom: 14px;
  811.         }
  812.         .tooltip-inner{
  813.             background-color: #5268ff!important;
  814.             color: #fff!important;
  815.             box-shadow: 4px 4px 10px 0px #00000040!important;
  816.             border-radius: 10px!important;
  817.             max-width:400px!important
  818.         }
  819.         .tooltip-inner. p{
  820.             font-family: AktivGrotesk-Light !important;
  821.             font-size: 9px !important;
  822.             font-weight: 400 !important;
  823.             line-height: 10.3px !important;
  824.             text-align: left !important;
  825.             background-repeat: no-repeat;
  826.             background-image: url(/images/Vector_icone_new_acceuil.png);
  827.             padding-left: 40px;
  828.             background-position: 10px top;
  829.             padding-right: 10px;
  830.         }
  831.     </style>
  832. {% endblock %}
  833. {% block javascripts %}
  834.     {{ parent() }}
  835.     <script src="{{ app.request.scheme ~'://' ~ app.request.httpHost}}/assets/pdf.js"></script>
  836.     <script>
  837.         // Loaded via <script> tag, create shortcut to access PDF.js exports.
  838.         var pdfjsLib = window['pdfjs-dist/build/pdf'];
  840.         // The workerSrc property shall be specified.
  841.         pdfjsLib.GlobalWorkerOptions.workerSrc = "{{ app.request.scheme ~'://' ~ app.request.httpHost}}/assets/pdf.worker.js";
  842.     </script>
  843.     <script src="https://maps.googleapis.com/maps/api/js?key={{ key_google_map }}&libraries=places"></script>
  844.     <script src="https://create.vista.com/js/frame_v2.min.js"></script>
  845.     <script src="https://designer.printlane.com/js/include.js"></script>
  846.     <script>
  847.         var productRequest = '{% if app.request.get('product') %}{{ app.request.get('product') }}{% else %}0{% endif %}';
  848.         var formatRequest = '{% if app.request.get('format') %}{{ app.request.get('format') }}{% else %}0{% endif %}';
  849.     </script>
  850.     {{ encore_entry_script_tags('page_product_option') }}
  851.     {{ encore_entry_script_tags('product_option_viewer') }}
  852.     {{ encore_entry_script_tags('color_lab_product') }}
  853.     <script src="https://code.jquery.com/jquery-3.4.1.js"  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="  crossorigin="anonymous"></script>
  854. {% endblock %}