Mise à jour copier/coller anglais + optimisation

static/scripts/bicol2colcol.js

+var bicol2colcol = {
+    "phon_a_majr":["--phon_a_maj","--phon_r_slash"],
+    "phon_ai_maj":["--phon_a","--phon_i_maj"],
+    "phon_ai_majarobase":["--phon_a","--phon_i_maj","--phon_schwa"],
+    "phon_au_maj":["--phon_a","--phon_u_maj"],
+    "phon_au_majwarobase":["--phon_a","--phon_u_maj","--phon_w","--phon_schwa"],
+    "phon_arobasel":["--phon_schwa","--phon_l"],
+    "phon_arobasem":["--phon_schwa","--phon_m"],
+    "phon_arobasen":["--phon_schwa","--phon_n"],
+    "phon_arobaseu_maj":["--phon_schwa","--phon_u_maj"],
+    "phon_dz":["--phon_d","--phon_z"],
+    "phon_dz_maj":["--phon_d","--phon_z_maj"],
+    "phon_dz_retr":["--phon_d","--phon_z_retr"],
+    "phon_dz_slash":["--phon_d","--phon_z_slash"],
+    "phon_ef":["--phon_e","--phon_f"],
+    "phon_ei_maj":["--phon_e","--phon_i_maj"],
+    "phon_earobase":["--phon_e","--phon_schwa"],
+    "phon_er":["--phon_e","--phon_r_slash"],
+    "phon_i_majarobase":["--phon_i_maj","--phon_schwa"],
+    "phon_ju_majarobase":["--phon_j","--phon_u_maj","--phon_schwa"],
+    "phon_gb":["--phon_g","--phon_b"],
+    "phon_gz":["--phon_g","--phon_z"],
+    "phon_gz_maj":["--phon_g","--phon_z_maj"],
+    "phon_h_maj_i":["--phon_h_maj","--phon_i"],
+    "phon_ij":["--phon_i","--phon_j"],
+    "phon_i_majr":["--phon_i_maj","--phon_r_slash"],
+    "phon_j_maj":["--phon_n","--phon_j"],
+    "phon_jarobase":["--phon_j","--phon_schwa"],
+    "phon_ju_long":["--phon_j","--phon_u_long"],
+    "phon_ju_majr":["--phon_j","--phon_u_maj","--phon_r_slash"],
+    "phon_kp":["--phon_k","--phon_p"],
+    "phon_ks":["--phon_k","--phon_s"],
+    "phon_ks_maj":["--phon_k","--phon_s_maj"],
+    "phon_kx":["--phon_k","--phon_x"],
+    "phon_kw":["--phon_k","--phon_w"],
+    "phon_lj":["--phon_l","--phon_j"],
+    "phon_nj":["--phon_n","--phon_j"],
+    "phon_ou_maj":["--phon_o","--phon_u_maj"],
+    "phon_o_maji_maj":["--phon_o_maj","--phon_i_maj"],
+    "phon_o_majr":["--phon_o_maj","--phon_r_slash"],
+    "phon_pf":["--phon_p","--phon_f"],
+    "phon_sz":["--phon_s","--phon_z"],
+    "phon_tk_maj":["--phon_t","--phon_k_maj"],
+    "phon_tk_maj_slash":["--phon_t","--phon_k_maj_slash"],
+    "phon_ts":["--phon_t","--phon_s"],
+    "phon_ts_chev2":["--phon_t","--phon_s_chev2"],
+    "phon_ts_maj":["--phon_t","--phon_s_maj"],
+    "phon_ts_maj_chev2":["--phon_t","--phon_s_maj_chev2"],
+    "phon_ts_retr":["--phon_t","--phon_s_retr"],
+    "phon_ts_slash":["--phon_t","--phon_s_slash"],
+    "phon_tt_maj":["--phon_t","--phon_t_maj"],
+    "phon_u_majarobase":["--phon_u_maj","--phon_schwa"],
+    "phon_u_majr":["--phon_u_maj","--phon_r_slash"],
+    "phon_wa":["--phon_w","--phon_a"],
+    "phon_war":["--phon_w","--phon_a","--phon_r_slash"],
+    "phon_wa_maj":["--phon_w","--phon_a_maj"],
+    "phon_wa_maj_long":["--phon_w","--phon_a_maj_long"],
+    "phon_wai_maj":["--phon_w","--phon_a","--phon_i_maj"],
+    "phon_we_maj_nas":["--phon_w","--phon_e_maj_nas"],
+    "phon_wv_maj":["--phon_w","--phon_v_maj"],
+    "phon_schwju":["--phon_j","--phon_schwu"],
+    "phon_schwiz":["--phon_schwi","--phon_z"],
+    "phon_schwaz":["--phon_schwa","--phon_z"]
+    }
\ No newline at end of file

