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

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Inscription aux Séminaires | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <style id='wp-emoji-styles-inline-css' type='text/css'>
  6.  * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  11.         }
  12.         
  14.         
  15.         .container {
  16.             width: 100% !important;
  17.             margin: 0 auto;
  18.         }
  19.         
  20.         .header {
  21.             text-align: center;
  22.             margin-bottom: 40px;
  23.             padding: 20px;
  24.         }
  25.         
  26.         .logo-container {
  27.             display: flex;
  28.             align-items: center;
  29.             justify-content: center;
  30.             gap: 15px;
  31.             margin-bottom: 20px;
  32.         }
  33.         
  34.         .logo-icon {
  35.             font-size: 2.5rem;
  36.             color: #0056b3;
  37.         }
  38.         
  39.         .header h1 {
  40.             color: #0056b3;
  41.             font-size: 2.5rem;
  42.             margin-bottom: 10px;
  43.             font-weight: 700;
  44.         }
  45.         
  46.         .header p {
  47.             color: #666;
  48.             font-size: 1.2rem;
  49.             max-width: 700px;
  50.             margin: 0 auto;
  51.         }
  52.         
  53.         .form-container {
  54.             display: flex;
  55.             flex-wrap: wrap;
  56.             gap: 30px;
  57.             margin-bottom: 40px;
  58.         }
  59.         
  60.         .form-wrapper {
  61.             flex: 1;
  62.             min-width: 300px;
  63.             background-color: white;
  64.             /*border-radius: 15px;*/
  65.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  66.             overflow: hidden;
  67.             padding: 30px;
  68.         }
  69.         
  70.         .form-sidebar {
  71.             /*flex: 0 0 300px;*/
  72.             margin: 0px !important;
  73.             width: 100% !important;
  74.             background: linear-gradient(160deg, #051a53 0%, #003d82 100%);
  75.             color: white;
  76.             /*border-radius: 15px;*/
  77.             padding: 30px;
  78.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  79.         }
  80.         
  81.         .form-title {
  82.             color: #0056b3;
  83.             font-size: 1.8rem;
  84.             margin-bottom: 25px;
  85.             padding-bottom: 15px;
  86.             border-bottom: 2px solid #eaeaea;
  87.             position: relative;
  88.         }
  89.         
  90.         .form-title:after {
  91.             content: '';
  92.             position: absolute;
  93.             left: 0;
  94.             bottom: -2px;
  95.             width: 80px;
  96.             height: 2px;
  97.             background-color: #0056b3;
  98.         }
  99.         
  100.         .form-group {
  101.             margin-bottom: 25px;
  102.         }
  103.         
  104.         .form-row {
  105.             display: flex;
  106.             flex-wrap: wrap;
  107.             gap: 20px;
  108.         }
  109.         
  110.         .form-row .form-group {
  111.             flex: 1;
  112.             min-width: 200px;
  113.         }
  114.         
  115.         label {
  116.             display: block;
  117.             margin-bottom: 8px;
  118.             font-weight: 600;
  119.             color: #444;
  120.         }
  121.         
  122.         .required:after {
  123.             content: " *";
  124.             color: #e63946;
  125.         }
  126.         
  127.         input, select, textarea {
  128.             width: 100%;
  129.             padding: 14px 16px;
  130.             border: 1.5px solid #ddd;
  131.             border-radius: 8px;
  132.             font-size: 1rem;
  133.             transition: all 0.3s;
  134.         }
  135.         
  136.         input:focus, select:focus, textarea:focus {
  137.             outline: none;
  138.             border-color: #0056b3;
  139.             box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
  140.         }
  141.         
  142.         .checkbox-group {
  143.             display: flex;
  144.             align-items: center;
  145.             margin-bottom: 10px;
  146.         }
  147.         
  148.         .checkbox-group input {
  149.             width: auto;
  150.             margin-right: 10px;
  151.         }
  152.         
  153.         .btn-submit {
  154.             background: linear-gradient(to right, #0056b3, #007bff);
  155.             color: white;
  156.             border: none;
  157.             padding: 16px 32px;
  158.             font-size: 1.1rem;
  159.             font-weight: 600;
  160.             border-radius: 8px;
  161.             cursor: pointer;
  162.             transition: all 0.3s;
  163.             display: inline-flex;
  164.             align-items: center;
  165.             justify-content: center;
  166.             width: auto;
  167.             height: 50px;
  168.             margin-top: 5px;
  169.         }
  170.         
  171.         .btn-submit:hover {
  172.             background: linear-gradient(to right, #004494, #0069d9);
  173.             transform: translateY(-2px);
  174.             box-shadow: 0 5px 15px rgba(0, 86, 179, 0.2);
  175.         }
  176.         
  177.         .btn-submit i {
  178.             margin-left: 10px;
  179.         }
  180.         
  181.         .sidebar-title {
  182.             font-size: 1.8rem;
  183.             margin-bottom: 25px;
  184.             color: white;
  185.         }
  186.         
  187.         .sidebar-features {
  188.             list-style: none;
  189.             margin-bottom: 40px;
  190.         }
  191.         
  192.         .sidebar-features li {
  193.             margin-bottom: 20px;
  194.             display: flex;
  195.             align-items: flex-start;
  196.         }
  197.         
  198.         .sidebar-features i {
  199.             background-color: rgba(255, 255, 255, 0.2);
  200.             border-radius: 50%;
  201.             width: 40px;
  202.             height: 40px;
  203.             display: flex;
  204.             align-items: center;
  205.             justify-content: center;
  206.             margin-right: 15px;
  207.             flex-shrink: 0;
  208.         }
  209.         
  210.         .info-box {
  211.             background-color: rgba(255, 255, 255, 0.1);
  212.             border-radius: 10px;
  213.             padding: 20px;
  214.             margin-top: 30px;
  215.         }
  216.         
  217.         .info-box h3 {
  218.             margin-bottom: 10px;
  219.             font-size: 1.2rem;
  220.         }
  221.         
  222.         .form-footer {
  223.             text-align: center;
  224.             color: #666;
  225.             font-size: 0.9rem;
  226.             margin-top: 20px;
  227.             padding-top: 20px;
  228.             border-top: 1px solid #eee;
  229.         }
  230.         
  231.         /*
  232.         .progress-bar {
  233.             margin-top: 50px !important;
  234.             display: flex;
  235.             justify-content: space-between;
  236.             position: relative;
  237.             margin-bottom: 40px;
  238.         }
  239.         
  240.         .progress-bar:before {
  241.             content: '';
  242.             position: absolute;
  243.             top: 30px;
  244.             left: 0;
  245.             width: 100%;
  246.             height: 2px;
  247.             background-color: #eaeaea;
  248.             z-index: 1;
  249.         }
  250.         
  251.         .progress-step {
  252.             text-align: center;
  253.             position: relative;
  254.             z-index: 2;
  255.             background-color: #eaeaea;
  256.             padding: 10px;
  257.         }
  258.         
  259.         .step-number {
  260.             display: inline-block;
  261.             width: 30px;
  262.             height: 30px;
  263.             line-height: 30px;
  264.             border-radius: 50%;
  265.             background-color: #eaeaea;
  266.             color: #777;
  267.             font-weight: bold;
  268.             margin-bottom: 8px;
  269.         }
  270.         
  271.         .step-number.active {
  272.             background-color: #0056b3;
  273.             color: white;
  274.         }
  275.         
  276.         .step-label {
  277.             font-size: 0.85rem;
  278.             color: #777;
  279.         }
  280.         
  281.         .step-label.active {
  282.             color: #0056b3;
  283.             font-weight: 600;
  284.         }
  285. */
  286.         .progress-bar {
  287.             margin-top: 50px !important;
  288.             display: flex;
  289.             justify-content: space-between;
  290.             position: relative;
  291.             margin-bottom: 40px;
  292.         }
  293.         
  294.         .progress-bar:before {
  295.             content: '';
  296.             position: absolute;
  297.             top: 30px;
  298.             left: 0;
  299.             width: 100%;
  300.             height: 2px;
  301.             background-color: #f8f8f8;
  302.             z-index: 1;
  303.         }
  304.         
  305.         .progress-step {
  306.             text-align: center !important;
  307.             position: relative;
  308.             z-index: 2;
  309.             background-color: #f8f8f8;
  310.             padding: 10px;
  311.         }
  312.         .step-number {
  313.             display: inline-block;
  314.             width: 30px;
  315.             height: 30px;
  316.             line-height: 30px;
  317.             border-radius: 50%;
  318.             background-color: #f8f8f8;
  319.             color: #777;
  320.             font-weight: bold;
  321.             margin-bottom: 8px;
  322.         }
  323.         .progress-step.active .step-number {
  324.             width: 30px;
  325.             height: 30px;
  326.             line-height: 30px;
  327.             border-radius: 50%;
  328.             
  329.             background-color: #0056b3;
  330.             color: #fff;
  331.             transform: scale(1.1);
  332.             transition: all 0.3s ease;
  333.         }
  334.         
  335.         .progress-step.active .step-label {
  336.             color: #0056b3;
  337.             font-weight: bold;
  338.         }
  339.         
  340.         .progress-step.completed .step-number {
  341.             background-color: #0056b3;
  342.             color: #fff;
  343.         }
  344.         
  345.         .progress-step.completed .step-label {
  346.             color: #0056b3;
  347.         }
  349.         
  350.         @media (max-width: 768px) {
  351.             .form-sidebar {
  352.                 flex: 1 0 100%;
  353.             }
  354.             
  355.             .header h1 {
  356.                 font-size: 2rem;
  357.             }
  358.             
  359.             .form-row {
  360.                 flex-direction: column;
  361.                 gap: 0;
  362.             }
  363.         }
  364.         
  365.         .form-section {
  366.             display: none;
  367.         }
  368.         
  369.         .form-section.active {
  370.             display: block;
  371.             animation: fadeIn 0.5s;
  372.         }
  373.         
  374.         @keyframes fadeIn {
  375.             from { opacity: 0; transform: translateY(10px); }
  376.             to { opacity: 1; transform: translateY(0); }
  377.         }
  378.         
  379.         .navigation-buttons {
  380.             display: flex;
  381.             justify-content: space-between;
  382.             margin-top: 30px;
  383.         }
  384.         
  385.         .btn-nav {
  386.             background-color: #f1f1f1;
  387.             color: #333;
  388.             border: none;
  389.             padding: 12px 24px;
  390.             border-radius: 8px;
  391.             cursor: pointer;
  392.             font-weight: 600;
  393.             transition: all 0.3s;
  394.             height: 50px;
  395.         }
  396.         
  397.         .btn-nav:hover {
  398.             background-color: #e2e2e2;
  399.         }
  400.         
  401.         .btn-next {
  402.             background-color: #0056b3;
  403.             color: white;
  404.         }
  405.         
  406.         .btn-next:hover {
  407.             background-color: #004494;
  408.         }
  409.         
  410.         .form-header {
  411.             display: flex;
  412.             align-items: center;
  413.             margin-bottom: 20px;
  414.         }
  415.         
  416.         .form-header i {
  417.             font-size: 1.8rem;
  418.             color: #0056b3;
  419.             margin-right: 15px;
  420.         }
  422.         .btn-fichier{
  423.             margin-bottom: 30px; background: #ff6600; padding: 10px; height: 70px; width: 100%; line-height: 50px;
  424.         }
  425.         .btn-fichier:hover{
  426.             margin-bottom: 30px; background: #051a53; padding: 10px; height: 70px; width: 100%;
  427.         }
  428.         .shadow {
  429.             box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  430.         }
  431.     /*
  432.     .captcha {
  433.         display: flex !important;
  434.         align-items: center !important;
  435.         gap: 10px;
  436.     }
  437.     .captcha img {
  438.         margin-right: 10px;
  439.     }
  440.     .captcha input {
  441.         width: 180px;
  442.     }
  443.     .btn-primary{
  444.         font-family: arial;
  445.         font-weight: bold;
  446.     }
  447.     label {
  448.         font-family: arial;
  449.         font-weight: bold;
  450.     }
  451.     .form-control{
  452.         width:100%;
  453.         height:45px;
  454.         padding:10px;
  455.         border-radius:8px;
  456.         font-family: arial;
  457.         margin-bottom: 20px;
  458.         border:1px solid #ccc;
  459.     }
  460.     .textarea{
  461.         width:100%;
  462.         height:45px;
  463.         padding:10px;
  464.         font-family: arial;
  465.         border:1px solid #ccc;
  466.         height: 100px !important;
  467.         border-radius:1px !important;
  468.     }
  469.     #map {
  470.         height: 500px;
  471.         width: 100%;
  472.     }
  473.     .row {
  474.         display: flex;
  475.         flex-wrap: wrap;
  476.         margin-right: -0.75rem;
  477.         margin-left: -0.75rem;
  478.     }
  479.     .btn-register {
  480.         background-color: #ff6600;
  481.         color: #fff;
  482.         font-weight: bold;
  483.         margin-top: 10px;
  484.         text-align: center; 
  485.         border: 1px solid #ff6600!important; 
  486.         width: 100% !important;
  487.         padding: 10px;
  488.         border-radius: 2px;
  489.     }
  490.     .btn-register:hover {
  491.         background-color: #051a53;
  492.         color: #fff;
  493.         margin-top: 10px;
  494.         text-align: center; 
  495.         border: 1px solid #051a53!important; 
  496.         width: 100% !important;
  497.         padding: 10px;
  498.         border-radius: 2px;
  499.     }
  500.     .text-lien{
  501.        color: #ff6600;
  502.        font-size: 16px;
  503.     }
  504.     .mon-div-fixe {
  505.         position: fixed;
  506.         top: 250px;
  507.         z-index: 9999;
  508.     }
  509.     
  510.     .header_title{ font-size: 25px !important; text-transform: lowercase; color: #fff!important; font-weight: bold !important; }
  511.     .wrap_header_banner .overlay-slider {
  512.         position: absolute;
  513.         top: 0;
  514.         left: 0;
  515.         padding-top: 30px; 
  516.         width: 100%;
  517.         height: 100%;
  518.         background-color: rgba(0, 0, 0, 0.6392156863);
  519.     }
  520.     @media (min-width: 576px) {
  521.       .col-3 { flex: 0 0 100%; max-width: 100%; }
  522.       .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  523.       .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  524.       .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  525.       .header_title{ font-size: 20px; text-transform: lowercase; color: #fff!important; }
  526.       .header_banner_el { padding: 10px!important; }
  527.     }
  528.     @media (min-width: 768px) {
  529.       .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  530.       .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  531.       .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  532.       .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  533.     }
  534.     @media (min-width: 992px) {
  535.       .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  536.       .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  537.       .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  538.       .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  539.     }
  540.     */
  541. </style>
  542. {% endblock %}
  543. {% block mapjs %}
  544.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
  545.     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  546. {% endblock %}
  547. {% block body %}
  548. {% include 'section/navbar.html.twig' %}
  549. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  550.     <div class="overlay-slider">
  551.         <div class="row_site">
  552.             <div class="container_site">
  553.                 <div class="cover_color"></div>
  554.                 <div class="header_banner_el">
  555.                     {% if query != null %}
  556.                         {% for f in query %}
  557.                         <div class="header_breadcrumbs">
  558.                             <div id="breadcrumbs">
  559.                                 <ul class="breadcrumb">
  560.                                     <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  561.                                     <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  562.                                     <li style="color: #fff!important; text-transform: lowercase;">Formations</li>
  563.                                     <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  564.                                     <li style="color: #fff!important; text-transform: lowercase;">{{ type }}</li>
  565.                                     <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  566.                                 </ul>
  567.                             </div>
  568.                         </div>
  569.                         <h1 class="header_title">{{ f.nom }} </h1>
  570.                         {% endfor %}
  571.                     {% endif %}
  572.                 </div>
  573.             </div>
  574.         </div>
  575.     </div>
  576. </div>
  578. {% for message in app.flashes('success') %}
  579. <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  580.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  581.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  582.     </div>
  583.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  584.         <label style="font-family: arial;">{{ message }}</label>
  585.     </div>
  586. </div>    
  587. {% endfor %}
  588. {% for message in app.flashes('danger') %}
  589. <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  590.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  591.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  592.     </div>
  593.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  594.         <label style="font-family: arial;">{{ message }}</label>
  595.     </div>
  596. </div>   
  597. {% endfor %}
  599.     <style id="elementor-post-1308">.elementor-1308 .elementor-element.elementor-element-6df1039{margin-top:0px;margin-bottom:110px;}.elementor-1308 .elementor-element.elementor-element-7668bb9 .ovaev-event-title{font-size:30px;}.elementor-1308 .elementor-element.elementor-element-5dc2e39 > .elementor-widget-container{margin:0px 0px 35px 0px;}.elementor-1308 .elementor-element.elementor-element-ee883c9 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:30px;}.elementor-1308 .elementor-element.elementor-element-ee883c9 > .elementor-element-populated{margin:-50px 0px 0px 10px;--e-column-margin-right:0px;--e-column-margin-left:10px;}@media(max-width:1024px){.elementor-1308 .elementor-element.elementor-element-6df1039{margin-top:0px;margin-bottom:80px;}.elementor-1308 .elementor-element.elementor-element-ee883c9 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}}@media(max-width:767px){.elementor-1308 .elementor-element.elementor-element-7668bb9 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-1308 .elementor-element.elementor-element-ff09908 > .elementor-widget-container{margin:0px 0px 50px 0px;}}@media(min-width:768px){.elementor-1308 .elementor-element.elementor-element-d6d4b6c{width:67%;}.elementor-1308 .elementor-element.elementor-element-ee883c9{width:33%;}}</style>
  600.         <div data-elementor-type="page" data-elementor-id="1308" class="elementor elementor-1308">
  601.         {% if query != null %}
  602.             {% for f in query %}
  603.             <section class="elementor-section elementor-top-section elementor-element elementor-element-6df1039 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="6df1039" data-element_type="section">
  604.                 <div class="elementor-container elementor-column-gap-default">
  605.                     <div class="elementor-column elementor-col-80 elementor-top-column elementor-element elementor-element-d6d4b6c" data-id="d6d4b6c" data-element_type="column">   
  606.                          
  607.                         <div class="container">       
  608.                             <div class="progress-bar">
  609.                                 <div class="progress-step">
  610.                                     <div class="step-number">1</div>
  611.                                     <div class="step-label">Informations personnelles</div>
  612.                                 </div>
  613.                                 <div class="progress-step">
  614.                                     <div class="step-number">2</div>
  615.                                     <div class="step-label">Profil professionnel</div>
  616.                                 </div>
  617.                                 <div class="progress-step">
  618.                                     <div class="step-number">3</div>
  619.                                     <div class="step-label">Confirmation</div>
  620.                                 </div>
  621.                             </div>
  623.                             
  624.                             
  625.                             <div class="form-container">
  626.                                 <div class="form-wrapper">
  627.                                     {{ form_start(inscriptionForm, {attr: {id: 'inscriptionForm', style: 'width: 100%;'} }) }}
  628.                                         <!-- Étape 1: Informations personnelles -->
  629.                                         <div class="form-section active" id="section1">
  630.                                             <div class="form-header">
  631.                                                 <i class="fas fa-user-circle"></i>
  632.                                                 <h2 class="form-title">Informations personnelles</h2>
  633.                                             </div>
  634.                                             
  635.                                             <div class="form-group">
  636.                                                 <label for="email" class="required">Civilité</label>
  637.                                                 {{ form_row(inscriptionForm.civilite) }}
  638.                                             </div>
  639.                                             
  640.                                             <div class="form-row">
  641.                                                 <div class="form-group">
  642.                                                     <label for="prenom" class="required">Prénom</label>
  643.                                                     {{ form_row(inscriptionForm.prenoms) }}
  644.                                                 </div>
  645.                                                 <div class="form-group">
  646.                                                     <label for="nom" class="required">Nom</label>
  647.                                                     {{ form_row(inscriptionForm.nom) }}
  648.                                                 </div>
  649.                                             </div>
  650.                                             
  651.                                             <div class="form-group">
  652.                                                 <label for="email" class="required">Adresse email</label>
  653.                                                 {{ form_row(inscriptionForm.mail) }}
  654.                                             </div>
  655.                                             
  656.                                             <div class="form-row">
  657.                                                 <div class="form-group">
  658.                                                     <label for="telephone" class="required">Téléphone</label>
  659.                                                     {{ form_row(inscriptionForm.telephone) }}
  660.                                                 </div>
  661.                                                 <div class="form-group">
  662.                                                     <label for="dateNaissance">Adresse</label>
  663.                                                     {{ form_row(inscriptionForm.adresse) }}
  664.                                                 </div>
  665.                                             </div>
  666.                                             
  667.                                             <div class="form-row">
  668.                                                 <div class="form-group">
  669.                                                     <label for="telephone" class="required">Boîte postal</label>
  670.                                                     {{ form_row(inscriptionForm.boitepostale) }}
  671.                                                 </div>
  672.                                                 <div class="form-group">
  673.                                                     <label for="dateNaissance">N° whatsapp</label>
  674.                                                     {{ form_row(inscriptionForm.whatsapp) }}
  675.                                                 </div>
  676.                                             </div>
  677.                                             
  678.                                             <div class="form-row">
  679.                                                 <div class="form-group">
  680.                                                     <label for="pays" class="required">Pays de résidence</label>
  681.                                                     {{ form_row(inscriptionForm.pays) }}
  682.                                                 </div>
  683.                                                 <div class="form-group">
  684.                                                     <label for="ville" class="required">Ville</label>
  685.                                                     {{ form_row(inscriptionForm.ville) }}
  686.                                                 </div>
  687.                                             </div>
  688.                                             
  689.                                             <div class="navigation-buttons">
  690.                                                 <button type="button" class="btn-nav btn-next" onclick="nextSection(1)">Suivant <i class="fas fa-arrow-right"></i></button>
  691.                                             </div>
  692.                                         </div>
  693.                                         
  694.                                         <!-- Étape 2: Profil professionnel -->
  695.                                         <div class="form-section" id="section2">
  696.                                             <div class="form-header">
  697.                                                 <i class="fas fa-briefcase"></i>
  698.                                                 <h2 class="form-title">Profil professionnel</h2>
  699.                                             </div>
  700.                                             
  701.                                             <div class="form-group">
  702.                                                 <label for="profession" class="required">Fonction</label>
  703.                                                 {{ form_row(inscriptionForm.fonction) }}
  704.                                             </div>
  705.                                             
  706.                                             <div class="form-group">
  707.                                                 <label for="entreprise">Entreprise / Organisation</label>
  708.                                                 {{ form_row(inscriptionForm.entreprise) }}
  709.                                             </div>
  710.                                             
  711.                                             <div class="form-group">
  712.                                                 <label for="secteur" class="required">Site web</label>
  713.                                                 {{ form_row(inscriptionForm.siteweb) }}
  714.                                             </div>
  715.                                             
  716.                                             <div class="form-group">
  717.                                                 <label for="experience">Nombre de participants</label>
  718.                                                 {{ form_row(inscriptionForm.nbparticipant) }}
  719.                                             </div>
  720.                                             
  721.                                             <div class="form-group">
  722.                                                 <label for="motivation">Motivation pour rejoindre CIMEF</label>
  723.                                                 {{ form_row(inscriptionForm.commentaire) }}
  724.                                             </div>
  725.                                             
  726.                                             <div class="form-group">
  727.                                                 <div class="checkbox-group">
  728.                                                     <input type="checkbox" id="newsletter" name="newsletter" checked>
  729.                                                     <label for="newsletter">Je souhaite recevoir la newsletter de CIMEF International</label>
  730.                                                 </div>
  731.                                                 <div class="checkbox-group">
  732.                                                     <input type="checkbox" id="conditions" name="conditions" required>
  733.                                                     <label for="conditions" class="required">J'accepte les conditions générales et la politique de confidentialité</label>
  734.                                                 </div>
  735.                                             </div>
  736.                                             
  737.                                             <div class="navigation-buttons">
  738.                                                 <button type="button" class="btn-nav" onclick="prevSection(2)"><i class="fas fa-arrow-left"></i> Précédent</button>
  739.                                                 <button type="button" class="btn-nav btn-next" onclick="nextSection(2)">Suivant <i class="fas fa-arrow-right"></i></button>
  740.                                             </div>
  741.                                         </div>
  742.                                         
  743.                                         <!-- Étape 3: Options d'inscription -->
  744.                                         
  745.                                         <div class="form-section" id="section3">
  746.                                             <div class="form-header">
  747.                                                 <i class="fas fa-check-circle"></i>
  748.                                                 <h2 class="form-title">Confirmation de l'inscription</h2>
  749.                                             </div>
  750.                                             
  751.                                             <div class="form-group">
  752.                                                 <p>Veuillez vérifier les informations ci-dessous avant de soumettre votre inscription.</p>
  753.                                             </div>
  754.                                             
  755.                                             <div class="form-group">
  756.                                                 <div id="recapInfo" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #0056b3;">
  757.                                                     <!-- Les informations récapitulatives seront insérées ici par JavaScript -->
  758.                                                 </div>
  759.                                             </div>
  760.                                             
  761.                                             <div class="navigation-buttons">
  762.                                                 <button type="button" class="btn-nav" onclick="prevSection(3)"><i class="fas fa-arrow-left"></i> Précédent</button>
  763.                                                 <button type="submit" class="btn-submit">Soumettre mon inscription <i class="fas fa-paper-plane"></i></button>
  764.                                             </div>
  765.                                         </div>
  766.                                         
  767.                                         
  768.                                         <!-- Étape 4: Confirmation -->
  769.                                         <div class="form-section" id="section4">
  770.                                             <div class="form-header">
  771.                                                 <i class="fas fa-check-circle"></i>
  772.                                                 <h2 class="form-title">Confirmation de l'inscription</h2>
  773.                                             </div>
  774.                                             
  775.                                             <div class="form-group">
  776.                                                 <p>Veuillez vérifier les informations ci-dessous avant de soumettre votre inscription.</p>
  777.                                             </div>
  778.                                             
  779.                                             <div class="form-group">
  780.                                                 <div id="recapInfo" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #0056b3;">
  781.                                                     <!-- Les informations récapitulatives seront insérées ici par JavaScript -->
  782.                                                 </div>
  783.                                             </div>
  784.                                             <div class="form-group">
  785.                                                 <label for="captcha">{{ form_label(inscriptionForm.captcha) }}</label>
  786.                                                 {{ form_widget(inscriptionForm.captcha) }}
  787.                                             </div>
  788.                                             <div class="navigation-buttons">
  789.                                                 <button type="button" class="btn-nav" style="width: 200px !important;" onclick="prevSection(2)"><i class="fas fa-arrow-left"></i> Précédent</button>
  790.                                                 <button type="submit" class="btn-submit" style="border: 1px solid red !important; width: 50% !important;">Soumettre mon inscription <i class="fas fa-paper-plane"></i></button>
  791.                                             </div>
  792.                                         </div>
  793.                                     {{ form_end(inscriptionForm) }}
  794.                                 </div>
  796.                             </div>
  797.                             
  798.                         </div> 
  800.                     </div>
  801.                 
  802.                     <div class="elementor-column elementor-col-40 elementor-top-column elementor-element elementor-element-ee883c9" data-id="ee883c9" data-element_type="column">
  803.                         <div class="elementor-widget-wrap elementor-element-populated">
  804.     
  805.                             <div  class="elementor-element elementor-element-bdfb755 elementor-widget elementor-widget-ova_event_info" data-id="bdfb755" data-element_type="widget" data-widget_type="ova_event_info.default">
  806.                                 <div class="elementor-widget-container">
  807.                                     <div class="ovaev-event-info">
  808.                                         <div class="row">
  809.                                             <div class="col-md-2">
  810.                                                 <span class="label"><i class="fa fa-calendar-o" aria-hidden="true"></i> </span>
  811.                                             </div>
  812.                                             <div class="col-md-10">
  813.                                                 <span class="info"><b style="color: #051a53;">{{ f.dates_session}} {{ annee }}</b></span>
  814.                                             </div>
  815.                                         </div>
  816.                                         <div class="row" style="margin-top: 30px !important;">
  817.                                             <div class="col-md-2">
  818.                                                 <span class="label"><i class="fa fa-map-marker" aria-hidden="true"></i> </span>
  819.                                             </div>
  820.                                             <div class="col-md-10">
  821.                                                 <span class="info"><b style="color: #051a53;">{{ f.pays }}, {{ f.vilnom }}</b></span>
  822.                                             </div>
  823.                                         </div>
  824.                                         <div class="row" style="margin-top: 20px !important; margin-bottom: 20px !important;">
  825.                                             <div class="col-md-2">
  826.                                                 <span class="label"><i class="fa fa-money" aria-hidden="true"></i> </span>
  827.                                             </div>
  828.                                             <div class="col-md-10">
  829.                                                 <span class="info"><b style="color: #051a53;">{{ f.prix }} {{ f.devise }}</b></span>
  830.                                             </div>
  831.                                         </div>
  832.                                     </div>
  833.                                 </div>
  834.                             </div>
  835.                             <div class="shadow btn-fichier">
  836.                                 <a href="{{ asset('public/catalogues/Catalogue_2026_CIMEF_INTERNATIONAL.pdf') }}">
  837.                                     <div class="row">
  838.                                         <div class="col-md-2 col-sm-12" style="text-align: center;">
  839.                                             <a href="{{ asset('public/catalogues/Catalogue_2026_CIMEF_INTERNATIONAL.pdf') }}" 
  840.                                             title="Download files" class="icon" data-id="829">
  841.                                                 <i class="gimonticon-download" style="font-size: 22px; color: #fff;" aria-hidden="true"></i>
  842.                                             </a>    
  843.                                         </div>
  844.                                         <div class="col-md-10 col-sm-12">
  845.                                             <a href="{{ asset('public/catalogues/Catalogue_2026_CIMEF_INTERNATIONAL.pdf') }}">
  846.                                             <label style="color: #fff; font-size: 20px; font-family: arial; cursor: pointer;">Télécharger le catalogue 2026</h3>
  847.                                             </a>
  848.                                         </div>
  849.                                     </div>
  850.                                 </a>
  851.                             </div>
  852.                             
  853.                             <div class="form-sidebar">
  854.                                 <h2 class="sidebar-title">Pourquoi nous rejoindre ?</h2>
  855.                                 <ul class="sidebar-features">
  856.                                     <li>
  857.                                         <i class="fas fa-users"></i>
  858.                                         <div>
  859.                                             <strong>Réseau international</strong>
  860.                                             <p>Connectez-vous avec des professionnels du monde entier</p>
  861.                                         </div>
  862.                                     </li>
  863.                                     <li>
  864.                                         <i class="fas fa-chart-line"></i>
  865.                                         <div>
  866.                                             <strong>Développement professionnel</strong>
  867.                                             <p>Accédez à des formations et ateliers exclusifs</p>
  868.                                         </div>
  869.                                     </li>
  870.                                     <li>
  871.                                         <i class="fas fa-handshake"></i>
  872.                                         <div>
  873.                                             <strong>Opportunités de collaboration</strong>
  874.                                             <p>Participez à des projets internationaux innovants</p>
  875.                                         </div>
  876.                                     </li>
  877.                                     <li>
  878.                                         <i class="fas fa-globe-europe"></i>
  879.                                         <div>
  880.                                             <strong>Impact mondial</strong>
  881.                                             <p>Contribuez à des initiatives ayant un impact positif</p>
  882.                                         </div>
  883.                                     </li>
  884.                                 </ul>
  885.                 
  886.                                 <div class="info-box">
  887.                                     <h3 style="color: #fff;">Besoin d'aide ?</h3>
  888.                                     <p>Notre équipe est disponible pour répondre à vos questions concernant l'inscription.</p>
  889.                                     <p>Contactez-nous à : <strong>inscription@cimef-international.org</strong></p>
  890.                                 </div>
  891.                             </div>
  892.                             
  893.                         </div>
  894.                         
  895.                         
  896.                     </div>
  897.                 </div>
  898.             </section>
  899.             {% endfor %}
  900.         {% else %}
  901.             <div style="margin-top: 20px; text-align: justify;">
  902.                 <h2>Informations indisponible</h2>
  903.             </div>
  904.         {% endif %}
  906.             </div>
  907.         </div>
  909.         <script>
  910.             let currentSection = 1;
  911.             const steps = document.querySelectorAll('.progress-step');
  912.             
  913.             function updateProgress(step) {
  914.                 steps.forEach((el, index) => {
  915.                     el.classList.remove('active', 'completed');
  916.             
  917.                     if (index + 1 < step) {
  918.                         el.classList.add('completed');
  919.                     } 
  920.                     else if (index + 1 === step) {
  921.                         el.classList.add('active');
  922.                     }
  923.                 });
  924.             }
  925.             
  926.             // INIT
  927.             updateProgress(1);
  928.             
  929.             function nextSection(step) {
  930.                 if (!validateSection(step)) return;
  931.             
  932.                 document.getElementById('section' + step).classList.remove('active');
  933.                 document.getElementById('section' + (step + 1)).classList.add('active');
  934.             
  935.                 updateProgress(step + 1);
  936.             
  937.                 if (step + 1 === 3) {
  938.                     showRecap();
  939.                 }
  940.             
  941.                 currentSection = step + 1;
  942.             }
  943.             
  944.             function prevSection(step) {
  945.                 document.getElementById('section' + step).classList.remove('active');
  946.                 document.getElementById('section' + (step - 1)).classList.add('active');
  947.             
  948.                 updateProgress(step - 1);
  949.             
  950.                 currentSection = step - 1;
  951.             }
  952.             
  953.             function validateSection(step) {
  954.                 let valid = true;
  955.             
  956.                 document
  957.                     .querySelectorAll('#section' + step + ' input[required], #section' + step + ' select[required]')
  958.                     .forEach(el => {
  959.                         if (!el.value.trim()) {
  960.                             el.style.borderColor = 'red';
  961.                             valid = false;
  962.                         } else {
  963.                             el.style.borderColor = '#ddd';
  964.                         }
  965.                     });
  966.             
  967.                 if (step === 2 && !document.getElementById('conditions').checked) {
  968.                     alert("Vous devez accepter les conditions");
  969.                     valid = false;
  970.                 }
  971.             
  972.                 return valid;
  973.             }
  974.             
  975.             function getVal(name) {
  976.                 const el = document.getElementById('inscription_form_' + name);
  977.                 return el ? el.value : '';
  978.             }
  979.             
  980.             
  981.             function showRecap() {
  982.                 document.getElementById('recapInfo').innerHTML = `
  983.                     <h3 style="margin-bottom:15px;color:#0056b3">
  984.                         Récapitulatif de votre inscription
  985.                     </h3>
  986.             
  987.                     <p>
  988.                         <strong>Identité :</strong><br>
  989.                         ${getVal('civilite')} ${getVal('prenoms')} ${getVal('nom')}
  990.                     </p>
  991.             
  992.                     <p style="margin-top: -20px !important;">
  993.                         <strong>Coordonnées :</strong><br>
  994.                         Email : ${getVal('mail')}<br>
  995.                         Téléphone : ${getVal('telephone')}<br>
  996.                         Whatsapp : ${getVal('whatsapp')}
  997.                     </p>
  998.             
  999.                     <p style="margin-top: -20px !important;">
  1000.                         <strong>Adresse :</strong><br>
  1001.                         ${getVal('adresse')}<br>
  1002.                         BP : ${getVal('boitepostale')}<br>
  1003.                         ${getVal('ville')} – ${getVal('pays')}
  1004.                     </p>
  1005.             
  1006.                     <p style="margin-top: -20px !important;">
  1007.                         <strong>Profil professionnel :</strong><br>
  1008.                         Fonction : ${getVal('fonction')}<br>
  1009.                         Entreprise : ${getVal('entreprise')}<br>
  1010.                         Site web : ${getVal('siteweb')}
  1011.                     </p>
  1012.             
  1013.                     <p style="margin-top: -20px !important;">
  1014.                         <strong>Participation :</strong><br>
  1015.                         Nombre de participants : ${getVal('nbparticipant')}
  1016.                     </p>
  1017.             
  1018.                     <p style="margin-top: -20px !important;">
  1019.                         <strong>Commentaire :</strong><br>
  1020.                         ${getVal('commentaire') || '—'}
  1021.                     </p>
  1022.                 `;
  1023.             }
  1024.         
  1025.         </script>
  1028. {% endblock %}