templates/programs/program_detail.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_contents %}
  4. <section class="section section-page-title position-relative mb-xl-5 mb-4" data-aos='fade-up'>
  5.   <div class="position-relative bg-gradient pt-5 pb-4 section-program-title">
  6.     <div class="container">
  7.       <div class="row">
  8.         {% if program.metadata.videos is defined and program.metadata.videos.link %}
  9.           <div class="col-lg-6 mb-lg-0 mb-4">
  10.             <div class="embed-responsive embed-responsive-16by9 radius-30 hvr-glow">
  11.               <iframe class="embed-responsive-item" src="{{ program.metadata.videos.link | extractYoutubeId }}?rel=0" allowfullscreen></iframe>
  12.             </div>
  13.           </div>
  14.         {% endif %}
  15.         <div class="col-lg-6 ml-auto text-white">
  16.           <div class="a-box pt-0 ml-0 text-lg-left text-center d-flex flex-column h-100">
  17.             <div class="flex-grow-1 d-flex flex-column justify-content-center">
  18.               <h1 class="page-name font-weight-600 mb-3">
  19.               {% if program.metadata.tags.seoH1 is defined %}
  20.                 {{ program.metadata.tags.seoH1 }}
  21.               {% else %}
  22.                 {{ program.name }}
  23.               {% endif %}
  24.               </h1>
  25.               {% if program.rncp %}
  26.               <div class="font-weight-bold font-20 mb-3">            
  27.                 <span class="text-orange">/</span> {{ program.rncp }}
  28.               </div>
  29.               {% endif %}
  30.               {% if program.pace %}
  31.               <p class="mb-4">{{ program.pace }}</p>
  32.               {% endif %}
  33.             </div>
  34.             <div class="program-btn d-flex justify-content-lg-start justify-content-center mt-auto">
  35.               <a href="{{ path('demande')~'?id='~ program.id}}"><i class="fa-solid fa-file-lines mb-1"></i><span>{% trans %}Télécharger la brochure{% endtrans %}</span></a>
  36.               <a href="{{ path('profile.step1') }}" class="ml-3"><i class="fa-solid fa-users mb-1"></i><span>{% trans %}Candidature en ligne{% endtrans %}</span></a>
  37.             </div>
  38.           </div>
  39.         </div>
  40.       </div>
  41.     </div>
  42.   </div>
  43. </section>
  44. {% if program.metadata.programTraining is defined %}
  45. <section class="section section-skill">
  46.   <div class="container">
  47.     <div class="row">
  48.       <div class="col-12 mb-4" data-aos='zoom-in'>
  49.         <div class="s-control d-flex">
  50.         {% for key, val in tranningText %}
  51.           <a id="{{key}}-year" class="s-btn d-inline-block font-weight-bold {{ key == 'module1' ? 'active' : ''}}">{{ val }}</a>
  52.         {% endfor %}
  53.         </div>
  54.       </div>
  55.       {% for level, module in program.metadata.programTraining %}
  56.         <div class="col-12 skill-year {{ level }}-year" {{ level == 'module1' ? '' : 'style="display:none"'}}>
  57.           <div class="row-skill clearfix">
  58.             {% for data in module %}
  59.               <div class="col-skill mb-4">
  60.                 <div class="tech-skill mr-xl-4" data-aos='fade-right'>
  61.                   <div class="skill-title text-dark-purple font-weight-bold mb-3">
  62.                     <div class="d-flex line-height-normal"><span class="text-orange mr-2">/</span>{{ data.title }}</div>
  63.                     <span class="text-purple s-time {{ level }}-year-time time-text text-normal ml-3">
  64.                       {% if data.hours  %}
  65.                         {{ data.hours }} {% trans %}heures{% endtrans %}
  66.                       {% endif %}
  67.                       {% if data.ects  %}
  68.                         - {% trans %}ECTS{% endtrans %} : {{ data.ects }}
  69.                       {% endif %}
  70.                     </span>
  71.                   </div>
  72.                   <div class="skill-content keepEditorStyle pl-4 pb-lg-3">
  73.                     {{ data.materials|raw }}
  74.                   </div>
  75.                 </div>
  76.               </div>
  77.             {% endfor %}
  78.           </div>
  79.         </div>
  80.       {% endfor %}
  81.     </div>
  82.   </div>
  83. </section>
  84. {% endif %}
  85. {% if outStudentVideos %}
  86. <section class="section section-etudiant py-4">
  87.   <div class="container">
  88.     <div class="row">
  89.       <div class="col-12">
  90.         <div class="section-title mb-4" data-aos='fade-down'><span>/</span> {% trans %}Nos étudiants en parlent{% endtrans %}</div>
  91.       </div>
  92.     </div>
  93.     <div class="row">
  94.       <div class="col-xl-11 mx-auto">
  95.         <div class="row justify-content-center">
  96.           {% for key,video in outStudentVideos %}
  97.             <div class="col-lg-4 col-md-6 mb-4" data-aos='zoom-in'>
  98.               <div class="embed-responsive embed-responsive-16by9 hvr-glow">
  99.                 <iframe class="embed-responsive-item" src="{{ video.video | extractYoutubeId }}?rel=0" allowfullscreen></iframe>
  100.               </div>
  101.             </div>
  102.             {% if key == 2 %}
  103.                 {% set break = true %}
  104.             {% endif %}
  105.           {% endfor %}
  106.         </div>
  107.       </div>
  108.     </div>
  109.   </div>
  110. </section>
  111. {% endif %}
  113. {% if program.cursus is defined and program.cursus %}
  114. <section class="section section-program-cursus bg-light py-xl-5 py-4">
  115.   <div class="container">
  116.     <div class="row">
  117.       <div class="col-xl-10 mx-auto mb-4" data-aos='fade-down'>
  118.         <div class="section-title mb-4"><span>/</span> {% trans %}Cursus Métiers{% endtrans %}</div>
  119.         <p class="text-center text-gray">{% trans %}Après les premières années d’un socle de compétences solide en informatique, le choix d’un Cursus Métier ÉSTIAM en 4e année permet d’apporter des cours spécifiques au domaine d’activité de votre entreprise en alternance car les métiers de l’informatique sont différents dans un groupe automobile, une banque ou une chaîne de télévision.{% endtrans %}</p>
  120.       </div>
  121.       <div class="col-xl-10 mx-auto" data-aos='fade-up'>
  122.         <div class="c-box d-flex">
  123.           <ul class="nav nav-tabs flex-column d-md-flex d-none" id="cursusTab" role="tablist">
  124.             {% for k, cur in program.cursus %}
  125.               <li class="nav-item">
  126.                 <a class="nav-link text-nowrap {{ k == 0 ? 'active' : ''}}" id="{{ 'cursus'~cur.id }}-tab" data-toggle="tab" href="#{{ 'cursus'~cur.id }}" role="tab" aria-controls="{{ 'cursus'~cur.id }}" aria-selected="{{ k == 0 ? 'true' : 'false'}}">
  127.                   <span class="mr-xl-5">{{ cur.name }}</span><i class="far fa-arrow-right"></i>
  128.                 </a>
  129.               </li>
  130.             {% endfor %}
  131.           </ul>
  132.           <div class="tab-content flex-1 ml-md-3" id="cursusTabContent">
  133.             {% for num, cursus in program.cursus %}
  134.               <div class="tab-pane fade {{ num == 0 ? 'show active' : ''}}" id="{{ 'cursus'~cursus.id }}" role="tabpanel" aria-labelledby="{{ 'cursus'~cursus.id }}-tab">
  135.                 <div class="c-text">
  136.                   <div class="small-title mb-3 bg-purple text-white px-3 py-1 d-md-none d-block"><span>/</span>{{ cursus.name }}</div>
  137.                   <p>{{ cursus.description|raw }}</p>
  138.                   {% if cursus.cours %}
  139.                     <p class="font-weight-bold text-purple">{% trans %}Cours spécifiques{% endtrans %} :</p>
  140.                     {{ cursus.cours|raw }}
  141.                   {% endif %}
  142.                 </div>
  143.               </div>
  144.             {% endfor %}
  145.           </div>
  146.         </div>
  147.       </div>
  148.     </div>
  149.   </div>
  150. </section>
  151. {% endif %}
  153. <section class="section section-method">
  154.   <div class="container-fluid">
  155.     <div class="row">
  156.       {% if program.metadata.teachingMethods is defined %}
  157.         <div class="col-lg-6 px-0 bg-purple text-white py-xl-5 py-4" data-aos='fade-right'>
  158.           <div class="container">
  159.             <div class="row">
  160.               <div class="col-12 px-lg-0 px-4">
  161.                 <div class="mx-xl-5 mx-lg-4 mb-4">
  162.                   <div class="section-title text-white text-left mb-4"><span>/</span>{{ program.metadata.teachingMethods.seoH2 }}</div>
  163.                   <div class="keepEditorStyle">
  164.                     {{ program.metadata.teachingMethods.description|raw }}
  165.                   </div>
  166.                 </div>
  167.               </div>
  168.             </div>
  169.           </div>
  170.         </div>
  171.       {% endif %}
  172.       {% if program.metadata.evaluationMethods is defined %}
  173.         <div class="col-lg-6 px-0 py-xl-5 py-4" data-aos='fade-left'>
  174.           <div class="container">
  175.             <div class="row">
  176.               <div class="col-12 px-lg-0 px-4">
  177.                 <div class="mx-xl-5 mx-lg-4 mb-4 text-gray">
  178.                   <div class="section-title text-left mb-4"><span>/</span>{{ program.metadata.evaluationMethods.seoH2 }}</div>
  179.                   <div class="keepEditorStyle">
  180.                     {{ program.metadata.evaluationMethods.description|raw }}
  181.                   </div>
  182.                 </div>
  183.               </div>
  184.             </div>
  185.           </div>
  186.         </div>
  187.       {% endif %}
  188.     </div>
  189.   </div>
  190. </section>
  191. {% if program.metadata.registrationProcedure is defined %}
  192. <section class="section section-incription bg-light py-xl-5 py-4">
  193.   <div class="container">
  194.     <div class="row">
  195.       <div class="col-xl-10 mx-auto">
  196.         <div class="section-title" data-aos='fade-down'><span>/</span>{{ program.metadata.registrationProcedure.seoH2 }}</div>
  197.         <div data-aos='fade-up'>
  198.           {% if program.metadata.registrationProcedure.prerequisites is defined %}
  199.             <div class="text-purple font-weight-bold mb-3"><span class="text-orange">/</span> {% trans %}PREREQUIS (formation préalable){% endtrans %}</div>
  200.             {{ program.metadata.registrationProcedure.prerequisites|raw }}
  201.           {% endif %}
  203.           {% if program.metadata.registrationProcedure.registrationProcedure is defined %}
  204.           <div class="text-purple font-weight-bold mb-3 mt-5"><span class="text-orange">/</span> {% trans %}PROCÉDURE D'INSCRIPTION{% endtrans %}</div>
  205.             {{ program.metadata.registrationProcedure.registrationProcedure|raw }}
  206.           {% endif %}
  207.         </div>
  208.       </div>
  209.     </div>
  210.   </div>
  211. </section>
  212. {% endif %}
  214. {% if program.metadata.yourSkills is defined %}
  215. <section class="section section-faq section-program-faq py-4 mb-xl-5 mb-4 aos-init aos-animate" data-aos="fade-up">
  216.   <div class="container">
  217.     <div class="row">
  218.       <div class="col-xl-10 mx-auto text-center" data-aos='fade-down'>
  219.         <div class="section-title mb-4"><span>/</span> {{ program.metadata.yourSkills.seoH2 }}</div>
  220.         <p class="text-gray">{{ program.metadata.yourSkills.description|raw }}</p>
  221.       </div>
  222.       {% if program.metadata.yourSkills.blocks is defined %}
  223.         <div class="col-xl-10 mx-auto" data-aos='fade-up'>
  224.           <div id="accordionFaq" class="accordion pb-4">
  225.             {% for key, skill in program.metadata.yourSkills.blocks %}
  226.               <div class="card cart-1">
  227.                 <div class="card-header" id="headingFaq{{key}}">
  228.                   <h5 class="mb-0">
  229.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseFaq{{key}}" aria-expanded="true" aria-controls="collaFaq{{key}}">{{ skill.title }}</button>
  230.                   </h5>
  231.                 </div>
  232.                 <div id="collapseFaq{{key}}" class="collapse" aria-labelledby="headingFaq{{key}}" data-parent="#accordionFaq">
  233.                   <div class="card-body">
  234.                     {{ skill.content|raw }}
  235.                   </div>
  236.                 </div>
  237.               </div>
  238.             {% endfor %}
  239.           </div>
  240.         </div>
  241.       {% endif %}
  242.       {% if program.metadata.yourSkills.blockOther is defined %}
  243.         <div class="col-12 text-center font-italic text-gray" data-aos='fade-up'>{{ program.metadata.yourSkills.blockOther|raw }}</div>
  244.       {% endif %}
  245.     </div>
  246.   </div>
  247. </section>
  248. {% endif %}
  250. {% if program.metadata.keyFigures is defined %}
  251. <section class="section section-campus-chiffres bg-light pt-4">
  252.   <div class="container">
  253.     <div class="row">
  254.       <div class="col-xl-10 mx-auto col-12">
  255.         <div class="section-title mb-4" data-aos='fade-down'><span>/</span> {{ program.metadata.keyFigures.seoH2 }}</div>
  256.         {% if program.metadata.keyFigures.description is defined %}
  257.           <p class="text-center mb-xl-5 mb-4">{{ program.metadata.keyFigures.description|raw }}</p>
  258.         {% endif %}
  259.       </div>
  260.       {% if program.metadata.keyFigures.info is defined %}
  261.         <div class="col-xl-11 mx-auto">
  262.           <div class="row justify-content-center">
  263.             {% for info in program.metadata.keyFigures.info %}
  264.               {% if info.percent or info.percent == 0 %}
  265.                 <div class="col-xl col-lg-3 col-md-4 col-6 mb-xl-5 mb-4" data-aos='zoom-in'>
  266.                   <div class="c-circle">
  267.                     <div class="circle" data-value="{{ info.percent == 100 ? 1 : info.percent < 10 ? '0.0'~info.percent : '0.'~info.percent }}"></div>
  268.                     <div class="text flex-column">{{ info.percent }}%</div>
  269.                   </div>
  270.                   <div class="c-text font-weight-300 font-italic text-center mx-xl-2">
  271.                     {{ info.title }}
  272.                   </div>
  273.                 </div>
  274.               {% endif %}
  275.             {% endfor %}
  276.           </div>
  277.         </div>
  278.       {% endif %}
  279.     </div>
  280.   </div>
  281. </section>
  282. {% endif %}
  283. {% if program.metadata.outlets is defined %}
  284. <section class="section section-debouche py-xl-5 py-4">
  285.   <div class="container">
  286.     <div class="row">
  287.       <div class="col-12">
  288.         <div class="section-title mb-xl-5 mb-4" data-aos='fade-up'><span>/</span>{{ program.metadata.outlets.seoH2 }}</div>
  289.         <div class="separate-two text-gray text-justify keepEditorStyle" data-aos='fade-down'>
  290.           {{ program.metadata.outlets.description|raw }}
  291.         </div>
  292.  
  293.         {% if program.metadata.outlets.competencyFrance is defined or program.metadata.outlets.fileNumber is defined %}
  294.           <div class="d-flex flex-md-row flex-column align-items-center justify-content-center text-gray mt-5">
  295.             <p class="mr-lg-5 mr-md-4 mr-0 mb-md-0 mb-3"><img src="/assets/images/cert/img-1.png" alt=""></p>
  296.             <div class="flex-1">
  297.               {% if program.metadata.outlets.competencyFrance is defined %}
  298.                 <div>{{ program.metadata.outlets.competencyFrance|raw }}</div>
  299.               {% endif %}
  300.               <div class="row text-muted mt-n2 line-height-normal">
  301.                 {% if program.metadata.outlets.fileNumber is defined %}
  302.                   <div class="col-lg-2 col-4 mb-lg-0 mb-2 text-nowrap">
  303.                     <small><strong>N<sup>o</sup> de fiche :</strong><br/>{{ program.metadata.outlets.fileNumber }}</small>
  304.                   </div>
  305.                 {% endif %}
  306.                 {% if program.metadata.outlets.registration is defined %}
  307.                   <div class="col-lg-2 col-4 mb-lg-0 mb-2 text-nowrap">
  308.                     <small><strong>Enregistrement :</strong><br/>{{ program.metadata.outlets.registration }}</small>
  309.                   </div>
  310.                 {% endif %}
  311.                 {% if program.metadata.outlets.expiry is defined %}
  312.                   <div class="col-lg-2 col-4 mb-lg-0 mb-2 text-nowrap">
  313.                     <small><strong>Échéance :</strong><br/>{{ program.metadata.outlets.expiry }}</small>
  314.                   </div>
  315.                 {% endif %}
  316.                 {% if program.metadata.outlets.certifier is defined %}
  317.                   <div class="col-lg-6">
  318.                     <small><strong>Certificateur :</strong><br/>{{ program.metadata.outlets.certifier }}</small>
  319.                   </div>
  320.                 {% endif %}
  321.               </div>
  322.             </div>
  323.           </div>
  324.         {% endif %}
  325.       </div>
  326.     </div>
  327.   </div>
  328. </section>
  329. {% endif %}
  330. <section class="section section-trouver bg-gradient py-xl-5 py-4 mb-xl-5 mb-4 d-flex justify-content-center">
  331.   <div class="container">
  332.     <div class="row">
  333.       <div class="col-lg-8 mb-lg-0 mb-3" data-aos='fade-right'>
  334.         <div class="l-1 d-inline-block position-relative">
  335.           <div class="font-weight-bold font-30 bg-white text-purple px-3 py-2">{% trans %}Trouver une alternance ?{% endtrans %}</div>
  336.         </div>
  337.         <p class="mb-0 mt-3 text-white">{% trans %}Retrouvez des offres de nos entreprises partenaires pour vos stages et alternances…{% endtrans %}</p>
  338.       </div>
  339.       <div class="col-lg-4 text-lg-right text-center" data-aos='fade-left'>
  340.         <div>
  341.           <a href="{{ path('job_board.index') }}" class="d-inline-flex align-items-center text-nowrap">{% trans %}Voir les offres d’emploi{% endtrans %}<i class="far fa-arrow-right ml-3"></i></a>
  342.         </div>
  343.       </div>
  344.     </div>
  345.   </div>
  346. </section>
  348. <section class="section section-autofinance">
  349.   <div class="container">
  350.     <div class="row">
  351.       <div class="col-12 mb-4" data-aos='fade-down'>
  352.         <div class="section-title"><span>/</span> {% trans %}Une formation autofinancée en frais de scolarité{% endtrans %}</div>
  353.         <div class="separate-two text-gray">
  354.           <p>{% trans %}À ÉSTIAM, non seulement il n’y a pas de frais d’inscription, mais il y a aussi des solutions pour l’autofinancement de votre formation en informatique. En effet, grâce à l’{% endtrans %}<a class="text-purple" href="{{ path('alternance')}}">alternance</a>, {% trans %}vos salaires subventionnent vos années d'études*.{% endtrans %}</p>
  355.           <p>{% trans %}Notre organisme financier partenaire, la Caisse d'Epargne, vous prête de quoi financer vos 2 premières années ÉSTIAM.{% endtrans %}</p>
  356.           <p class="font-weight-300 font-italic">* ({% trans %}sous réserve d’acceptation de votre dossier{% endtrans %}).</p>
  357.         </div>
  358.       </div>
  359.       <div class="col-12" data-aos='fade-up'>
  360.         <div class="table-responsive">
  361.           <table class="table">
  362.             <thead>
  363.               <tr class="text-white">
  364.                 <th class="tc-1"></th>
  365.                 <th class="tc bg-purple text-center">
  366.                   <div class="font-weight-bold line-header">{% trans %}Hors alternance{% endtrans %}</div>
  367.                   <div>{% trans %}inscription avant le <br/>30 septembre{% endtrans %}</div>
  368.                 </th>
  369.                 <th class="tc bg-purple text-center">
  370.                   <div class="font-weight-bold line-header">{% trans %}Hors alternance{% endtrans %}</div>
  371.                   <div>{% trans %}inscription après le <br/>30 septembre{% endtrans %}</div>
  372.                 </th>
  373.                 <th class="tc bg-purple text-center">
  374.                   <div class="font-weight-bold line-header">{% trans %}En alternance{% endtrans %}</div>
  375.                   <div>({% trans %}contrat d'apprentissage ou contrat de professionnalisation{% endtrans %})</div>
  376.                 </th>
  377.               </tr>
  378.             </thead>
  379.             <tbody>
  380.               <tr>
  381.                 <th class="bg-purple text-center font-weight-bold text-white line-header">
  382.                   {% trans %}Frais de dossier, d’admission, d’examens ou de tests d'admission, ou d’entretiens{% endtrans %}
  383.                 </th>
  384.                 <td colspan="3">
  385.                   <div class="line-number">{% trans %}Aucun{% endtrans %}</div>
  386.                 </td>
  387.               </tr>
  388.               <tr>
  389.                 <th class="bg-purple text-center font-weight-bold text-white line-header">{% trans %}Droits de scolarité annuels{% endtrans %}</th>
  390.                 <td>
  391.                   <div class="line-number">6.800€</div>
  392.                   <div class="line-text">9.900 – 3.100€ {% trans %}de remise pour inscription anticipée.{% endtrans %}</div>
  393.                 </td>
  394.                 <td>
  395.                   <div class="line-number">9.900€</td>
  396.                 </td>
  397.                 <td>
  398.                   <div class="line-number">0€</div>
  399.                   <div class="line-text">{% trans %}rien à la charge des familles car payé par l’employeur.{% endtrans %}</div>
  400.                 </td>
  401.               </tr>
  402.               <tr>
  403.                 <th class="bg-purple text-center font-weight-bold text-white line-header">
  404.                   {% trans %}Frais de scolarité internationaux annuels{% endtrans %}<br/><span class="font-weight-normal">{% trans %}uniquement pour les 1res et 2es années{% endtrans %}</span>
  405.                 </th>
  406.                 <td>
  407.                   <div class="line-number">1.500€</div>
  408.                   <div class="line-text">{% trans %}couvrant les frais de scolarité internationaux et l’hébergement.{% endtrans %}</div>
  409.                 </td>
  410.                 <td>
  411.                   <div class="line-number">1.500€</div>
  412.                   <div class="line-text">{% trans %}couvrant les frais de scolarité internationaux et l’hébergement.{% endtrans %}</td>
  413.                 </td>
  414.                 <td>
  415.                   <div class="line-number">{% trans %}Non applicable{% endtrans %}</div>
  416.                 </td>
  417.               </tr>
  418.               <tr>
  419.                 <th class="bg-purple text-center font-weight-bold text-white line-header">
  420.                   {% trans %}Acompte à l’inscription{% endtrans %}<br/><span class="font-weight-normal">{% trans %}à déduire des droits de scolarité{% endtrans %}</span>
  421.                 </th>
  422.                 <td>
  423.                   <div class="line-number">1.800€</div>
  424.                 </td>
  425.                 <td>
  426.                   <div class="line-number">2.400€</td>
  427.                 </td>
  428.                 <td>
  429.                   <div class="line-number">0€</div>
  430.                   <div class="line-text">{% trans %}rien à la charge des familles car payé par l’employeur.{% endtrans %}</div>
  431.                 </td>
  432.               </tr>
  433.               <tr>
  434.                 <th class="bg-purple text-center font-weight-bold text-white line-header">
  435.                   {% trans %}Paiements échelonnés{% endtrans %}<br/><span class="font-weight-normal">{% trans %}10 x sans frais{% endtrans %}</span>
  436.                 </th>
  437.                 <td>
  438.                   <div class="line-number">10 x 500€</div>
  439.                 </td>
  440.                 <td>
  441.                   <div class="line-number">10 x 750€</td>
  442.                 </td>
  443.                 <td>
  444.                   <div class="line-number">0€</div>
  445.                   <div class="line-text">{% trans %}rien à la charge des familles car payé par l’employeur.{% endtrans %}</div>
  446.                 </td>
  447.               </tr>
  448.             </tbody>
  449.           </table>
  450.         </div>
  451.       </div>
  452.     </div>
  453.   </div>
  454. </section>
  456. <section class="section section-exemple py-xl-5 py-4">
  457.   <div class="container">
  458.     <div class="row">
  459.       <div class="col-12 text-center text-orange font-weight-bold font-30 mb-4" data-aos='fade-down'>{% trans %}Par exemple{% endtrans %}</div>
  460.       <div class="col-lg-4 mb-xl-5 mb-4" data-aos='zoom-in'>
  461.         <div class="e-item d-flex flex-column h-100 bg-gradient pt-xl-5 pt-4">
  462.           <div class="e-title mb-3"><span>{% trans %}Tricia{% endtrans %}</span></div>
  463.           <div class="e-content px-3 py-3">
  464.             <p>{% trans %}s’inscrit en 1re année le lendemain de l’obtention de son Bac. Elle bénéficie donc de la remise de 3.100€ pour son inscription anticipée avant le 30 septembre.{% endtrans %}</p>
  465.             <p>{% trans %}Elle décide d’étaler le paiement de sa scolarité sur 10 mois.{% endtrans %}</p>
  466.             <p class="text-right">{% trans %}À l’inscription{% endtrans %} <span class="font-20 font-weight-bold">1.800€</span><br/>
  467.              {% trans %} puis{% endtrans %} <span class="font-20 font-weight-bold">10 × 500€</span><br/>
  468.               ({% trans %}d'octobre à juillet{% endtrans %})
  469.             </p>
  470.           </div>
  471.         </div>
  472.       </div>
  473.       <div class="col-lg-4 mb-xl-5 mb-4" data-aos='zoom-in'>
  474.         <div class="e-item d-flex flex-column h-100 bg-gradient pt-xl-5 pt-4">
  475.           <div class="e-title mb-3"><span>{% trans %}Arthur{% endtrans %}</span></div>
  476.           <div class="e-content px-3 py-3">
  477.             <p>{% trans %}a décidé de s’inscrire en 1re année juste avant la rentrée. Il ne bénéficie pas de la remise pour inscription anticipée parce qu'il a dépassé la date du 30 septembre.{% endtrans %}</p>
  478.             <p>{% trans %}Il part suivre ses cours à l’étranger pendant 1 mois de son année scolaire.{% endtrans %}</p>
  479.             <p>{% trans %}Il décide d’étaler le paiement de sa scolarité sur 10 mois.{% endtrans %}</p>
  480.             <p class="text-right">{% trans %}À l’inscription{% endtrans %} <span class="font-20 font-weight-bold">2.400€</span><br/>
  481.               {% trans %}puis{% endtrans %} <span class="font-20 font-weight-bold">10 × 900€</span><br/>
  482.               ({% trans %}d'octobre à juillet{% endtrans %})
  483.             </p>
  484.           </div>
  485.         </div>
  486.       </div>
  487.       <div class="col-lg-4 mb-xl-5 mb-4" data-aos='zoom-in'>
  488.         <div class="e-item d-flex flex-column h-100 bg-gradient pt-xl-5 pt-4">
  489.           <div class="e-title mb-3"><span>{% trans %}Marvin{% endtrans %}</span></div>
  490.           <div class="e-content px-3 py-3">
  491.             <p>{% trans %}s’est inscrit en 4e année et a déjà trouvé une entreprise d’accueil pour effectuer son alternance.{% endtrans %}</p>
  492.             <p>{% trans %}L’entreprise, en plus de lui payer un salaire, paie sa scolarité ÉSTIAM.{% endtrans %}</p>
  493.             <p class="text-right">{% trans %}À l’inscription{% endtrans %} <span class="font-20 font-weight-bold">0€</span><br/>
  494.               {% trans %}puis{% endtrans %} <span class="font-20 font-weight-bold">0€</span><br/>
  495.               ({% trans %}d'octobre à juillet{% endtrans %})
  496.             </p>
  497.           </div>
  498.         </div>
  499.       </div>
  500.       <div class="col-12 text-gray" data-aos='fade-up'>
  501.         <p class="font-weight-bold text-orange">{% trans %}Rétractation{% endtrans %}</p>
  502.         <p class="mb-0">{% trans %}L’étudiant dispose d’un délai d’un mois après son inscription (au lieu du délai légal de 14 jours) pour exercer son droit de rétractation et réclamer le remboursement des sommes encaissées par ÉSTIAM.Si ce délai expire un samedi, un dimanche ou un jour férié ou chômé, il est prorogé jusqu'au premier jour ouvré suivant. Ce délai est prolongé jusqu'au 30 septembre de l'année scolaire en cours pour les candidats admis sous réserve et n'ayant pas obtenu le titre leur permettant d'intégrer ÉSTIAM (par exemple : échec au baccalauréat) et ayant communiqué leurs résultats à ÉSTIAM dans un délai de 8 jours après réception de ces résultats.Dans le cas d’une annulation pour refus de visa, aucun remboursement ne sera accepté.Pour toute annulation reçue moins de 30 jours avant le début de la formation, ÉSTIAM se réserve le droit de facturer un dédit de 30% des frais de scolarité. En cas d’absence ou d’abandon en cours de formation, cette dernière est payable en totalité,Attention, dans le cas où le nombre de participants à une formation serait jugé insuffisant, ÉSTIAM se réserve le droit d’ajourner cette formation. Dans ce cas chaque étudiant concerné se verra proposer soit une inscription à un cursus de même niveau délivré par ÉSTIAM, soit une inscription au même cursus sur un campus différent situé dans un rayon de 50 km du campus choisi par l’Étudiant, soit le remboursement de ses droits de scolarité.{% endtrans %}</p>
  503.         <p>{% trans %}Retrouvez toutes les conditions générales d’inscription{% endtrans %} <a href="{{path('cgi')}}">ici</a>.</p>
  504.       </div>
  505.     </div>
  506.   </div>
  507. </section>
  508. {% endblock %}
  510. {% block custom_javascripts %}
  511. <script type="text/javascript" src="{{ asset('assets/js/jquery.inview.js') }}"></script>
  512. <script type="text/javascript" src="{{ asset('assets/js/jquery-circle-progress.js') }}"></script>
  513. <script type="text/javascript">
  514. $(document).ready(function(){
  515.   $('.section-campus-chiffres').bind('inview', function (event, visible) {
  516.     if (visible == true) {
  517.       $('.circle').circleProgress({
  518.         fill: {color: '#ff0000'},
  519.         startAngle: -Math.PI / 2,
  520.         size: 107
  521.       });
  522.     }
  523.   });
  524. })  
  525. </script>
  526. {% endblock %}