static/scripts/main.js

@@ -4,6 +4,14 @@ $(document).ready(function(){
 	txtarea.focus();    
 });
 
+var boolBold = true;
+function toggleBold() {
+	document.getElementById('output').classList.toggle('outputBold');
+	boolBold = !boolBold;
+	console.log("boolBold to",boolBold);
+}
+
+
 const thisURL = window.location.href;
 console.log("url:",thisURL);
 var thisPageLang = "";
@@ -28,7 +36,7 @@ function selectLang(lang){
 	if (lang=="en"){
 		interface("en");
 		document.getElementById('choixLang').value = 'en';
-		document.getElementById('output').classList.remove('outputBold');
+		if (boolBold) toggleBold();
 		
 		document.getElementById('monochromeLabel').style.display="";
 		document.getElementById('monochrome').style.display="";
@@ -41,7 +49,7 @@ function selectLang(lang){
 	} else if (lang=="fr"){
 		interface("fr");
 		document.getElementById('choixLang').value = 'fr';
-		document.getElementById('output').classList.add('outputBold');
+		if (boolBold == false) toggleBold();
 
 		document.getElementById('monochromeLabel').style.display="none";
 		document.getElementById('monochrome').style.display="none";
@@ -418,10 +426,6 @@ function toMonochrome() {
 	};
 }
 
-function toggleBold() {
-	document.getElementById('output').classList.toggle('outputBold');
-}
-
 // Initialisation couleur background (par défaut black)
 // if (document.getElementById('defaultBg').value == 'white') {
 // 	document.getElementById('outputDiv').classList.toggle('win-white');
@@ -472,79 +476,112 @@ var span = document.getElementsByClassName("close")[0];
 
 // Fonction pour ouvrir le PopUp 
 function getPopUp() {
-	var outputContent = document.getElementById('output').innerHTML;
-	//             <span> </span><span class="tokens" id="tok1" onclick="changeAlign(this.id)"><span class="phon phon_b">B</span><span class="phon phon_o_maj_nas">on</span><span class="phon phon_z_maj">j</span><span class="phon phon_u">ou</span><span class="phon phon_r_maj">r</span></span><span> </span><span class="tokens transMult" id="tok2" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_neutre">à</span></span><span> </span><span class="tokens transMult" id="tok3" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_t">t</span><span class="phon phon_u">ous</span></span>        
+    var outputContent = document.getElementById('output').innerHTML;
+    var finalOutput = ""; // contiendra la chaîne de caractères à copier coller
 	
-	function phon2color(correspondance, p1, decalage, chaine){
-		if (p1 == 'phon_wa'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_w');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_a');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_we_maj_nas'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_w');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_e_maj_nas');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_ij'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_i');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_j');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_h_maj_i'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_h_maj');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_i');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_nj'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_n');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_j');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_ts_maj'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_t');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s_maj');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_dz_maj'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_d');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_z_maj');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_ks'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_k');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_gz'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_g');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_z');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else if (p1 == 'phon_ts'){
-			var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_t');
-			var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s');
-			var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		} else {
+	var expFonte = "font-family: Palatino, Times, Calibri;";
+	var expCoulBase = "color:#cccccc;"
+
+	var expSizeBase = "font-size:30pt;";
+	var expSizeStress1 = "font-size:45pt;";
+	var expSizeStress2 = "font-size:36pt;";
+	var expSizeSchwa = "font-size:20pt;";
+
+	var expBold = "font-weight: bold;";
+	var expNoBold = "font-weight: normal;";
+	var expLong = "text-decoration: underline;";
+
+	// On récupère la liste des <span>
+    const regexSpan = /<span class="tokens.*?>(.*?<\/span>)<\/span>|(<span class="phon_neutre">.*?<\/span>)|(<span> <\/span>)|(<br>)/gm;
+	// group1: word in colors
+	// group2: punctuation
+	// group3: space
+	// group4: <br>
+
+	let m;
+    while ((m = regexSpan.exec(outputContent)) !== null) {
+		// parses each result of the regex
+        // This is necessary to avoid infinite loops with zero-width matches
+        if (m.index === regexSpan.lastIndex) {
+            regexSpan.lastIndex++;
+        }
+        console.log("group1:",m[1],"group2:",m[2],"group3:",m[3],"group4:",m[4]);
+        if (m[4]) {
+            finalOutput += "<br>"
+        } else if (m[3]) {
+			finalOutput += '<span style="'+expFonte+expCoulBase+expSizeBase+'"> </span>';
+		} else if (m[2]) {
+			if (boolBold) finalOutput += m[2].replace('class="phon_neutre"','style="'+expFonte+expCoulBase+expSizeBase+expBold+'"');
+			else finalOutput += m[2].replace('class="phon_neutre"','style="'+expFonte+expCoulBase+expSizeBase+expNoBold+'"');
+		} else if (m[1]) {	
+			// Dans cette situation on a une suite de span de phono-graphèmes comme <span class="phon phon_au_maj stress1">hou</span><span class="phon phon_arobase_rho schwa">r</span>
+			// On va la transformer en liste de spans pour les traiter une par une
+			const phonographiesRegex = /<span class="phon (.*?)">(.*?)<\/span>/gm;
+			
+			while ((n = phonographiesRegex.exec(m[1])) !== null) {
+				// This is necessary to avoid infinite loops with zero-width matches
+				if (n.index === phonographiesRegex.lastIndex) {
+					phonographiesRegex.lastIndex++;
+				}
+				
+				// The result can be accessed through the `n`-variable.
+				//console.log('RESULT:',n[1],n[2]);
+				
+				var newOutputSpan = "<span style='";
+
+				if (n[1].includes("unstressed")) newOutputSpan += expFonte + expSizeBase + expNoBold;
+				else if (n[1].includes("schwa")) newOutputSpan += expFonte + expSizeSchwa + expNoBold;
+				else if (n[1].includes("stress1")) newOutputSpan += expFonte + expSizeStress1 + expBold;
+				else if (n[1].includes("stress2")) newOutputSpan += expFonte + expSizeStress2 + expBold;
+				else {
+					if (boolBold) newOutputSpan += expFonte + expSizeBase + expBold;
+					else newOutputSpan += expFonte + expSizeBase + expNoBold;
+				}
+				
+				// COULEURS
+				n[1] = n[1].split(" ");
+				var phonClass = "";
+				for (i=0; i<n[1].length; i++) {
+					if (n[1][i].match(/phon_.*/)) phonClass = n[1][i];
+				}
+				if (phonClass.match(/.*_long/)) newOutputSpan += expLong;
+				if (phonClass != "") newOutputSpan += phon2color(phonClass);
+
+				newOutputSpan += "'>"+n[2]+"</span>";
+
+				finalOutput += newOutputSpan;
+			}
+			
+        }
+    }
+
+    console.log("finalOutput :",finalOutput);
+    
+	function phon2color(p1){
+        if (p1 in bicol2colcol) {
+            var col1 = getComputedStyle(document.documentElement).getPropertyValue(bicol2colcol[p1][0]);
+			var col2 = getComputedStyle(document.documentElement).getPropertyValue(bicol2colcol[p1][1]);
+			var res = 'background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;';
+        } else {
 			var col = getComputedStyle(document.documentElement).getPropertyValue('--'+p1);
-			var res = '<span style="color:'+col+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		}
-		console.log(p1+' → '+col);
-		console.log(res);
-		return res;
-	}
-	function bicol2color(correspondance, p1, decalage, chaine){
-		var col = getComputedStyle(document.documentElement).getPropertyValue('--phon_'+p1);
-		var res = '<span style="color:'+col+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">';
-		console.log(p1+' → '+col);
-		console.log(res);
+			var res = 'color:'+col+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;';
+        }
 		return res;
-	}
-	// outputContent = outputContent.replace('<span> </span>',''); // suppr du premier span vide
-	outputContent = outputContent.replace(/<span class="phon_neutre">/g, '<span style="color:#cccccc">')
-	outputContent = outputContent.replace(/<span class="phon (\w+)">/g, phon2color);
-	outputContent = outputContent.replace(/<span class="phon \w+ (\w+)">/g, bicol2color);
-	outputContent = outputContent.replace(/onclick="changeAlign\(this\.id\)"/g,'');
-	outputContent = outputContent.replace(/title="changer de prononciation"/g,'');
-	outputContent = outputContent.replace(/class="tokens( transMult)*" /g,'');
-	outputContentWhite = outputContent.replace(/#ffffff/g,'#000000');
-
-	document.getElementById('pLienDiv').innerHTML = outputContent;
-	document.getElementById('pLienDivWhite').innerHTML = outputContentWhite;
+    }
+
+    // Remplacement des blancs par des noirs pour le fond blanc
+    finalOutputWhite = finalOutput.replace(/#ffffff/g,'#000000');
+    finalOutput = finalOutput.replace(/-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;/g,''); // on vire les strokes pour fond noir
+
+	// Insertion des résultats dans les div associées du popup
+	document.getElementById('pLienDiv').innerHTML = finalOutput;
+	document.getElementById('pLienDivWhite').innerHTML = finalOutputWhite;
+	// Affichage popup
     modal.style.display = "block";
 }
 
