templates/front/inscriptions/formation-a-la-carte.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Séminaire à la carte | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block meta_description %}
  5. <meta name="description" content="Demandez un séminaire sur mesure avec CIMEF International : choisissez votre thème, lieu, date et nombre de participants. Formation personnalisée, devis gratuit."/>
  6. <meta property="og:image" content="https://cimef-international.org/public/inter/LOGO CIMEF.jpg.jpeg">
  7. <meta property="og:url" content="https://cimef-international.org/formations/seminaire-a-la-carte">
  8. <meta property="og:type" content="website">
  9. {% endblock %}
  10. {% block styleSheets %}
  11. <style id='wp-emoji-styles-inline-css' type='text/css'>
  12. label {
  13.     font-family: arial;
  14.     font-weight: bold;
  15. }
  16. .form-control{
  17.     width:100%;
  18.     height:45px;
  19.     padding:10px;
  20.     border-radius:8px;
  21.     font-family: arial;
  22.     margin-bottom: 10px;
  23.     border:1px solid #ccc;
  24. }
  25. .textarea{
  26.     width:100%;
  27.     height:45px;
  28.     padding:10px;
  29.     font-family: arial;
  30.     border:1px solid #ccc;
  31.     height: 100px !important;
  32.     border-radius:1px !important;
  33. }
  34. .row {
  35.     display: flex;            /* flexbox pour aligner les colonnes */
  36.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  37.     margin-right: -0.75rem;   /* -gutter/2 */
  38.     margin-left: -0.75rem;    /* -gutter/2 */
  39. }
  40. .events_pagination ul.pagination {
  41.     display: flex;
  42.     flex-wrap: wrap;
  43.     justify-content: center;
  44.     list-style: none;
  45.     margin: 0;
  46.     padding: 0;
  47. }
  48. .page-item.active .page-link {
  49.     background-color: #ff6600;
  50.     color: #fff;
  51. }
  52. .page-link {
  53.     margin: 10px;
  54.     color: #051a53;
  55.     background-color: #ededed;
  56.     border-radius: 5px;
  57.     padding: 10px;
  58.     /* margin: 0 3px; */
  59. }
  61. .text-lien{
  62.    color: #ff6600;
  63.    /* font-size: 16px; */
  64. }
  66. /* Small devices ≥576px */
  67. @media (min-width: 576px) {
  68.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  69.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  70.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  71.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  72. }
  74. /* Medium devices ≥768px */
  75. @media (min-width: 768px) {
  76.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  77.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  78.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  79.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  80. }
  81. .shadow {
  82.     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  83. }
  84. /* Large devices ≥992px */
  85. @media (min-width: 992px) {
  86.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  87.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  88.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  89.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  90. }
  92. .type1 .date-event {
  93.     transition: all 0.5s ease;
  94.     position: absolute;
  95.     bottom: 20px;
  96.     left: 30px;
  97.     z-index: 1;
  98.     font-size: 12px;
  99.     color: #fff;
  100.     font-weight: 700;
  101.     text-transform: uppercase;
  102.     text-align: center;
  103.     line-height: 1.3;
  104.     letter-spacing: 1px;
  105.     background-color: #ff6600 !important;
  106.     padding: 12px;
  107. }
  108. .icon_event{
  109.     color: #ff6600 !important;
  110. }
  111. .wrap_header_banner .overlay-slider {
  112.     position: absolute;
  113.     top: 0;
  114.     left: 0;
  115.     padding-top: 30px; 
  116.     width: 100%;
  117.     height: 100%;
  118.     background-color: rgba(0, 0, 0, 0.6392156863);
  119. }
  120. .left-column {
  121.     flex: 1;
  122.     /*background: linear-gradient(145deg, #051a53, 0%, #0a2a7a 100%);*/
  123.     background: #051a53;
  124.     color: white;
  125.     padding: 40px;
  126.     display: flex;
  127.     flex-direction: column;
  128.     justify-content: space-between;
  129.     position: relative;
  130.     overflow: hidden;
  131. }
  133. .left-column:before {
  134.     content: "";
  135.     position: absolute;
  136.     top: 0;
  137.     left: 0;
  138.     right: 0;
  139.     bottom: 0;
  140.     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>');
  141.     opacity: 0.3;
  142. }
  143. .logo-header {
  144.     display: flex;
  145.     align-items: center;
  146.     gap: 15px;
  147.     margin-bottom: 40px;
  148.     z-index: 1;
  149.     position: relative;
  150. }
  152. .logo-circle {
  153.     width: 80px !important;
  154.     height: 65px !important;
  155.     background-color: #ff6600;
  156.     border-radius: 50%;
  157.     display: flex;
  158.     align-items: center;
  159.     justify-content: center;
  160.     font-size: 24px;
  161. }
  162. .left-content {
  163.     z-index: 1;
  164.     position: relative;
  165.     flex-grow: 1;
  166.     margin: 0px !important;
  167.     width: 100% !important;
  168. }
  170. .features-list {
  171.     list-style: none;
  172.     margin: 0px !important;
  173.     width: 100%;
  174. }
  176. .features-list li {
  177.     display: flex;
  178.     align-items: flex-start;
  179.     margin-bottom: 10px;
  180.     margin-left: -30px;
  181. }
  183. .feature-icon {
  184.     background-color: rgba(255, 255, 255, 0.15);
  185.     color: #fff;
  186.     border-radius: 50%;
  187.     width: 40px;
  188.     height: 40px;
  189.     display: flex;
  190.     align-items: center;
  191.     justify-content: center;
  192.     margin-right: 15px;
  193.     flex-shrink: 0;
  194.     margin-top: 10px !important;
  195. }
  197. .feature-text h4 {
  198.     font-size: 16px;
  199.     margin-bottom: 5px;
  200.     font-weight: 600;
  201. }
  203. .feature-text p {
  204.     font-size: 14px;
  205.     opacity: 0.8;
  206. }
  207. </style>
  208. {% endblock %}
  209. {% block body %}
  210. {% include 'section/navbar.html.twig' %}
  211. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/table.jpeg')}});        
  212.         background-size: cover;
  213.         background-position: center;
  214.         background-repeat: no-repeat;">
  215.     <div class="overlay-slider">
  216.         <div class="row_site">
  217.             <div class="container_site">
  218.                 <div class="cover_color"></div>
  219.                 <div class="header_banner_el">
  220.                     <div class="header_breadcrumbs">
  221.                         <div id="breadcrumbs">
  222.                         <ul class="breadcrumb">
  223.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  224.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  225.                             <li style="color: #fff!important;">Formations</li>
  226.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  227.                             <li style="color: #fff!important;">Séminaire à la carte</li>
  228.                         </ul>
  229.                         </div>
  230.                     </div>
  231.                     <h1 class="header_title" style="color: #fff!important;">Séminaire à la carte</h1>
  232.                 </div>
  233.             </div>
  234.         </div>
  235.     </div>
  236. </div>
  239.     {% for message in app.flashes('success') %}
  240.     <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  241.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  242.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  243.         </div>
  244.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  245.             {{ message }}
  246.         </div>
  247.     </div>    
  248.     {% endfor %}
  249.     {% for message in app.flashes('warning') %}
  250.     <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  251.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  252.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  253.         </div>
  254.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  255.             {{ message }}
  256.         </div>
  257.     </div>   
  258.     {% endfor %}
  259.     {% for message in app.flashes('danger') %}
  260.     <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  261.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  262.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  263.         </div>
  264.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  265.             {{ message }}
  266.         </div>
  267.     </div>   
  268.     {% endfor %}
  269.     
  272. <div class="container-event">
  273.     <div id="main-event" class="content-event">
  274.         <div class="row" style="width: 100% !important; padding: 10px !important;">
  275.             <div class="col-lg-8 col-md-8 col-sm-12" style="padding: 10px">
  276.                 <p>
  277.                     Concevez votre parcours de formation selon vos besoins. Le séminaire à la carte de CIMEF International vous permet de choisir les thématiques, 
  278.                     la durée, le lieu et les dates qui correspondent à vos objectifs, pour une montée en compétences ciblée, flexible et adaptée à votre secteur d'activité.
  279.                 </p>
  280.                 
  281.                 <div class="">
  282.                     {{ form_start(demandeformationsForm, {attr: {style: 'width: 100%;'} }) }}
  283.                     <div class="row shadow" style="border: 1px solid #ededed; padding: 20px; margin: 0px !important;">
  284.                         
  285.                             <div class="form-header">
  286.                                 <h2 class="form-title">Informations personnelles</h2>
  287.                             </div>
  288.                             <div class="col-md-12 col-sm-12">
  289.                                 {{ form_row(demandeformationsForm.civilite) }}
  290.                             </div>
  291.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  292.                                 {{ form_row(demandeformationsForm.nom) }}
  293.                             </div>
  294.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  295.                                 {{ form_row(demandeformationsForm.prenoms) }}
  296.                             </div>
  297.                             <div class="col-md-12 col-sm-12">
  298.                                 {{ form_row(demandeformationsForm.mail) }}
  299.                             </div>
  300.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  301.                                 {{ form_row(demandeformationsForm.adresse) }}
  302.                             </div> 
  303.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  304.                                 {{ form_row(demandeformationsForm.telephone) }}
  305.                             </div>
  306.                             <div class="col-md-12 col-sm-12">
  307.                                 {{ form_row(demandeformationsForm.fonction) }}
  308.                             </div>
  309.                             <div style="margin-top: 10px; border: 1px solid #ededed !important; height: 5px; background-color: #ededed; width: 100%;"></div>
  310.                             <div class="form-header" style="border-top: 1px solid #051a53 !important; width: 100%;">
  311.                                 <h2 class="form-title">Informations sur votre formation</h2>
  312.                             </div>
  313.     
  314.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  315.                                 {{ form_row(demandeformationsForm.theme) }}
  316.                             </div>
  317.                             
  318.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  319.                                 {{ form_row(demandeformationsForm.lieu) }}
  320.                             </div>
  321.             
  322.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  323.                                 {{ form_row(demandeformationsForm.duree) }}
  324.                             </div>
  325.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  326.                                 {{ form_row(demandeformationsForm.entreprise) }}
  327.                             </div>                             
  328.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  329.                                 {{ form_row(demandeformationsForm.nombrepart) }}
  330.                             </div>
  331.                             <div class="col-md-6 col-sm-12" style="padding: 10px; width: 100% !important;">
  332.                                 {{ form_row(demandeformationsForm.siteweb) }}
  333.                             </div> 
  334.     
  335.                             <div class="col-md-12 col-sm-12">
  336.                                 {{ form_row(demandeformationsForm.commentaire) }}
  337.                             </div>
  338.                               {{ form_row(demandeformationsForm.recaptchaToken) }}
  340.                     </div>     
  341.                     <script>
  342.                         grecaptcha.ready(function() {
  343.                             grecaptcha.execute('{{ recaptcha_site_key }}', {
  344.                                 action: 'contact'
  345.                             }).then(function(token) {
  346.                                 document.getElementById('{{ demandeformationsForm.recaptchaToken.vars.id }}').value = token;
  347.                             });
  348.                         });
  349.                     </script>
  350.                     {{ form_end(demandeformationsForm) }}
  351.                 </div>
  352.             </div>
  353.             <div class="col-lg-4 col-md-4 col-sm-12" style="padding: 10px">
  354.                 
  355.                 <div class="left-column">
  356.                     <div>
  357.                         <div class="logo-header">
  358.                             <div class="logo-circle">
  359.                                 <i class="fas fa-globe-americas fa-2X"></i>
  360.                             </div>
  361.                             <div class="logo-text">
  362.                                 <h1 style="font-size: 20px !important; color: #fff !important;">CIMEF International</h1>
  363.                                 <p style="font-size: 14px !important; font-style: italic;">La formation précède la compétitivité !</p>
  364.                             </div>
  365.                         </div>
  366.                         
  367.                         <div class="left-content">
  368.                             <h2 class="left-title" style="font-size: 30px !important; color: #fff !important;">Inscription 2026</h2>
  369.                             <p class="left-subtitle">Rejoignez notre réseau mondial de professionnels et participez à des projets d'envergure internationale.</p>
  370.                             
  371.                             <ul class="features-list">
  372.                                 <li>
  373.                                     <div class="feature-icon">
  374.                                         <i class="fas fa-network-wired"></i>
  375.                                     </div>
  376.                                     <div class="feature-text">
  377.                                         <h4 style="color: #ff6600;">Une portée internationale</h4>
  378.                                         <p>Un réseau actif de professionnels répartis dans plusieurs pays</p>
  379.                                     </div>
  380.                                 </li>
  381.                                 <li>
  382.                                     <div class="feature-icon">
  383.                                         <i class="fas fa-graduation-cap"></i>
  384.                                     </div>
  385.                                     <div class="feature-text">
  386.                                         <h4 style="color: #ff6600;">Opportunités de collaboration internationale</h4>
  387.                                         <p>Participez à des projets stratégiques avec des partenaires de renom</p>
  388.                                     </div>
  389.                                 </li>
  390.                                 <li>
  391.                                     <div class="feature-icon">
  392.                                         <i class="fas fa-handshake"></i>
  393.                                     </div>
  394.                                     <div class="feature-text">
  395.                                         <h4 style="color: #ff6600;">Opportunités de collaboration</h4>
  396.                                         <p>Participez à des projets innovants avec des partenaires internationaux</p>
  397.                                     </div>
  398.                                 </li>
  399.                             </ul>
  400.                         </div>
  401.                     </div>
  402.                     
  403.                     <div class="contact-info">
  404.                         <h3 style="color: #fff;">Besoin d'aide ?</h3>
  405.                         <p>Contactez notre équipe à <strong>paris@cimef-international.org</strong> ou appelez-nous au <strong>+33 6 05 85 70 98 </strong></p>
  406.                     </div>
  407.                 </div>
  408.                         
  409.             </div>
  410.         </div>
  411.     </div>
  412. </div>
  418. {% include 'section/footer.html.twig' %}
  420. {% endblock %}