diff --git a/app/scodoc/bonus_sport.py b/app/scodoc/bonus_sport.py
index d1d7f4ba29..651c608123 100644
--- a/app/scodoc/bonus_sport.py
+++ b/app/scodoc/bonus_sport.py
@@ -31,7 +31,7 @@ import pprint
 """
 La fonction bonus_sport reçoit:
     
-    - notes_sport: la liste des notes des modules de sport et culture (une note par module);
+    - notes_sport: la liste des notes des modules de sport et culture (une note par module de l'UE de type sport/culture);
     - coefs: un coef (float) pondérant chaque note (la plupart des bonus les ignorent);
     - infos: dictionnaire avec des données pouvant être utilisées pour les calculs.
     Ces données dépendent du type de formation.
diff --git a/app/static/css/ref-competences.css b/app/static/css/ref-competences.css
index a2193d3a3f..5e0375990f 100644
--- a/app/static/css/ref-competences.css
+++ b/app/static/css/ref-competences.css
@@ -7,8 +7,7 @@
 	max-width: 1000px;
 	margin: auto;
 }
-h1{
-	
+h1{	
 	font-weight: 100;
 }
 /**********************/
@@ -41,27 +40,24 @@ h1{
 /* Zone compétences   */
 /**********************/
 .competences{
-	display: flex;
+	display: grid;
 	gap: 4px;
+	margin-top: 8px;
 }
-.competence{
-	flex: 1;
-}
-.competence>div{
+.competences>div{
 	padding: 4px 8px;
-	margin-top: 4px;
 	border-radius: 4px;	
 	cursor: pointer;
 }
 
-.comp1{background:#a44;}
+.comp1{background:#a44}
 .comp2{background:#84a}
 .comp3{background:#a84}
 .comp4{background:#8a4}
 .comp5{background:#4a8}
 .comp6{background:#48a}
 
-.competence>.focus{
+.competences>.focus{
 	outline: 2px solid;
 }
 
diff --git a/app/static/js/ref_competences.js b/app/static/js/ref_competences.js
index b711552ece..6fc2d88a45 100644
--- a/app/static/js/ref_competences.js
+++ b/app/static/js/ref_competences.js
@@ -13,14 +13,17 @@ class ref_competences extends HTMLElement {
 		/* Style du module */
 		const styles = document.createElement('link');
 		styles.setAttribute('rel', 'stylesheet');
-		styles.setAttribute('href', '/ScoDoc/static/css/ref-competences.css');
+		if (location.href.split("/")[3] == "ScoDoc") {
+			styles.setAttribute('href', '/ScoDoc/static/css/ref-competences.css');
+		} else {
+			styles.setAttribute('href', 'ref-competences.css');
+		}
 
 		this.shadow.appendChild(styles);
 	}
 
 	set setData(data) {
 		this.data = data;
-		/* this.shadow.querySelector("h1").innerText = "BUT " + data.specialite_long; */
 		this.parcours();
 	}
 
@@ -32,62 +35,61 @@ class ref_competences extends HTMLElement {
 			div.addEventListener("click", (event) => { this.competences(event, cle) })
 			parcoursDIV.appendChild(div);
 		})
+		this.initCompetences();
+	}
 
+	initCompetences() {
+		this.competencesNumber = {};
+		let gridTemplate = "";
+		let i = 0;
+		Object.keys(this.data.competences).forEach(competence => {
+			gridTemplate += `[${competence}] auto`;
+			this.competencesNumber[competence] = 1 + i++ % 6;
+		})
+		this.shadow.querySelector(".competences").style.gridTemplateColumns = gridTemplate;
 	}
 
 	competences(event, cle) {
 		this.shadow.querySelector(".parcours>.focus")?.classList.remove("focus");
 		event.currentTarget.classList.add("focus");
+		let divCompetences = this.shadow.querySelector(".competences");
 
-		/* Récupère une liste plate de toutes les compentences de toutes les années */
-		let bucketCompetences = [
-			Object.keys(this.data.parcours[
-				Object.keys(this.data.parcours)[0]
-			].annees[1].competences)
-			, Object.keys(this.data.parcours[cle].annees[2].competences)
-			, Object.keys(this.data.parcours[cle].annees[3].competences)
-		].flat();
-
-		/* Compte le nombre d'occurence de chaque compétence */
-		let competences = {};
-		bucketCompetences.forEach(competence => {
-			competences[competence] = ++competences[competence] || 1
-		})
-
-		/* Affichage */
-		let numComp = 1;
 		this.shadow.querySelector(".competences").innerHTML = "";
-		Object.entries(competences).forEach(([competence, nb]) => {
-			var divCompetence3ans = document.createElement("div");
-			divCompetence3ans.className = "competence";
-			let numTmp = numComp;
-			for (let i = 0; i < nb; i++) {
+
+		Object.entries(this.data.parcours[cle].annees).forEach(([annee, dataAnnee]) => {
+			Object.entries(dataAnnee.competences).forEach(([competence, niveauCle]) => {
+				let numComp = this.competencesNumber[competence];
 				let divCompetence = document.createElement("div");
-				divCompetence.innerText = `${competence} ${i + 1}`;
-				divCompetence.className = "comp" + numTmp;
-				divCompetence.addEventListener("click", (event) => { this.AC(event, competence, numTmp, i + 1) })
-				divCompetence3ans.appendChild(divCompetence);
-			}
-			this.shadow.querySelector(".competences").appendChild(divCompetence3ans);
-			numComp++;
+				divCompetence.innerText = `${competence} ${niveauCle.niveau}`;
+				divCompetence.style.gridRowStart = annee;
+				divCompetence.style.gridColumnStart = competence;
+				divCompetence.className = "comp" + numComp;
+				divCompetence.dataset.competence = `${competence} ${niveauCle.niveau}`;
+				divCompetence.addEventListener("click", (event) => { this.AC(event, competence, niveauCle.niveau, annee, numComp) })
+				divCompetences.appendChild(divCompetence);
+			})
 		})
+
+		/* Réaffectation des focus */
+		this.shadow.querySelectorAll(".AC").forEach(ac => {
+			this.shadow.querySelector(`[data-competence="${ac.dataset.competence}"]`).classList.add("focus");
+		});
 	}
 
-	AC(event, competence, numComp, annee) {
+	AC(event, competence, niveau, annee, numComp) {
 		event.currentTarget.classList.toggle("focus");
-		if (this.shadow.querySelector(`[data-competence="${competence} ${annee}"]`)) {
-			this.shadow.querySelector(`[data-competence="${competence} ${annee}"]`).remove();
+		if (this.shadow.querySelector(`.ACs [data-competence="${competence} ${niveau}"]`)) {
+			this.shadow.querySelector(`.ACs [data-competence="${competence} ${niveau}"]`).remove();
 		} else {
 			let output = `
-				<ul class=AC data-competence="${competence} ${annee}">
-					<h2 class=comp${numComp}>${competence} ${annee}</h2>
+				<ul class=AC data-competence="${competence} ${niveau}">
+					<h2 class=comp${numComp}>${competence} ${niveau}</h2>
 			`;
 			Object.entries(this.data.competences[competence].niveaux["BUT" + annee].app_critiques).forEach(([num, contenu]) => {
 				output += `<li><div class=comp${numComp}>${num}</div><div>${contenu.libelle}</div></li>`;
 			})
 			this.shadow.querySelector(".ACs").innerHTML += output + "</ul>";
 		}
-
 	}
 }
 customElements.define('ref-competences', ref_competences);
\ No newline at end of file