+
+
 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
     modal.style.display = "none";

static/styles/phonochromie_alem_v3.css

 /* CSS ALeM-APP v3 */
 /* https://alem.hypotheses.org/ */
-/* Last update: 2020/06/27 */
+/* Last update: 2020/08/20 */
 
 :root {
   --phon_bicolor1: #ff0000;
@@ -207,30 +207,45 @@ svg {
 .phon_ij { background:-webkit-linear-gradient(var(--phon_i) 62%, var(--phon_j) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
 .phon_h_maj_i { background:-webkit-linear-gradient(var(--phon_h_maj) 62%, var(--phon_i) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
 .phon_nj { background:-webkit-linear-gradient(var(--phon_n) 62%, var(--phon_j) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
+.phon_j_maj { background:-webkit-linear-gradient(var(--phon_n) 62%, var(--phon_j) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
 .phon_ef {background:-webkit-linear-gradient(var(--phon_e) 62%, var(--phon_f) 60%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
+.phon_ju {  background:  -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_u) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_ju_long {  background:  -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_u) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  text-decoration: underline var(--phon_u);}
+.phon_ju_maj {  background:  -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_u_maj) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_schwju {  background:  -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_schwu) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_arobasel {  background:  -webkit-linear-gradient(var(--phon_arobase) 62%, var(--phon_l) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_arobasem {  background:  -webkit-linear-gradient(var(--phon_arobase) 62%, var(--phon_m) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_arobasen {  background:  -webkit-linear-gradient(var(--phon_arobase) 62%, var(--phon_n) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_arobasel {  background:  -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_l) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_arobasem {  background:  -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_m) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_arobasen {  background:  -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_n) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_schwiz {  background:  -webkit-linear-gradient(var(--phon_schwi) 62%, var(--phon_z) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_schwaz {  background:  -webkit-linear-gradient(var(--phon_schwa) 62%, var(--phon_z) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_lj {  background:  -webkit-linear-gradient(var(--phon_l) 62%, var(--phon_j) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_sz {  background:  -webkit-linear-gradient(var(--phon_s) 62%, var(--phon_z) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_tt_maj {  background:  -webkit-linear-gradient(var(--phon_t) 62%, var(--phon_t_maj) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_jarobase {  background:  -webkit-linear-gradient(var(--phon_j) 62%, var(--phon_schwa) 60%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+
 
 /* gradient 70% */
 .phon_ei_maj {   background:  -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_i_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_i_majarobase {   background:  -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_arobase) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_i_majr {   background:  -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_earobase {   background:  -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_arobase) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_i_majarobase {   background:  -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_schwa) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_earobase {   background:  -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_schwa) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_au_maj {   background:  -webkit-linear-gradient(var(--phon_a) 60%, var(--phon_u_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_arobaseu_maj {   background:  -webkit-linear-gradient(var(--phon_arobase) 60%, var(--phon_u_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-.phon_u_majarobase {   background:  -webkit-linear-gradient(var(--phon_u_maj) 60%, var(--phon_arobase) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_arobaseu_maj {   background:  -webkit-linear-gradient(var(--phon_schwa) 60%, var(--phon_u_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_u_majarobase {   background:  -webkit-linear-gradient(var(--phon_u_maj) 60%, var(--phon_schwa) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_o_maji_maj {   background:  -webkit-linear-gradient(var(--phon_o_maj) 60%, var(--phon_i_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_ai_maj {   background:  -webkit-linear-gradient(var(--phon_a) 60%, var(--phon_i_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_er {   background:  -webkit-linear-gradient(var(--phon_e) 60%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_i_majr {   background:  -webkit-linear-gradient(var(--phon_i_maj) 60%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_u_majr {   background:  -webkit-linear-gradient(var(--phon_u_maj) 60%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_a_majr {   background:  -webkit-linear-gradient(var(--phon_a_maj) 60%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_o_majr {   background:  -webkit-linear-gradient(var(--phon_o_maj) 60%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_o_maju_maj {   background:  -webkit-linear-gradient(var(--phon_o_maj) 60%, var(--phon_u_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 
 /* gradients triples */
-.phon_ju_majarobase {   background:  -webkit-linear-gradient(var(--phon_j) 55%, var(--phon_u_maj) 65%, var(--phon_arobase) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_ju_majarobase {   background:  -webkit-linear-gradient(var(--phon_j) 55%, var(--phon_u_maj) 65%, var(--phon_schwa) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 .phon_wai_maj {   background:  -webkit-linear-gradient(var(--phon_w) 58%, var(--phon_a) 58%, var(--phon_i_maj) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
-
+.phon_war {   background:  -webkit-linear-gradient(var(--phon_w) 58%, var(--phon_a) 58%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_ju_majr {   background:  -webkit-linear-gradient(var(--phon_j) 58%, var(--phon_u_maj) 58%, var(--phon_r_slash) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
+.phon_ai_majarobase {   background:  -webkit-linear-gradient(var(--phon_a) 58%, var(--phon_i_maj) 58%, var(--phon_arobase) 75%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
 
 /*STYLES DES TRANSCRIPTIONS GRAPHIQUES*/
 .tran {

templates/coloriseur.html

@@ -68,11 +68,11 @@
         </div>
         <div class="modal-body">
             <p>Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.</p>
-            <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000; font-weight: bold;"></div>
+            <div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000;"></div>
             <div class="copyButton">
                 <button onclick="toClipBoard('pLienDiv','myTooltip')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
             </div>
-            <div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="font-weight: bold;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
+            <div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
             <div class="copyButton">
                 <button onclick="toClipBoard('pLienDivWhite', 'myTooltipWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
             </div>
@@ -103,6 +103,7 @@
 
     <script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
     <script src="{% static 'scripts/loc2stand.js' %}"></script>
+    <script src="{% static 'scripts/bicol2colcol.js' %}"></script>
     <script src="{% static 'scripts/main.js' %}"></script>
     <script src="{% static 'scripts/keyboard.js' %}"></script>