templates/default/societe.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' %}Société{% else %}Company{% endif %}{% endblock %}
  7. {# CSS #}
  8. {% block stylesheet %}
  9.     <meta property="og:image" content="{{asset('img/industrialisation/expertise.png')}}">
  10.     {# CSS DU CMS #}
  11.     <link rel="stylesheet" href="{{ asset('css/cmsContent.css')}}">
  12.     <link rel="stylesheet" href="{{ asset('css/cms.css')}}">
  13.     {# / #}
  14.     <link rel="stylesheet" href="{{asset('slick/slick.css')}}">
  15.     <link rel="stylesheet" href="{{asset('slick/slick-theme.css')}}">
  16. {% endblock %}
  19. {# BODY HOME PAGE #}
  20. {% block body %}
  22. <main>
  24. {% if ip == '90.63.222.84' or ip =='193.148.82.168' or ip =='5.48.160.74' %}
  26. {# CMS LOAD ADMIN MODE #}
  27. {% if app.user %}
  28.     {% include 'cms.html.twig' %}
  29. {% endif %}
  31. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ -->
  34. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  GESTION DES SECTION ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  36. {% set i = 0 %}
  37. {% for section in sections %}
  38. {% set i = i +1 %}
  39.           
  40. <section id="section{{section.id}}" style="
  41.     {% if section.image %}
  42.         background-image: url(../uploads/sections/{{section.image}});
  43.         background-size: contain;
  44.         background-repeat: repeat-x;
  45.         background-color: #170069;
  47.     {% else %}
  48.         background-color:{{section.color}}; 
  49.     {% endif %}
  52.     {% if i > 1 %}
  53.         margin-top:-54px
  54.     {% endif %} 
  55. ">
  57. <style>
  58. .accordion-body li{
  59.     color:white;
  60. }
  61. .accordion-body li p{
  62.     margin-bottom:0
  63. }
  64. </style>
  66. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  68. {% set y = 0 %}
  69. {% for res in section.lignes %}
  70. {% set y = y+1 %}
  71.     <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;
  72.     {% else %}
  73.     {% if i > 1 %}
  74.     padding-top:112px; padding-bottom:112px;
  75.     {% endif %}
  76.     {% if y > 1 %}
  77.     padding-top:0; padding-bottom:112px;
  78.     {% endif %}
  79.     
  80.     {% endif %}">
  81.         <div class="container text-light pb-3"> 
  82.             <div class="row pt-5 justify-content-center justify-content-md-start">
  84.               {% if app.user %}
  85.                             <a href="{{path('app_deleteLigne',{'id':res.id,'pages':page.id} )}}" onclick="return confirm('Êtes-vous sûr ?')">
  86.                                 <div class="d-flex justify-content-end">
  87.                                     <div class="d-flex justify-content-center align-items-center cubeIcon2">
  88.                                         <i class="fa-solid fa-trash"></i>
  89.                                     </div>
  90.                                 </div>
  91.                             </a>
  92.                         {% endif %}
  93.                 {% for res2 in res.blocs %}
  94.                     <div id="bloc{{res2.id}}" data-aos="fade-up" data-aos-duration="1000" class="
  96.                         {% if res2.type == 2 %}
  97.                             col-xl-2 col-12
  98.                         {% endif %}
  100.                         {% if res2.type == 3 %}
  101.                             col-xl-3 col-sm-6 col-12
  102.                         {% endif %}
  104.                         {% if res2.type == 4 %}
  105.                             col-xl-4 col-sm-6 col-12
  106.                         {% endif %}
  108.                         {% if res2.type == 6 %}
  109.                             col-lg-6 col-12
  110.                         {% endif %}
  112.                         {% if res2.type == 8 %}
  113.                             col-12
  114.                         {% endif %}
  116.                         {% if res2.type == 12 %}
  117.                             col-12
  118.                         {% endif %}
  122.                         
  123.                     
  124.                     
  125.                     " {% if app.user %} style="border:dashed 1px grey; border-radius:10px; margin-bottom:10px"{% endif %}>
  126.                       
  127.                                     
  128.                         {% if res2.contenuses is not empty %}
  129.                             {% if res2.contenuses.0.typesContenus.id != 8 %}
  130.                             {% endif %}
  131.                         {% endif %}
  133. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  134. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   AFFCHER CONTENUS   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  135. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  137.                         {% if res2.contenuses is not empty %}
  140.                             <!-- ///\\\ ///\\\ TEXTE ///\\\ ///\\\  -->
  142.                             {% if res2.contenuses.0.typesContenus.id == 1 %}
  144.                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  145.                                 
  146.                                 {% if res2.contenuses.0.document is not empty %}
  147.                                 <a href="{{res2.contenuses.0.document}}" target="_blank" style="text-decoration:none;">
  148.                                             <button type="button btn-modal" class="justify-content-center align-items-center text-center" 
  149.                                                 style="
  150.                                                   background-color:{{res2.contenuses.0.background}}!important; 
  151.                                                     border:solid 3px {{res2.contenuses.0.couleur1}}!important;
  152.                                                     border-radius: 30px!important;
  153.                                                     color: rgb(0, 206, 255);
  154.                                                     font-weight: bold;
  155.                                                     background-color: #0c24b3;
  156.                                                     cursor: pointer;
  157.                                                     padding-top: 12px;
  158.                                                     padding-left: 50px;
  159.                                                     padding-right: 50px;
  160.                                                     margin-top:20px
  161.                                                  
  162.                                                     
  163.                                             ">
  164.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</button>
  165.                                         </a>
  166.                                 {% endif %}
  167.                             {% endif %}
  169.                             {% if i == 1 %}
  170.                                 {% if loop.first %}
  171.                                     <div class="traitBlanc"></div>
  172.                                 {% endif %}
  173.                             {% endif %}
  175.                             <!-- ///\\\ ///\\\ FIN TEXTE ///\\\ ///\\\  -->
  178.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  181.                             <!-- ///\\\ ///\\\ IMAGE ///\\\ ///\\\  -->
  183.                             {% if res2.contenuses is not empty %}
  184.                                 {% if res2.contenuses.0.typesContenus.id == 2 %}
  185.                                     <div  class="col-12 d-flex  mt-5 mt-lg-0 justify-content-{{res2.contenuses.0.background}}">
  186.                                     {% if res2.contenuses.0.lien %}
  187.                                     <a href="{{res2.contenuses.0.lien}}" target="_blank">
  188.                                     {% endif %}
  189.                                         <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 %}">
  190.                                     
  191.                                     {% if res2.contenuses.0.lien %}
  192.                                     </a>
  193.                                     {% endif %}
  194.                                     </div>
  195.                                 {% endif %}
  196.                             {% endif %}
  198.                             <!-- ///\\\ ///\\\ FIN IMAGE ///\\\ ///\\\  -->
  201.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  204.                             <!-- ///\\\ ///\\\ VIDEOS ///\\\ ///\\\  -->
  206.                             {% if res2.contenuses is not empty %}
  207.                                 {% if res2.contenuses.0.typesContenus.id == 3 %}
  208.                                     <div data-aos="fade-up" data-aos-duration="1000" class="col-12 justify-content-center">
  209.                                         <div class="image">             
  210.                                             <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>
  211.                                         </div>
  213.                                         <div class="texte">
  214.                                             <p style="font-weight:bold">
  215.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}
  216.                                             </p>
  217.                                         </div>
  218.                                     </div>            
  219.                                 {% endif %}
  220.                             {% endif %}
  222.                             <!-- ///\\\ ///\\\ FIN VIDEO ///\\\ ///\\\  -->
  225.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  228.                             <!-- ///\\\ ///\\\ BOX PICTO  ///\\\ ///\\\  -->
  230.                             {% if res2.contenuses is not empty %}
  231.                                 {% if res2.contenuses.0.typesContenus.id == 4 %}  
  232.                                 <div class="cartes-2">           
  233.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  234.                                         <div class="image d-flex justify-content-center">
  235.                                             <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 %}">
  236.                                         </div>
  237.                                         <div class="corps-carte">
  238.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}};">
  239.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  240.                                             </div>
  241.                                             <div class="texte-carte" style="min-height: 370px!important; background-color:{{res2.contenuses.0.couleur1}}">
  242.                                                 <div class="texte-1" style="min-height: 161px;">
  243.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  244.                                                 </div>
  245.                                                 {% if res2.contenuses.0.video is not empty %}
  246.                                                     <div class="button-carte">
  247.                                                         <a href="{{res2.contenuses.0.video}}" >
  248.                                                             <button class="buttonMore">En savoir plus</button>
  249.                                                         </a>
  250.                                                     </div>
  251.                                                 {% endif %}
  252.                                             </div>   
  253.                                         </div>
  254.                                     </div>
  255.                                 </div>
  256.                                 {% endif %}
  257.                             {% endif %}
  258.                             
  259.                             <!-- ///\\\ ///\\\ FIN BOX PICTO ///\\\ ///\\\  -->
  260.                                    
  262.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  265.                             <!-- ///\\\ ///\\\ AVANTAGES  ///\\\ ///\\\  -->
  267.                             {% if res2.contenuses is not empty %}
  268.                                 {% if res2.contenuses.0.typesContenus.id == 7 %}
  269.                                     <div data-aos="fade-up" data-aos-duration="1000" class="avantages">
  270.                                         <div class="carteA bg-bleu" style="background-color:{{res2.contenuses.0.background}}">
  271.                                             <div class="tete-carte d-flex flex-column flex-md-row">
  272.                                                 {% if res2.contenuses.0.image != '' %}
  273.                                                     <img class="img-fluid" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="">
  274.                                                 {% endif %}
  275.                                                 <span style="font-weight:bold">{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</span>
  276.                                             </div>
  277.                                             <div class="texte-carte">
  278.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  279.                                             </div>
  280.                                         </div>
  281.                                     </div>
  282.                                 {% endif %}
  283.                             {% endif %}
  285.                             <!-- ///\\\ ///\\\ FIN AVANTAGES ///\\\ ///\\\  -->
  288.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  291.                             <!-- ///\\\ ///\\\ ACCORDEON  ///\\\ ///\\\  -->
  293.                             {% if res2.contenuses.0.typesContenus.id == 8 %}
  294.                                 <div data-aos="fade-up" data-aos-duration="1000" class="texteDeroulant text-light">
  295.                                     <div class="accordion" id="accordionExample">
  296.                                         {% set ac = 0 %}
  298.  <div style="margin-bottom:32px;">
  299.                                         {% if app.request.locale == 'fr' %}{{res2.contenuses.0.titreFr|raw}}{% else %}{{res2.contenuses.0.titreEn|raw}}{% endif %}
  300.                                         </div>
  301.                                         {% for res3 in res2.contenuses.0.accordeons %}
  302.                                             {% set ac = ac+1 %}
  303.                                             <div class="accordion-item" style="background-color:{{res3.background}}!important;">
  304.                                                 <h2 class="accordion-header" id="heading{{res3.id}}">
  305.                                                     <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}}">
  306.                                                     <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 %}
  307.                                                     </button>
  308.                                                 </h2>
  309.                                                         
  310.                                                 <div id="collapseOne" class="accordion-collapse collapse {% if ac == 1 %}{% endif %}" aria-labelledby="heading{{res3.id}}" data-bs-parent="#accordionExample">
  311.                                                     <div class="accordion-body">
  312.                                                         <div class="accordion-hr"></div>
  313.                                                         {% if app.request.locale == 'en' %}{{res3.TexteEn|raw}}{% else %}{{res3.TexteFr|raw}}{% endif %}   
  314.                                                     </div>
  315.                                                 </div>
  316.                                             </div>
  318.                                         {% endfor %}
  319.                                     </div>                                                        
  320.                                 </div>
  322.                                 <script>
  323.                                     $(document).ready(function () {
  324.                                         $('.accordion-button').click(function () {
  325.                                             $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
  326.                                             $('.accordion-button').not(this).find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  327.                                         });
  328.                                     });
  329.                                </script>
  330.  
  331.                                 {% if app.user %}           
  332.                                     <br>
  333.                                     <div class="d-flex justify-content-center">
  334.                                         <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>
  335.                                     </div>
  336.                                 {% endif %}
  337.               
  338.                             {% endif %}
  340.                             <!-- ///\\\ ///\\\ FIN ACCORDEON  ///\\\ ///\\\  -->
  342.                         {% endif %}
  344.                             
  345.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  349.                         {% if res2.contenuses is not empty %}
  351.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  353.                             {% if res2.contenuses.0.typesContenus.id == 10 %}
  354.                                 <div data-aos="fade-up" data-aos-duration="1000" class="container d-flex paddingPerso2" >
  355.                                     <div class="slider-demo-valeur">
  358.                                         {% for carou in  res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1) %}
  359.                                             <div data-aos="fade-up" data-aos-duration="1000" class="carte " style="padding-left: 15px!important;padding-right: 15px;!important">
  360.                                                 <div class="col-12">
  361.                                                     <div class="image d-flex justify-content-center">
  362.                                                         <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  363.                                                     </div>
  364.                                                     <div class="corps-carte">
  365.                                                         <div class="tete-carte">
  366.                                                             <p>{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %} </p>
  367.                                                         </div>
  368.                                                         <div class="texte-carte">
  369.                                                             <div class="texte-1">
  370.                                                                 {% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %} 
  371.                                                             </div>
  372.                                                         </div>
  373.                                                     </div>
  374.                                                 </div>
  375.                                             </div>
  376.                                         {% endfor %}
  377.                                     </div>
  378.                                 </div>
  379.                             {% endif %}
  380.                                 
  381.                             {% if app.user %}
  382.                                 {% if res2.contenuses.0.typesContenus.id == 10 %}            
  383.                                     <br>
  384.                                     <div data-aos="fade-up" data-aos-duration="1000" class="d-flex justify-content-center">
  385.                                         <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>
  386.                                     </div>
  387.                                 {% endif %}
  388.                             {% endif %}
  390.                             <!-- ///\\\ ///\\\ FIN BOXPICTO CAROUSEL ///\\\ ///\\\  -->
  391.                         {% endif %}
  394.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  397.                         {% if res2.contenuses is not empty %}
  399.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  401.                             {% if res2.contenuses.0.typesContenus.id == 11  %}
  402.                                 <div  class="row justify-content-center justify-content-md-start" >
  403.                                     <div class="col-12">
  404.                                         <div class="row pb-4">
  405.                                             <div class="titre ">
  406.                                                 <p class="opensans_bold_red_15">TEMOIGNAGES</p>
  407.                                             </div>
  408.                                         </div>  
  409.                                     </div> 
  410.                                 </div>
  411.                                 {% set tem = -1 %}
  412.                                 <div class="row text-light" >
  413.                                     <div class="col-12">
  414.                                         <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  415.                                             <div class="carousel-indicators">
  416.                                                 {% for res in temoignages %}
  417.                                                     {% set tem = tem + 1 %}
  418.                                                     <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>
  419.                                                 {% endfor %}
  420.                                             </div>
  422.                                             {% set tem2 = -1 %}
  423.                                             <div class="carousel-inner">
  424.                                                 {% for res in temoignages %}
  425.                                                     {% set tem2 = tem2 + 1 %}
  426.                                                     <div class="carousel-item {% if tem2 == 0 %}active{% endif %}">
  427.                                                         <div class="row text-light">
  428.                                                             <h2 class="">{{res.titre}}</hé>
  429.                                                         </div>
  430.                                                         <br>
  431.                                                         <p class="citation ">{{res.texte}}</p>
  432.                                                         <br>
  433.                                                         <p style="color:red; font-weight: bold; ">{{res.auteur}}</p>  
  434.                                                     </div>
  435.                                                 {% endfor %}
  436.                                             </div>
  437.                                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  438.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  439.                                                 <span class="visually-hidden">Previous</span>
  440.                                             </button>
  441.                                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  442.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  443.                                                 <span class="visually-hidden">Next</span>
  444.                                             </button>
  445.                                         </div>
  446.                                     </div>
  447.                                 </div>
  448.                                 {% if app.user %}
  449.                                     {% if res2.contenuses.0.typesContenus.id == 11 %}        
  450.                                         <br>
  451.                                         <div class="d-flex justify-content-center">
  452.                                             <a href="{{path('app_temoignages_index')}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les témoignages</button></a>
  453.                                         </div>
  454.                                     {% endif %}
  455.                                 {% endif %}
  456.                             {% endif %}
  458.                             <!-- ///\\\ ///\\\ FIN BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  460.                         {% endif %}
  463.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  466.                         {% if res2.contenuses is not empty %}
  468.                             <!-- ///\\\ ///\\\ CAROUSEL ///\\\ ///\\\  -->
  470.                               
  471.                              
  473.                                 
  474.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}
  475.                                     <div class="carouselcms">
  476.                                             <div class="slider-cms">
  477.                                                 {% for carou in res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1)%}
  478.                                                     <div class="carte-slider-cms d-flex flex-column"  >        
  479.                                                         <div class="container-img-slider-cms">                               
  480.                                                             <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  481.                                                         </div>
  483.                                                         {% if carou.titreEn != '' or carou.titreFr != '' %}
  484.                                                         <div class="container-titre-slider-cms"> 
  485.                                                             <h3 class="opensans_bold_32">{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %}</h3>   
  486.                                                         </div>
  487.                                                         {% endif %}
  489.                                                         {% if carou.texteEn != '' or carou.texteFr != '' %}
  490.                                                             <div class="container-text-slider-cms"> 
  491.                                                                 <p>{% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %}</p>
  492.                                                             </div>
  493.                                                         {% endif %}
  495.                                                      
  497.                             
  498.                                                     </div>
  499.                                                 {% endfor %}
  500.                                             </div>
  501.                                     </div>
  503.                                        {% endif %}
  504.                                    
  505.                                     <style>
  506.                                     
  507.                                         .carouselcms{
  508.                                             width:100%;
  509.                                         
  510.                                         }
  512.                                         .slider-cms{
  513.                                             width:100%;
  514.                                            
  515.                                             height: 100%;
  516.                                             
  517.                                         }
  522.                                         .carte-slider-cms{
  523.                                           
  524.                                             padding-left: 5px;
  525.                                             padding-right: 5px;
  526.                                             height:100%;
  527.                                             
  528.                                             
  529.                                         }
  531.                                          .container-img-slider-cms {
  532.                                             width: 100%;
  533.                                             height: 220px;
  534.                                        
  535.                                            
  536.                                             
  537.                                         }
  539.                                         .container-img-slider-cms img{
  540.                                             width: 100%;
  541.                                             height: 100%;
  542.                                             border-radius:30px;
  543.                                             
  544.                                             
  545.                                         }
  547.                                 
  550.                                         .container-titre-slider-cms{
  551.                                   
  552.                                             height:60px;
  553.                                             padding:0;
  554.                                             margin:0;
  555.                                         }
  557.                                             .container-titre-slider-cms h3 p{
  558.                                            color:#30278d!important;
  559.                                            font-size: 26px!important;
  560.                                            margin-top:20px;
  561.                                            margin-left:2px;
  562.                                         }
  564.                                         .container-text-slider-cms{
  565.                                             height:180px;
  566.                                         }
  568.                                          .container-text-slider-cms p{
  569.                                             color: white;
  570.                                             font-weight: 100;
  571.                                             font-size:14px;
  572.                                             margin-left:2px;
  573.                                             padding-right:20px;
  575.                                         }
  577.                                             
  578.                                   
  582.                                         .slick-slide img {
  583.                                          
  584.                                             object-fit: cover!important;
  585.                                         }
  589.                                     </style>
  592.                                
  593.                                   
  595.                                 
  604.                                 
  605.                                 {% if app.user %}
  606.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}              
  607.                                         <br>
  608.                                         <div class="d-flex justify-content-center">
  609.                                             <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>
  610.                                         </div>
  611.                                     {% endif %}
  612.                                 {% endif %}
  613.                                       
  614.                             <!-- ///\\\ ///\\\ FIN CAROUSEL ///\\\ ///\\\  -->
  616.                         {% endif %}
  619.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  622.                         {% if res2.contenuses is not empty %}
  624.                             <!-- ///\\\ ///\\\ CHIFFRES CLES ///\\\ ///\\\  -->
  626.                                  {% if res2.contenuses.0.typesContenus.id == 5  %}
  627.                                     <div class="cartes-3" style="background:{{res2.contenuses.0.background}}; border-radius: 30px;">
  628.                                         <div class="carte">
  629.                                             {% if res2.contenuses.0.image is not empty %}
  630.                                                 <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="" style="width:100%;height:100%;border-radius:25px;">
  632.                                             {% else %}
  633.                                                 <div class="titre">
  634.                                                     <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} </p>
  635.                                                 </div>
  636.                                                 <div class="texte">
  637.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  638.                                                 </div>
  639.                                             {% endif %}
  640.                                         </div>
  641.                                     </div>
  642.                                 {% endif %}
  644.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES ///\\\ ///\\\  -->
  646.                         {% endif %}
  650.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  652.         
  653.                         
  654.                         {% if res2.contenuses is not empty %}
  656.                             <!-- ///\\\ ///\\\ CHIFFRES CLES 2 ///\\\ ///\\\  -->
  658.                                 {% if res2.contenuses.0.typesContenus.id == 6  %}
  659.                                     <div class="accueil4">
  660.                                         <div {% if res2.contenuses.0.titreFr|length > 4 %}id="soixante-dix"{% endif %} class="carte">
  661.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  662.                                                 <div class="chiffre justify-content-center" style="background-color:{{res2.contenuses.0.background}}">
  663.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} 
  664.                                                 </div>
  665.                                             </div>
  666.                                             <div class="texte">
  667.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  668.                                             </div>
  669.                                         </div>
  670.                                     </div>
  671.                                 {% endif %}
  673.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES 2 ///\\\ ///\\\  -->
  675.                         {% endif %}
  678.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  681.                         {% if res2.contenuses is not empty %}
  683.                             <!-- ///\\\ ///\\\ BOX PICTO + LIEN ///\\\ ///\\\  -->
  685.                                 {% if res2.contenuses.0.typesContenus.id == 13 %}
  686.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  687.                                         <div class="image d-flex justify-content-center">
  688.                                             <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 %}">
  689.                                         </div>
  690.                                         <div class="corps-carte">
  691.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  692.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  693.                                             </div>
  694.                                             <div class="texte-carte" style="min-height:204px; background-color:{{res2.contenuses.0.couleur1}}">
  695.                                                 <div class="texte-1">
  696.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  697.                                                 </div>
  698.                                                 
  699.                                             </div>    
  700.                                         </div>
  701.                                     </div>
  702.                                 {% endif %}
  704.                             <!-- ///\\\ ///\\\ FIN BOX PICTO + LIEN ///\\\ ///\\\  -->
  705.        
  706.                         {% endif %}
  709.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  712.                         {% if res2.contenuses is not empty %}
  714.                             <!-- ///\\\ ///\\\ BOUTON ///\\\ ///\\\  -->    
  716.                                 {% if res2.contenuses.0.typesContenus.id == 12 %}   
  717.                                     {% if res2.contenuses.0.modal == "modalConsultation2" %}
  719.                                      <button type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationERP" 
  720.                                             style="
  721.                                                 background-color:{{res2.contenuses.0.background}}; 
  722.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  723.                                                 border-radius: 30px!important;
  724.                                                 padding-right: 0%!important;
  725.                                                 padding-left: 0%!important;
  726.                                                 padding-top: 4%!important;   
  727.                                                 width: 400px;
  728.                                                 float:right;
  729.                                         ">
  730.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  732.                                     {% elseif res2.contenuses.0.modal == "modalConsultation" %}
  734.                                      <button type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationBaseOutil" 
  735.                                             style="
  736.                                                 background-color:{{res2.contenuses.0.background}}; 
  737.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  738.                                                 border-radius: 30px!important;
  739.                                                 padding-right: 0%!important;
  740.                                                 padding-left: 0%!important;
  741.                                                 padding-top: 4%!important;   
  742.                                                 width: 400px;
  743.                                                 float:right;
  744.                                         ">
  745.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  747.                                     {% elseif res2.contenuses.0.modal == "modalDocumentation" %}
  749.                                      <button type="button btn-modal" class=""  data-bs-toggle="modal" data-bs-target="#exampleModalDoc" 
  750.                                             style="
  751.                                                 background-color:{{res2.contenuses.0.background}}; 
  752.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  753.                                                 border-radius: 30px!important;
  754.                                                 padding-right: 0%!important;
  755.                                                 padding-left: 0%!important;
  756.                                                 padding-top: 4%!important;   
  757.                                                 width: 400px;
  758.                                                 float:right;
  759.                                         ">
  760.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  761.                                    
  762.                                     {% else %}
  763.                                         <a href="{{res2.contenuses.0.lien}}" target="_blank" style="text-decoration:none;">
  764.                                             <button type="button btn-modal" class="" 
  765.                                                 style="
  766.                                                     background-color:{{res2.contenuses.0.background}}; 
  767.                                                     border:solid 3px {{res2.contenuses.0.couleur1}};
  768.                                                     border-radius: 30px!important;
  769.                                                     padding-right: 0%!important;
  770.                                                     padding-left: 0%!important;
  771.                                                     padding-top: 4%!important;   
  772.                                                     width: 400px;
  773.                                                     float:right;
  774.                                             ">
  775.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  776.                                         </a> 
  777.                                     {% endif %}
  780.                                 
  783.                                 {% endif %}
  785.                                 <!-- ///\\\ ///\\\ FIN BOUTON ///\\\ ///\\\  --> 
  787.                         {% endif %}
  790.                              <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  793.                         {% if res2.contenuses is not empty %}
  795.                             <!-- ///\\\ ///\\\ DOCUMENT ///\\\ ///\\\  -->    
  797.                                 {% if res2.contenuses.0.typesContenus.id == 14 %}                  
  798.                                      <div data-aos="fade-up" data-aos-duration="1000" class="accueil9">
  799.                                         <div class="carte">
  800.                                             <div class="image">
  801.                                                 <div class="image-container">
  802.                                                     <img src="{{asset('uploads/contenus/'~res2.contenuses.0.Image)}}" alt="Votre image">
  803.                                                     <div class="image-overlay">
  804.                                                         <center>
  805.                                                         
  806.                                                                     <!-- Button trigger modal -->
  807.                                                                 
  808.                                                                 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDoc" onclick="recupDoc({{res2.contenuses.0.id}})">
  809.                                                                 Récupérer le pdf
  810.                                                                 </button>
  812.                                                                 
  814.                                                         </center>
  815.                                                     </div>
  816.                                                 </div>
  817.                                             </div>
  818.                                             <div class="texte">
  819.                                                   <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  820.                                             </div>
  821.                                         </div>
  822.                                     </div>
  824.                                     <!-- Modal Doc -->
  826.                                     <div class="modalForm">
  827.                                     <div class="modal fade" id="exampleModalDoc" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  828.                                     <div class="modal-dialog">
  829.                                         <div class="modal-content">
  830.                                         <div class="modal-body">
  831.                                             <div class="formulaireFile">
  832.                                             <p class="pa1">Nous vous remercions de votre intérêt pour la solution DELMIAWorks.</p>
  833.                                             <p class="pa2">Afin de pouvoir obtenir la documentation, nous vous remercions de bien vouloir renseigner vos coordonnées.</p>
  835.                                             <form action="{{path('sendDocument')}}" method="post">
  836.                                                     <input type="hidden" id="idDocumentSend" name="document">
  837.                                                     <div class="row">
  838.                                                         <div class="d-flex">
  839.                                                             <div class="col-6 w100" style="">
  841.                                                                 <p class="pa3"> <b>Nom </b><span style="color:red;">*</span></p>
  842.                                                                 <input type="text" id="Nom" name="nom" required>
  843.                                                             </div>
  844.                                                             <div class="col-6 w100">
  845.                                                                 <p class="pa3"> <b>Prénom </b><span style="color:red;">*</span></p>
  846.                                                                 <input type="text" id="Prenom" name="prenom" required>
  847.                                                             </div>
  848.                                                         </div>
  850.                                                         <div class="d-flex">
  851.                                                             <div class="col-12 w100">
  852.                                                                 <p class="pa3"> <b>Nom de la société </b><span style="color:red;">*</span></p>
  853.                                                                 <input type="text" id="nomSociete" name="societe" required>
  854.                                                             </div>
  855.                                                         </div>
  857.                                                         <div class="d-flex">
  858.                                                             <div class="col-12 w100">
  859.                                                                 <p class="pa3"> <b>Votre adresse mail </b><span style="color:red;">*</span></p>
  860.                                                                 <input type="text" id="mail" name="mail" required>
  861.                                                             </div>
  862.                                                         </div>
  865.                                                         <div class="d-flex flex-md-row flex-column">
  866.                                                         <div class="col-md-7 col-12">
  867.                                                             <div class="form-check d-flex">
  868.                                                                 <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  869.                                                                 <label class="form-check-label text-light" for="flexCheckDefault">
  870.                                                                     En cochant cette case, vous acceptez le traitement des données personnelles soumises conformément à la <a href="#">Politique de Confidentialité</a>                                                       </label>
  871.                                                             </div>
  872.                                                         </div>
  873.                                                             <div class="col-md-5 col-12">
  874.                                                                 <div class="d-flex justify-content-center align-items-start">
  875.                                                                     <a href="{{ asset('../public/uploads/contenus/'~res2.contenuses.0.document)}}" target="_blank">      
  876.                                                                         <button type="submit" class="buttonDoc">Obtenir le document</button>
  877.                                                                     </a>
  878.                                                                 </div>
  879.                                                             </div>
  880.                                                         </div>
  882.                                                     </div>
  883.                                             </form>
  884.                                             </div>
  885.                                                 
  886.                                         </div>
  887.                                         </div>
  888.                                     </div>
  889.                                     </div>
  890.                                     </div>
  892.                                 {% endif %}
  894.                             <!-- ///\\\ ///\\\ FIN DOCUMENT ///\\\ ///\\\  -->    
  895.                           
  897.                         {% endif %}
  901.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  902.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  903.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  908.                         <!-- ///\\\ ///\\\ BOUTON MODIFIER CMS ///\\\ ///\\\  --> 
  909.                         {% if res2.contenuses is not empty %}
  910.                             {% if  res2.contenuses.0.typesContenus.id != 10 and res2.contenuses.0.typesContenus.id != 9 %}
  911.                                 {% if app.user %}
  912.                                     <div class="d-flex justify-content-center mb-3">
  913.                                         <a href="{{path('app_editContent',{'id':res2.contenuses.0.id,'type':res2.contenuses.0.typesContenus.libelle})}}">
  914.                                             <div class="d-flex justify-content-center align-items-center cubeIcon">
  915.                                                 <i class="fa-solid fa-pen"></i>
  916.                                             </div>
  917.                                         </a>
  918.                                         <a href="{{path('app_deleteContent',{'id':res2.contenuses.0.id})}}" onclick="return confirm('Êtes-vous sûr ?')">
  919.                                             <div class="d-flex justify-content-center align-items-center cubeIcon2">
  920.                                                 <i class="fa-solid fa-trash"></i>
  921.                                             </div>
  922.                                         </a>
  923.                                     </div>
  924.                                 {% endif %}
  925.                             {% endif %}
  926.                         {% endif %}
  929. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  930. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL CONTENUS    ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  931. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  934. {% if app.user %}
  935.     {% if res2.contenuses is  empty %}
  936.         <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>
  937.     {% endif %}
  941. <!-- ///\\\ ///\\\ MODAL CONTENUS ///\\\ ///\\\  --> 
  942.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  943.         <div class="modal-dialog">
  944.             <div class="modal-content">
  945.                 <div class="modal-body">
  946.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  948.                     <div class="container-modal d-flex flex-column">
  949.                         <h2>Ajouter un contenu</h2>
  950.                         <p>Les «blocs» peuvent contenir chacun un «Contenu» dédiés à du texte, une image, un lien youtube, …</p>
  951.                     </div>
  952.                     
  953.                     <div class="container-contenu d-flex flex-wrap  justify-content-start">
  954.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  955.                             <div class="container-picto container-picto-texte">
  956.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  957.                                     <img src="{{asset('img/cms/cpi-textes.svg')}}" alt="">
  958.                                 </div>
  959.                                 <p class="colonneText text-center">Texte</p>
  960.                             </div>
  961.                         </a>
  963.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'image'})}}">
  964.                             <div class="container-picto container-picto-texte">
  965.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  966.                                     <img src="{{asset('img/cms/cpi-images.svg')}}" alt="">
  967.                                 </div>
  968.                                 <p class="colonneText text-center">Image</p>
  969.                             </div>
  970.                         </a>
  971.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'video'})}}">
  972.                             <div class="container-picto container-picto-texte">
  973.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  974.                                     <img src="{{asset('img/cms/cpi-videos.svg')}}" alt="">
  975.                                 </div>
  976.                                 <p class="colonneText text-center">Vidéo</p>
  977.                             </div>
  978.                         </a>
  979.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpicto'})}}">
  980.                             <div class="container-picto container-picto-texte">
  981.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  982.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  983.                                 </div>
  984.                                 <p class="colonneText text-center">Box + picto</p>
  985.                             </div>
  986.                         </a>
  988.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpictocarousel'})}}">
  989.                             <div class="container-picto container-picto-texte">
  990.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  991.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  992.                                 </div>
  993.                                 <p class="colonneText text-center">Box + picto <br> (carousel)</p>
  994.                             </div>
  995.                         </a>
  996.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles'})}}">
  997.                             <div class="container-picto container-picto-texte">
  998.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  999.                                     <img src="{{asset('img/cms/cpi-chiffres-cles.svg')}}" alt="">
  1000.                                 </div>
  1001.                                 <p class="colonneText text-center">Chiffre clé</p>
  1002.                             </div>
  1003.                         </a>
  1004.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles2'})}}">
  1005.                             <div class="container-picto container-picto-texte">
  1006.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1007.                                     <img src="{{asset('img/cms/cpi-chiffres-cles-2.svg')}}" alt="">
  1008.                                 </div>
  1009.                                 <p class="colonneText text-center">Chiffre clé 2</p>
  1010.                             </div>
  1011.                         </a>
  1012.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'accordeon'})}}">
  1013.                             <div class="container-picto container-picto-texte">
  1014.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1015.                                     <img src="{{asset('img/cms/cpi-accordeons.svg')}}" alt="">
  1016.                                 </div>
  1017.                                 <p class="colonneText text-center">Accordéon</p>
  1018.                             </div>
  1019.                         </a>
  1020.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'avantage'})}}">
  1021.                             <div class="container-picto container-picto-texte">
  1022.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1023.                                     <img src="{{asset('img/cms/cpi-avantages.svg')}}" alt="">
  1024.                                 </div>
  1025.                                 <p class="colonneText text-center">Avantages</p>
  1026.                             </div>
  1027.                         </a>
  1028.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'carousel'})}}">
  1029.                             <div class="container-picto container-picto-texte">
  1030.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1031.                                     <img src="{{asset('img/cms/cpi-carousel.svg')}}" alt="">
  1032.                                 </div>
  1033.                                 <p class="colonneText text-center">Carousel</p>
  1034.                             </div>
  1035.                         </a>
  1036.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'temoignage'})}}">
  1037.                             <div class="container-picto container-picto-texte">
  1038.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1039.                                     <img src="{{asset('img/cms/cpi-temoignage.svg')}}" alt="">
  1040.                                 </div>
  1041.                                 <p class="colonneText text-center">Témoignage</p>
  1042.                             </div>
  1043.                         </a>
  1044.                       <a href="{{path('app_addContent',{'bloc':res2.id,'type':'button'})}}">
  1045.                             <div class="container-picto container-picto-texte">
  1046.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1047.                                     <img src="{{asset('img/cms/cpi-btn.svg')}}" alt="" style="width:57px">
  1048.                                 </div>
  1049.                                 <p class="colonneText text-center">Bouton</p>
  1050.                             </div>
  1051.                         </a> 
  1052.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'document'})}}">
  1053.                             <div class="container-picto container-picto-texte">
  1054.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1055.                                     <img src="{{asset('img/cms/cpi-doc.svg')}}" alt="" style="width:57px">
  1056.                                 </div>
  1057.                                 <p class="colonneText text-center">Document</p>
  1058.                             </div>
  1059.                         </a>                 
  1060.                     </div>
  1062.                     <div class="modal-submit d-flex justify-content-end align-items-end">
  1063.                         <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1064.                     </div>
  1065.                 </div>
  1066.             </div>
  1067.         </div> 
  1068.     </div>   
  1070. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS ///\\\ ///\\\  -->                                                                        
  1073. <!-- ///\\\ ///\\\ MODAL CONTENUS 2 ///\\\ ///\\\  -->                             
  1074.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  1075.         <div class="modal-dialog">
  1076.             <div class="modal-content">
  1077.                 <div class="modal-body">
  1078.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1080.                     <div class="container-modal d-flex flex-column">
  1081.                         <h2>Ajouter un contenu</h2>
  1082.                         <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>
  1083.                     </div>
  1084.                     
  1085.                     <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1086.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  1087.                             <div class="container-choix">
  1088.                                 <div class="simu-grid d-flex justify-content-center align-items-center">
  1089.                                     <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1090.                                         <p>12</p>
  1091.                                     </div>
  1092.                                 </div>
  1093.                                 <p class="colonneText text-center">Texte</p>
  1094.                             </div>
  1095.                         </a>
  1096.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  1097.                         <div class="container-choix">
  1098.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1099.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1100.                                     <p>6</p>
  1101.                                 </div>
  1102.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1103.                                     <p>6</p>
  1104.                                 </div>
  1105.                             </div>  
  1106.                             <p class="colonneText text-center">3 colonne</p>
  1107.                         </div>
  1108.                     </a>
  1110.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1111.                         <div class="container-choix">
  1112.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1113.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1114.                                     <p>4</p>
  1115.                                 </div>
  1116.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1117.                                     <p>4</p>
  1118.                                 </div>
  1119.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1120.                                     <p>4</p>
  1121.                                 </div>
  1122.                             </div>
  1123.                             <p class="colonneText text-center">2 colonne</p>
  1124.                         </div>
  1125.                     </a>
  1127.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1128.                         <div class="container-choix">
  1129.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1130.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1131.                                     <p>8</p>
  1132.                                 </div>
  1133.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1134.                                     <p>4</p>
  1135.                                 </div>
  1136.                             </div>
  1137.                             <p class="colonneText text-center">2 colonne</p>
  1138.                         </div>
  1139.                     </a>
  1141.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1142.                         <div class="container-choix">
  1143.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1144.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1145.                                     <p>4</p>
  1146.                                 </div>
  1147.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1148.                                     <p>8</p>
  1149.                                 </div>                    
  1150.                             </div>
  1151.                             <p class="colonneText text-center">2 colonne</p>
  1152.                         </div>
  1153.                     </a>
  1155.                 </div>
  1157.                 <div class="modal-submit d-flex justify-content-end align-items-end">
  1158.                     <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1159.                 </div>
  1160.             </div>
  1161.         </div>
  1162.     </div> 
  1163. </div>
  1164. {% endif %}
  1167. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS 2 ///\\\ ///\\\  -->  
  1169. </div>
  1170. {% endfor %}                       
  1171. </div>
  1175. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1176. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL BLOCK       ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1177. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1178.                       
  1179. {% if app.user %}
  1180.     <div style="d-flex justify-content-center padding-top:20px">
  1181.         <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addBloc{{res.id}}" >Ajouter un bloc</button>
  1182.             <div class="modal fade" id="addBloc{{res.id}}" tabindex="-1" aria-labelledby="addBloc" aria-hidden="true">
  1183.                 <div class="modal-dialog">
  1184.                     <div class="modal-content">
  1185.                         <div class="modal-body">
  1186.                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1188.                             <div class="container-modal d-flex flex-column">
  1189.                                 <h2>Ajouter un bloc</h2>
  1190.                                 <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>
  1191.                             </div>
  1192.                             
  1193.                             <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1195.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':12})}}">
  1196.                                     <div class="container-choix">
  1197.                                         <div class="simu-grid d-flex justify-content-center align-items-center">
  1198.                                             <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1199.                                                 <p>12</p>
  1200.                                             </div>
  1201.                                         </div>
  1202.                                         <p class="colonneText text-center">1 colonne</p>
  1203.                                     </div>
  1204.                                 </a>
  1205.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  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-6 d-flex justify-content-center align-items-center">
  1209.                                                 <p>6</p>
  1210.                                             </div>
  1211.                                             <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1212.                                                 <p>6</p>
  1213.                                             </div>
  1214.                                         </div>
  1215.                                         <p class="colonneText text-center">2 colonnes</p>
  1216.                                     </div>
  1217.                                 </a>
  1218.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1219.                                     <div class="container-choix">
  1220.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1221.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1222.                                                 <p>4</p>
  1223.                                             </div>
  1224.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1225.                                                 <p>4</p>
  1226.                                             </div>
  1227.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1228.                                                 <p>4</p>
  1229.                                             </div>
  1230.                                         </div>
  1231.                                         <p class="colonneText text-center">3 colonnes</p>
  1232.                                     </div>
  1233.                                 </a>
  1235.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1236.                                 <div class="container-choix">
  1237.                                     <div class="simu-grid d-flex justify-content-around align-items-center">
  1238.                                         <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1239.                                             <p>8</p>
  1240.                                         </div>
  1241.                                         <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1242.                                             <p>4</p>
  1243.                                         </div>
  1244.                                     </div>
  1245.                                     <p class="colonneText text-center">2 colonnes</p>
  1246.                                 </div>
  1247.                                 </a>
  1249.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1250.                                     <div class="container-choix">
  1251.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1252.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1253.                                                 <p>4</p>
  1254.                                             </div>
  1255.                                             <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1256.                                                 <p>8</p>
  1257.                                             </div>
  1258.                                     
  1259.                                         </div>
  1260.                                         <p class="colonneText text-center">2 colonnes</p>
  1261.                                     </div>
  1262.                                 </a>
  1264.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':3333})}}">
  1265.                                     <div class="container-choix">
  1266.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1267.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1268.                                                 <p>3</p>
  1269.                                             </div>
  1270.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1271.                                                 <p>3</p>
  1272.                                             </div>
  1273.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1274.                                                 <p>3</p>
  1275.                                             </div>
  1276.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1277.                                                 <p>3</p>
  1278.                                             </div>
  1279.                                     
  1280.                                         </div>
  1281.                                         <p class="colonneText text-center">4 colonnes</p>
  1282.                                     </div>
  1283.                                 </a>
  1284.                             </div>
  1285.                             <div class="modal-submit d-flex justify-content-end align-items-end">
  1286.                                 <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1287.                             </div>
  1288.                         </div>
  1289.                     </div>
  1290.                 </div> 
  1291.             </div>
  1292. {% endif %}                 
  1293.     </div>
  1295. </div>
  1296. {% endfor %}
  1299. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1300. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL SECTION     ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1301. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1304. <!-- ///\\\ ///\\\  MODAL AJOUT SECTION ///\\\ ///\\\  -->  
  1306. <div class="modal fade" id="addSection" tabindex="-1" aria-labelledby="addSection" aria-hidden="true">
  1307.     <div class="modal-dialog">
  1308.         <div class="modal-content">
  1309.             <div class="modal-body">
  1310.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1312.                 <div class="container-modal d-flex flex-column">
  1313.                     <h2>Ajouter une section</h2>
  1314.                     <p>Les pages dont composées «Sections» contenant chacune des « Blocs » de « Contenus » répartis en colonnes</p>
  1315.                 </div>
  1316.                 <form action="{{path('app_addSection')}}" method="post" enctype="multipart/form-data">
  1317.                     <input type="hidden" name="page" value="{{page.id}}">
  1318.                     <div class="container-contenus-modal">
  1319.                         <h3>Image de fond</h3>
  1320.                         <input type="file"  name="imageSection" >  
  1321.                     </div>
  1322.                     <div class="container-contenus-modal">
  1323.                         <h3>Image rond</h3>
  1324.                         <input type="file"  name="imageRond" >   
  1325.                     </div>
  1326.                     <div class="container-contenus-modal">
  1327.                         <h3>Ordre affichage</h3>
  1328.                         <input type="number" name="ordreSection" id="ordreSection" value="{{ordreMax}}">
  1329.                     </div>
  1330.                     <div class="container-contenus-modal">
  1331.                         <h3>Couleur de section</h3>
  1332.                         <input type="text" name="couleurSection" id="couleurSection" value="#fff">
  1333.                         <div class="container-all-couleur d-flex flex-wrap">
  1334.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffffff')">
  1335.                                 <div class="seeColor seeColor1"></div>
  1336.                                 <p>Blanc</p>
  1337.                             </div>
  1338.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#F6F6F6')">
  1339.                                 <div class="seeColor seeColor2"></div>
  1340.                                 <p>Gris</p>
  1341.                             </div>
  1342.                             <div class="button-couleur button-color-active d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#EBE7F7')">
  1343.                                 <div class="seeColor seeColor3"></div>
  1344.                                 <p>Violet 1</p>
  1345.                             </div>
  1346.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#30278D')">
  1347.                                 <div class="seeColor seeColor4"></div>
  1348.                                 <p>Violet 2</p>
  1349.                             </div>
  1350.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#180068')">
  1351.                                 <div class="seeColor seeColor5"></div>
  1352.                                 <p>Violet 3</p>
  1353.                             </div>
  1354.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#00CEFF')">
  1355.                                 <div class="seeColor seeColor6"></div>
  1356.                                 <p>Bleu 1</p>
  1357.                             </div>
  1358.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#0047FF')">
  1359.                                 <div class="seeColor seeColor7"></div>
  1360.                                 <p>Bleu 2</p>
  1361.                             </div>
  1362.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffda2b')">
  1363.                                 <div class="seeColor seeColor8"></div>
  1364.                                 <p>Jaune</p>
  1365.                             </div>                
  1366.                         </div> 
  1367.                     </div>
  1368.                     <div class="modal-submit d-flex justify-content-center">
  1369.                         <button type="submit" class=" btnAdd">Ajouter</button>
  1370.                     </div>    
  1371.                 </form>
  1372.             </div>
  1373.         </div>
  1374.     </div> 
  1375. </div>
  1378. <!-- ///\\\ ///\\\  UPDATE SECTION ///\\\ ///\\\  -->  
  1380. {% if app.user %}
  1382.     <div class="d-flex justify-content-center mb-3">
  1383.         <a href="{{path('app_updateSection',{'id':section.id,'pages':page.id})}}" style="color:white; text-decoration:none">
  1384.             <div class="d-flex justify-content-center align-items-center cubeIcon" style="width:200px">
  1385.                 <i class="fa-solid fa-pen" style="padding-right:10px"></i> Modifier la section
  1386.             </div>
  1387.         </a>
  1389.         <a href="{{path('app_deleteSection',{'id':section.id,'pages':page.id})}}" onclick="return confirm('Êtes-vous sûr ?')" style="color:white; text-decoration:none">
  1390.             <div class="d-flex justify-content-center align-items-center cubeIcon2" style="width:200px">
  1391.                 <i class="fa-solid fa-trash" style="padding-right:10px"></i> Supprimer la section
  1392.             </div>
  1393.         </a>
  1394.     </div>
  1395. {% endif %}
  1398. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->  
  1401. <!-- ///\\\ ///\\\  FIN SECTION + FORME BLEU SOUS SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1403. </section>
  1404. <div class="container">
  1405.     <div class="formeBleu">
  1406.         <div class="row justify-content-center d-flex">
  1407.             {% if section.rond != '' %}
  1408.                 <img src="{{asset('uploads/sections/'~section.rond)}}" class="img-fluid d-none d-lg-block">                        
  1409.             {% endif %}
  1410.         </div>
  1411.     </div>
  1412. </div>
  1413. {% endfor %}
  1416. <!-- ///\\\ ///\\\  AJOUT SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1419. {% if app.user %}
  1420. <div style="{% if sections|length > 0 %}padding-top:20px{% else %}padding-top:250px{% endif %}" align="center">
  1421. <!-- Button trigger modal -->
  1422. <hr style="border-top:dashed #000;">
  1423. <a data-bs-toggle="modal" data-bs-target="#addSection" style="font-size: 25px;
  1424. font-weight: bold;
  1425. color: #bfbfbf; cursor:pointer" >+ Ajouter une section</a>
  1426. <hr  style="border-top:dashed #000;">
  1429. <script>
  1430.     function saveColor(value) {
  1431.         $('#couleurSection').val(value);
  1432.     }
  1433. </script>
  1435. {% endif %}
  1436. {% endif %}
  1441. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1442. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    SCRIPT PCONTENT   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1443. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1446. <!-- ///\\\ ///\\\  SCRIPT ACCORDEON ///\\\ ///\\\  -->  
  1448. <script>
  1449.     let accordionHeaders = document.querySelectorAll('.accordion-header');
  1451.     accordionHeaders.forEach(header => {
  1452.         let button = header.querySelector('.texteDeroulant button');
  1454.         button.addEventListener('click', function () {
  1455.             let parentAccordion = header.closest('.accordion');
  1456.             let buttons = parentAccordion.querySelectorAll('.texteDeroulant button');
  1457.             let content = header.nextElementSibling; // The content section to show/hide
  1459.             // Check if the content section is already open
  1460.             if (content.classList.contains('show')) {
  1461.                 // Close the content section
  1462.                 content.classList.remove('show');
  1463.                 content.classList.add('collapse');
  1464.             } else {
  1465.                 // Close all other open sections (if any) and open this content section
  1466.                 buttons.forEach(btn => {
  1467.                     let contentToClose = btn.parentElement.nextElementSibling;
  1468.                     if (contentToClose.classList.contains('show')) {
  1469.                         contentToClose.classList.remove('show');
  1470.                         contentToClose.classList.add('collapse');
  1471.                     }
  1472.                 });
  1474.                 // Open the content section
  1475.                 content.classList.remove('collapse');
  1476.                 content.classList.add('show');
  1477.             }
  1479.             // Toggle the button color
  1480.             if (button.style.color !== 'red') {
  1481.                 buttons.forEach(btn => {
  1482.                     btn.style.color = 'white';
  1483.                 });
  1484.                 button.style.color = 'red';
  1485.             } else {
  1486.                 button.style.color = 'white';
  1487.             }
  1488.         });
  1489.     });
  1491.     let buttonsForIcon = document.querySelectorAll('.texteDeroulant button');
  1492.     let icons = document.querySelectorAll('.jsIcon');
  1493.     let previousIcon = null;
  1495.     buttonsForIcon.forEach((button, index) => {
  1496.         let icon = icons[index];
  1498.         button.addEventListener('click', function () {
  1499.             if (previousIcon !== null && previousIcon !== icon) {
  1500.                 // Restore the previous icon to fa-plus-circle
  1501.                 previousIcon.classList.remove('fa-minus-circle');
  1502.                 previousIcon.classList.add('fa-plus-circle');
  1503.             }
  1505.             if (icon.classList.contains('fa-plus-circle')) {
  1506.                 icon.classList.remove('fa-plus-circle');
  1507.                 icon.classList.add('fa-minus-circle');
  1508.             } else {
  1509.                 icon.classList.remove('fa-minus-circle');
  1510.                 icon.classList.add('fa-plus-circle');
  1511.             }
  1513.             previousIcon = icon;
  1514.         });
  1515.     });
  1516. </script>
  1518. </section>
  1527. </main>
  1529.          
  1531.          
  1532.         
  1533.          
  1534.            <script type="text/javascript">
  1535.             $(document).ready(function(){
  1536.                 $('.slider-demo-valeur').slick({
  1537.                     arrows: true,
  1538.                     infinite:true,
  1539.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1540.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1541.                     slidesToShow:4,
  1542.                     slidesToScroll:4,
  1543.                     responsive:[{
  1544.                         breakpoint:1400,
  1545.                         settings:{
  1546.                             slidesToShow:3,  
  1547.                             slidesToScroll:3,            
  1548.                         }
  1549.                     },{
  1550.                         breakpoint:1200,
  1551.                         settings:{
  1552.                             slidesToShow:2,
  1553.                             slidesToScroll:2, 
  1554.                         }
  1555.                     },
  1556.                     {
  1557.                         breakpoint:769,
  1558.                         settings:{
  1559.                             slidesToShow:1,
  1560.                             slidesToScroll:1, 
  1561.                         }
  1562.                     }],
  1563.                 });
  1564.             });
  1565.         </script>
  1567.         <script>
  1568.             function changeLanguage(selectedButton, modalId) {
  1569.                 let modal = document.getElementById(modalId);
  1570.                 let buttons = modal.querySelectorAll(".button-langue");
  1571.                 let inputField = modal.querySelector(".sectionTitle");
  1572.                 
  1573.                 buttons.forEach((button) => {
  1574.                     if (button === selectedButton) {
  1575.                         button.classList.add("button-langue-active");
  1576.                         button.classList.remove("button-langue-noactive");
  1577.         
  1578.                         // Set the input field value based on the active language
  1579.                         switch (button.textContent) {
  1580.                             case "FR":
  1581.                                 inputField.value = "Titre de la section FR";
  1582.                                 break;
  1583.                             case "EN":
  1584.                                 inputField.value = "Section Title EN";
  1585.                                 break;
  1586.                             case "DE":
  1587.                                 inputField.value = "Abschnittstitel DE";
  1588.                                 break;
  1589.                             // Add cases for other languages if needed
  1590.                             default:
  1591.                                 inputField.value = "";
  1592.                         }
  1593.                     } else {
  1594.                         button.classList.remove("button-langue-active");
  1595.                         button.classList.add("button-langue-noactive");
  1596.                     }
  1597.                 });
  1598.             }
  1599.         
  1600.             function changeColor(selectedColorButton, modalId) {
  1601.                 let modal = document.getElementById(modalId);
  1602.                 const colorButtons = modal.querySelectorAll(".button-couleur");
  1603.                 colorButtons.forEach((colorButton) => {
  1604.                     if (colorButton === selectedColorButton) {
  1605.                         colorButton.classList.add("button-color-active");
  1606.                         colorButton.classList.remove("button-color-noactive");
  1607.                     } else {
  1608.                         colorButton.classList.remove("button-color-active");
  1609.                         colorButton.classList.add("button-color-noactive");
  1610.                     }
  1611.                 });
  1612.             }
  1613.         
  1614.             function clearDefaultText(inputField) {
  1615.                 // Clear the default value if it matches the default text
  1616.                 if (inputField.value === inputField.defaultValue) {
  1617.                     inputField.value = '';
  1618.                 }
  1619.             }
  1620.         
  1621.             function restoreDefaultText(inputField) {
  1622.                 // Restore the default value if the input is empty
  1623.                 if (inputField.value === '') {
  1624.                     inputField.value = inputField.defaultValue;
  1625.                 }
  1626.             }
  1629.             function recupDoc(id)
  1630.             {
  1631.                 $('#idDocumentSend').val(id)
  1632.             }
  1633. </script>
  1634.         
  1636.   
  1637.        
  1639. <!-- ///\\\ ///\\\  IMPORT ///\\\ ///\\\  -->  
  1641. <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
  1642. <script src="{{asset('js/jquery-latest.min.js')}}"></script>
  1643. <script src="{{asset('slick/slick.js')}}"></script>
  1644. <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>
  1648. <script type="text/javascript">
  1649.     $(document).ready(function() {
  1650.         $('.slider-demo-galerie').slick({
  1651.             arrows: true,
  1652.             infinite:true,
  1653.             autoplay: true, // Ajout de l'option autoplay
  1654.             autoplaySpeed: 4000, // Durée de chaque diapositive en millisecondes
  1655.             slidesToShow:4,
  1656.             slidesToScroll:4,
  1657.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1658.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1659.             responsive:[{
  1660.                 breakpoint:1400,
  1661.                 settings: {
  1662.                     slidesToShow:3,  
  1663.                     slidesToScroll:3,            
  1664.                 }
  1665.                 },{
  1666.                     
  1667.                 breakpoint:1200,
  1668.                 settings:{
  1669.                     slidesToShow:2,
  1670.                     slidesToScroll:2, 
  1671.                 }
  1672.                 },
  1673.                 {
  1674.                 breakpoint:769,
  1675.                 settings:{
  1676.                     slidesToShow:1,
  1677.                     slidesToScroll:1, 
  1678.                 }
  1679.             }],
  1680.         });
  1681.        
  1683.         $('.slider-demo-actu').slick({
  1684.             arrows: true,
  1685.             infinite: true,
  1686.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1687.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1688.             slidesToShow: 4,
  1689.             slidesToScroll: 4,
  1690.                 responsive:[{
  1691.                     breakpoint:1400,
  1692.                     settings:{
  1693.                         slidesToShow:3,  
  1694.                         slidesToScroll:3,            
  1695.                     }
  1696.                 },{
  1697.                     breakpoint:1200,
  1698.                     settings:{
  1699.                         slidesToShow:2,
  1700.                         slidesToScroll:2, 
  1701.                     }
  1702.                 },
  1703.                 {
  1704.                     breakpoint:769,
  1705.                     settings:{
  1706.                         slidesToShow:1,
  1707.                         slidesToScroll:1, 
  1708.                     }
  1709.                 }],
  1710.             });
  1711.         });
  1712.         
  1713.          $(document).ready(function(){
  1714.                 $('.slider-demo-actu').slick({
  1715.                     arrows: true,
  1716.                     infinite:true,
  1717.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1718.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1719.                     slidesToShow:4,
  1720.                     slidesToScroll:4,
  1721.                     responsive:[{
  1722.                         breakpoint:1400,
  1723.                         settings:{
  1724.                             slidesToShow:3,  
  1725.                             slidesToScroll:3,            
  1726.                         }
  1727.                     },{
  1728.                         breakpoint:1200,
  1729.                         settings:{
  1730.                             slidesToShow:2,
  1731.                             slidesToScroll:2, 
  1732.                         }
  1733.                     },
  1734.                     {
  1735.                         breakpoint:500,
  1736.                         settings:{
  1737.                             slidesToShow:1,
  1738.                             slidesToScroll:1, 
  1739.                         }
  1740.                     }],
  1741.                 });
  1742.             });
  1745.                $(document).ready(function(){
  1746.                 $('.slider-cms').slick({
  1747.                     arrows: true,
  1748.                     infinite:true,
  1749.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1750.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1751.                     slidesToShow:4,
  1752.                     slidesToScroll:4,
  1753.                     responsive:[{
  1754.                         breakpoint:1400,
  1755.                         settings:{
  1756.                             slidesToShow:3,  
  1757.                             slidesToScroll:3,            
  1758.                         }
  1759.                     },{
  1760.                         breakpoint:1200,
  1761.                         settings:{
  1762.                             slidesToShow:2,
  1763.                             slidesToScroll:2, 
  1764.                         }
  1765.                     },
  1766.                     {
  1767.                         breakpoint:600,
  1768.                         settings:{
  1769.                             slidesToShow:1,
  1770.                             slidesToScroll:1, 
  1771.                         }
  1772.                     }],
  1773.                 });
  1774.             });
  1775.     </script>
  1777. <!-- ================================================= -->
  1780. <!-- Modal Consultation ERP -->
  1781. <div class="modalForm">
  1782. <div class="modal fade" id="exampleModalConsultationERP" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1783.   <div class="modal-dialog">
  1784.     <div class="modal-content">
  1785.       <div class="modal-body">
  1786.         <div class="formulaireFile">
  1787.           <p class="pa1">
  1788.             {% if app.request.locale == 'fr' %}
  1789.             Nous vous remercions de votre intérêt pour la solution DELMIAWorks.
  1790.             {% else %}
  1791.             Thank you for your interest in the DELMIAWorks solution.
  1792.             {% endif %}
  1793.           </p>
  1794.           <p class="pa2">
  1795.             {% if app.request.locale == 'fr' %}
  1796.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1797.             {% else %}
  1798.             To book a free consultation, please enter your contact details.
  1799.             {% endif %}
  1800.           </p>
  1802.           <form action="{{path('sendConsultationERP')}}" method="post">
  1803.             <input type="hidden" id="idDocument" name="document">
  1804.             <div class="row">
  1805.               <div class="d-flex">
  1806.                 <div class="col-6 w100" style="">
  1807.                   <p class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></p>
  1808.                   <input type="text" id="Nom" name="nom" required>
  1809.                 </div>
  1810.                 <div class="col-6 w100">
  1811.                   <p class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></p>
  1812.                   <input type="text" id="Prenom" name="prenom" required>
  1813.                 </div>
  1814.               </div>
  1816.               <div class="d-flex">
  1817.                 <div class="col-12 w100">
  1818.                   <p class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></p>
  1819.                   <input type="text" id="nomSociete" name="societe" required>
  1820.                 </div>
  1821.               </div>
  1823.               <div class="d-flex">
  1824.                 <div class="col-12 w100">
  1825.                   <p class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></p>
  1826.                   <input type="text" id="mail" name="mail" required>
  1827.                 </div>
  1828.               </div>
  1830.               <div class="d-flex flex-md-row flex-column">
  1831.                 <div class="col-md-7 col-12">
  1832.                   <div class="form-check d-flex">
  1833.                     <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1834.                     <label class="form-check-label text-light" for="flexCheckDefault">
  1835.                       {% 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>
  1836.                     </label>
  1837.                   </div>
  1838.                 </div>
  1839.                 <div class="col-md-5 col-12">
  1840.                   <div class="d-flex justify-content-center align-items-start">
  1841.                     <button type="submit" class="buttonDoc">
  1842.                       {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1843.                     </button>
  1844.                   </div>
  1845.                 </div>
  1846.               </div>
  1847.             </div>
  1848.           </form>
  1849.         </div>
  1850.       </div>
  1851.     </div>
  1852.   </div>
  1853. </div>
  1854. </div>
  1857. <!-- Modal Consultation Base Outil -->
  1858. <div class="modalForm">
  1859. <div class="modal fade" id="exampleModalConsultationBaseOutil" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1860.   <div class="modal-dialog">
  1861.     <div class="modal-content">
  1862.       <div class="modal-body">
  1863.         <div class="formulaireFile">
  1864.           <p class="pa1">
  1865.             {% if app.request.locale == 'fr' %}
  1866.             Nous vous remercions de votre intérêt pour la solution Base outils coupants - Wintool.
  1867.             {% else %}
  1868.             Thank you for your interest in the Wintool cutting tool base solution.
  1869.             {% endif %}
  1870.           </p>
  1871.           <p class="pa2">
  1872.             {% if app.request.locale == 'fr' %}
  1873.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1874.             {% else %}
  1875.             To book a free consultation, please enter your contact details.
  1876.             {% endif %}
  1877.           </p>
  1879.           <form action="{{ path('sendConsultationBaseOutils') }}" method="post">
  1880.             <input type="hidden" id="idDocument" name="document">
  1881.             <div class="row">
  1882.               <div class="col-6 mb-3">
  1883.                 <div class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></div>
  1884.                 <input type="text" id="Nom" name="nom" required>
  1885.               </div>
  1886.               <div class="col-6 mb-3">
  1887.                 <div class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></div>
  1888.                 <input type="text" id="Prenom" name="prenom" required>
  1889.               </div>
  1890.               <div class="col-12 mb-3">
  1891.                 <div class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></div>
  1892.                 <input type="text" id="nomSociete" name="societe" required>
  1893.               </div>
  1894.               <div class="col-12 mb-3">
  1895.                 <div class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></div>
  1896.                 <input type="text" id="mail" name="mail" required>
  1897.               </div>
  1898.               <div class="col-md-7 col-12 mb-3">
  1899.                 <div class="form-check d-flex">
  1900.                   <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1901.                   <label class="form-check-label text-light" for="flexCheckDefault">
  1902.                     {% 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>
  1903.                   </label>
  1904.                 </div>
  1905.               </div>
  1906.               <div class="col-md-5 col-12 mb-3">
  1907.                 <div class="d-flex justify-content-center align-items-start">
  1908.                   <button type="submit" class="buttonDoc">
  1909.                     {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1910.                   </button>
  1911.                 </div>
  1912.               </div>
  1913.             </div>
  1914.           </form>
  1915.         </div>
  1916.       </div>
  1917.     </div>
  1918.   </div>
  1919. </div>
  1920. </div>
  1927. <style>
  1928. .modalForm .modal-body{
  1929.     width: 100%;
  1930. }
  1933. .modalForm .modal-content{
  1934.     align-items: start!important;
  1935. }
  1937. .modalForm .modal-body form p{
  1938.     color:white;
  1939.     font-weight: 400;
  1940.     font-size: 18px;
  1941. }
  1943. .modalForm .modal input{
  1944.     width: 100%!important;
  1945.     border-radius: 20px;
  1946.     padding: 7px;
  1947. }
  1949. .modalForm .buttonDoc{
  1950.     background-color: #FFDE2B;
  1951.     border-radius: 50px;
  1952.     color: #30278E;
  1953.     font-family: "Open Sans";
  1954.     font-weight: bold;
  1955.     font-size: 14px;
  1956.     border: none;
  1957.     padding-left: 35px;
  1958.     padding-right: 35px;
  1959.     padding-top: 16px;
  1960.     padding-bottom: 16px;
  1962. }
  1964. .modalForm .formulaire{
  1965.     width: 100%;
  1966.     height: 100%;
  1967. }
  1969. .modalForm .formulaire p{
  1970.     color: white;
  1971.     padding: 0;
  1972.     margin: 0;
  1973.     margin-bottom: 10px;
  1975. }
  1981. .modalForm .formulaireFile input{
  1982.     /* width: 100%; */
  1983.     border-radius: 25px;
  1984.     padding-top: 1%;
  1985.     padding-bottom: 1%;
  1986.     padding-right: 10px;
  1987.     padding-left: 10px;
  1988.     border: solid 1px #ececec;
  1989.     margin-right: 5px;
  1990. }
  1992. .modalForm .formulaireFile .w100 input{
  1993.     width: 100%;
  1994.     margin-bottom: 15px;
  1995. }
  1997. .modalForm .formulaireFile .pa1{
  1998.     font-family: "Open Sans";
  1999.     font-size: 32px;
  2000.     color: #FFDE2B;
  2001.     font-weight: bold;
  2002. }
  2004. .modalForm .formulaireFile .pa2{
  2005.     font-family: "Open Sans";
  2006.     font-size: 18px;
  2007.     color: white;
  2008.     font-weight: 100;
  2009. }
  2011. .modalForm .formulaireFile .pa3{
  2012.     font-family: "Open Sans";
  2013.     font-size: 18px;
  2014.     color: white;
  2015.     font-weight: normal;
  2016. }
  2018. .modalForm .responsive-txt{
  2019.     margin-left: 50px;
  2020. }
  2022. .modalForm .form-check-input[type="checkbox"] {
  2023.     height: 20px !important;
  2024.     width: 20px!important;
  2025. }
  2027. .modalForm .responsive-img{
  2028.     width: 30%;
  2029. }
  2031. .modalForm .modal{
  2032.     --bs-modal-header-border-width: 0px!important;
  2033.     --bs-modal-footer-border-width: 0px!important;
  2034.     --bs-modal-bg: white!important;
  2035.     --bs-modal-bg: transparent!important;
  2036.     --bs-modal-border-color:transparent!important;
  2037.     --bs-modal-width: 828px!important;
  2038. }
  2040. .modalForm .modal-title{
  2041.     color: #FFDE2B;
  2042.     font-size: 32px;
  2043.     font-weight: bold;
  2045. }
  2047. /* RESPONSIVE */
  2048. @media screen and (max-width: 1080px) {
  2050.     .responsive-txt{
  2051.         margin-left: 0px;
  2052.     }
  2054.     .responsive-img{
  2055.         width: 100%;
  2056.         margin-bottom: 25px;
  2057.     }
  2059. }
  2060. </style>
  2062. {% endblock %}