templates/default/baseOutils.html.twig line 1

Open in your IDE?
  1. {# BASE LOAD #}
  2. {% extends 'base.html.twig' %}
  5. {# TITLE TOP PAGE #}
  6. {% block title %}CPI | {% if app.request.locale == 'fr' %}Base Outils{% else %}Custting Tool Base{% endif %}{% endblock %}
  8. {# CSS #}
  9. {% block stylesheet %}
  10.     <meta property="og:image" content="{{asset('img/industrialisation/expertise.png')}}">
  11.     {# CSS DU CMS #}
  12.     <link rel="stylesheet" href="{{ asset('css/cmsContent.css')}}">
  13.     <link rel="stylesheet" href="{{ asset('css/cms.css')}}">
  14.     {# / #}
  15.     <link rel="stylesheet" href="{{asset('slick/slick.css')}}">
  16.     <link rel="stylesheet" href="{{asset('slick/slick-theme.css')}}">
  17. {% endblock %}
  21. {# BODY HOME PAGE #}
  22. {% block body %}
  24. <main>
  26. {% if ip == '90.63.222.84' or ip =='193.148.82.168' or ip =='5.48.160.74' %}
  28. {# CMS LOAD ADMIN MODE #}
  29. {% if app.user %}
  30.     {% include 'cms.html.twig' %}
  31. {% endif %}
  35. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ -->
  38. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  GESTION DES SECTION ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  40. {% set i = 0 %}
  41. {% for section in sections %}
  42. {% set i = i +1 %}
  43.           
  44. <section id="section{{section.id}}" style="
  45.     {% if section.image %}
  46.         background-image: url(../uploads/sections/{{section.image}});
  47.         background-size: contain;
  48.         background-repeat: repeat-x;
  49.         background-color: #190D6F;
  51.     {% else %}
  52.         background-color:{{section.color}}; 
  53.     {% endif %}
  56.     {% if i > 1 %}
  57.         margin-top:-54px
  58.     {% endif %} 
  59. ">
  61. <style>
  63. main{
  64.     overflow: hidden;
  65. }
  67. .accordion-body li{
  68.     color:white;
  69. }
  70. .accordion-body li p{
  71.     margin-bottom:0
  72. }
  74. .opensans_bold_40{
  75.     margin-bottom:60px!important;
  76. }
  78. .slick-prev {
  79.     color:red!important;
  80.     top:-120px!important;
  81.        color:#30278d!important;
  83. }
  85. .slick-prev:before {
  86.     content: url(../img/flèche_gauche-bo.svg)!important;
  87.     transition:1s all;
  88. }
  90. .slick-next:before {
  91.     content: url(../img/flèche_droite_bo.svg)!important;
  92.         transition:1s all;
  94. }
  96. .slick-next {
  97.     color:red!important;
  98.     top:-120px!important;
  99.         color:#30278d!important;
  101. }
  103. #bloc154 img{
  104.     width:50%;
  105.     border-radius:0px!important;
  106. }
  108. #bloc609{
  109.     display:flex;
  110.     justify-content:center;
  111. }
  113. @media screen and (max-width: 990px){
  115. .tete-carte p:last-child {
  117.     bottom: 29px!important;
  118. }
  120. .slick-prev {
  121.     color:red!important;
  122.     top:-80px!important;
  123. }
  125. .slick-next {
  126.     color:red!important;
  127.     top:-80px!important;
  128. }
  130. .opensans_bold_40{
  131.     margin-bottom:20px!important;
  132. }
  136. }
  140. </style>
  142. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  144. {% set y = 0 %}
  145. {% for res in section.lignes %}
  146. {% set y = y+1 %}
  147.     <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;
  148.     {% else %}
  149.     {% if i > 1 %}
  150.     padding-top:112px; padding-bottom:112px;
  151.     {% endif %}
  152.     {% if y > 1 %}
  153.     padding-top:0; padding-bottom:112px;
  154.     {% endif %}
  155.     
  156.     {% endif %}">
  157.         <div class="container text-light pb-3"> 
  158.             <div class="row pt-5 justify-content-center justify-content-md-start">
  160.               {% if app.user %}
  161.                             <a href="{{path('app_deleteLigne',{'id':res.id,'pages':page.id} )}}" onclick="return confirm('Êtes-vous sûr ?')">
  162.                                 <div class="d-flex justify-content-end">
  163.                                     <div class="d-flex justify-content-center align-items-center cubeIcon2">
  164.                                         <i class="fa-solid fa-trash"></i>
  165.                                     </div>
  166.                                 </div>
  167.                             </a>
  168.                         {% endif %}
  169.                 {% for res2 in res.blocs %}
  170.                     <div id="bloc{{res2.id}}" data-aos="fade-up" data-aos-duration="1000" class="
  172.                         {% if res2.type == 2 %}
  173.                             col-xl-2 col-12
  174.                         {% endif %}
  176.                         {% if res2.type == 3 %}
  177.                             col-xxl-3 col-md-6 col-12
  178.                         {% endif %}
  180.                         {% if res2.type == 4 %}
  181.                             col-xxl-4 col-md-6 col-12
  182.                         {% endif %}
  184.                         {% if res2.type == 6 %}
  185.                             col-lg-6 col-12
  186.                         {% endif %}
  188.                         {% if res2.type == 8 %}
  189.                             col-12
  190.                         {% endif %}
  192.                         {% if res2.type == 12 %}
  193.                             col-12
  194.                         {% endif %}
  198.                         
  199.                     
  200.                     
  201.                     " {% if app.user %} style="border:dashed 1px grey; border-radius:10px; margin-bottom:10px"{% endif %}>
  202.                         
  203.                                     
  204.                         {% if res2.contenuses is not empty %}
  205.                             {% if res2.contenuses.0.typesContenus.id != 8 %}
  206.                             {% endif %}
  207.                         {% endif %}
  209. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  210. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   AFFCHER CONTENUS   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  211. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  213.                         {% if res2.contenuses is not empty %}
  216.                             <!-- ///\\\ ///\\\ TEXTE ///\\\ ///\\\  -->
  218.                             {% if res2.contenuses.0.typesContenus.id == 1 %}
  220.                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  221.                                 
  222.                                 {% if res2.contenuses.0.document is not empty %}
  223.                                 <a href="{{res2.contenuses.0.document}}" target="_blank" style="text-decoration:none;">
  224.                                             <button type="button btn-modal" class="justify-content-center align-items-center text-center" 
  225.                                                 style="
  226.                                                   background-color:{{res2.contenuses.0.background}}!important; 
  227.                                                     border:solid 3px {{res2.contenuses.0.couleur1}}!important;
  228.                                                     border-radius: 30px!important;
  229.                                                     color: rgb(0, 206, 255);
  230.                                                     font-weight: bold;
  231.                                                     background-color: #0c24b3;
  232.                                                     cursor: pointer;
  233.                                                     padding-top: 12px;
  234.                                                     padding-left: 50px;
  235.                                                     padding-right: 50px;
  236.                                                     margin-top:20px
  237.                                                  
  238.                                                     
  239.                                             ">
  240.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</button>
  241.                                         </a>
  242.                                 {% endif %}
  243.                             {% endif %}
  245.                             {% if i == 1 %}
  246.                                 {% if loop.first %}
  247.                                     <div class="traitBlanc"></div>
  248.                                 {% endif %}
  249.                             {% endif %}
  251.                             <!-- ///\\\ ///\\\ FIN TEXTE ///\\\ ///\\\  -->
  254.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  257.                             <!-- ///\\\ ///\\\ IMAGE ///\\\ ///\\\  -->
  259.                             {% if res2.contenuses is not empty %}
  260.                                 {% if res2.contenuses.0.typesContenus.id == 2 %}
  261.                                     <div  class="col-12 d-flex  mt-lg-0 justify-content-{{res2.contenuses.0.background}}">
  262.                                     {% if res2.contenuses.0.lien %}
  263.                                     <a href="{{res2.contenuses.0.lien}}" target="_blank">
  264.                                     {% endif %}
  265.                                         <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 %}">
  266.                                     
  267.                                     {% if res2.contenuses.0.lien %}
  268.                                     </a>
  269.                                     {% endif %}
  270.                                     </div>
  271.                                 {% endif %}
  272.                             {% endif %}
  274.                             <!-- ///\\\ ///\\\ FIN IMAGE ///\\\ ///\\\  -->
  277.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  280.                             <!-- ///\\\ ///\\\ VIDEOS ///\\\ ///\\\  -->
  282.                             {% if res2.contenuses is not empty %}
  283.                                 {% if res2.contenuses.0.typesContenus.id == 3 %}
  284.                                     <div data-aos="fade-up" data-aos-duration="1000" class="col-12 justify-content-center">
  285.                                         <div class="image">             
  286.                                             <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>
  287.                                         </div>
  289.                                         <div class="texte">
  290.                                             <p style="font-weight:bold">
  291.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}
  292.                                             </p>
  293.                                         </div>
  294.                                     </div>            
  295.                                 {% endif %}
  296.                             {% endif %}
  298.                             <!-- ///\\\ ///\\\ FIN VIDEO ///\\\ ///\\\  -->
  301.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  304.                             <!-- ///\\\ ///\\\ BOX PICTO  ///\\\ ///\\\  -->
  306.                             {% if res2.contenuses is not empty %}
  307.                                 {% if res2.contenuses.0.typesContenus.id == 4 %}  
  308.                                 <div class="cartes-2">           
  309.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  310.                                         <div class="image d-flex justify-content-center">
  311.                                             <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 %}">
  312.                                         </div>
  313.                                         <div class="corps-carte">
  314.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}};">
  315.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  316.                                             </div>
  317.                                             <div class="texte-carte" style="min-height: 370px!important; background-color:{{res2.contenuses.0.couleur1}}">
  318.                                                 <div class="texte-1" style="min-height: 161px;">
  319.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  320.                                                 </div>
  321.                                                 {% if res2.contenuses.0.video is not empty %}
  322.                                                     <div class="button-carte">
  323.                                                         <a href="{{res2.contenuses.0.video}}" >
  324.                                                             <button class="buttonMore">En savoir plus</button>
  325.                                                         </a>
  326.                                                     </div>
  327.                                                 {% endif %}
  328.                                             </div>   
  329.                                         </div>
  330.                                     </div>
  331.                                 </div>
  332.                                 {% endif %}
  333.                             {% endif %}
  334.                             
  335.                             <!-- ///\\\ ///\\\ FIN BOX PICTO ///\\\ ///\\\  -->
  336.                                    
  338.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  341.                             <!-- ///\\\ ///\\\ AVANTAGES  ///\\\ ///\\\  -->
  343.                             {% if res2.contenuses is not empty %}
  344.                                 {% if res2.contenuses.0.typesContenus.id == 7 %}
  345.                                     <div data-aos="fade-up" data-aos-duration="1000" class="avantages">
  346.                                         <div class="carteA bg-bleu" style="background-color:{{res2.contenuses.0.background}}">
  347.                                             <div class="tete-carte d-flex ">
  348.                                                 {% if res2.contenuses.0.image != '' %}
  349.                                                     <img class="img-fluid" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="">
  350.                                                 {% endif %}
  351.                                                 <span style="font-weight:bold">{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</span>
  352.                                             </div>
  353.                                             <div class="texte-carte">
  354.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  355.                                             </div>
  356.                                         </div>
  357.                                     </div>
  358.                                 {% endif %}
  359.                             {% endif %}
  361.                             <!-- ///\\\ ///\\\ FIN AVANTAGES ///\\\ ///\\\  -->
  364.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  367.                             <!-- ///\\\ ///\\\ ACCORDEON  ///\\\ ///\\\  -->
  369.                             {% if res2.contenuses.0.typesContenus.id == 8 %}
  370.                                 <div data-aos="fade-up" data-aos-duration="1000" class="texteDeroulant text-light">
  371.                                     <div class="accordion" id="accordionExample">
  372.                                         {% set ac = 0 %}
  373.                                          <div style="margin-bottom:32px;">
  374.                                         {% if app.request.locale == 'fr' %}{{res2.contenuses.0.titreFr|raw}}{% else %}{{res2.contenuses.0.titreEn|raw}}{% endif %}
  375.                                         </div>
  377.                                         {% for res3 in res2.contenuses.0.accordeons %}
  378.                                             {% set ac = ac+1 %}
  379.                                             <div class="accordion-item" style="background-color:{{res3.background}}!important;">
  380.                                                 <h2 class="accordion-header" id="heading{{res3.id}}">
  381.                                                     <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}}">
  382.                                                     <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 %}
  383.                                                     </button>
  384.                                                 </h2>
  385.                                                         
  386.                                                 <div id="collapseOne" class="accordion-collapse collapse {% if ac == 1 %}{% endif %}" aria-labelledby="heading{{res3.id}}" data-bs-parent="#accordionExample">
  387.                                                     <div class="accordion-body">
  388.                                                         <div class="accordion-hr"></div>
  389.                                                         {% if app.request.locale == 'en' %}{{res3.TexteEn|raw}}{% else %}{{res3.TexteFr|raw}}{% endif %}   
  390.                                                     </div>
  391.                                                 </div>
  392.                                             </div>
  394.                                         {% endfor %}
  395.                                     </div>                                                        
  396.                                 </div>
  398.                                 <script>
  399.                                     $(document).ready(function () {
  400.                                         $('.accordion-button').click(function () {
  401.                                             $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
  402.                                             $('.accordion-button').not(this).find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  403.                                         });
  404.                                     });
  405.                                </script>
  406.  
  407.                                 {% if app.user %}           
  408.                                     <br>
  409.                                     <div class="d-flex justify-content-center">
  410.                                         <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>
  411.                                     </div>
  412.                                 {% endif %}
  413.               
  414.                             {% endif %}
  416.                             <!-- ///\\\ ///\\\ FIN ACCORDEON  ///\\\ ///\\\  -->
  418.                         {% endif %}
  420.                             
  421.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  425.                         {% if res2.contenuses is not empty %}
  427.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  429.                             {% if res2.contenuses.0.typesContenus.id == 10 %}
  430.                                 <div data-aos="fade-up" data-aos-duration="1000" class="container d-flex paddingPerso2" >
  431.                                     <div class="slider-demo-valeur">
  434.                                         {% for carou in  res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1) %}
  435.                                             <div data-aos="fade-up" data-aos-duration="1000" class="carte " style="padding-left: 15px!important;padding-right: 15px;!important">
  436.                                                 <div class="col-12">
  437.                                                     <div class="image d-flex justify-content-center">
  438.                                                         <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  439.                                                     </div>
  440.                                                     <div class="corps-carte">
  441.                                                         <div class="tete-carte">
  442.                                                             <p>{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %} </p>
  443.                                                         </div>
  444.                                                         <div class="texte-carte">
  445.                                                             <div class="texte-1">
  446.                                                                 {% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %} 
  447.                                                             </div>
  448.                                                         </div>
  449.                                                     </div>
  450.                                                 </div>
  451.                                             </div>
  452.                                         {% endfor %}
  453.                                     </div>
  454.                                 </div>
  455.                             {% endif %}
  456.                                 
  457.                             {% if app.user %}
  458.                                 {% if res2.contenuses.0.typesContenus.id == 10 %}            
  459.                                     <br>
  460.                                     <div data-aos="fade-up" data-aos-duration="1000" class="d-flex justify-content-center">
  461.                                         <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>
  462.                                     </div>
  463.                                 {% endif %}
  464.                             {% endif %}
  466.                             <!-- ///\\\ ///\\\ FIN BOXPICTO CAROUSEL ///\\\ ///\\\  -->
  467.                         {% endif %}
  470.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  473.                         {% if res2.contenuses is not empty %}
  475.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  477.                             {% if res2.contenuses.0.typesContenus.id == 11  %}
  478.                                 <div  class="row justify-content-center justify-content-md-start" >
  479.                                     <div class="col-12">
  480.                                         <div class="row pb-4">
  481.                                             <div class="titre ">
  482.                                                 <p class="opensans_bold_red_15">TEMOIGNAGES</p>
  483.                                             </div>
  484.                                         </div>  
  485.                                     </div> 
  486.                                 </div>
  487.                                 {% set tem = -1 %}
  488.                                 <div class="row text-light" >
  489.                                     <div class="col-12">
  490.                                         <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  491.                                             <div class="carousel-indicators">
  492.                                                 {% for res in temoignages %}
  493.                                                     {% set tem = tem + 1 %}
  494.                                                     <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>
  495.                                                 {% endfor %}
  496.                                             </div>
  498.                                             {% set tem2 = -1 %}
  499.                                             <div class="carousel-inner">
  500.                                                 {% for res in temoignages %}
  501.                                                     {% set tem2 = tem2 + 1 %}
  502.                                                     <div class="carousel-item {% if tem2 == 0 %}active{% endif %}">
  503.                                                         <div class="row text-light">
  504.                                                             <h2 class="">{{res.titre}}</hé>
  505.                                                         </div>
  506.                                                         <br>
  507.                                                         <p class="citation ">{{res.texte}}</p>
  508.                                                         <br>
  509.                                                         <p style="color:red; font-weight: bold; ">{{res.auteur}}</p>  
  510.                                                     </div>
  511.                                                 {% endfor %}
  512.                                             </div>
  513.                                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  514.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  515.                                                 <span class="visually-hidden">Previous</span>
  516.                                             </button>
  517.                                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  518.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  519.                                                 <span class="visually-hidden">Next</span>
  520.                                             </button>
  521.                                         </div>
  522.                                     </div>
  523.                                 </div>
  524.                                 {% if app.user %}
  525.                                     {% if res2.contenuses.0.typesContenus.id == 11 %}        
  526.                                         <br>
  527.                                         <div class="d-flex justify-content-center">
  528.                                             <a href="{{path('app_temoignages_index')}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les témoignages</button></a>
  529.                                         </div>
  530.                                     {% endif %}
  531.                                 {% endif %}
  532.                             {% endif %}
  534.                             <!-- ///\\\ ///\\\ FIN BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  536.                         {% endif %}
  539.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  542.                         {% if res2.contenuses is not empty %}
  544.                             <!-- ///\\\ ///\\\ CAROUSEL ///\\\ ///\\\  -->
  546.                               
  547.                              
  549.                                 
  550.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}
  551.                                     <div class="carouselcms">
  552.                                             <div class="slider-cms">
  553.                                                 {% for carou in res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1)%}
  554.                                                     <div class="carte-slider-cms d-flex flex-column"  >        
  555.                                                         <div class="container-img-slider-cms">                               
  556.                                                             <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  557.                                                         </div>
  559.                                                         {% if carou.titreEn != '' or carou.titreFr != '' %}
  560.                                                         <div class="container-titre-slider-cms"> 
  561.                                                             <h3 class="opensans_bold_32">{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %}</h3>   
  562.                                                         </div>
  563.                                                         {% endif %}
  565.                                                         {% if carou.texteEn != '' or carou.texteFr != '' %}
  566.                                                             <div class="container-text-slider-cms"> 
  567.                                                                 <p>{% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %}</p>
  568.                                                             </div>
  569.                                                         {% endif %}
  571.                                                      
  573.                             
  574.                                                     </div>
  575.                                                 {% endfor %}
  576.                                             </div>
  577.                                     </div>
  579.                                        {% endif %}
  580.                                    
  581.                                     <style>
  582.                                     
  583.                                         .carouselcms{
  584.                                             width:100%;
  585.                                         
  586.                                         }
  588.                                         .slider-cms{
  589.                                             width:100%;
  590.                                            
  591.                                             height: 100%;
  592.                                             
  593.                                         }
  598.                                         .carte-slider-cms{
  599.                                           
  600.                                             padding-left: 5px;
  601.                                             padding-right: 5px;
  602.                                             height:100%;
  603.                                             
  604.                                             
  605.                                         }
  607.                                          .container-img-slider-cms {
  608.                                             width: 100%;
  609.                                             height: 220px;
  610.                                        
  611.                                            
  612.                                             
  613.                                         }
  615.                                         .container-img-slider-cms img{
  616.                                             width: 100%;
  617.                                             height: 100%;
  618.                                             border-radius:30px;
  619.                                             
  620.                                             
  621.                                         }
  623.                                 
  626.                                         .container-titre-slider-cms{
  627.                                   
  628.                                             height:60px;
  629.                                             padding:0;
  630.                                             margin:0;
  631.                                         }
  633.                                             .container-titre-slider-cms h3 p{
  634.                                            color:#30278d!important;
  635.                                            font-size: 26px!important;
  636.                                            margin-top:20px;
  637.                                            margin-left:2px;
  638.                                         }
  640.                                         .container-text-slider-cms{
  641.                                             height:180px;
  642.                                         }
  644.                                          .container-text-slider-cms p{
  645.                                             color: white;
  646.                                             font-weight: 100;
  647.                                             font-size:14px;
  648.                                             margin-left:2px;
  649.                                             padding-right:20px;
  651.                                         }
  653.                                             
  654.                                   
  658.                                         .slick-slide img {
  659.                                          
  660.                                             object-fit: cover!important;
  661.                                         }
  665.                                     </style>
  668.                                
  669.                                   
  671.                                 
  680.                                 
  681.                                 {% if app.user %}
  682.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}              
  683.                                         <br>
  684.                                         <div class="d-flex justify-content-center">
  685.                                             <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>
  686.                                         </div>
  687.                                     {% endif %}
  688.                                 {% endif %}
  689.                                       
  690.                             <!-- ///\\\ ///\\\ FIN CAROUSEL ///\\\ ///\\\  -->
  692.                         {% endif %}
  695.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  698.                         {% if res2.contenuses is not empty %}
  700.                             <!-- ///\\\ ///\\\ CHIFFRES CLES ///\\\ ///\\\  -->
  702.                                  {% if res2.contenuses.0.typesContenus.id == 5  %}
  703.                                     <div class="cartes-3" style="background:{{res2.contenuses.0.background}}; border-radius: 30px;">
  704.                                         <div class="carte">
  705.                                             {% if res2.contenuses.0.image is not empty %}
  706.                                                 <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="" style="width:100%;height:100%;border-radius:25px;">
  708.                                             {% else %}
  709.                                                 <div class="titre">
  710.                                                     <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} </p>
  711.                                                 </div>
  712.                                                 <div class="texte">
  713.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  714.                                                 </div>
  715.                                             {% endif %}
  716.                                         </div>
  717.                                     </div>
  718.                                 {% endif %}
  720.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES ///\\\ ///\\\  -->
  722.                         {% endif %}
  726.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  728.         
  729.                         
  730.                         {% if res2.contenuses is not empty %}
  732.                             <!-- ///\\\ ///\\\ CHIFFRES CLES 2 ///\\\ ///\\\  -->
  734.                                 {% if res2.contenuses.0.typesContenus.id == 6  %}
  735.                                     <div class="accueil4">
  736.                                         <div {% if res2.contenuses.0.titreFr|length > 4 %}id="soixante-dix"{% endif %} class="carte">
  737.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  738.                                                 <div class="chiffre justify-content-center" style="background-color:{{res2.contenuses.0.background}}">
  739.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} 
  740.                                                 </div>
  741.                                             </div>
  742.                                             <div class="texte">
  743.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  744.                                             </div>
  745.                                         </div>
  746.                                     </div>
  747.                                 {% endif %}
  749.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES 2 ///\\\ ///\\\  -->
  751.                         {% endif %}
  754.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  757.                         {% if res2.contenuses is not empty %}
  759.                             <!-- ///\\\ ///\\\ BOX PICTO + LIEN ///\\\ ///\\\  -->
  761.                                 {% if res2.contenuses.0.typesContenus.id == 13 %}
  762.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  763.                                         <div class="image d-flex justify-content-center">
  764.                                             <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 %}">
  765.                                         </div>
  766.                                         <div class="corps-carte">
  767.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  768.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  769.                                             </div>
  770.                                             <div class="texte-carte" style="min-height:204px; background-color:{{res2.contenuses.0.couleur1}}">
  771.                                                 <div class="texte-1">
  772.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  773.                                                 </div>
  774.                                                 
  775.                                             </div>    
  776.                                         </div>
  777.                                     </div>
  778.                                 {% endif %}
  780.                             <!-- ///\\\ ///\\\ FIN BOX PICTO + LIEN ///\\\ ///\\\  -->
  781.        
  782.                         {% endif %}
  785.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  788.                         {% if res2.contenuses is not empty %}
  790.                             <!-- ///\\\ ///\\\ BOUTON ///\\\ ///\\\  -->    
  792.                                 {% if res2.contenuses.0.typesContenus.id == 12 %}   
  793.                                     {% if res2.contenuses.0.modal == "modalConsultation2" %}
  795.                                      <button class="buttonmodal" class="buttonmodal" type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationERP" 
  796.                                             style="
  797.                                                 background-color:{{res2.contenuses.0.background}}; 
  798.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  799.                                                 border-radius: 50px!important;
  800.                                                 padding-right: 0%!important;
  801.                                                 padding-left: 0%!important;
  802.                                                 padding-top: 14px!important;   
  803.                                                 width: 300px;
  804.                                                 float:right;
  805.                                         ">
  806.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  808.                                     {% elseif res2.contenuses.0.modal == "modalConsultation" %}
  810.                                      <button class="buttonmodal" type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationBaseOutil" 
  811.                                             style="
  812.                                                 background-color:{{res2.contenuses.0.background}}; 
  813.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  814.                                                 border-radius: 50px;
  815.                                                 padding-right: 0!important;
  816.                                                 padding-left: 0!important;
  817.                                                 padding-top: 19px!important;
  818.                                                 padding-bottom: 5px!important;
  819.                                                 text-align: center!important;
  820.                                                 width: 320px!important;
  821.                                                 position:offset;
  822.                                         ">
  823.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  825.                                     {% elseif res2.contenuses.0.modal == "modalDocumentation" %}
  827.                                      <button class="buttonmodal" type="button btn-modal" class=""  data-bs-toggle="modal" data-bs-target="#exampleModalDoc" 
  828.                                             style="
  829.                                                 background-color:{{res2.contenuses.0.background}}; 
  830.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  831.                                                 border-radius: 30px!important;
  832.                                                 padding-right: 0%!important;
  833.                                                 padding-left: 0%!important;
  834.                                                 padding-top: 14px!important;   
  835.                                                 width: 300px;
  836.                                                 float:right;
  837.                                         ">
  838.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  839.                                    
  840.                                     {% else %}
  841.                                         <a href="{{res2.contenuses.0.lien}}" target="_blank" style="text-decoration:none;">
  842.                                             <button class="buttonmodal" type="button btn-modal" class="" 
  843.                                                 style="
  844.                                                     background-color:{{res2.contenuses.0.background}}; 
  845.                                                     border:solid 3px {{res2.contenuses.0.couleur1}};
  846.                                                     border-radius: 30px!important;
  847.                                                     padding-right: 0%!important;
  848.                                                     padding-left: 0%!important;
  849.                                                     padding-top: 14px!important;   
  850.                                                     width: 300px;
  851.                                                     float:right;
  852.                                             ">
  853.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  854.                                         </a> 
  855.                                     {% endif %}
  858.                                 
  861.                                 {% endif %}
  863.                                 <!-- ///\\\ ///\\\ FIN BOUTON ///\\\ ///\\\  --> 
  865.                         {% endif %}
  868.                              <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  871.                         {% if res2.contenuses is not empty %}
  873.                             <!-- ///\\\ ///\\\ DOCUMENT ///\\\ ///\\\  -->    
  875.                                 {% if res2.contenuses.0.typesContenus.id == 14 %}                  
  876.                                      <div data-aos="fade-up" data-aos-duration="1000" class="accueil9">
  877.                                         <div class="carte">
  878.                                             <div class="image">
  879.                                                 <div class="image-container">
  880.                                                     <img src="{{asset('uploads/contenus/'~res2.contenuses.0.Image)}}" alt="Votre image">
  881.                                                     <div class="image-overlay">
  882.                                                         <center>
  883.                                                         
  884.                                                                     <!-- Button trigger modal -->
  885.                                                                 
  886.                                                                 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDoc" onclick="recupDoc({{res2.contenuses.0.id}})">
  887.                                                                 Récupérer le pdf
  888.                                                                 </button>
  890.                                                                 
  892.                                                         </center>
  893.                                                     </div>
  894.                                                 </div>
  895.                                             </div>
  896.                                             <div class="texte">
  897.                                                   <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  898.                                             </div>
  899.                                         </div>
  900.                                     </div>
  902.                                     <!-- Modal Doc -->
  904.                                     <div class="modalForm">
  905.                                     <div class="modal fade" id="exampleModalDoc" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  906.                                     <div class="modal-dialog">
  907.                                         <div class="modal-content">
  908.                                         <div class="modal-body">
  909.                                             <div class="formulaireFile">
  910.                                             <p class="pa1">Nous vous remercions de votre intérêt pour la solution DELMIAWorks.</p>
  911.                                             <p class="pa2">Afin de pouvoir obtenir la documentation, nous vous remercions de bien vouloir renseigner vos coordonnées.</p>
  913.                                             <form action="{{path('sendDocument')}}" method="post">
  914.                                                     <input type="hidden" id="idDocumentSend" name="document">
  915.                                                     <div class="row">
  916.                                                         <div class="d-flex">
  917.                                                             <div class="col-6 w100" style="">
  919.                                                                 <p class="pa3"> <b>Nom </b><span style="color:red;">*</span></p>
  920.                                                                 <input type="text" id="Nom" name="nom" required>
  921.                                                             </div>
  922.                                                             <div class="col-6 w100">
  923.                                                                 <p class="pa3"> <b>Prénom </b><span style="color:red;">*</span></p>
  924.                                                                 <input type="text" id="Prenom" name="prenom" required>
  925.                                                             </div>
  926.                                                         </div>
  928.                                                         <div class="d-flex">
  929.                                                             <div class="col-12 w100">
  930.                                                                 <p class="pa3"> <b>Nom de la société </b><span style="color:red;">*</span></p>
  931.                                                                 <input type="text" id="nomSociete" name="societe" required>
  932.                                                             </div>
  933.                                                         </div>
  935.                                                         <div class="d-flex">
  936.                                                             <div class="col-12 w100">
  937.                                                                 <p class="pa3"> <b>Votre adresse mail </b><span style="color:red;">*</span></p>
  938.                                                                 <input type="text" id="mail" name="mail" required>
  939.                                                             </div>
  940.                                                         </div>
  943.                                                         <div class="d-flex flex-md-row flex-column">
  944.                                                         <div class="col-md-7 col-12">
  945.                                                             <div class="form-check d-flex">
  946.                                                                 <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  947.                                                                 <label class="form-check-label text-light" for="flexCheckDefault">
  948.                                                                     En cochant cette case, vous acceptez le traitement des données personnelles soumises conformément à la <a href="#">Politique de Confidentialité</a>                                                       </label>
  949.                                                             </div>
  950.                                                         </div>
  951.                                                             <div class="col-md-5 col-12">
  952.                                                                 <div class="d-flex justify-content-center align-items-start">
  953.                                                                     <a href="{{ asset('../public/uploads/contenus/'~res2.contenuses.0.document)}}" target="_blank">      
  954.                                                                         <button type="submit" class="buttonDoc">Obtenir le document</button>
  955.                                                                     </a>
  956.                                                                 </div>
  957.                                                             </div>
  958.                                                         </div>
  960.                                                     </div>
  961.                                             </form>
  962.                                             </div>
  963.                                                 
  964.                                         </div>
  965.                                         </div>
  966.                                     </div>
  967.                                     </div>
  968.                                     </div>
  970.                                 {% endif %}
  972.                             <!-- ///\\\ ///\\\ FIN DOCUMENT ///\\\ ///\\\  -->    
  973.                           
  975.                         {% endif %}
  979.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  980.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  981.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  986.                         <!-- ///\\\ ///\\\ BOUTON MODIFIER CMS ///\\\ ///\\\  --> 
  987.                         {% if res2.contenuses is not empty %}
  988.                             {% if  res2.contenuses.0.typesContenus.id != 10 and res2.contenuses.0.typesContenus.id != 9 %}
  989.                                 {% if app.user %}
  990.                                     <div class="d-flex justify-content-center mb-3">
  991.                                         <a href="{{path('app_editContent',{'id':res2.contenuses.0.id,'type':res2.contenuses.0.typesContenus.libelle})}}">
  992.                                             <div class="d-flex justify-content-center align-items-center cubeIcon">
  993.                                                 <i class="fa-solid fa-pen"></i>
  994.                                             </div>
  995.                                         </a>
  996.                                         <a href="{{path('app_deleteContent',{'id':res2.contenuses.0.id})}}" onclick="return confirm('Êtes-vous sûr ?')">
  997.                                             <div class="d-flex justify-content-center align-items-center cubeIcon2">
  998.                                                 <i class="fa-solid fa-trash"></i>
  999.                                             </div>
  1000.                                         </a>
  1001.                                     </div>
  1002.                                 {% endif %}
  1003.                             {% endif %}
  1004.                         {% endif %}
  1007. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  1008. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL CONTENUS    ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  1009. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1012. {% if app.user %}
  1013.     {% if res2.contenuses is  empty %}
  1014.         <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>
  1015.     {% endif %}
  1019. <!-- ///\\\ ///\\\ MODAL CONTENUS ///\\\ ///\\\  --> 
  1020.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  1021.         <div class="modal-dialog">
  1022.             <div class="modal-content">
  1023.                 <div class="modal-body">
  1024.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1026.                     <div class="container-modal d-flex flex-column">
  1027.                         <h2>Ajouter un contenu</h2>
  1028.                         <p>Les «blocs» peuvent contenir chacun un «Contenu» dédiés à du texte, une image, un lien youtube, …</p>
  1029.                     </div>
  1030.                     
  1031.                     <div class="container-contenu d-flex flex-wrap  justify-content-start">
  1032.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  1033.                             <div class="container-picto container-picto-texte">
  1034.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1035.                                     <img src="{{asset('img/cms/cpi-textes.svg')}}" alt="">
  1036.                                 </div>
  1037.                                 <p class="colonneText text-center">Texte</p>
  1038.                             </div>
  1039.                         </a>
  1041.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'image'})}}">
  1042.                             <div class="container-picto container-picto-texte">
  1043.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1044.                                     <img src="{{asset('img/cms/cpi-images.svg')}}" alt="">
  1045.                                 </div>
  1046.                                 <p class="colonneText text-center">Image</p>
  1047.                             </div>
  1048.                         </a>
  1049.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'video'})}}">
  1050.                             <div class="container-picto container-picto-texte">
  1051.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1052.                                     <img src="{{asset('img/cms/cpi-videos.svg')}}" alt="">
  1053.                                 </div>
  1054.                                 <p class="colonneText text-center">Vidéo</p>
  1055.                             </div>
  1056.                         </a>
  1057.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpicto'})}}">
  1058.                             <div class="container-picto container-picto-texte">
  1059.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1060.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  1061.                                 </div>
  1062.                                 <p class="colonneText text-center">Box + picto</p>
  1063.                             </div>
  1064.                         </a>
  1066.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpictocarousel'})}}">
  1067.                             <div class="container-picto container-picto-texte">
  1068.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1069.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  1070.                                 </div>
  1071.                                 <p class="colonneText text-center">Box + picto <br> (carousel)</p>
  1072.                             </div>
  1073.                         </a>
  1074.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles'})}}">
  1075.                             <div class="container-picto container-picto-texte">
  1076.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1077.                                     <img src="{{asset('img/cms/cpi-chiffres-cles.svg')}}" alt="">
  1078.                                 </div>
  1079.                                 <p class="colonneText text-center">Chiffre clé</p>
  1080.                             </div>
  1081.                         </a>
  1082.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles2'})}}">
  1083.                             <div class="container-picto container-picto-texte">
  1084.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1085.                                     <img src="{{asset('img/cms/cpi-chiffres-cles-2.svg')}}" alt="">
  1086.                                 </div>
  1087.                                 <p class="colonneText text-center">Chiffre clé 2</p>
  1088.                             </div>
  1089.                         </a>
  1090.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'accordeon'})}}">
  1091.                             <div class="container-picto container-picto-texte">
  1092.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1093.                                     <img src="{{asset('img/cms/cpi-accordeons.svg')}}" alt="">
  1094.                                 </div>
  1095.                                 <p class="colonneText text-center">Accordéon</p>
  1096.                             </div>
  1097.                         </a>
  1098.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'avantage'})}}">
  1099.                             <div class="container-picto container-picto-texte">
  1100.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1101.                                     <img src="{{asset('img/cms/cpi-avantages.svg')}}" alt="">
  1102.                                 </div>
  1103.                                 <p class="colonneText text-center">Avantages</p>
  1104.                             </div>
  1105.                         </a>
  1106.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'carousel'})}}">
  1107.                             <div class="container-picto container-picto-texte">
  1108.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1109.                                     <img src="{{asset('img/cms/cpi-carousel.svg')}}" alt="">
  1110.                                 </div>
  1111.                                 <p class="colonneText text-center">Carousel</p>
  1112.                             </div>
  1113.                         </a>
  1114.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'temoignage'})}}">
  1115.                             <div class="container-picto container-picto-texte">
  1116.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1117.                                     <img src="{{asset('img/cms/cpi-temoignage.svg')}}" alt="">
  1118.                                 </div>
  1119.                                 <p class="colonneText text-center">Témoignage</p>
  1120.                             </div>
  1121.                         </a>
  1122.                    <a href="{{path('app_addContent',{'bloc':res2.id,'type':'button'})}}">
  1123.                             <div class="container-picto container-picto-texte">
  1124.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1125.                                     <img src="{{asset('img/cms/cpi-btn.svg')}}" alt="" style="width:57px">
  1126.                                 </div>
  1127.                                 <p class="colonneText text-center">Bouton</p>
  1128.                             </div>
  1129.                         </a> 
  1130.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'document'})}}">
  1131.                             <div class="container-picto container-picto-texte">
  1132.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1133.                                     <img src="{{asset('img/cms/cpi-doc.svg')}}" alt="" style="width:57px">
  1134.                                 </div>
  1135.                                 <p class="colonneText text-center">Document</p>
  1136.                             </div>
  1137.                         </a>                
  1138.                     </div>
  1140.                     <div class="modal-submit d-flex justify-content-end align-items-end">
  1141.                         <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1142.                     </div>
  1143.                 </div>
  1144.             </div>
  1145.         </div> 
  1146.     </div>   
  1148. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS ///\\\ ///\\\  -->                                                                        
  1151. <!-- ///\\\ ///\\\ MODAL CONTENUS 2 ///\\\ ///\\\  -->                             
  1152.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  1153.         <div class="modal-dialog">
  1154.             <div class="modal-content">
  1155.                 <div class="modal-body">
  1156.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1158.                     <div class="container-modal d-flex flex-column">
  1159.                         <h2>Ajouter un contenu</h2>
  1160.                         <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>
  1161.                     </div>
  1162.                     
  1163.                     <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1164.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  1165.                             <div class="container-choix">
  1166.                                 <div class="simu-grid d-flex justify-content-center align-items-center">
  1167.                                     <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1168.                                         <p>12</p>
  1169.                                     </div>
  1170.                                 </div>
  1171.                                 <p class="colonneText text-center">Texte</p>
  1172.                             </div>
  1173.                         </a>
  1174.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  1175.                         <div class="container-choix">
  1176.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1177.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1178.                                     <p>6</p>
  1179.                                 </div>
  1180.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1181.                                     <p>6</p>
  1182.                                 </div>
  1183.                             </div>  
  1184.                             <p class="colonneText text-center">3 colonne</p>
  1185.                         </div>
  1186.                     </a>
  1188.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1189.                         <div class="container-choix">
  1190.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1191.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1192.                                     <p>4</p>
  1193.                                 </div>
  1194.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1195.                                     <p>4</p>
  1196.                                 </div>
  1197.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1198.                                     <p>4</p>
  1199.                                 </div>
  1200.                             </div>
  1201.                             <p class="colonneText text-center">2 colonne</p>
  1202.                         </div>
  1203.                     </a>
  1205.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1206.                         <div class="container-choix">
  1207.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1208.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1209.                                     <p>8</p>
  1210.                                 </div>
  1211.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1212.                                     <p>4</p>
  1213.                                 </div>
  1214.                             </div>
  1215.                             <p class="colonneText text-center">2 colonne</p>
  1216.                         </div>
  1217.                     </a>
  1219.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1220.                         <div class="container-choix">
  1221.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1222.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1223.                                     <p>4</p>
  1224.                                 </div>
  1225.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1226.                                     <p>8</p>
  1227.                                 </div>                    
  1228.                             </div>
  1229.                             <p class="colonneText text-center">2 colonne</p>
  1230.                         </div>
  1231.                     </a>
  1233.                 </div>
  1235.                 <div class="modal-submit d-flex justify-content-end align-items-end">
  1236.                     <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1237.                 </div>
  1238.             </div>
  1239.         </div>
  1240.     </div> 
  1241. </div>
  1242. {% endif %}
  1245. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS 2 ///\\\ ///\\\  -->  
  1247. </div>
  1248. {% endfor %}                       
  1249. </div>
  1253. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1254. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL BLOCK       ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1255. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1256.                       
  1257. {% if app.user %}
  1258.     <div style="d-flex justify-content-center padding-top:20px">
  1259.         <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addBloc{{res.id}}" >Ajouter un bloc</button>
  1260.             <div class="modal fade" id="addBloc{{res.id}}" tabindex="-1" aria-labelledby="addBloc" aria-hidden="true">
  1261.                 <div class="modal-dialog">
  1262.                     <div class="modal-content">
  1263.                         <div class="modal-body">
  1264.                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1266.                             <div class="container-modal d-flex flex-column">
  1267.                                 <h2>Ajouter un bloc</h2>
  1268.                                 <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>
  1269.                             </div>
  1270.                             
  1271.                             <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1273.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':12})}}">
  1274.                                     <div class="container-choix">
  1275.                                         <div class="simu-grid d-flex justify-content-center align-items-center">
  1276.                                             <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1277.                                                 <p>12</p>
  1278.                                             </div>
  1279.                                         </div>
  1280.                                         <p class="colonneText text-center">1 colonne</p>
  1281.                                     </div>
  1282.                                 </a>
  1283.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  1284.                                     <div class="container-choix">
  1285.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1286.                                             <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1287.                                                 <p>6</p>
  1288.                                             </div>
  1289.                                             <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1290.                                                 <p>6</p>
  1291.                                             </div>
  1292.                                         </div>
  1293.                                         <p class="colonneText text-center">2 colonnes</p>
  1294.                                     </div>
  1295.                                 </a>
  1296.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1297.                                     <div class="container-choix">
  1298.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1299.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1300.                                                 <p>4</p>
  1301.                                             </div>
  1302.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1303.                                                 <p>4</p>
  1304.                                             </div>
  1305.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1306.                                                 <p>4</p>
  1307.                                             </div>
  1308.                                         </div>
  1309.                                         <p class="colonneText text-center">3 colonnes</p>
  1310.                                     </div>
  1311.                                 </a>
  1313.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1314.                                 <div class="container-choix">
  1315.                                     <div class="simu-grid d-flex justify-content-around align-items-center">
  1316.                                         <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1317.                                             <p>8</p>
  1318.                                         </div>
  1319.                                         <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1320.                                             <p>4</p>
  1321.                                         </div>
  1322.                                     </div>
  1323.                                     <p class="colonneText text-center">2 colonnes</p>
  1324.                                 </div>
  1325.                                 </a>
  1327.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1328.                                     <div class="container-choix">
  1329.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1330.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1331.                                                 <p>4</p>
  1332.                                             </div>
  1333.                                             <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1334.                                                 <p>8</p>
  1335.                                             </div>
  1336.                                     
  1337.                                         </div>
  1338.                                         <p class="colonneText text-center">2 colonnes</p>
  1339.                                     </div>
  1340.                                 </a>
  1342.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':3333})}}">
  1343.                                     <div class="container-choix">
  1344.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1345.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1346.                                                 <p>3</p>
  1347.                                             </div>
  1348.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1349.                                                 <p>3</p>
  1350.                                             </div>
  1351.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1352.                                                 <p>3</p>
  1353.                                             </div>
  1354.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1355.                                                 <p>3</p>
  1356.                                             </div>
  1357.                                     
  1358.                                         </div>
  1359.                                         <p class="colonneText text-center">4 colonnes</p>
  1360.                                     </div>
  1361.                                 </a>
  1362.                             </div>
  1363.                             <div class="modal-submit d-flex justify-content-end align-items-end">
  1364.                                 <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1365.                             </div>
  1366.                         </div>
  1367.                     </div>
  1368.                 </div> 
  1369.             </div>
  1370. {% endif %}                 
  1371.     </div>
  1373. </div>
  1374. {% endfor %}
  1377. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1378. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL SECTION     ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1379. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1382. <!-- ///\\\ ///\\\  MODAL AJOUT SECTION ///\\\ ///\\\  -->  
  1384. <div class="modal fade" id="addSection" tabindex="-1" aria-labelledby="addSection" aria-hidden="true">
  1385.     <div class="modal-dialog">
  1386.         <div class="modal-content">
  1387.             <div class="modal-body">
  1388.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1390.                 <div class="container-modal d-flex flex-column">
  1391.                     <h2>Ajouter une section</h2>
  1392.                     <p>Les pages dont composées «Sections» contenant chacune des « Blocs » de « Contenus » répartis en colonnes</p>
  1393.                 </div>
  1394.                 <form action="{{path('app_addSection')}}" method="post" enctype="multipart/form-data">
  1395.                     <input type="hidden" name="page" value="{{page.id}}">
  1396.                     <div class="container-contenus-modal">
  1397.                         <h3>Image de fond</h3>
  1398.                         <input type="file"  name="imageSection" >  
  1399.                     </div>
  1400.                     <div class="container-contenus-modal">
  1401.                         <h3>Image rond</h3>
  1402.                         <input type="file"  name="imageRond" >   
  1403.                     </div>
  1404.                     <div class="container-contenus-modal">
  1405.                         <h3>Ordre affichage</h3>
  1406.                         <input type="number" name="ordreSection" id="ordreSection" value="{{ordreMax}}">
  1407.                     </div>
  1408.                     <div class="container-contenus-modal">
  1409.                         <h3>Couleur de section</h3>
  1410.                         <input type="text" name="couleurSection" id="couleurSection" value="#fff">
  1411.                         <div class="container-all-couleur d-flex flex-wrap">
  1412.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffffff')">
  1413.                                 <div class="seeColor seeColor1"></div>
  1414.                                 <p>Blanc</p>
  1415.                             </div>
  1416.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#F6F6F6')">
  1417.                                 <div class="seeColor seeColor2"></div>
  1418.                                 <p>Gris</p>
  1419.                             </div>
  1420.                             <div class="button-couleur button-color-active d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#EBE7F7')">
  1421.                                 <div class="seeColor seeColor3"></div>
  1422.                                 <p>Violet 1</p>
  1423.                             </div>
  1424.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#30278D')">
  1425.                                 <div class="seeColor seeColor4"></div>
  1426.                                 <p>Violet 2</p>
  1427.                             </div>
  1428.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#180068')">
  1429.                                 <div class="seeColor seeColor5"></div>
  1430.                                 <p>Violet 3</p>
  1431.                             </div>
  1432.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#00CEFF')">
  1433.                                 <div class="seeColor seeColor6"></div>
  1434.                                 <p>Bleu 1</p>
  1435.                             </div>
  1436.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#0047FF')">
  1437.                                 <div class="seeColor seeColor7"></div>
  1438.                                 <p>Bleu 2</p>
  1439.                             </div>
  1440.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffda2b')">
  1441.                                 <div class="seeColor seeColor8"></div>
  1442.                                 <p>Jaune</p>
  1443.                             </div>                
  1444.                         </div> 
  1445.                     </div>
  1446.                     <div class="modal-submit d-flex justify-content-center">
  1447.                         <button type="submit" class=" btnAdd">Ajouter</button>
  1448.                     </div>    
  1449.                 </form>
  1450.             </div>
  1451.         </div>
  1452.     </div> 
  1453. </div>
  1456. <!-- ///\\\ ///\\\  UPDATE SECTION ///\\\ ///\\\  -->  
  1458. {% if app.user %}
  1460.     <div class="d-flex justify-content-center mb-3">
  1461.         <a href="{{path('app_updateSection',{'id':section.id,'pages':page.id})}}" style="color:white; text-decoration:none">
  1462.             <div class="d-flex justify-content-center align-items-center cubeIcon" style="width:200px">
  1463.                 <i class="fa-solid fa-pen" style="padding-right:10px"></i> Modifier la section
  1464.             </div>
  1465.         </a>
  1467.         <a href="{{path('app_deleteSection',{'id':section.id,'pages':page.id})}}" onclick="return confirm('Êtes-vous sûr ?')" style="color:white; text-decoration:none">
  1468.             <div class="d-flex justify-content-center align-items-center cubeIcon2" style="width:200px">
  1469.                 <i class="fa-solid fa-trash" style="padding-right:10px"></i> Supprimer la section
  1470.             </div>
  1471.         </a>
  1472.     </div>
  1473. {% endif %}
  1476. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->  
  1479. <!-- ///\\\ ///\\\  FIN SECTION + FORME BLEU SOUS SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1481. </section>
  1482. <div class="container">
  1483.     <div class="formeBleu">
  1484.         <div class="row justify-content-center d-flex">
  1485.             {% if section.rond != '' %}
  1486.                 <img src="{{asset('uploads/sections/'~section.rond)}}" class="img-fluid d-none d-lg-block">                        
  1487.             {% endif %}
  1488.         </div>
  1489.     </div>
  1490. </div>
  1491. {% endfor %}
  1494. <!-- ///\\\ ///\\\  AJOUT SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1497. {% if app.user %}
  1498. <div style="{% if sections|length > 0 %}padding-top:20px{% else %}padding-top:250px{% endif %}" align="center">
  1499. <!-- Button trigger modal -->
  1500. <hr style="border-top:dashed grey;">
  1501. <a data-bs-toggle="modal" data-bs-target="#addSection" style="font-size: 25px;
  1502. font-weight: bold;
  1503. color: #bfbfbf; cursor:pointer" >+ Ajouter une section</a>
  1504. <hr  style="border-top:dashed grey;">
  1507. <script>
  1508.     function saveColor(value) {
  1509.         $('#couleurSection').val(value);
  1510.     }
  1511. </script>
  1513. {% endif %}
  1514. {% endif %}
  1519. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1520. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    SCRIPT PCONTENT   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1521. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1524. <!-- ///\\\ ///\\\  SCRIPT ACCORDEON ///\\\ ///\\\  -->  
  1526. <script>
  1527.     let accordionHeaders = document.querySelectorAll('.accordion-header');
  1529.     accordionHeaders.forEach(header => {
  1530.         let button = header.querySelector('.texteDeroulant button');
  1532.         button.addEventListener('click', function () {
  1533.             let parentAccordion = header.closest('.accordion');
  1534.             let buttons = parentAccordion.querySelectorAll('.texteDeroulant button');
  1535.             let content = header.nextElementSibling; // The content section to show/hide
  1537.             // Check if the content section is already open
  1538.             if (content.classList.contains('show')) {
  1539.                 // Close the content section
  1540.                 content.classList.remove('show');
  1541.                 content.classList.add('collapse');
  1542.             } else {
  1543.                 // Close all other open sections (if any) and open this content section
  1544.                 buttons.forEach(btn => {
  1545.                     let contentToClose = btn.parentElement.nextElementSibling;
  1546.                     if (contentToClose.classList.contains('show')) {
  1547.                         contentToClose.classList.remove('show');
  1548.                         contentToClose.classList.add('collapse');
  1549.                     }
  1550.                 });
  1552.                 // Open the content section
  1553.                 content.classList.remove('collapse');
  1554.                 content.classList.add('show');
  1555.             }
  1557.             // Toggle the button color
  1558.             if (button.style.color !== 'red') {
  1559.                 buttons.forEach(btn => {
  1560.                     btn.style.color = 'white';
  1561.                 });
  1562.                 button.style.color = 'red';
  1563.             } else {
  1564.                 button.style.color = 'white';
  1565.             }
  1566.         });
  1567.     });
  1569.     let buttonsForIcon = document.querySelectorAll('.texteDeroulant button');
  1570.     let icons = document.querySelectorAll('.jsIcon');
  1571.     let previousIcon = null;
  1573.     buttonsForIcon.forEach((button, index) => {
  1574.         let icon = icons[index];
  1576.         button.addEventListener('click', function () {
  1577.             if (previousIcon !== null && previousIcon !== icon) {
  1578.                 // Restore the previous icon to fa-plus-circle
  1579.                 previousIcon.classList.remove('fa-minus-circle');
  1580.                 previousIcon.classList.add('fa-plus-circle');
  1581.             }
  1583.             if (icon.classList.contains('fa-plus-circle')) {
  1584.                 icon.classList.remove('fa-plus-circle');
  1585.                 icon.classList.add('fa-minus-circle');
  1586.             } else {
  1587.                 icon.classList.remove('fa-minus-circle');
  1588.                 icon.classList.add('fa-plus-circle');
  1589.             }
  1591.             previousIcon = icon;
  1592.         });
  1593.     });
  1594. </script>
  1596. </section>
  1605. </main>
  1607.          
  1609.          
  1610.         
  1611.          
  1612.            <script type="text/javascript">
  1613.             $(document).ready(function(){
  1614.                 $('.slider-demo-valeur').slick({
  1615.                     arrows: true,
  1616.                     infinite:true,
  1617.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1618.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1619.                     slidesToShow:4,
  1620.                     slidesToScroll:4,
  1621.                     responsive:[{
  1622.                         breakpoint:1400,
  1623.                         settings:{
  1624.                             slidesToShow:3,  
  1625.                             slidesToScroll:3,            
  1626.                         }
  1627.                     },{
  1628.                         breakpoint:1200,
  1629.                         settings:{
  1630.                             slidesToShow:2,
  1631.                             slidesToScroll:2, 
  1632.                         }
  1633.                     },
  1634.                     {
  1635.                         breakpoint:769,
  1636.                         settings:{
  1637.                             slidesToShow:1,
  1638.                             slidesToScroll:1, 
  1639.                         }
  1640.                     }],
  1641.                 });
  1642.             });
  1643.         </script>
  1645.         <script>
  1646.             function changeLanguage(selectedButton, modalId) {
  1647.                 let modal = document.getElementById(modalId);
  1648.                 let buttons = modal.querySelectorAll(".button-langue");
  1649.                 let inputField = modal.querySelector(".sectionTitle");
  1650.                 
  1651.                 buttons.forEach((button) => {
  1652.                     if (button === selectedButton) {
  1653.                         button.classList.add("button-langue-active");
  1654.                         button.classList.remove("button-langue-noactive");
  1655.         
  1656.                         // Set the input field value based on the active language
  1657.                         switch (button.textContent) {
  1658.                             case "FR":
  1659.                                 inputField.value = "Titre de la section FR";
  1660.                                 break;
  1661.                             case "EN":
  1662.                                 inputField.value = "Section Title EN";
  1663.                                 break;
  1664.                             case "DE":
  1665.                                 inputField.value = "Abschnittstitel DE";
  1666.                                 break;
  1667.                             // Add cases for other languages if needed
  1668.                             default:
  1669.                                 inputField.value = "";
  1670.                         }
  1671.                     } else {
  1672.                         button.classList.remove("button-langue-active");
  1673.                         button.classList.add("button-langue-noactive");
  1674.                     }
  1675.                 });
  1676.             }
  1677.         
  1678.             function changeColor(selectedColorButton, modalId) {
  1679.                 let modal = document.getElementById(modalId);
  1680.                 const colorButtons = modal.querySelectorAll(".button-couleur");
  1681.                 colorButtons.forEach((colorButton) => {
  1682.                     if (colorButton === selectedColorButton) {
  1683.                         colorButton.classList.add("button-color-active");
  1684.                         colorButton.classList.remove("button-color-noactive");
  1685.                     } else {
  1686.                         colorButton.classList.remove("button-color-active");
  1687.                         colorButton.classList.add("button-color-noactive");
  1688.                     }
  1689.                 });
  1690.             }
  1691.         
  1692.             function clearDefaultText(inputField) {
  1693.                 // Clear the default value if it matches the default text
  1694.                 if (inputField.value === inputField.defaultValue) {
  1695.                     inputField.value = '';
  1696.                 }
  1697.             }
  1698.         
  1699.             function restoreDefaultText(inputField) {
  1700.                 // Restore the default value if the input is empty
  1701.                 if (inputField.value === '') {
  1702.                     inputField.value = inputField.defaultValue;
  1703.                 }
  1704.             }
  1707.             function recupDoc(id)
  1708.             {
  1709.                 $('#idDocumentSend').val(id)
  1710.             }
  1711. </script>
  1712.         
  1714.   
  1715.        
  1717. <!-- ///\\\ ///\\\  IMPORT ///\\\ ///\\\  -->  
  1719. <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
  1720. <script src="{{asset('js/jquery-latest.min.js')}}"></script>
  1721. <script src="{{asset('slick/slick.js')}}"></script>
  1722. <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>
  1726. <script type="text/javascript">
  1727.     $(document).ready(function() {
  1728.         $('.slider-demo-galerie').slick({
  1729.             arrows: true,
  1730.             infinite:true,
  1731.             autoplay: true, // Ajout de l'option autoplay
  1732.             autoplaySpeed: 4000, // Durée de chaque diapositive en millisecondes
  1733.             slidesToShow:4,
  1734.             slidesToScroll:4,
  1735.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1736.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1737.             responsive:[{
  1738.                 breakpoint:1400,
  1739.                 settings: {
  1740.                     slidesToShow:3,  
  1741.                     slidesToScroll:3,            
  1742.                 }
  1743.                 },{
  1744.                     
  1745.                 breakpoint:1200,
  1746.                 settings:{
  1747.                     slidesToShow:2,
  1748.                     slidesToScroll:2, 
  1749.                 }
  1750.                 },
  1751.                 {
  1752.                 breakpoint:769,
  1753.                 settings:{
  1754.                     slidesToShow:1,
  1755.                     slidesToScroll:1, 
  1756.                 }
  1757.             }],
  1758.         });
  1759.        
  1761.         $('.slider-demo-actu').slick({
  1762.             arrows: true,
  1763.             infinite: true,
  1764.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1765.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1766.             slidesToShow: 4,
  1767.             slidesToScroll: 4,
  1768.                 responsive:[{
  1769.                     breakpoint:1400,
  1770.                     settings:{
  1771.                         slidesToShow:3,  
  1772.                         slidesToScroll:3,            
  1773.                     }
  1774.                 },{
  1775.                     breakpoint:1200,
  1776.                     settings:{
  1777.                         slidesToShow:2,
  1778.                         slidesToScroll:2, 
  1779.                     }
  1780.                 },
  1781.                 {
  1782.                     breakpoint:769,
  1783.                     settings:{
  1784.                         slidesToShow:1,
  1785.                         slidesToScroll:1, 
  1786.                     }
  1787.                 }],
  1788.             });
  1789.         });
  1790.         
  1791.          $(document).ready(function(){
  1792.                 $('.slider-demo-actu').slick({
  1793.                     arrows: true,
  1794.                     infinite:true,
  1795.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1796.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1797.                     slidesToShow:4,
  1798.                     slidesToScroll:4,
  1799.                     responsive:[{
  1800.                         breakpoint:1400,
  1801.                         settings:{
  1802.                             slidesToShow:3,  
  1803.                             slidesToScroll:3,            
  1804.                         }
  1805.                     },{
  1806.                         breakpoint:1200,
  1807.                         settings:{
  1808.                             slidesToShow:2,
  1809.                             slidesToScroll:2, 
  1810.                         }
  1811.                     },
  1812.                     {
  1813.                         breakpoint:500,
  1814.                         settings:{
  1815.                             slidesToShow:1,
  1816.                             slidesToScroll:1, 
  1817.                         }
  1818.                     }],
  1819.                 });
  1820.             });
  1823.                $(document).ready(function(){
  1824.                 $('.slider-cms').slick({
  1825.                     arrows: true,
  1826.                     infinite:true,
  1827.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1828.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1829.                     slidesToShow:4,
  1830.                     slidesToScroll:4,
  1831.                     responsive:[{
  1832.                         breakpoint:1400,
  1833.                         settings:{
  1834.                             slidesToShow:3,  
  1835.                             slidesToScroll:3,            
  1836.                         }
  1837.                     },{
  1838.                         breakpoint:1200,
  1839.                         settings:{
  1840.                             slidesToShow:2,
  1841.                             slidesToScroll:2, 
  1842.                         }
  1843.                     },
  1844.                     {
  1845.                         breakpoint:600,
  1846.                         settings:{
  1847.                             slidesToShow:1,
  1848.                             slidesToScroll:1, 
  1849.                         }
  1850.                     }],
  1851.                 });
  1852.             });
  1853.     </script>
  1855. <!-- ================================================= -->
  1858. <!-- Modal Consultation ERP -->
  1859. <div class="modalForm">
  1860. <div class="modal fade" id="exampleModalConsultationERP" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1861.   <div class="modal-dialog">
  1862.     <div class="modal-content">
  1863.       <div class="modal-body">
  1864.         <div class="formulaireFile">
  1865.           <p class="pa1">
  1866.             {% if app.request.locale == 'fr' %}
  1867.             Nous vous remercions de votre intérêt pour la solution DELMIAWorks.
  1868.             {% else %}
  1869.             Thank you for your interest in the DELMIAWorks solution.
  1870.             {% endif %}
  1871.           </p>
  1872.           <p class="pa2">
  1873.             {% if app.request.locale == 'fr' %}
  1874.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1875.             {% else %}
  1876.             To book a free consultation, please enter your contact details.
  1877.             {% endif %}
  1878.           </p>
  1880.           <form action="{{path('sendConsultationERP')}}" method="post">
  1881.             <input type="hidden" id="idDocument" name="document">
  1882.             <div class="row">
  1883.               <div class="d-flex">
  1884.                 <div class="col-6 w100" style="">
  1885.                   <p class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></p>
  1886.                   <input type="text" id="Nom" name="nom" required>
  1887.                 </div>
  1888.                 <div class="col-6 w100">
  1889.                   <p class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></p>
  1890.                   <input type="text" id="Prenom" name="prenom" required>
  1891.                 </div>
  1892.               </div>
  1894.               <div class="d-flex">
  1895.                 <div class="col-12 w100">
  1896.                   <p class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></p>
  1897.                   <input type="text" id="nomSociete" name="societe" required>
  1898.                 </div>
  1899.               </div>
  1901.               <div class="d-flex">
  1902.                 <div class="col-12 w100">
  1903.                   <p class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></p>
  1904.                   <input type="text" id="mail" name="mail" required>
  1905.                 </div>
  1906.               </div>
  1908.               <div class="d-flex flex-md-row flex-column">
  1909.                 <div class="col-md-7 col-12">
  1910.                   <div class="form-check d-flex">
  1911.                     <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1912.                     <label class="form-check-label text-light" for="flexCheckDefault">
  1913.                       {% 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>
  1914.                     </label>
  1915.                   </div>
  1916.                 </div>
  1917.                 <div class="col-md-5 col-12">
  1918.                   <div class="d-flex justify-content-center align-items-start">
  1919.                     <button type="submit" class="buttonDoc">
  1920.                       {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1921.                     </button>
  1922.                   </div>
  1923.                 </div>
  1924.               </div>
  1925.             </div>
  1926.           </form>
  1927.         </div>
  1928.       </div>
  1929.     </div>
  1930.   </div>
  1931. </div>
  1932. </div>
  1935. <!-- Modal Consultation Base Outil -->
  1936. <div class="modalForm">
  1937. <div class="modal fade" id="exampleModalConsultationBaseOutil" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1938.   <div class="modal-dialog">
  1939.     <div class="modal-content">
  1940.       <div class="modal-body">
  1941.             <a href="{{ path('app_baseOutils',{'locale':app.request.locale}) }}"><i class="fa-regular fa-circle-xmark circlemark" ></i></a>
  1943.         <div class="formulaireFile">
  1944.           <p class="pa1">
  1945.             {% if app.request.locale == 'fr' %}
  1946.             Nous vous remercions de votre intérêt pour la solution Base outils coupants - Wintool.
  1947.             {% else %}
  1948.             Thank you for your interest in the Wintool cutting tool base solution.
  1949.             {% endif %}
  1950.           </p>
  1951.           <p class="pa2">
  1952.             {% if app.request.locale == 'fr' %}
  1953.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1954.             {% else %}
  1955.             To book a free consultation, please enter your contact details.
  1956.             {% endif %}
  1957.           </p>
  1959.           <form action="{{ path('sendConsultationBaseOutils') }}" method="post">
  1960.             <input type="hidden" id="idDocument" name="document">
  1961.             <div class="row">
  1962.              <div class="row d-flex" style="padding:0;margin:0">
  1963.               <div class="col-6 mb-3">
  1964.                 <div class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></div>
  1965.                 <input type="text" id="Nom" name="nom" required>
  1966.               </div>
  1967.               <div class="col-6 mb-3">
  1968.                 <div class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></div>
  1969.                 <input type="text" id="Prenom" name="prenom" required>
  1970.               </div>
  1971.               
  1972.               <div class="col-12 mb-3">
  1973.                 <div class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></div>
  1974.                 <input type="text" id="nomSociete" name="societe" required>
  1975.               </div>
  1976.               <div class="col-12 mb-3">
  1977.                 <div class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></div>
  1978.                 <input type="text" id="mail" name="mail" required>
  1979.               </div>
  1980.               <div class="col-md-7 col-12 mb-3">
  1981.                 <div class="form-check d-flex">
  1982.                   <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1983.                   <label class="form-check-label text-light" for="flexCheckDefault">
  1984.                     {% 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>
  1985.                   </label>
  1986.                 </div>
  1987.               </div>
  1988.               <div class="col-md-5 col-12 mb-3">
  1989.                 <div class="d-flex justify-content-center align-items-start">
  1990.                   <button type="submit" class="buttonDoc">
  1991.                     {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1992.                   </button>
  1993.                 </div>
  1994.               </div>
  1995.             </div>
  1996.           </form>
  1997.         </div>
  1998.       </div>
  1999.     </div>
  2000.   </div>
  2001. </div>
  2002. </div>
  2009. <style>
  2010. .modalForm i{
  2012.     color: white;
  2013.     padding-left: 45px;
  2015.     cursor: pointer;
  2016.     font-size: 16px;
  2017.     float: right;
  2018. }
  2019. .modalForm .modal-body{
  2020.     width: 100%;
  2021. }
  2024. .modalForm .modal-content{
  2025.     align-items: start!important;
  2026. }
  2028. .modalForm .modal-body form p{
  2029.     color:white;
  2030.     font-weight: 400;
  2031.     font-size: 18px;
  2032. }
  2034. .modalForm .modal input{
  2035.     width: 100%!important;
  2036.     border-radius: 20px;
  2037.     padding: 7px;
  2038. }
  2040. .modalForm .buttonDoc{
  2041.     background-color: #FFDE2B;
  2042.     border-radius: 50px;
  2043.     color: #30278E;
  2044.     font-family: "Open Sans";
  2045.     font-weight: bold;
  2046.     font-size: 14px;
  2047.     border: none;
  2048.     padding-left: 35px;
  2049.     padding-right: 35px;
  2050.     padding-top: 16px;
  2051.     padding-bottom: 16px;
  2053. }
  2055. .modalForm .formulaire{
  2056.     width: 100%;
  2057.     height: 100%;
  2058. }
  2060. .modalForm .formulaire p{
  2061.     color: white;
  2062.     padding: 0;
  2063.     margin: 0;
  2064.     margin-bottom: 10px;
  2066. }
  2072. .modalForm .formulaireFile input{
  2073.     /* width: 100%; */
  2074.     border-radius: 25px;
  2075.     padding-top: 1%;
  2076.     padding-bottom: 1%;
  2077.     padding-right: 10px;
  2078.     padding-left: 10px;
  2079.     border: solid 1px #ececec;
  2080.     margin-right: 5px;
  2081. }
  2083. .modalForm .formulaireFile .w100 input{
  2084.     width: 100%;
  2085.     margin-bottom: 15px;
  2086. }
  2088. .modalForm .formulaireFile .pa1{
  2089.     font-family: "Open Sans";
  2090.     font-size: 32px;
  2091.     color: #FFDE2B;
  2092.     font-weight: bold;
  2093. }
  2095. .modalForm .formulaireFile .pa2{
  2096.     font-family: "Open Sans";
  2097.     font-size: 18px;
  2098.     color: white;
  2099.     font-weight: 100;
  2100. }
  2102. .modalForm .formulaireFile .pa3{
  2103.     font-family: "Open Sans";
  2104.     font-size: 18px;
  2105.     color: white;
  2106.     font-weight: normal;
  2107. }
  2109. .modalForm .responsive-txt{
  2110.     margin-left: 50px;
  2111. }
  2113. .modalForm .form-check-input[type="checkbox"] {
  2114.     height: 20px !important;
  2115.     width: 20px!important;
  2116. }
  2118. .modalForm .responsive-img{
  2119.     width: 30%;
  2120. }
  2122. .modalForm .modal{
  2123.     --bs-modal-header-border-width: 0px!important;
  2124.     --bs-modal-footer-border-width: 0px!important;
  2125.     --bs-modal-bg: white!important;
  2126.     --bs-modal-bg: transparent!important;
  2127.     --bs-modal-border-color:transparent!important;
  2128.     --bs-modal-width: 828px!important;
  2129. }
  2131. .modalForm .modal-title{
  2132.     color: #FFDE2B;
  2133.     font-size: 32px;
  2134.     font-weight: bold;
  2136. }
  2138. /* RESPONSIVE */
  2139. @media screen and (max-width: 1080px) {
  2141.     .responsive-txt{
  2142.         margin-left: 0px;
  2143.     }
  2145.     .responsive-img{
  2146.         width: 100%;
  2147.         margin-bottom: 25px;
  2148.     }
  2150. }
  2151. </style>
  2153. {% endblock %}