templates/default/industrialisation.html.twig line 1

Open in your IDE?
  2. {# BASE LOAD #}
  3. {% extends 'base.html.twig' %}
  6. {# TITLE TOP PAGE #}
  7. {% block title %}CPI | {% if app.request.locale == 'fr' %}Industrialisation{% else %}Industrialization{% endif %}{% endblock %}
  9. {# CSS #}
  10. {% block stylesheet %}
  11.     <meta property="og:image" content="{{asset('img/industrialisation/expertise.png')}}">
  12.     {# CSS DU CMS #}
  13.     <link rel="stylesheet" href="{{ asset('css/cmsContent.css')}}">
  14.     <link rel="stylesheet" href="{{ asset('css/cms.css')}}">
  15.     {# / #}
  16.     <link rel="stylesheet" href="{{asset('slick/slick.css')}}">
  17.     <link rel="stylesheet" href="{{asset('slick/slick-theme.css')}}">
  18. {% endblock %}
  22. {# BODY HOME PAGE #}
  23. {% block body %}
  25. <main>
  27. {% if ip == '90.63.222.84' or ip =='193.148.82.168' or ip =='5.48.160.74' %}
  29. {# CMS LOAD ADMIN MODE #}
  30. {% if app.user %}
  31.     {% include 'cms.html.twig' %}
  32. {% endif %}
  34. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ -->
  37. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  GESTION DES SECTION ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  39. {% set i = 0 %}
  40. {% for section in sections %}
  41. {% set i = i +1 %}
  42.           
  43. <section id="section{{section.id}}" style="
  44.     {% if section.image %}
  45.         background-image: url(../uploads/sections/{{section.image}});
  46.         background-size: contain;
  47.         background-repeat: repeat-x;
  48.         background-color: #170069;
  50.     {% else %}
  51.         background-color:{{section.color}}; 
  52.     {% endif %}
  55.     {% if i > 1 %}
  56.         margin-top:-54px
  57.     {% endif %} 
  58. ">
  60. <style>
  64. .accordion-body li{
  65.     color:white;
  66. }
  67. .accordion-body li p{
  68.     margin-bottom:0
  69. }
  72. @media screen and (max-width : 990px) {
  73.     .slick-prev:before, .slick-next:before {
  74.     position: relative!important;
  75.     bottom: -50px!important;
  76.     }
  78.     .slick-next:before {
  79.     position: relative!important;
  80.     bottom: -50px!important;
  81.     margin-left:15px;
  82.     }
  83. }
  86. </style>
  88. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  89. {% set y = 0 %}
  90. {% for res in section.lignes %}
  91. {% set y = y+1 %}
  92.     <div  id="{% if i == 1 %}sectionMain{% else %}sectionReste{% endif %}" data-aos="fade-up" data-aos-duration="1000" style="{% if i == 1 %}padding-top:237px;padding-bottom:237px;
  93.     {% else %}
  94.     {% if i > 1 %}
  95.     padding-top:112px; padding-bottom:112px;
  96.     {% endif %}
  97.     {% if y > 1 %}
  98.     padding-top:0; padding-bottom:112px;
  99.     {% endif %}
  100.     
  101.     {% endif %}">
  102.         <div class="container text-light pb-3"> 
  103.             <div class="row pt-5 justify-content-center justify-content-md-start">
  105.               {% if app.user %}
  106.                             <a href="{{path('app_deleteLigne',{'id':res.id,'pages':page.id} )}}" onclick="return confirm('Êtes-vous sûr ?')">
  107.                                 <div class="d-flex justify-content-end">
  108.                                     <div class="d-flex justify-content-center align-items-center cubeIcon2">
  109.                                         <i class="fa-solid fa-trash"></i>
  110.                                     </div>
  111.                                 </div>
  112.                             </a>
  113.                         {% endif %}
  114.                 {% for res2 in res.blocs %}
  115.                     <div id="bloc{{res2.id}}" data-aos="fade-up" data-aos-duration="1000" class="
  117.                         {% if res2.type == 2 %}
  118.                             col-xl-2 col-12
  119.                         {% endif %}
  121.                         {% if res2.type == 3 %}
  122.                             col-xxl-3 col-md-6 col-12
  123.                         {% endif %}
  125.                         {% if res2.type == 4 %}
  126.                             col-xxl-4 col-md-6 col-12
  127.                         {% endif %}
  129.                         {% if res2.type == 6 %}
  130.                             col-lg-6 col-12
  131.                         {% endif %}
  133.                         {% if res2.type == 8 %}
  134.                             col-12
  135.                         {% endif %}
  137.                         {% if res2.type == 12 %}
  138.                             col-12
  139.                         {% endif %}
  143.                         
  144.                     
  145.                     
  146.                     " {% if app.user %} style="border:dashed 1px grey; border-radius:10px; margin-bottom:10px"{% endif %}>
  147.                        
  148.                                     
  149.                         {% if res2.contenuses is not empty %}
  150.                             {% if res2.contenuses.0.typesContenus.id != 8 %}
  151.                             {% endif %}
  152.                         {% endif %}
  154. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  155. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   AFFCHER CONTENUS   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  156. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  158.                         {% if res2.contenuses is not empty %}
  161.                             <!-- ///\\\ ///\\\ TEXTE ///\\\ ///\\\  -->
  163.                             {% if res2.contenuses.0.typesContenus.id == 1 %}
  165.                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  166.                                 
  167.                                 {% if res2.contenuses.0.document is not empty %}
  168.                                 <a href="{{res2.contenuses.0.document}}" target="_blank" style="text-decoration:none;">
  169.                                             <button type="button btn-modal" class="justify-content-center align-items-center text-center" 
  170.                                                 style="
  171.                                                   background-color:{{res2.contenuses.0.background}}!important; 
  172.                                                     border:solid 3px {{res2.contenuses.0.couleur1}}!important;
  173.                                                     border-radius: 30px!important;
  174.                                                     color: rgb(0, 206, 255);
  175.                                                     font-weight: bold;
  176.                                                     background-color: #0c24b3;
  177.                                                     cursor: pointer;
  178.                                                     padding-top: 12px;
  179.                                                     padding-left: 50px;
  180.                                                     padding-right: 50px;
  181.                                                     margin-top:20px
  182.                                                  
  183.                                                     
  184.                                             ">
  185.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</button>
  186.                                         </a>
  187.                                 {% endif %}
  188.                             {% endif %}
  190.                             {% if i == 1 %}
  191.                                 {% if loop.first %}
  192.                                     <div class="traitBlanc"></div>
  193.                                 {% endif %}
  194.                             {% endif %}
  196.                             <!-- ///\\\ ///\\\ FIN TEXTE ///\\\ ///\\\  -->
  199.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  202.                             <!-- ///\\\ ///\\\ IMAGE ///\\\ ///\\\  -->
  204.                             {% if res2.contenuses is not empty %}
  205.                                 {% if res2.contenuses.0.typesContenus.id == 2 %}
  206.                                     <div  class="col-12 d-flex  mt-5 mt-lg-0 justify-content-{{res2.contenuses.0.background}}">
  207.                                     {% if res2.contenuses.0.lien %}
  208.                                     <a href="{{res2.contenuses.0.lien}}" target="_blank">
  209.                                     {% endif %}
  210.                                         <img data-aos="fade-up" data-aos-duration="1000" class="img-fluid imgRadius" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  211.                                     
  212.                                     {% if res2.contenuses.0.lien %}
  213.                                     </a>
  214.                                     {% endif %}
  215.                                     </div>
  216.                                 {% endif %}
  217.                             {% endif %}
  219.                             <!-- ///\\\ ///\\\ FIN IMAGE ///\\\ ///\\\  -->
  222.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  225.                             <!-- ///\\\ ///\\\ VIDEOS ///\\\ ///\\\  -->
  227.                             {% if res2.contenuses is not empty %}
  228.                                 {% if res2.contenuses.0.typesContenus.id == 3 %}
  229.                                     <div data-aos="fade-up" data-aos-duration="1000" class="col-12 justify-content-center">
  230.                                         <div class="image">             
  231.                                             <iframe class="img-fluid" style="height: 165px !important; width: 100% !important; border-radius: 15px!important;" src="{{res2.contenuses.0.video}}" title="YouTube video {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  232.                                         </div>
  234.                                         <div class="texte">
  235.                                             <p style="font-weight:bold">
  236.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}
  237.                                             </p>
  238.                                         </div>
  239.                                     </div>            
  240.                                 {% endif %}
  241.                             {% endif %}
  243.                             <!-- ///\\\ ///\\\ FIN VIDEO ///\\\ ///\\\  -->
  246.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  249.                             <!-- ///\\\ ///\\\ BOX PICTO  ///\\\ ///\\\  -->
  251.                             {% if res2.contenuses is not empty %}
  252.                                 {% if res2.contenuses.0.typesContenus.id == 4 %}  
  253.                                 <div class="cartes-2">           
  254.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  255.                                         <div class="image d-flex justify-content-center">
  256.                                             <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  257.                                         </div>
  258.                                         <div class="corps-carte">
  259.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}};">
  260.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  261.                                             </div>
  262.                                             <div class="texte-carte" style="min-height: 370px!important; background-color:{{res2.contenuses.0.couleur1}}">
  263.                                                 <div class="texte-1" style="min-height: 161px;">
  264.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  265.                                                 </div>
  266.                                                 {% if res2.contenuses.0.video is not empty %}
  267.                                                     <div class="button-carte">
  268.                                                         <a href="{{res2.contenuses.0.video}}" >
  269.                                                             <button class="buttonMore">En savoir plus</button>
  270.                                                         </a>
  271.                                                     </div>
  272.                                                 {% endif %}
  273.                                             </div>   
  274.                                         </div>
  275.                                     </div>
  276.                                 </div>
  277.                                 {% endif %}
  278.                             {% endif %}
  279.                             
  280.                             <!-- ///\\\ ///\\\ FIN BOX PICTO ///\\\ ///\\\  -->
  281.                                    
  283.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  286.                             <!-- ///\\\ ///\\\ AVANTAGES  ///\\\ ///\\\  -->
  288.                             {% if res2.contenuses is not empty %}
  289.                                 {% if res2.contenuses.0.typesContenus.id == 7 %}
  290.                                     <div data-aos="fade-up" data-aos-duration="1000" class="avantages">
  291.                                         <div class="carteA bg-bleu" style="background-color:{{res2.contenuses.0.background}}">
  292.                                             <div class="tete-carte d-flex flex-column flex-md-row">
  293.                                                 {% if res2.contenuses.0.image != '' %}
  294.                                                     <img class="img-fluid" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="">
  295.                                                 {% endif %}
  296.                                                 <span style="font-weight:bold">{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</span>
  297.                                             </div>
  298.                                             <div class="texte-carte">
  299.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  300.                                             </div>
  301.                                         </div>
  302.                                     </div>
  303.                                 {% endif %}
  304.                             {% endif %}
  306.                             <!-- ///\\\ ///\\\ FIN AVANTAGES ///\\\ ///\\\  -->
  309.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  312.                             <!-- ///\\\ ///\\\ ACCORDEON  ///\\\ ///\\\  -->
  314.                             {% if res2.contenuses.0.typesContenus.id == 8 %}
  315.                                 <div data-aos="fade-up" data-aos-duration="1000" class="texteDeroulant text-light">
  316.                                     <div class="accordion" id="accordionExample">
  317.                                         {% set ac = 0 %}
  318.                                         <div style="margin-bottom:32px;">
  319.                                         {% if app.request.locale == 'fr' %}{{res2.contenuses.0.titreFr|raw}}{% else %}{{res2.contenuses.0.titreEn|raw}}{% endif %}
  320.                                         </div>
  322.                                         {% for res3 in res2.contenuses.0.accordeons %}
  323.                                         
  324.                                             {% set ac = ac+1 %}
  325.                                             <div class="accordion-item" style="background-color:{{res3.background}}!important;">
  326.                                                 <h2 class="accordion-header" id="heading{{res3.id}}" >
  327.                                                     <button class="button1-accordion accordion-button" style="background-color:{{res3.background}}!important;" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{res3.id}}" aria-expanded="true" aria-controls="collapse{{res3.id}}">
  328.                                                     <i class="fa {{ ac == 1 ? 'fa-plus-circle' : 'fa-plus-circle' }}" style="margin-right:10px;font: normal!important;" aria-hidden="true"></i>{% if app.request.locale == 'en' %}{{res3.TitreEn|raw}}{% else %}{{res3.TitreFr|raw}}{% endif %}
  329.                                                     </button>
  330.                                                 </h2>
  331.                                                         
  332.                                                 <div id="collapseOne" class="accordion-collapse collapse {% if ac == 1 %}{% endif %}" aria-labelledby="heading{{res3.id}}" data-bs-parent="#accordionExample">
  333.                                                     <div class="accordion-body">
  334.                                                         <div class="accordion-hr"></div>
  335.                                                         {% if app.request.locale == 'en' %}{{res3.TexteEn|raw}}{% else %}{{res3.TexteFr|raw}}{% endif %}   
  336.                                                     </div>
  337.                                                 </div>
  338.                                             </div>
  340.                                           
  342.                                         {% endfor %}
  343.                                     </div>                                                        
  344.                                 </div>
  346.                                 <script>
  347.                                     $(document).ready(function () {
  348.                                         $('.accordion-button').click(function () {
  349.                                             $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
  350.                                             $('.accordion-button').not(this).find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  351.                                         });
  352.                                     });
  353.                                </script>
  354.  
  355.                                 {% if app.user %}           
  356.                                     <br>
  357.                                     <div class="d-flex justify-content-center">
  358.                                         <a href="{{path('app_accordeons_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les accordéons</button></a>
  359.                                     </div>
  360.                                 {% endif %}
  361.               
  362.                             {% endif %}
  364.                             <!-- ///\\\ ///\\\ FIN ACCORDEON  ///\\\ ///\\\  -->
  366.                         {% endif %}
  368.                             
  369.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  373.                         {% if res2.contenuses is not empty %}
  375.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  377.                             {% if res2.contenuses.0.typesContenus.id == 10 %}
  378.                                 <div data-aos="fade-up" data-aos-duration="1000" class="container d-flex paddingPerso2" >
  379.                                     <div class="slider-demo-valeur">
  382.                                         {% for carou in  res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1) %}
  383.                                             <div data-aos="fade-up" data-aos-duration="1000" class="carte " style="padding-left: 15px!important;padding-right: 15px;!important">
  384.                                                 <div class="col-12">
  385.                                                     <div class="image d-flex justify-content-center">
  386.                                                         <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  387.                                                     </div>
  388.                                                     <div class="corps-carte">
  389.                                                         <div class="tete-carte">
  390.                                                             <p>{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %} </p>
  391.                                                         </div>
  392.                                                         <div class="texte-carte">
  393.                                                             <div class="texte-1">
  394.                                                                 {% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %} 
  395.                                                             </div>
  396.                                                         </div>
  397.                                                     </div>
  398.                                                 </div>
  399.                                             </div>
  400.                                         {% endfor %}
  401.                                     </div>
  402.                                 </div>
  403.                             {% endif %}
  404.                                 
  405.                             {% if app.user %}
  406.                                 {% if res2.contenuses.0.typesContenus.id == 10 %}            
  407.                                     <br>
  408.                                     <div data-aos="fade-up" data-aos-duration="1000" class="d-flex justify-content-center">
  409.                                         <a href="{{path('app_carousels_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les carousels</button></a>
  410.                                     </div>
  411.                                 {% endif %}
  412.                             {% endif %}
  414.                             <!-- ///\\\ ///\\\ FIN BOXPICTO CAROUSEL ///\\\ ///\\\  -->
  415.                         {% endif %}
  418.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  421.                         {% if res2.contenuses is not empty %}
  423.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  425.                             {% if res2.contenuses.0.typesContenus.id == 11  %}
  426.                                 <div  class="row justify-content-center justify-content-md-start" >
  427.                                     <div class="col-12">
  428.                                         <div class="row pb-4">
  429.                                             <div class="titre ">
  430.                                                 <p class="opensans_bold_red_15">TEMOIGNAGES</p>
  431.                                             </div>
  432.                                         </div>  
  433.                                     </div> 
  434.                                 </div>
  435.                                 {% set tem = -1 %}
  436.                                 <div class="row text-light" >
  437.                                     <div class="col-12">
  438.                                         <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  439.                                             <div class="carousel-indicators">
  440.                                                 {% for res in temoignages %}
  441.                                                     {% set tem = tem + 1 %}
  442.                                                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{tem}}" {% if tem == 0 %}class="active" aria-current="true"{% endif %} aria-label="Slide {{tem}}"></button>
  443.                                                 {% endfor %}
  444.                                             </div>
  446.                                             {% set tem2 = -1 %}
  447.                                             <div class="carousel-inner">
  448.                                                 {% for res in temoignages %}
  449.                                                     {% set tem2 = tem2 + 1 %}
  450.                                                     <div class="carousel-item {% if tem2 == 0 %}active{% endif %}">
  451.                                                         <div class="row text-light">
  452.                                                             <h2 class="">{{res.titre}}</hé>
  453.                                                         </div>
  454.                                                         <br>
  455.                                                         <p class="citation ">{{res.texte}}</p>
  456.                                                         <br>
  457.                                                         <p style="color:red; font-weight: bold; ">{{res.auteur}}</p>  
  458.                                                     </div>
  459.                                                 {% endfor %}
  460.                                             </div>
  461.                                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  462.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  463.                                                 <span class="visually-hidden">Previous</span>
  464.                                             </button>
  465.                                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  466.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  467.                                                 <span class="visually-hidden">Next</span>
  468.                                             </button>
  469.                                         </div>
  470.                                     </div>
  471.                                 </div>
  472.                                 {% if app.user %}
  473.                                     {% if res2.contenuses.0.typesContenus.id == 11 %}        
  474.                                         <br>
  475.                                         <div class="d-flex justify-content-center">
  476.                                             <a href="{{path('app_temoignages_index')}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les témoignages</button></a>
  477.                                         </div>
  478.                                     {% endif %}
  479.                                 {% endif %}
  480.                             {% endif %}
  482.                             <!-- ///\\\ ///\\\ FIN BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  484.                         {% endif %}
  487.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  490.                         {% if res2.contenuses is not empty %}
  492.                             <!-- ///\\\ ///\\\ CAROUSEL ///\\\ ///\\\  -->
  494.                               
  495.                              
  497.                                 
  498.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}
  499.                                     <div class="carouselcms">
  500.                                             <div class="slider-cms">
  501.                                                 {% for carou in res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1)%}
  502.                                                     <div class="carte-slider-cms d-flex flex-column"  >        
  503.                                                         <div class="container-img-slider-cms">                               
  504.                                                             <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  505.                                                         </div>
  507.                                                         {% if carou.titreEn != '' or carou.titreFr != '' %}
  508.                                                         <div class="container-titre-slider-cms"> 
  509.                                                             <h3 class="opensans_bold_32">{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %}</h3>   
  510.                                                         </div>
  511.                                                         {% endif %}
  513.                                                         {% if carou.texteEn != '' or carou.texteFr != '' %}
  514.                                                             <div class="container-text-slider-cms"> 
  515.                                                                 <p>{% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %}</p>
  516.                                                             </div>
  517.                                                         {% endif %}
  519.                                                      
  521.                             
  522.                                                     </div>
  523.                                                 {% endfor %}
  524.                                             </div>
  525.                                     </div>
  527.                                        {% endif %}
  528.                                    
  529.                                     <style>
  530.                                     
  531.                                         .carouselcms{
  532.                                             width:100%;
  533.                                         
  534.                                         }
  536.                                         .slider-cms{
  537.                                             width:100%;
  538.                                            
  539.                                             height: 100%;
  540.                                             
  541.                                         }
  546.                                         .carte-slider-cms{
  547.                                           
  548.                                             padding-left: 5px;
  549.                                             padding-right: 5px;
  550.                                             height:100%;
  551.                                             
  552.                                             
  553.                                         }
  555.                                          .container-img-slider-cms {
  556.                                             width: 100%;
  557.                                             height: 220px;
  558.                                        
  559.                                            
  560.                                             
  561.                                         }
  563.                                         .container-img-slider-cms img{
  564.                                             width: 100%;
  565.                                             height: 100%;
  566.                                             border-radius:30px;
  567.                                             
  568.                                             
  569.                                         }
  571.                                 
  574.                                         .container-titre-slider-cms{
  575.                                   
  576.                                             height:60px;
  577.                                             padding:0;
  578.                                             margin:0;
  579.                                         }
  581.                                             .container-titre-slider-cms h3 p{
  582.                                            color:#30278d!important;
  583.                                            font-size: 26px!important;
  584.                                            margin-top:20px;
  585.                                            margin-left:2px;
  586.                                         }
  588.                                         .container-text-slider-cms{
  589.                                             height:180px;
  590.                                         }
  592.                                          .container-text-slider-cms p{
  593.                                             color: white;
  594.                                             font-weight: 100;
  595.                                             font-size:14px;
  596.                                             margin-left:2px;
  597.                                             padding-right:20px;
  599.                                         }
  601.                                             
  602.                                   
  606.                                         .slick-slide img {
  607.                                          
  608.                                             object-fit: cover!important;
  609.                                         }
  613.                                     </style>
  616.                                
  617.                                   
  619.                                 
  628.                                 
  629.                                 {% if app.user %}
  630.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}              
  631.                                         <br>
  632.                                         <div class="d-flex justify-content-center">
  633.                                             <a href="{{path('app_carousels_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les carousels</button></a>
  634.                                         </div>
  635.                                     {% endif %}
  636.                                 {% endif %}
  637.                                       
  638.                             <!-- ///\\\ ///\\\ FIN CAROUSEL ///\\\ ///\\\  -->
  640.                         {% endif %}
  643.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  646.                         {% if res2.contenuses is not empty %}
  648.                             <!-- ///\\\ ///\\\ CHIFFRES CLES ///\\\ ///\\\  -->
  650.                                  {% if res2.contenuses.0.typesContenus.id == 5  %}
  651.                                     <div class="cartes-3" style="background:{{res2.contenuses.0.background}}; border-radius: 30px;">
  652.                                         <div class="carte">
  653.                                             {% if res2.contenuses.0.image is not empty %}
  654.                                                 <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="" style="width:100%;height:100%;border-radius:25px;">
  656.                                             {% else %}
  657.                                                 <div class="titre">
  658.                                                     <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} </p>
  659.                                                 </div>
  660.                                                 <div class="texte">
  661.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  662.                                                 </div>
  663.                                             {% endif %}
  664.                                         </div>
  665.                                     </div>
  666.                                 {% endif %}
  668.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES ///\\\ ///\\\  -->
  670.                         {% endif %}
  674.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  676.         
  677.                         
  678.                         {% if res2.contenuses is not empty %}
  680.                             <!-- ///\\\ ///\\\ CHIFFRES CLES 2 ///\\\ ///\\\  -->
  682.                                 {% if res2.contenuses.0.typesContenus.id == 6  %}
  683.                                     <div class="accueil4">
  684.                                         <div {% if res2.contenuses.0.titreFr|length > 4 %}id="soixante-dix"{% endif %} class="carte">
  685.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  686.                                                 <div class="chiffre justify-content-center" style="background-color:{{res2.contenuses.0.background}}">
  687.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} 
  688.                                                 </div>
  689.                                             </div>
  690.                                             <div class="texte">
  691.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  692.                                             </div>
  693.                                         </div>
  694.                                     </div>
  695.                                 {% endif %}
  697.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES 2 ///\\\ ///\\\  -->
  699.                         {% endif %}
  702.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  705.                         {% if res2.contenuses is not empty %}
  707.                             <!-- ///\\\ ///\\\ BOX PICTO + LIEN ///\\\ ///\\\  -->
  709.                                 {% if res2.contenuses.0.typesContenus.id == 13 %}
  710.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  711.                                         <div class="image d-flex justify-content-center">
  712.                                             <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  713.                                         </div>
  714.                                         <div class="corps-carte">
  715.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  716.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  717.                                             </div>
  718.                                             <div class="texte-carte" style="min-height:204px; background-color:{{res2.contenuses.0.couleur1}}">
  719.                                                 <div class="texte-1">
  720.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  721.                                                 </div>
  722.                                                 
  723.                                             </div>    
  724.                                         </div>
  725.                                     </div>
  726.                                 {% endif %}
  728.                             <!-- ///\\\ ///\\\ FIN BOX PICTO + LIEN ///\\\ ///\\\  -->
  729.        
  730.                         {% endif %}
  733.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  736.                         {% if res2.contenuses is not empty %}
  738.                             <!-- ///\\\ ///\\\ BOUTON ///\\\ ///\\\  -->    
  740.                                 {% if res2.contenuses.0.typesContenus.id == 12 %}   
  741.                                     {% if res2.contenuses.0.modal == "modalConsultation2" %}
  743.                                      <button type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationERP" 
  744.                                             style="
  745.                                                 background-color:{{res2.contenuses.0.background}}; 
  746.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  747.                                                 border-radius: 30px!important;
  748.                                                 padding-right: 0%!important;
  749.                                                 padding-left: 0%!important;
  750.                                                 padding-top: 4%!important;   
  751.                                                 width: 400px;
  752.                                                 float:right;
  753.                                         ">
  754.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  756.                                     {% elseif res2.contenuses.0.modal == "modalConsultation" %}
  758.                                      <button type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationBaseOutil" 
  759.                                             style="
  760.                                                 background-color:{{res2.contenuses.0.background}}; 
  761.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  762.                                                 border-radius: 30px!important;
  763.                                                 padding-right: 0%!important;
  764.                                                 padding-left: 0%!important;
  765.                                                 padding-top: 4%!important;   
  766.                                                 width: 400px;
  767.                                                 float:right;
  768.                                         ">
  769.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  771.                                     {% elseif res2.contenuses.0.modal == "modalDocumentation" %}
  773.                                      <button type="button btn-modal" class=""  data-bs-toggle="modal" data-bs-target="#exampleModalDoc" 
  774.                                             style="
  775.                                                 background-color:{{res2.contenuses.0.background}}; 
  776.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  777.                                                 border-radius: 30px!important;
  778.                                                 padding-right: 0%!important;
  779.                                                 padding-left: 0%!important;
  780.                                                 padding-top: 4%!important;   
  781.                                                 width: 400px;
  782.                                                 float:right;
  783.                                         ">
  784.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  785.                                    
  786.                                     {% else %}
  787.                                         <a href="{{res2.contenuses.0.lien}}" target="_blank" style="text-decoration:none;">
  788.                                             <button type="button btn-modal" class="" 
  789.                                                 style="
  790.                                                     background-color:{{res2.contenuses.0.background}}; 
  791.                                                     border:solid 3px {{res2.contenuses.0.couleur1}};
  792.                                                     border-radius: 30px!important;
  793.                                                     padding-right: 0%!important;
  794.                                                     padding-left: 0%!important;
  795.                                                     padding-top: 4%!important;   
  796.                                                     width: 400px;
  797.                                                     float:right;
  798.                                             ">
  799.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  800.                                         </a> 
  801.                                     {% endif %}
  804.                                 
  807.                                 {% endif %}
  809.                                 <!-- ///\\\ ///\\\ FIN BOUTON ///\\\ ///\\\  --> 
  811.                         {% endif %}
  814.                              <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  817.                         {% if res2.contenuses is not empty %}
  819.                             <!-- ///\\\ ///\\\ DOCUMENT ///\\\ ///\\\  -->    
  821.                                 {% if res2.contenuses.0.typesContenus.id == 14 %}                  
  822.                                      <div data-aos="fade-up" data-aos-duration="1000" class="accueil9">
  823.                                         <div class="carte">
  824.                                             <div class="image">
  825.                                                 <div class="image-container">
  826.                                                     <img src="{{asset('uploads/contenus/'~res2.contenuses.0.Image)}}" alt="Votre image">
  827.                                                     <div class="image-overlay">
  828.                                                         <center>
  829.                                                         
  830.                                                                     <!-- Button trigger modal -->
  831.                                                                 
  832.                                                                 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDoc" onclick="recupDoc({{res2.contenuses.0.id}})">
  833.                                                                 Récupérer le pdf
  834.                                                                 </button>
  836.                                                                 
  838.                                                         </center>
  839.                                                     </div>
  840.                                                 </div>
  841.                                             </div>
  842.                                             <div class="texte">
  843.                                                   <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  844.                                             </div>
  845.                                         </div>
  846.                                     </div>
  848.                                     <!-- Modal Doc -->
  850.                                     <div class="modalForm">
  851.                                     <div class="modal fade" id="exampleModalDoc" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  852.                                     <div class="modal-dialog">
  853.                                         <div class="modal-content">
  854.                                         <div class="modal-body">
  855.                                             <div class="formulaireFile">
  856.                                             <p class="pa1">Nous vous remercions de votre intérêt pour la solution DELMIAWorks.</p>
  857.                                             <p class="pa2">Afin de pouvoir obtenir la documentation, nous vous remercions de bien vouloir renseigner vos coordonnées.</p>
  859.                                             <form action="{{path('sendDocument')}}" method="post">
  860.                                                     <input type="hidden" id="idDocumentSend" name="document">
  861.                                                     <div class="row">
  862.                                                         <div class="d-flex">
  863.                                                             <div class="col-6 w100" style="">
  865.                                                                 <p class="pa3"> <b>Nom </b><span style="color:red;">*</span></p>
  866.                                                                 <input type="text" id="Nom" name="nom" required>
  867.                                                             </div>
  868.                                                             <div class="col-6 w100">
  869.                                                                 <p class="pa3"> <b>Prénom </b><span style="color:red;">*</span></p>
  870.                                                                 <input type="text" id="Prenom" name="prenom" required>
  871.                                                             </div>
  872.                                                         </div>
  874.                                                         <div class="d-flex">
  875.                                                             <div class="col-12 w100">
  876.                                                                 <p class="pa3"> <b>Nom de la société </b><span style="color:red;">*</span></p>
  877.                                                                 <input type="text" id="nomSociete" name="societe" required>
  878.                                                             </div>
  879.                                                         </div>
  881.                                                         <div class="d-flex">
  882.                                                             <div class="col-12 w100">
  883.                                                                 <p class="pa3"> <b>Votre adresse mail </b><span style="color:red;">*</span></p>
  884.                                                                 <input type="text" id="mail" name="mail" required>
  885.                                                             </div>
  886.                                                         </div>
  889.                                                         <div class="d-flex flex-md-row flex-column">
  890.                                                         <div class="col-md-7 col-12">
  891.                                                             <div class="form-check d-flex">
  892.                                                                 <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  893.                                                                 <label class="form-check-label text-light" for="flexCheckDefault">
  894.                                                                     En cochant cette case, vous acceptez le traitement des données personnelles soumises conformément à la <a href="#">Politique de Confidentialité</a>                                                       </label>
  895.                                                             </div>
  896.                                                         </div>
  897.                                                             <div class="col-md-5 col-12">
  898.                                                                 <div class="d-flex justify-content-center align-items-start">
  899.                                                                     <a href="{{ asset('../public/uploads/contenus/'~res2.contenuses.0.document)}}" target="_blank">      
  900.                                                                         <button type="submit" class="buttonDoc">Obtenir le document</button>
  901.                                                                     </a>
  902.                                                                 </div>
  903.                                                             </div>
  904.                                                         </div>
  906.                                                     </div>
  907.                                             </form>
  908.                                             </div>
  909.                                                 
  910.                                         </div>
  911.                                         </div>
  912.                                     </div>
  913.                                     </div>
  914.                                     </div>
  916.                                 {% endif %}
  918.                             <!-- ///\\\ ///\\\ FIN DOCUMENT ///\\\ ///\\\  -->    
  919.                           
  921.                         {% endif %}
  925.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  926.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  927.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  932.                         <!-- ///\\\ ///\\\ BOUTON MODIFIER CMS ///\\\ ///\\\  --> 
  933.                         {% if res2.contenuses is not empty %}
  934.                             {% if res2.contenuses.0.typesContenus.id != 10 and res2.contenuses.0.typesContenus.id != 9 %}
  935.                                 {% if app.user %}
  936.                                     <div class="d-flex justify-content-center mb-3">
  937.                                         <a href="{{path('app_editContent',{'id':res2.contenuses.0.id,'type':res2.contenuses.0.typesContenus.libelle})}}">
  938.                                             <div class="d-flex justify-content-center align-items-center cubeIcon">
  939.                                                 <i class="fa-solid fa-pen"></i>
  940.                                             </div>
  941.                                         </a>
  942.                                         <a href="{{path('app_deleteContent',{'id':res2.contenuses.0.id})}}" onclick="return confirm('Êtes-vous sûr ?')">
  943.                                             <div class="d-flex justify-content-center align-items-center cubeIcon2">
  944.                                                 <i class="fa-solid fa-trash"></i>
  945.                                             </div>
  946.                                         </a>
  947.                                     </div>
  948.                                 {% endif %}
  949.                             {% endif %}
  950.                         {% endif %}
  953. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  954. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL CONTENUS    ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  955. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  958. {% if app.user %}
  959.     {% if res2.contenuses is  empty %}
  960.         <button type="button" style="margin-bottom:5px" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addContenu{{res2.id}}" >Ajouter un contenu</button>
  961.     {% endif %}
  965. <!-- ///\\\ ///\\\ MODAL CONTENUS ///\\\ ///\\\  --> 
  966.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  967.         <div class="modal-dialog">
  968.             <div class="modal-content">
  969.                 <div class="modal-body">
  970.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  972.                     <div class="container-modal d-flex flex-column">
  973.                         <h2>Ajouter un contenu</h2>
  974.                         <p>Les «blocs» peuvent contenir chacun un «Contenu» dédiés à du texte, une image, un lien youtube, …</p>
  975.                     </div>
  976.                     
  977.                     <div class="container-contenu d-flex flex-wrap  justify-content-start">
  978.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  979.                             <div class="container-picto container-picto-texte">
  980.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  981.                                     <img src="{{asset('img/cms/cpi-textes.svg')}}" alt="">
  982.                                 </div>
  983.                                 <p class="colonneText text-center">Texte</p>
  984.                             </div>
  985.                         </a>
  987.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'image'})}}">
  988.                             <div class="container-picto container-picto-texte">
  989.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  990.                                     <img src="{{asset('img/cms/cpi-images.svg')}}" alt="">
  991.                                 </div>
  992.                                 <p class="colonneText text-center">Image</p>
  993.                             </div>
  994.                         </a>
  995.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'video'})}}">
  996.                             <div class="container-picto container-picto-texte">
  997.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  998.                                     <img src="{{asset('img/cms/cpi-videos.svg')}}" alt="">
  999.                                 </div>
  1000.                                 <p class="colonneText text-center">Vidéo</p>
  1001.                             </div>
  1002.                         </a>
  1003.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpicto'})}}">
  1004.                             <div class="container-picto container-picto-texte">
  1005.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1006.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  1007.                                 </div>
  1008.                                 <p class="colonneText text-center">Box + picto</p>
  1009.                             </div>
  1010.                         </a>
  1012.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpictocarousel'})}}">
  1013.                             <div class="container-picto container-picto-texte">
  1014.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1015.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  1016.                                 </div>
  1017.                                 <p class="colonneText text-center">Box + picto <br> (carousel)</p>
  1018.                             </div>
  1019.                         </a>
  1020.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles'})}}">
  1021.                             <div class="container-picto container-picto-texte">
  1022.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1023.                                     <img src="{{asset('img/cms/cpi-chiffres-cles.svg')}}" alt="">
  1024.                                 </div>
  1025.                                 <p class="colonneText text-center">Chiffre clé</p>
  1026.                             </div>
  1027.                         </a>
  1028.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles2'})}}">
  1029.                             <div class="container-picto container-picto-texte">
  1030.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1031.                                     <img src="{{asset('img/cms/cpi-chiffres-cles-2.svg')}}" alt="">
  1032.                                 </div>
  1033.                                 <p class="colonneText text-center">Chiffre clé 2</p>
  1034.                             </div>
  1035.                         </a>
  1036.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'accordeon'})}}">
  1037.                             <div class="container-picto container-picto-texte">
  1038.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1039.                                     <img src="{{asset('img/cms/cpi-accordeons.svg')}}" alt="">
  1040.                                 </div>
  1041.                                 <p class="colonneText text-center">Accordéon</p>
  1042.                             </div>
  1043.                         </a>
  1044.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'avantage'})}}">
  1045.                             <div class="container-picto container-picto-texte">
  1046.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1047.                                     <img src="{{asset('img/cms/cpi-avantages.svg')}}" alt="">
  1048.                                 </div>
  1049.                                 <p class="colonneText text-center">Avantages</p>
  1050.                             </div>
  1051.                         </a>
  1052.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'carousel'})}}">
  1053.                             <div class="container-picto container-picto-texte">
  1054.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1055.                                     <img src="{{asset('img/cms/cpi-carousel.svg')}}" alt="">
  1056.                                 </div>
  1057.                                 <p class="colonneText text-center">Carousel</p>
  1058.                             </div>
  1059.                         </a>
  1060.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'temoignage'})}}">
  1061.                             <div class="container-picto container-picto-texte">
  1062.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1063.                                     <img src="{{asset('img/cms/cpi-temoignage.svg')}}" alt="">
  1064.                                 </div>
  1065.                                 <p class="colonneText text-center">Témoignage</p>
  1066.                             </div>
  1067.                         </a>
  1068.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'button'})}}">
  1069.                             <div class="container-picto container-picto-texte">
  1070.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1071.                                     <img src="{{asset('img/cms/cpi-btn.svg')}}" alt="" style="width:57px">
  1072.                                 </div>
  1073.                                 <p class="colonneText text-center">Bouton</p>
  1074.                             </div>
  1075.                         </a> 
  1076.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'document'})}}">
  1077.                             <div class="container-picto container-picto-texte">
  1078.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1079.                                     <img src="{{asset('img/cms/cpi-doc.svg')}}" alt="" style="width:57px">
  1080.                                 </div>
  1081.                                 <p class="colonneText text-center">Document</p>
  1082.                             </div>
  1083.                         </a>         
  1084.                     </div>
  1086.                     <div class="modal-submit d-flex justify-content-end align-items-end">
  1087.                         <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1088.                     </div>
  1089.                 </div>
  1090.             </div>
  1091.         </div> 
  1092.     </div>   
  1094. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS ///\\\ ///\\\  -->                                                                        
  1097. <!-- ///\\\ ///\\\ MODAL CONTENUS 2 ///\\\ ///\\\  -->                             
  1098.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  1099.         <div class="modal-dialog">
  1100.             <div class="modal-content">
  1101.                 <div class="modal-body">
  1102.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1104.                     <div class="container-modal d-flex flex-column">
  1105.                         <h2>Ajouter un contenu</h2>
  1106.                         <p>Les «blocs» sont des éléments de « Section » répartis en colonnes contenant chacun un «Contenu» dédiés à du texte, une image ou un lien youtube.</p>
  1107.                     </div>
  1108.                     
  1109.                     <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1110.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  1111.                             <div class="container-choix">
  1112.                                 <div class="simu-grid d-flex justify-content-center align-items-center">
  1113.                                     <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1114.                                         <p>12</p>
  1115.                                     </div>
  1116.                                 </div>
  1117.                                 <p class="colonneText text-center">Texte</p>
  1118.                             </div>
  1119.                         </a>
  1120.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  1121.                         <div class="container-choix">
  1122.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1123.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1124.                                     <p>6</p>
  1125.                                 </div>
  1126.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1127.                                     <p>6</p>
  1128.                                 </div>
  1129.                             </div>  
  1130.                             <p class="colonneText text-center">3 colonne</p>
  1131.                         </div>
  1132.                     </a>
  1134.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1135.                         <div class="container-choix">
  1136.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1137.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1138.                                     <p>4</p>
  1139.                                 </div>
  1140.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1141.                                     <p>4</p>
  1142.                                 </div>
  1143.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1144.                                     <p>4</p>
  1145.                                 </div>
  1146.                             </div>
  1147.                             <p class="colonneText text-center">2 colonne</p>
  1148.                         </div>
  1149.                     </a>
  1151.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1152.                         <div class="container-choix">
  1153.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1154.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1155.                                     <p>8</p>
  1156.                                 </div>
  1157.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1158.                                     <p>4</p>
  1159.                                 </div>
  1160.                             </div>
  1161.                             <p class="colonneText text-center">2 colonne</p>
  1162.                         </div>
  1163.                     </a>
  1165.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1166.                         <div class="container-choix">
  1167.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1168.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1169.                                     <p>4</p>
  1170.                                 </div>
  1171.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1172.                                     <p>8</p>
  1173.                                 </div>                    
  1174.                             </div>
  1175.                             <p class="colonneText text-center">2 colonne</p>
  1176.                         </div>
  1177.                     </a>
  1179.                 </div>
  1181.                 <div class="modal-submit d-flex justify-content-end align-items-end">
  1182.                     <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1183.                 </div>
  1184.             </div>
  1185.         </div>
  1186.     </div> 
  1187. </div>
  1188. {% endif %}
  1191. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS 2 ///\\\ ///\\\  -->  
  1193. </div>
  1194. {% endfor %}                       
  1195. </div>
  1199. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1200. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL BLOCK       ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1201. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1202.                       
  1203. {% if app.user %}
  1204.     <div style="d-flex justify-content-center padding-top:20px">
  1205.         <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addBloc{{res.id}}" >Ajouter un bloc</button>
  1206.             <div class="modal fade" id="addBloc{{res.id}}" tabindex="-1" aria-labelledby="addBloc" aria-hidden="true">
  1207.                 <div class="modal-dialog">
  1208.                     <div class="modal-content">
  1209.                         <div class="modal-body">
  1210.                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1212.                             <div class="container-modal d-flex flex-column">
  1213.                                 <h2>Ajouter un bloc</h2>
  1214.                                 <p>Les «blocs» sont des éléments de « Section » répartis en colonnes contenant chacun un «Contenu» dédiés à du texte, une image ou un lien youtube.</p>
  1215.                             </div>
  1216.                             
  1217.                             <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1219.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':12})}}">
  1220.                                     <div class="container-choix">
  1221.                                         <div class="simu-grid d-flex justify-content-center align-items-center">
  1222.                                             <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1223.                                                 <p>12</p>
  1224.                                             </div>
  1225.                                         </div>
  1226.                                         <p class="colonneText text-center">1 colonne</p>
  1227.                                     </div>
  1228.                                 </a>
  1229.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  1230.                                     <div class="container-choix">
  1231.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1232.                                             <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1233.                                                 <p>6</p>
  1234.                                             </div>
  1235.                                             <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1236.                                                 <p>6</p>
  1237.                                             </div>
  1238.                                         </div>
  1239.                                         <p class="colonneText text-center">2 colonnes</p>
  1240.                                     </div>
  1241.                                 </a>
  1242.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1243.                                     <div class="container-choix">
  1244.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1245.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1246.                                                 <p>4</p>
  1247.                                             </div>
  1248.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1249.                                                 <p>4</p>
  1250.                                             </div>
  1251.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1252.                                                 <p>4</p>
  1253.                                             </div>
  1254.                                         </div>
  1255.                                         <p class="colonneText text-center">3 colonnes</p>
  1256.                                     </div>
  1257.                                 </a>
  1259.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1260.                                 <div class="container-choix">
  1261.                                     <div class="simu-grid d-flex justify-content-around align-items-center">
  1262.                                         <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1263.                                             <p>8</p>
  1264.                                         </div>
  1265.                                         <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1266.                                             <p>4</p>
  1267.                                         </div>
  1268.                                     </div>
  1269.                                     <p class="colonneText text-center">2 colonnes</p>
  1270.                                 </div>
  1271.                                 </a>
  1273.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1274.                                     <div class="container-choix">
  1275.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1276.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1277.                                                 <p>4</p>
  1278.                                             </div>
  1279.                                             <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1280.                                                 <p>8</p>
  1281.                                             </div>
  1282.                                     
  1283.                                         </div>
  1284.                                         <p class="colonneText text-center">2 colonnes</p>
  1285.                                     </div>
  1286.                                 </a>
  1288.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':3333})}}">
  1289.                                     <div class="container-choix">
  1290.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1291.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1292.                                                 <p>3</p>
  1293.                                             </div>
  1294.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1295.                                                 <p>3</p>
  1296.                                             </div>
  1297.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1298.                                                 <p>3</p>
  1299.                                             </div>
  1300.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1301.                                                 <p>3</p>
  1302.                                             </div>
  1303.                                     
  1304.                                         </div>
  1305.                                         <p class="colonneText text-center">4 colonnes</p>
  1306.                                     </div>
  1307.                                 </a>
  1308.                             </div>
  1309.                             <div class="modal-submit d-flex justify-content-end align-items-end">
  1310.                                 <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1311.                             </div>
  1312.                         </div>
  1313.                     </div>
  1314.                 </div> 
  1315.             </div>
  1316. {% endif %}                 
  1317.     </div>
  1319. </div>
  1320. {% endfor %}
  1323. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1324. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL SECTION     ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1325. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1328. <!-- ///\\\ ///\\\  MODAL AJOUT SECTION ///\\\ ///\\\  -->  
  1330. <div class="modal fade" id="addSection" tabindex="-1" aria-labelledby="addSection" aria-hidden="true">
  1331.     <div class="modal-dialog">
  1332.         <div class="modal-content">
  1333.             <div class="modal-body">
  1334.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1336.                 <div class="container-modal d-flex flex-column">
  1337.                     <h2>Ajouter une section</h2>
  1338.                     <p>Les pages dont composées «Sections» contenant chacune des « Blocs » de « Contenus » répartis en colonnes</p>
  1339.                 </div>
  1340.                 <form action="{{path('app_addSection')}}" method="post" enctype="multipart/form-data">
  1341.                     <input type="hidden" name="page" value="{{page.id}}">
  1342.                     <div class="container-contenus-modal">
  1343.                         <h3>Image de fond</h3>
  1344.                         <input type="file"  name="imageSection" >  
  1345.                     </div>
  1346.                     <div class="container-contenus-modal">
  1347.                         <h3>Image rond</h3>
  1348.                         <input type="file"  name="imageRond" >   
  1349.                     </div>
  1350.                     <div class="container-contenus-modal">
  1351.                         <h3>Ordre affichage</h3>
  1352.                         <input type="number" name="ordreSection" id="ordreSection" value="{{ordreMax}}">
  1353.                     </div>
  1354.                     <div class="container-contenus-modal">
  1355.                         <h3>Couleur de section</h3>
  1356.                         <input type="text" name="couleurSection" id="couleurSection" value="#fff">
  1357.                         <div class="container-all-couleur d-flex flex-wrap">
  1358.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffffff')">
  1359.                                 <div class="seeColor seeColor1"></div>
  1360.                                 <p>Blanc</p>
  1361.                             </div>
  1362.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#F6F6F6')">
  1363.                                 <div class="seeColor seeColor2"></div>
  1364.                                 <p>Gris</p>
  1365.                             </div>
  1366.                             <div class="button-couleur button-color-active d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#EBE7F7')">
  1367.                                 <div class="seeColor seeColor3"></div>
  1368.                                 <p>Violet 1</p>
  1369.                             </div>
  1370.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#30278D')">
  1371.                                 <div class="seeColor seeColor4"></div>
  1372.                                 <p>Violet 2</p>
  1373.                             </div>
  1374.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#180068')">
  1375.                                 <div class="seeColor seeColor5"></div>
  1376.                                 <p>Violet 3</p>
  1377.                             </div>
  1378.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#00CEFF')">
  1379.                                 <div class="seeColor seeColor6"></div>
  1380.                                 <p>Bleu 1</p>
  1381.                             </div>
  1382.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#0047FF')">
  1383.                                 <div class="seeColor seeColor7"></div>
  1384.                                 <p>Bleu 2</p>
  1385.                             </div>
  1386.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffda2b')">
  1387.                                 <div class="seeColor seeColor8"></div>
  1388.                                 <p>Jaune</p>
  1389.                             </div>                
  1390.                         </div> 
  1391.                     </div>
  1392.                     <div class="modal-submit d-flex justify-content-center">
  1393.                         <button type="submit" class=" btnAdd">Ajouter</button>
  1394.                     </div>    
  1395.                 </form>
  1396.             </div>
  1397.         </div>
  1398.     </div> 
  1399. </div>
  1402. <!-- ///\\\ ///\\\  UPDATE SECTION ///\\\ ///\\\  -->  
  1404. {% if app.user %}
  1406.     <div class="d-flex justify-content-center mb-3">
  1407.         <a href="{{path('app_updateSection',{'id':section.id,'pages':page.id})}}" style="color:white; text-decoration:none">
  1408.             <div class="d-flex justify-content-center align-items-center cubeIcon" style="width:200px">
  1409.                 <i class="fa-solid fa-pen" style="padding-right:10px"></i> Modifier la section
  1410.             </div>
  1411.         </a>
  1413.         <a href="{{path('app_deleteSection',{'id':section.id,'pages':page.id})}}" onclick="return confirm('Êtes-vous sûr ?')" style="color:white; text-decoration:none">
  1414.             <div class="d-flex justify-content-center align-items-center cubeIcon2" style="width:200px">
  1415.                 <i class="fa-solid fa-trash" style="padding-right:10px"></i> Supprimer la section
  1416.             </div>
  1417.         </a>
  1418.     </div>
  1419. {% endif %}
  1422. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->  
  1425. <!-- ///\\\ ///\\\  FIN SECTION + FORME BLEU SOUS SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1427. </section>
  1428. <div class="container">
  1429.     <div class="formeBleu">
  1430.         <div class="row justify-content-center d-flex">
  1431.             {% if section.rond != '' %}
  1432.                 <img src="{{asset('uploads/sections/'~section.rond)}}" class="img-fluid d-none d-lg-block">                        
  1433.             {% endif %}
  1434.         </div>
  1435.     </div>
  1436. </div>
  1437. {% endfor %}
  1440. <!-- ///\\\ ///\\\  AJOUT SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1443. {% if app.user %}
  1444. <div style="{% if sections|length > 0 %}padding-top:20px{% else %}padding-top:250px{% endif %}" align="center">
  1445. <!-- Button trigger modal -->
  1446. <hr style="border-top:dashed #000;">
  1447. <a data-bs-toggle="modal" data-bs-target="#addSection" style="font-size: 25px;
  1448. font-weight: bold;
  1449. color: #bfbfbf; cursor:pointer" >+ Ajouter une section</a>
  1450. <hr  style="border-top:dashed #000;">
  1453. <script>
  1454.     function saveColor(value) {
  1455.         $('#couleurSection').val(value);
  1456.     }
  1457. </script>
  1459. {% endif %}
  1460. {% endif %}
  1465. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1466. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    SCRIPT PCONTENT   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1467. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1470. <!-- ///\\\ ///\\\  SCRIPT ACCORDEON ///\\\ ///\\\  -->  
  1472. <script>
  1473.     let accordionHeaders = document.querySelectorAll('.accordion-header');
  1475.     accordionHeaders.forEach(header => {
  1476.         let button = header.querySelector('.texteDeroulant button');
  1478.         button.addEventListener('click', function () {
  1479.             let parentAccordion = header.closest('.accordion');
  1480.             let buttons = parentAccordion.querySelectorAll('.texteDeroulant button');
  1481.             let content = header.nextElementSibling; // The content section to show/hide
  1483.             // Check if the content section is already open
  1484.             if (content.classList.contains('show')) {
  1485.                 // Close the content section
  1486.                 content.classList.remove('show');
  1487.                 content.classList.add('collapse');
  1488.             } else {
  1489.                 // Close all other open sections (if any) and open this content section
  1490.                 buttons.forEach(btn => {
  1491.                     let contentToClose = btn.parentElement.nextElementSibling;
  1492.                     if (contentToClose.classList.contains('show')) {
  1493.                         contentToClose.classList.remove('show');
  1494.                         contentToClose.classList.add('collapse');
  1495.                     }
  1496.                 });
  1498.                 // Open the content section
  1499.                 content.classList.remove('collapse');
  1500.                 content.classList.add('show');
  1501.             }
  1503.             // Toggle the button color
  1504.             if (button.style.color !== 'red') {
  1505.                 buttons.forEach(btn => {
  1506.                     btn.style.color = 'white';
  1507.                 });
  1508.                 button.style.color = 'red';
  1509.             } else {
  1510.                 button.style.color = 'white';
  1511.             }
  1512.         });
  1513.     });
  1515.     let buttonsForIcon = document.querySelectorAll('.texteDeroulant button');
  1516.     let icons = document.querySelectorAll('.jsIcon');
  1517.     let previousIcon = null;
  1519.     buttonsForIcon.forEach((button, index) => {
  1520.         let icon = icons[index];
  1522.         button.addEventListener('click', function () {
  1523.             if (previousIcon !== null && previousIcon !== icon) {
  1524.                 // Restore the previous icon to fa-plus-circle
  1525.                 previousIcon.classList.remove('fa-minus-circle');
  1526.                 previousIcon.classList.add('fa-plus-circle');
  1527.             }
  1529.             if (icon.classList.contains('fa-plus-circle')) {
  1530.                 icon.classList.remove('fa-plus-circle');
  1531.                 icon.classList.add('fa-minus-circle');
  1532.             } else {
  1533.                 icon.classList.remove('fa-minus-circle');
  1534.                 icon.classList.add('fa-plus-circle');
  1535.             }
  1537.             previousIcon = icon;
  1538.         });
  1539.     });
  1540. </script>
  1542. </section>
  1551. </main>
  1553.          
  1555.          
  1556.         
  1557.          
  1558.            <script type="text/javascript">
  1559.             $(document).ready(function(){
  1560.                 $('.slider-demo-valeur').slick({
  1561.                     arrows: true,
  1562.                     infinite:true,
  1563.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1564.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1565.                     slidesToShow:4,
  1566.                     slidesToScroll:4,
  1567.                     responsive:[{
  1568.                         breakpoint:1400,
  1569.                         settings:{
  1570.                             slidesToShow:3,  
  1571.                             slidesToScroll:3,            
  1572.                         }
  1573.                     },{
  1574.                         breakpoint:1200,
  1575.                         settings:{
  1576.                             slidesToShow:2,
  1577.                             slidesToScroll:2, 
  1578.                         }
  1579.                     },
  1580.                     {
  1581.                         breakpoint:769,
  1582.                         settings:{
  1583.                             slidesToShow:1,
  1584.                             slidesToScroll:1, 
  1585.                         }
  1586.                     }],
  1587.                 });
  1588.             });
  1589.         </script>
  1591.         <script>
  1592.             function changeLanguage(selectedButton, modalId) {
  1593.                 let modal = document.getElementById(modalId);
  1594.                 let buttons = modal.querySelectorAll(".button-langue");
  1595.                 let inputField = modal.querySelector(".sectionTitle");
  1596.                 
  1597.                 buttons.forEach((button) => {
  1598.                     if (button === selectedButton) {
  1599.                         button.classList.add("button-langue-active");
  1600.                         button.classList.remove("button-langue-noactive");
  1601.         
  1602.                         // Set the input field value based on the active language
  1603.                         switch (button.textContent) {
  1604.                             case "FR":
  1605.                                 inputField.value = "Titre de la section FR";
  1606.                                 break;
  1607.                             case "EN":
  1608.                                 inputField.value = "Section Title EN";
  1609.                                 break;
  1610.                             case "DE":
  1611.                                 inputField.value = "Abschnittstitel DE";
  1612.                                 break;
  1613.                             // Add cases for other languages if needed
  1614.                             default:
  1615.                                 inputField.value = "";
  1616.                         }
  1617.                     } else {
  1618.                         button.classList.remove("button-langue-active");
  1619.                         button.classList.add("button-langue-noactive");
  1620.                     }
  1621.                 });
  1622.             }
  1623.         
  1624.             function changeColor(selectedColorButton, modalId) {
  1625.                 let modal = document.getElementById(modalId);
  1626.                 const colorButtons = modal.querySelectorAll(".button-couleur");
  1627.                 colorButtons.forEach((colorButton) => {
  1628.                     if (colorButton === selectedColorButton) {
  1629.                         colorButton.classList.add("button-color-active");
  1630.                         colorButton.classList.remove("button-color-noactive");
  1631.                     } else {
  1632.                         colorButton.classList.remove("button-color-active");
  1633.                         colorButton.classList.add("button-color-noactive");
  1634.                     }
  1635.                 });
  1636.             }
  1637.         
  1638.             function clearDefaultText(inputField) {
  1639.                 // Clear the default value if it matches the default text
  1640.                 if (inputField.value === inputField.defaultValue) {
  1641.                     inputField.value = '';
  1642.                 }
  1643.             }
  1644.         
  1645.             function restoreDefaultText(inputField) {
  1646.                 // Restore the default value if the input is empty
  1647.                 if (inputField.value === '') {
  1648.                     inputField.value = inputField.defaultValue;
  1649.                 }
  1650.             }
  1653.             function recupDoc(id)
  1654.             {
  1655.                 $('#idDocumentSend').val(id)
  1656.             }
  1657. </script>
  1658.         
  1660.   
  1661.        
  1663. <!-- ///\\\ ///\\\  IMPORT ///\\\ ///\\\  -->  
  1665. <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
  1666. <script src="{{asset('js/jquery-latest.min.js')}}"></script>
  1667. <script src="{{asset('slick/slick.js')}}"></script>
  1668. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  1672. <script type="text/javascript">
  1673.     $(document).ready(function() {
  1674.         $('.slider-demo-galerie').slick({
  1675.             arrows: true,
  1676.             infinite:true,
  1677.             autoplay: true, // Ajout de l'option autoplay
  1678.             autoplaySpeed: 4000, // Durée de chaque diapositive en millisecondes
  1679.             slidesToShow:4,
  1680.             slidesToScroll:4,
  1681.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1682.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1683.             responsive:[{
  1684.                 breakpoint:1400,
  1685.                 settings: {
  1686.                     slidesToShow:3,  
  1687.                     slidesToScroll:3,            
  1688.                 }
  1689.                 },{
  1690.                     
  1691.                 breakpoint:1200,
  1692.                 settings:{
  1693.                     slidesToShow:2,
  1694.                     slidesToScroll:2, 
  1695.                 }
  1696.                 },
  1697.                 {
  1698.                 breakpoint:769,
  1699.                 settings:{
  1700.                     slidesToShow:1,
  1701.                     slidesToScroll:1, 
  1702.                 }
  1703.             }],
  1704.         });
  1705.        
  1707.         $('.slider-demo-actu').slick({
  1708.             arrows: true,
  1709.             infinite: true,
  1710.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1711.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1712.             slidesToShow: 4,
  1713.             slidesToScroll: 4,
  1714.                 responsive:[{
  1715.                     breakpoint:1400,
  1716.                     settings:{
  1717.                         slidesToShow:3,  
  1718.                         slidesToScroll:3,            
  1719.                     }
  1720.                 },{
  1721.                     breakpoint:1200,
  1722.                     settings:{
  1723.                         slidesToShow:2,
  1724.                         slidesToScroll:2, 
  1725.                     }
  1726.                 },
  1727.                 {
  1728.                     breakpoint:769,
  1729.                     settings:{
  1730.                         slidesToShow:1,
  1731.                         slidesToScroll:1, 
  1732.                     }
  1733.                 }],
  1734.             });
  1735.         });
  1736.         
  1737.          $(document).ready(function(){
  1738.                 $('.slider-demo-actu').slick({
  1739.                     arrows: true,
  1740.                     infinite:true,
  1741.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1742.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1743.                     slidesToShow:4,
  1744.                     slidesToScroll:4,
  1745.                     responsive:[{
  1746.                         breakpoint:1400,
  1747.                         settings:{
  1748.                             slidesToShow:3,  
  1749.                             slidesToScroll:3,            
  1750.                         }
  1751.                     },{
  1752.                         breakpoint:1200,
  1753.                         settings:{
  1754.                             slidesToShow:2,
  1755.                             slidesToScroll:2, 
  1756.                         }
  1757.                     },
  1758.                     {
  1759.                         breakpoint:500,
  1760.                         settings:{
  1761.                             slidesToShow:1,
  1762.                             slidesToScroll:1, 
  1763.                         }
  1764.                     }],
  1765.                 });
  1766.             });
  1769.                $(document).ready(function(){
  1770.                 $('.slider-cms').slick({
  1771.                     arrows: true,
  1772.                     infinite:true,
  1773.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1774.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1775.                     slidesToShow:4,
  1776.                     slidesToScroll:4,
  1777.                     responsive:[{
  1778.                         breakpoint:1400,
  1779.                         settings:{
  1780.                             slidesToShow:3,  
  1781.                             slidesToScroll:3,            
  1782.                         }
  1783.                     },{
  1784.                         breakpoint:1200,
  1785.                         settings:{
  1786.                             slidesToShow:2,
  1787.                             slidesToScroll:2, 
  1788.                         }
  1789.                     },
  1790.                     {
  1791.                         breakpoint:600,
  1792.                         settings:{
  1793.                             slidesToShow:1,
  1794.                             slidesToScroll:1, 
  1795.                         }
  1796.                     }],
  1797.                 });
  1798.             });
  1799.     </script>
  1801. <!-- ================================================= -->
  1804. <!-- Modal Consultation ERP -->
  1805. <div class="modalForm">
  1806. <div class="modal fade" id="exampleModalConsultationERP" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1807.   <div class="modal-dialog">
  1808.     <div class="modal-content">
  1809.       <div class="modal-body">
  1810.         <div class="formulaireFile">
  1811.           <p class="pa1">
  1812.             {% if app.request.locale == 'fr' %}
  1813.             Nous vous remercions de votre intérêt pour la solution DELMIAWorks.
  1814.             {% else %}
  1815.             Thank you for your interest in the DELMIAWorks solution.
  1816.             {% endif %}
  1817.           </p>
  1818.           <p class="pa2">
  1819.             {% if app.request.locale == 'fr' %}
  1820.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1821.             {% else %}
  1822.             To book a free consultation, please enter your contact details.
  1823.             {% endif %}
  1824.           </p>
  1826.           <form action="{{path('sendConsultationERP')}}" method="post">
  1827.             <input type="hidden" id="idDocument" name="document">
  1828.             <div class="row">
  1829.               <div class="d-flex">
  1830.                 <div class="col-6 w100" style="">
  1831.                   <p class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></p>
  1832.                   <input type="text" id="Nom" name="nom" required>
  1833.                 </div>
  1834.                 <div class="col-6 w100">
  1835.                   <p class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></p>
  1836.                   <input type="text" id="Prenom" name="prenom" required>
  1837.                 </div>
  1838.               </div>
  1840.               <div class="d-flex">
  1841.                 <div class="col-12 w100">
  1842.                   <p class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></p>
  1843.                   <input type="text" id="nomSociete" name="societe" required>
  1844.                 </div>
  1845.               </div>
  1847.               <div class="d-flex">
  1848.                 <div class="col-12 w100">
  1849.                   <p class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></p>
  1850.                   <input type="text" id="mail" name="mail" required>
  1851.                 </div>
  1852.               </div>
  1854.               <div class="d-flex flex-md-row flex-column">
  1855.                 <div class="col-md-7 col-12">
  1856.                   <div class="form-check d-flex">
  1857.                     <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1858.                     <label class="form-check-label text-light" for="flexCheckDefault">
  1859.                       {% trans %}form-condition1{% endtrans %}<a href="{{asset('P-CPI-0032-RevOR-Politique protection des données site internet.pdf')}}" target="_blank"> {% trans %}form-condition2{% endtrans %}</a>
  1860.                     </label>
  1861.                   </div>
  1862.                 </div>
  1863.                 <div class="col-md-5 col-12">
  1864.                   <div class="d-flex justify-content-center align-items-start">
  1865.                     <button type="submit" class="buttonDoc">
  1866.                       {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1867.                     </button>
  1868.                   </div>
  1869.                 </div>
  1870.               </div>
  1871.             </div>
  1872.           </form>
  1873.         </div>
  1874.       </div>
  1875.     </div>
  1876.   </div>
  1877. </div>
  1878. </div>
  1881. <!-- Modal Consultation Base Outil -->
  1882. <div class="modalForm">
  1883. <div class="modal fade" id="exampleModalConsultationBaseOutil" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1884.   <div class="modal-dialog">
  1885.     <div class="modal-content">
  1886.       <div class="modal-body">
  1887.         <div class="formulaireFile">
  1888.           <p class="pa1">
  1889.             {% if app.request.locale == 'fr' %}
  1890.             Nous vous remercions de votre intérêt pour la solution Base outils coupants - Wintool.
  1891.             {% else %}
  1892.             Thank you for your interest in the Wintool cutting tool base solution.
  1893.             {% endif %}
  1894.           </p>
  1895.           <p class="pa2">
  1896.             {% if app.request.locale == 'fr' %}
  1897.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1898.             {% else %}
  1899.             To book a free consultation, please enter your contact details.
  1900.             {% endif %}
  1901.           </p>
  1903.           <form action="{{ path('sendConsultationBaseOutils') }}" method="post">
  1904.             <input type="hidden" id="idDocument" name="document">
  1905.             <div class="row">
  1906.               <div class="col-6 mb-3">
  1907.                 <div class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></div>
  1908.                 <input type="text" id="Nom" name="nom" required>
  1909.               </div>
  1910.               <div class="col-6 mb-3">
  1911.                 <div class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></div>
  1912.                 <input type="text" id="Prenom" name="prenom" required>
  1913.               </div>
  1914.               <div class="col-12 mb-3">
  1915.                 <div class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></div>
  1916.                 <input type="text" id="nomSociete" name="societe" required>
  1917.               </div>
  1918.               <div class="col-12 mb-3">
  1919.                 <div class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></div>
  1920.                 <input type="text" id="mail" name="mail" required>
  1921.               </div>
  1922.               <div class="col-md-7 col-12 mb-3">
  1923.                 <div class="form-check d-flex">
  1924.                   <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1925.                   <label class="form-check-label text-light" for="flexCheckDefault">
  1926.                     {% trans %}form-condition1{% endtrans %}<a href="{{ asset('P-CPI-0032-RevOR-Politique protection des données site internet.pdf') }}" target="_blank"> {% trans %}form-condition2{% endtrans %}</a>
  1927.                   </label>
  1928.                 </div>
  1929.               </div>
  1930.               <div class="col-md-5 col-12 mb-3">
  1931.                 <div class="d-flex justify-content-center align-items-start">
  1932.                   <button type="submit" class="buttonDoc">
  1933.                     {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1934.                   </button>
  1935.                 </div>
  1936.               </div>
  1937.             </div>
  1938.           </form>
  1939.         </div>
  1940.       </div>
  1941.     </div>
  1942.   </div>
  1943. </div>
  1944. </div>
  1951. <style>
  1952. .modalForm .modal-body{
  1953.     width: 100%;
  1954. }
  1957. .modalForm .modal-content{
  1958.     align-items: start!important;
  1959. }
  1961. .modalForm .modal-body form p{
  1962.     color:white;
  1963.     font-weight: 400;
  1964.     font-size: 18px;
  1965. }
  1967. .modalForm .modal input{
  1968.     width: 100%!important;
  1969.     border-radius: 20px;
  1970.     padding: 7px;
  1971. }
  1973. .modalForm .buttonDoc{
  1974.     background-color: #FFDE2B;
  1975.     border-radius: 50px;
  1976.     color: #30278E;
  1977.     font-family: "Open Sans";
  1978.     font-weight: bold;
  1979.     font-size: 14px;
  1980.     border: none;
  1981.     padding-left: 35px;
  1982.     padding-right: 35px;
  1983.     padding-top: 16px;
  1984.     padding-bottom: 16px;
  1986. }
  1988. .modalForm .formulaire{
  1989.     width: 100%;
  1990.     height: 100%;
  1991. }
  1993. .modalForm .formulaire p{
  1994.     color: white;
  1995.     padding: 0;
  1996.     margin: 0;
  1997.     margin-bottom: 10px;
  1999. }
  2005. .modalForm .formulaireFile input{
  2006.     /* width: 100%; */
  2007.     border-radius: 25px;
  2008.     padding-top: 1%;
  2009.     padding-bottom: 1%;
  2010.     padding-right: 10px;
  2011.     padding-left: 10px;
  2012.     border: solid 1px #ececec;
  2013.     margin-right: 5px;
  2014. }
  2016. .modalForm .formulaireFile .w100 input{
  2017.     width: 100%;
  2018.     margin-bottom: 15px;
  2019. }
  2021. .modalForm .formulaireFile .pa1{
  2022.     font-family: "Open Sans";
  2023.     font-size: 32px;
  2024.     color: #FFDE2B;
  2025.     font-weight: bold;
  2026. }
  2028. .modalForm .formulaireFile .pa2{
  2029.     font-family: "Open Sans";
  2030.     font-size: 18px;
  2031.     color: white;
  2032.     font-weight: 100;
  2033. }
  2035. .modalForm .formulaireFile .pa3{
  2036.     font-family: "Open Sans";
  2037.     font-size: 18px;
  2038.     color: white;
  2039.     font-weight: normal;
  2040. }
  2042. .modalForm .responsive-txt{
  2043.     margin-left: 50px;
  2044. }
  2046. .modalForm .form-check-input[type="checkbox"] {
  2047.     height: 20px !important;
  2048.     width: 20px!important;
  2049. }
  2051. .modalForm .responsive-img{
  2052.     width: 30%;
  2053. }
  2055. .modalForm .modal{
  2056.     --bs-modal-header-border-width: 0px!important;
  2057.     --bs-modal-footer-border-width: 0px!important;
  2058.     --bs-modal-bg: white!important;
  2059.     --bs-modal-bg: transparent!important;
  2060.     --bs-modal-border-color:transparent!important;
  2061.     --bs-modal-width: 828px!important;
  2062. }
  2064. .modalForm .modal-title{
  2065.     color: #FFDE2B;
  2066.     font-size: 32px;
  2067.     font-weight: bold;
  2069. }
  2071. /* RESPONSIVE */
  2072. @media screen and (max-width: 1080px) {
  2074.     .responsive-txt{
  2075.         margin-left: 0px;
  2076.     }
  2078.     .responsive-img{
  2079.         width: 100%;
  2080.         margin-bottom: 25px;
  2081.     }
  2083. }
  2084. </style>
  2086. {% endblock %}