templates/front/inscriptions/inscription-index.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Inscription | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block meta_description %}
  5. <meta name="description" content="Inscrivez-vous aux séminaires internationaux et certificats CIMEF 2026. Formations professionnelles dans +30 thématiques. Paris, Abidjan et international"/>
  6. {% endblock %}
  7. {% block styleSheets %}
  8. <!-- jQuery (OBLIGATOIRE avant Select2) -->
  9. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  11. <script>
  12. $(document).ready(function () {
  14.     const $thematique = $('#new_inscription_form_thematique');
  15.     const $theme      = $('#new_inscription_form_theme');
  16.     const $lieu       = $('#new_inscription_form_lieu');
  17.     const $periode    = $('#new_inscription_form_periode');
  18.     const $prix       = $('#new_inscription_form_prix');
  19.     const $loader     = $('#loader');
  20.     
  21.     $('#new_inscription_form_prix').prop('readonly', true);
  22.     $('#new_inscription_form_periode').prop('readonly', true);
  25.     $theme.parent().hide();
  26.     $lieu.parent().hide();
  27.     $periode.parent().hide();
  28.     $prix.parent().hide();
  30.     /* =========================
  31.        THÉMATIQUE → THÈMES
  32.     ========================= */
  33.     $thematique.on('change', function () {
  35.         let thematiqueVal = $(this).val();
  36.         
  37.         $theme.parent().hide();
  38.         $lieu.parent().hide();
  39.         $periode.parent().hide();
  40.         $prix.parent().hide();
  42.         if (!thematiqueVal) return;
  43.         
  44.         $loader.show();
  46.         $.ajax({
  47.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  48.             type: "POST",
  49.             dataType: "json",
  50.             data: {
  51.                 action: 'themes',
  52.                 thematiqueVal: thematiqueVal
  53.             },
  54.             success: function (data) {
  56.                 $theme.empty();
  57.                 $theme.append('<option value="">Sélectionner un thème</option>');
  59.                 data.forEach(item => {
  60.                     $theme.append(
  61.                         `<option value="${item.id}">${item.nom}</option>`
  62.                     );
  63.                 });
  65.                 $theme.parent().show();
  66.             },
  67.             complete: function () {
  68.                 $loader.hide();
  69.             }
  70.         });
  71.     });
  73.     /* =========================
  74.        THÉMATIQUE → THÈME → LIEUX
  75.     ========================= */
  76.     $theme.on('change', function () {
  78.         let themeVal = $(this).val();
  79.         $lieu.parent().hide();
  80.         $periode.parent().hide();
  81.         $prix.parent().hide();
  83.         if (!themeVal) return;
  84.         
  85.         $loader.show();
  87.         $.ajax({
  88.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  89.             type: "POST",
  90.             dataType: "json",
  91.             data: {
  92.                 action: 'lieux',
  93.                 themeVal: themeVal
  94.             },
  95.             success: function (data) {
  96.                 $lieu.empty();
  97.                 $lieu.append('<option value="">Sélectionner le lieu</option>');
  99.                 data.forEach(item => {
  100.                     $lieu.append(
  101.                         `<option value="${item.id}">${item.lieu}</option>`
  102.                     );
  103.                 });
  104.                 $lieu.parent().show();
  105.             },
  106.             complete: function () {
  107.                 $loader.hide();
  108.             }
  109.         });
  110.     });
  112.     /* =========================
  113.        THÉMATIQUE → THÈME → LIEUX → DATE
  114.     ========================= */
  115.     $lieu.on('change', function () {
  116.     
  117.         let formationId = $(this).val();
  118.     
  119.         $periode.parent().hide();
  120.         $prix.parent().hide();
  121.     
  122.         if (!formationId) return;
  123.         
  124.         $loader.show();
  125.     
  126.         $.ajax({
  127.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  128.             type: "POST",
  129.             dataType: "json",
  130.             data: {
  131.                 action: 'lieu_details',
  132.                 formationId: formationId
  133.             },
  134.             success: function (data) {
  135.     
  136.                 // Session (date)
  137.                 $('#new_inscription_form_periode')
  138.                     .val(data.session)
  139.                     .parent()
  140.                     .show();
  141.     
  142.                 // Prix
  143.                 $('#new_inscription_form_prix')
  144.                     .val(data.prix + ' ' + data.devise)
  145.                     .parent()
  146.                     .show();
  147.             },
  148.             complete: function () {
  149.                 $loader.hide();
  150.             }
  151.         });
  152.     });
  156. });
  157. </script>
  161. <style id='wp-emoji-styles-inline-css' type='text/css'>
  162. .select{
  163.     padding: 10px !important;
  164.     border:1px solid red !important;
  165. }
  166. .select2{
  167.     padding: 10px;
  168.     border:1px solid red;
  169. }
  170. /* 🔄 Spinner */
  171. .loader {
  172.     display: none;
  173.     width: 25px;
  174.     height: 25px;
  175.     border: 3px solid #ddd;
  176.     border-top: 3px solid #007bff;
  177.     border-radius: 50%;
  178.     animation: spin 0.8s linear infinite;
  179.     margin-top: 10px;
  180. }
  181. @keyframes spin {
  182.     100% { transform: rotate(360deg); }
  183. }
  184. label {
  185.     font-family: arial;
  186.     font-weight: bold;
  187. }
  188. .form-control{
  189.     width:100%;
  190.     height:50px;
  191.     padding:10px;
  192.     border-radius:8px;
  193.     font-family: arial;
  194.     margin-bottom: 5px;
  195.     border:1px solid #ccc;
  196. }
  197. .textarea{
  198.     width:100%;
  199.     height:45px;
  200.     padding:10px;
  201.     font-family: arial;
  202.     border:1px solid #ccc;
  203.     height: 100px !important;
  204.     border-radius:1px !important;
  205. }
  206. .row {
  207.     display: flex;            /* flexbox pour aligner les colonnes */
  208.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  209.     margin-right: -0.75rem;   /* -gutter/2 */
  210.     margin-left: -0.75rem;    /* -gutter/2 */
  211. }
  212. .events_pagination ul.pagination {
  213.     display: flex;
  214.     flex-wrap: wrap;
  215.     justify-content: center;
  216.     list-style: none;
  217.     margin: 0;
  218.     padding: 0;
  219. }
  220. .page-item.active .page-link {
  221.     background-color: #ff6600;
  222.     color: #fff;
  223. }
  224. .page-link {
  225.     margin: 10px;
  226.     color: #051a53;
  227.     background-color: #ededed;
  228.     border-radius: 5px;
  229.     padding: 10px;
  230.     /* margin: 0 3px; */
  231. }
  233. .text-lien{
  234.    color: #ff6600;
  235.    /* font-size: 16px; */
  236. }
  237. .shadow {
  238.     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  239. }
  240. /* Small devices ≥576px */
  241. @media (min-width: 576px) {
  242.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  243.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  244.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  245.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  246.   h1 { font-size: 20px !important; }
  247. }
  249. /* Medium devices ≥768px */
  250. @media (min-width: 768px) {
  251.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  252.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  253.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  254.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  255. }
  257. /* Large devices ≥992px */
  258. @media (min-width: 992px) {
  259.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  260.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  261.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  262.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  263. }
  265. .type1 .date-event {
  266.     transition: all 0.5s ease;
  267.     position: absolute;
  268.     bottom: 20px;
  269.     left: 30px;
  270.     z-index: 1;
  271.     font-size: 12px;
  272.     color: #fff;
  273.     font-weight: 700;
  274.     text-transform: uppercase;
  275.     text-align: center;
  276.     line-height: 1.3;
  277.     letter-spacing: 1px;
  278.     background-color: #ff6600 !important;
  279.     padding: 12px;
  280. }
  281. .icon_event{
  282.     color: #ff6600 !important;
  283. }
  284. .wrap_header_banner .overlay-slider {
  285.     position: absolute;
  286.     top: 0;
  287.     left: 0;
  288.     padding-top: 30px; 
  289.     width: 100%;
  290.     height: 100%;
  291.     background-color: rgba(0, 0, 0, 0.6392156863);
  292. }
  293. .left-column {
  294.     flex: 1;
  295.     /*background: linear-gradient(145deg, #051a53, 0%, #0a2a7a 100%);*/
  296.     background: #051a53;
  297.     color: white;
  298.     padding: 40px;
  299.     display: flex;
  300.     flex-direction: column;
  301.     justify-content: space-between;
  302.     position: relative;
  303.     overflow: hidden;
  304. }
  306. .left-column:before {
  307.     content: "";
  308.     position: absolute;
  309.     top: 0;
  310.     left: 0;
  311.     right: 0;
  312.     bottom: 0;
  313.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.05)"/></svg>');
  314.     opacity: 0.3;
  315. }
  316. .logo-header {
  317.     display: flex;
  318.     align-items: center;
  319.     gap: 15px;
  320.     margin-bottom: 40px;
  321.     z-index: 1;
  322.     position: relative;
  323. }
  325. .logo-circle {
  326.     width: 80px !important;
  327.     height: 65px !important;
  328.     background-color: #ff6600;
  329.     border-radius: 50%;
  330.     display: flex;
  331.     align-items: center;
  332.     justify-content: center;
  333.     font-size: 24px;
  334. }
  335. .left-content {
  336.     z-index: 1;
  337.     position: relative;
  338.     flex-grow: 1;
  339.     margin: 0px !important;
  340.     width: 100% !important;
  341. }
  343. .features-list {
  344.     list-style: none;
  345.     margin: 0px !important;
  346.     width: 100%;
  347. }
  349. .features-list li {
  350.     display: flex;
  351.     align-items: flex-start;
  352.     margin-bottom: 10px;
  353.     margin-left: -30px;
  354. }
  356. .feature-icon {
  357.     background-color: rgba(255, 255, 255, 0.15);
  358.     color: #fff;
  359.     border-radius: 50%;
  360.     width: 40px;
  361.     height: 40px;
  362.     display: flex;
  363.     align-items: center;
  364.     justify-content: center;
  365.     margin-right: 15px;
  366.     flex-shrink: 0;
  367.     margin-top: 10px !important;
  368. }
  370. .feature-text h4 {
  371.     font-size: 16px;
  372.     margin-bottom: 5px;
  373.     font-weight: 600;
  374. }
  376. .feature-text p {
  377.     font-size: 14px;
  378.     opacity: 0.8;
  379. }
  381. </style>
  382. {% endblock %}
  383. {% block body %}
  384. {% include 'section/navbar.html.twig' %}
  385. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/table.jpeg')}});        
  386.         background-size: cover;
  387.         background-position: center;
  388.         background-repeat: no-repeat;">
  389.     <div class="overlay-slider">
  390.         <div class="row_site">
  391.             <div class="container_site">
  392.                 <div class="cover_color"></div>
  393.                 <div class="header_banner_el">
  394.                     <div class="header_breadcrumbs">
  395.                         <div id="breadcrumbs">
  396.                         <ul class="breadcrumb">
  397.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  398.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  399.                             <li style="color: #fff!important;">Formations</li>
  400.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  401.                             <li style="color: #fff!important;">Séminaires internationaux et certificats</li>
  402.                         </ul>
  403.                         </div>
  404.                     </div>
  405.                     <h1 class="header_title" style="color: #fff!important;">Séminaires internationaux et certificats</h1>
  406.                 </div>
  407.             </div>
  408.         </div>
  409.     </div>
  410. </div>
  413. {% for message in app.flashes('success') %}
  414. <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  415.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  416.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  417.     </div>
  418.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  419.         <label style="font-family: arial;">{{ message }}</label>
  420.     </div>
  421. </div>    
  422. {% endfor %}
  423. {% for message in app.flashes('warning') %}
  424. <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  425.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  426.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  427.     </div>
  428.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  429.         <label style="font-family: arial;">{{ message }}</label>
  430.     </div>
  431. </div>   
  432. {% endfor %}
  433. {% for message in app.flashes('danger') %}
  434. <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  435.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  436.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  437.     </div>
  438.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  439.         <label style="font-family: arial;">{{ message }}</label>
  440.     </div>
  441. </div>   
  442. {% endfor %}
  445. <div class="container-event">
  446.     <div id="main-event" class="content-event">
  447.         
  448.          <div class="row" style="width: 100% !important; padding: 10px !important;">
  449.             <div class="col-lg-8 col-md-8 col-sm-12" style="padding: 20px">
  450.                 <div class="">
  451.             
  452.                     <div>
  453.                         <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Rejoignez nos programmes de formation professionnelle</h3>
  454.                     </div>
  455.                     <p style="font-size: 18px;">
  456.                         Merci de compléter le formulaire en sélectionnant <b>la thématique selon le thème et la ville de votre séminaire</b>, afin de bénéficier d’une prise en charge personnalisée.
  457.                     </p>
  458.             
  459.                     {{ form_start(demandeformationsForm, {attr: {style: 'width: 100%;'} }) }}
  460.                         <div>
  461.                             <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Formation souhaitée</h3>
  462.                         </div>
  463.                         <div class="row shadow" style="maring: 20px; padding: 30px; margin-top: 10px !important; margin-bottom: 20px !important; border: 2px solid #ededed;">
  464.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  465.                                 {{ form_row(demandeformationsForm.thematique) }}
  466.                             </div>
  467.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  468.                                 {{ form_row(demandeformationsForm.theme) }}
  469.                             </div>
  470.                             
  471.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  472.                                 {{ form_row(demandeformationsForm.lieu) }}
  473.                             </div>
  474.         
  475.                             <div class="col-md-3 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  476.                                 {{ form_row(demandeformationsForm.periode) }}
  477.                             </div>
  478.                             <div class="col-md-3 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  479.                                 {{ form_row(demandeformationsForm.prix) }}
  480.                             </div>
  481.                             <div class="col-12">
  482.                                 <div class="loader" id="loader"></div>
  483.                             </div>
  484.                         </div>
  485.                         
  486.    
  487.                         <div class="row shadow" style="border: 1px solid #ededed; padding: 20px;">
  488.                             <div>
  489.                                 <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Informations personnelles</h3>
  490.                             </div>
  491.                             <div class="col-md-12 col-sm-12">
  492.                                 {{ form_row(demandeformationsForm.civilite) }}
  493.                             </div>
  494.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  495.                                 {{ form_row(demandeformationsForm.nom) }}
  496.                             </div>
  497.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  498.                                 {{ form_row(demandeformationsForm.prenoms) }}
  499.                             </div>
  500.                             <div class="col-md-12 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  501.                                 {{ form_row(demandeformationsForm.mail) }}
  502.                             </div>
  503.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  504.                                 {{ form_row(demandeformationsForm.boitepostale) }}
  505.                             </div>
  506.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  507.                                 {{ form_row(demandeformationsForm.telephone) }}
  508.                             </div>
  509.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  510.                                 {{ form_row(demandeformationsForm.whatsapp) }}
  511.                             </div>  
  512.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  513.                                 {{ form_row(demandeformationsForm.pays) }}
  514.                             </div>
  515.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  516.                                 {{ form_row(demandeformationsForm.ville) }}
  517.                             </div>
  518.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  519.                                 {{ form_row(demandeformationsForm.adresse) }}
  520.                             </div>
  521.                             <div style="margin-top: 10px; border: 1px solid #ededed !important; height: 5px; background-color: #ededed; width: 100%;"></div>
  522.                             <div class="form-header" style="border-top: 1px solid #051a53 !important; width: 100%;">
  523.                                 <h2 class="form-title">Informations sur votre formation</h2>
  524.                             </div>
  525.  
  526.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  527.                                 {{ form_row(demandeformationsForm.entreprise) }}
  528.                             </div>
  529.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  530.                                 {{ form_row(demandeformationsForm.fonction) }}
  531.                             </div>
  532.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  533.                                 {{ form_row(demandeformationsForm.nbparticipant) }}
  534.                             </div>
  535.                             <div class="col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  536.                                 {{ form_row(demandeformationsForm.siteweb) }}
  537.                             </div> 
  539.                             <div class="col-md-12 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  540.                                 {{ form_row(demandeformationsForm.commentaire) }}
  541.                             </div>
  542.                             {{ form_row(demandeformationsForm.recaptchaToken) }}
  543.                             <!--
  544.                             <div class="g-recaptcha" data-sitekey="6LfPYkosAAAAANaQq5rVy_x44wv122vknRu-sw3C"></div>
  545.                             -->
  546.                           </div>
  547.                             <script>
  548.                                 grecaptcha.ready(function() {
  549.                                     grecaptcha.execute('{{ recaptcha_site_key }}', {
  550.                                         action: 'contact'
  551.                                     }).then(function(token) {
  552.                                         document.getElementById('{{ demandeformationsForm.recaptchaToken.vars.id }}').value = token;
  553.                                     });
  554.                                 });
  555.                             </script>
  556.                         {{ form_end(demandeformationsForm) }}
  557.                 </div>
  558.             </div>
  559.             <div class="col-lg-4 col-md-4 col-sm-12" style="padding: 20px">
  560.                 
  561.                 <div class="left-column">
  562.                     <div>
  563.                         <div class="logo-header">
  564.                             <div class="logo-circle">
  565.                                 <i class="fas fa-globe-americas fa-2X"></i>
  566.                             </div>
  567.                             <div class="logo-text">
  568.                                 <h1 style="font-size: 20px !important; color: #fff !important;">CIMEF International</h1>
  569.                                 <p style="font-size: 14px !important; font-style: italic;">La formation précède la compétitivité !</p>
  570.                             </div>
  571.                         </div>
  572.                         
  573.                         <div class="left-content">
  574.                             <h2 class="left-title" style="font-size: 30px !important; color: #fff !important;">Inscription 2026</h2>
  575.                             <p class="left-subtitle">Rejoignez notre réseau mondial de professionnels et participez à des projets d'envergure internationale.</p>
  576.                             
  577.                             <ul class="features-list">
  578.                                 <li>
  579.                                     <div class="feature-icon">
  580.                                         <i class="fas fa-network-wired"></i>
  581.                                     </div>
  582.                                     <div class="feature-text">
  583.                                         <h4 style="color: #ff6600;">Une portée internationale</h4>
  584.                                         <p>Un réseau actif de professionnels répartis dans plusieurs pays</p>
  585.                                     </div>
  586.                                 </li>
  587.                                 <li>
  588.                                     <div class="feature-icon">
  589.                                         <i class="fas fa-graduation-cap"></i>
  590.                                     </div>
  591.                                     <div class="feature-text">
  592.                                         <h4 style="color: #ff6600;">Opportunités de collaboration internationale</h4>
  593.                                         <p>Participez à des projets stratégiques avec des partenaires de renom</p>
  594.                                     </div>
  595.                                 </li>
  596.                                 <li>
  597.                                     <div class="feature-icon">
  598.                                         <i class="fas fa-handshake"></i>
  599.                                     </div>
  600.                                     <div class="feature-text">
  601.                                         <h4 style="color: #ff6600;">Opportunités de collaboration</h4>
  602.                                         <p>Participez à des projets innovants avec des partenaires internationaux</p>
  603.                                     </div>
  604.                                 </li>
  605.                             </ul>
  606.                         </div>
  607.                     </div>
  608.                     
  609.                     <div class="contact-info">
  610.                         <h3 style="color: #fff;">Besoin d'aide ?</h3>
  611.                         <p>Contactez notre équipe à <strong>paris@cimef-international.org</strong> ou appelez-nous au <strong>+33 6 05 85 70 98 </strong></p>
  612.                     </div>
  613.                 </div>
  614.             
  615.             </div>        
  616.                  
  617.         </div>
  618.         
  619.     </div>
  620. </div>
  626. {% include 'section/footer.html.twig' %}
  628. {% block javascripts %}
  630.     <!-- Select2 JS -->
  631.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  632.     
  633.     <script>
  634.         $(document).ready(function() {
  635.             // Appliquer Select2 sur le champ EntityType
  636.             //$('#new_inscription_form_thematique').select2({
  637.                 //placeholder: "Sélectionner une thématique",
  638.                 //allowClear: true,
  639.                 //width: '100%',
  640.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  641.             //});
  642.             //$('#new_inscription_form_theme').select2({
  643.                 //placeholder: "Sélectionner un thème",
  644.                 //allowClear: true,
  645.                 //width: '100%',
  646.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  647.             //});
  648.         });
  649.     </script>
  650. {% endblock %}
  653. {% endblock %}