epfl-elements 1.0.0 → 4.0.0

package/dist/components/content-types/study-plan/study-plan-bachelor.twig

@@ -0,0 +1,1042 @@
+
+<!-- Study Plan 1 semester -->
+
+<div class="study-plan study-plan-1-semesters table-like mb-5">
+  <h2>Bachelor – 1 semestre</h2>
+  <div class="line-up">
+    <div class="first-line">
+      <div class="cours-title">
+        <div class="titre">Cours</div>
+      </div>
+      <div class="langue">
+        <div class="titre">Langue</div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 1&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="examen">
+        <div class="titre_bachlor bold">Examens</div>
+      </div>
+      <div class="credit">
+        <div class="titre_bachlor bold">Crédits</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Analyse territoriale et urbaine">
+        <div class="cours-name">
+          <a href="#">Analyse territoriale et urbaine</a>
+        </div>
+        <div class="cours-info">AR-153 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Barcelloni Corte</a>, <a href="#">Cavalieri</a>, <a href="#">Viganò</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>1h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Semestre de printemps</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Figuration graphique">
+        <div class="cours-name">
+          <a href="#">Figuration graphique</a>
+        </div>
+        <div class="cours-info">AR-113 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Braghieri</a>, <a href="#">Soubeyrand</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>1h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>3h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Histoire de l'architecture I">
+        <div class="cours-name">
+          <a href="#">Histoire de l'architecture I</a>
+        </div>
+        <div class="cours-info">AR-123 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Adam</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'hiver</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">2</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+</div>
+
+<!-- Study Plan 2 semesters -->
+
+<div class="study-plan study-plan-2-semesters table-like mb-5">
+  <h2>Bachelor – 2 semestres</h2>
+  <div class="line-up">
+    <div class="first-line">
+      <div class="cours-title">
+        <div class="titre">Cours</div>
+      </div>
+      <div class="langue">
+        <div class="titre">Langue</div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 1&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 2&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="examen">
+        <div class="titre_bachlor bold">Examens</div>
+      </div>
+      <div class="credit">
+        <div class="titre_bachlor bold">Crédits</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Analyse territoriale et urbaine">
+        <div class="cours-name">
+          <a href="#">Analyse territoriale et urbaine</a>
+        </div>
+        <div class="cours-info">AR-153 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Barcelloni Corte</a>, <a href="#">Cavalieri</a>, <a href="#">Viganò</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>1h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Semestre de printemps</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Figuration graphique">
+        <div class="cours-name">
+          <a href="#">Figuration graphique</a>
+        </div>
+        <div class="cours-info">AR-113 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Braghieri</a>, <a href="#">Soubeyrand</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>1h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>3h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Histoire de l'architecture I">
+        <div class="cours-name">
+          <a href="#">Histoire de l'architecture I</a>
+        </div>
+        <div class="cours-info">AR-123 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Adam</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'hiver</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">2</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Théorie de l'architecture I">
+        <div class="cours-name">
+          <a href="#">Théorie de l'architecture I</a>
+        </div>
+        <div class="cours-info">AR-121 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Marchand</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'hiver</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">2</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+</div>
+
+<!-- Study Plan 3 semesters -->
+
+<div class="study-plan study-plan-3-semesters table-like mb-5">
+  <h2>Bachelor – 3 semestres</h2>
+  <div class="line-up">
+    <div class="first-line">
+      <div class="cours-title">
+        <div class="titre">Cours</div>
+      </div>
+      <div class="langue">
+        <div class="titre">Langue</div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 1&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 2&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 3&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="examen">
+        <div class="titre_bachlor bold">Examens</div>
+      </div>
+      <div class="credit">
+        <div class="titre_bachlor bold">Crédits</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Analyse territoriale et urbaine">
+        <div class="cours-name">
+          <a href="#">Analyse territoriale et urbaine</a>
+        </div>
+        <div class="cours-info">AR-153 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Barcelloni Corte</a>, <a href="#">Cavalieri</a>, <a href="#">Viganò</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>1h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Semestre de printemps</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Figuration graphique">
+        <div class="cours-name">
+          <a href="#">Figuration graphique</a>
+        </div>
+        <div class="cours-info">AR-113 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Braghieri</a>, <a href="#">Soubeyrand</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>1h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>3h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Histoire de l'architecture I">
+        <div class="cours-name">
+          <a href="#">Histoire de l'architecture I</a>
+        </div>
+        <div class="cours-info">AR-123 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Adam</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'hiver</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">2</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Théorie de l'architecture I">
+        <div class="cours-name">
+          <a href="#">Théorie de l'architecture I</a>
+        </div>
+        <div class="cours-info">AR-121 / Section <abbr title="Architecture">AR</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Marchand</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'hiver</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">2</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+</div>
+
+<!-- Study Plan 4 semesters -->
+
+<div class="study-plan study-plan-4-semesters table-like mb-5">
+  <h2>Bachelor – 4 semestres</h2>
+  <div class="line-up">
+    <div class="first-line">
+      <div class="cours-title">
+        <div class="titre">Cours</div>
+      </div>
+      <div class="langue">
+        <div class="titre">Langue</div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 3&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 4&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 5&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Bachelor 6&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="examen">
+        <div class="titre_bachlor bold">Examens</div>
+      </div>
+      <div class="credit">
+        <div class="titre_bachlor bold">Crédits</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Advanced numerical analysis">
+        <div class="cours-name">
+          <a href="#">Advanced numerical analysis</a>
+        </div>
+        <div class="cours-info">MATH-153 / Section <abbr title="Mathématiques">MA</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Picasso</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 4">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 5">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 6">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'hiver</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">5</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Algebraic number theory">
+        <div class="cours-name">
+          <a href="#">Algebraic number theory</a>
+        </div>
+        <div class="cours-info">MATH-482 / Section <abbr title="Mathématiques">MA</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Michel</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 4">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 5">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 6">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">5</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Algebraic topology">
+        <div class="cours-name">
+          <a href="#">Algebraic topology</a>
+        </div>
+        <div class="cours-info">MATH-323 / Section <abbr title="Mathématiques">MA</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Urech</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 4">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 5">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 6">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">5</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Algèbres de Lie">
+        <div class="cours-name">
+          <a href="#">Algèbres de Lie</a> <i>(pas donné en 2019-2020)</i>
+        </div>
+        <div class="cours-info">MATH-319 / Section <abbr title="Mathématiques">MA</abbr></div>
+        <div class="enseignement-name">
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Bachelor 3">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 4">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 5">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Bachelor 6">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens écrits</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">5</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+</div>