fix #4 :

Pouvoir configurer la couleur d'emphase

css/html5up_telephasic.spip.css.html

@@ -28,17 +28,23 @@
        url('#CHEMIN{polices/source-sans-pro-v21-latin-600.woff}') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
+:root {
+  --couleur-emphase: [(#CONFIG{html5up_telephasic/couleur_emphase, '#f35858'})];
+}
+
 h1, h2, h3 { font-size: 2em; line-height: 1.25em; }
 h2 { font-size: 1.625em; }
 h3 { font-size: 1.25em; }
 img { vertical-align: top; }
 strong {color: inherit;}
+a:hover, a:active, a:focus { color: var(--couleur-emphase);}
 
 picture.adapt-img-wrapper { vertical-align: top; } /* cf https://github.com/nursit/AdaptiveImages/issues/13 */
 
 /* *** Le menu principal *** */
 #nav ul { padding: 0;}
 #nav ul li.accueil {margin: 0 1em; text-transform: uppercase; font-weight: 600;}
+.dropotron li.active > a, .dropotron li.active > span {  color: var(--couleur-emphase); }
 #nav .accueil a { display: block; padding-top:0; height: 4em; background:rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.75); border-top: 0; border-radius: 0 0 0.35em 0.35em; }
 #nav #formulaire_menu_lang label { display: none; }
 #nav #formulaire_menu_lang select { padding: 0; }
@@ -59,6 +65,7 @@ picture.adapt-img-wrapper { vertical-align: top; } /* cf https://github.com/nurs
     linear-gradient(75deg, [(#CONFIG{html5up_telephasic/apparence_entete_couleur1, #FF7088})] 15%, [(#CONFIG{html5up_telephasic/apparence_entete_couleur2, '#F2B69D'})] 55%);
   <//B_image_entete>  
 }
+header > p { columns: var(--couleur-emphase); }
 
 /* *** L'accueil *** */
 #hero { max-width: 580px; }
@@ -111,7 +118,7 @@ picture.adapt-img-wrapper { vertical-align: top; } /* cf https://github.com/nurs
 .page_recherche #main h2 {margin-bottom : 1em;text-align: center; }
 
 /* *** Le pied de page *** */
-#footer .major p { padding: 0.75em 0 1em 0; color: #f35858; font-size: 1.5em;  line-height: 1.5em; }
+#footer .major p { padding: 0.75em 0 1em 0; color: var(--couleur-emphase); font-size: 1.5em;  line-height: 1.5em; }
 #footer #formulaire_contact fieldset {margin-top: 0; padding-top: 0;}
 #footer #formulaire_contact br.bugajaxie {display: none;}
 #footer .col-12 {margin-bottom: 2em;}
@@ -141,7 +148,7 @@ input[type="checkbox"] {margin:0 1em 0 0;opacity:1;-moz-appearance:checkbox;-web
 
 /* Les réseaux sociaux */
 #footer .sociaux * .socicon { background: #61666b; border-radius: 0.35em; transition: background-color 0.2s; }
-#footer .sociaux * .socicon:hover { background: #f35858; }
+#footer .sociaux * .socicon:hover { background: var(--couleur-emphase); }
 
 /* Le portofolio */
 .documents_portfolio { margin: 1.5em 0;}
@@ -160,20 +167,26 @@ ul.portfolio li small { font-size: 0.75em; }
 .documents_joints .publication { font-size: 0.75em; }
 .documents_joints .descriptif p {margin:0;}
 
-
 /* Pagination */
 .pagination .pagination-items {list-style: none; display: flex; flex-direction: row; justify-content: center; }
-.pagination .pagination-item { margin: 0em; flex-basis: 7.5%; display: flex;align-items: center; color: #f35858;}
+.pagination .pagination-item { margin: 0em; flex-basis: 7.5%; display: flex;align-items: center; color: var(--couleur-emphase);}
 .pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
 .pagination .pagination-item + .pagination-item { margin-left: 0.5em }
-.pagination .pagination-item-label { display:block; flex-basis: 100%; background: #f35858; text-decoration: none; padding:.5em; text-align: center; border: 1px solid #f35858; }
+.pagination .pagination-item-label { display:block; flex-basis: 100%; background: var(--couleur-emphase); text-decoration: none; padding:.5em; text-align: center; border: 1px solid var(--couleur-emphase); }
 .pagination a.pagination-item-label {color: #fff;}
 .pagination .active span.pagination-item-label,
 .pagination a.pagination-item-label:hover,
 .pagination a.pagination-item-label:focus,
-.pagination a.pagination-item-label:active { background: #fff; color: #f35858; text-decoration: none; }
+.pagination a.pagination-item-label:active { background: #fff; color: var(--couleur-emphase); text-decoration: none; }
 .pagination .pagination-item.disabled { visibility: initial; }
-.pagination .pagination-item.disabled .pagination-item-label {color:#f35858; background: transparent;}
+.pagination .pagination-item.disabled .pagination-item-label {color:var(--couleur-emphase); background: transparent;}
+
+/* Les boutons */
+input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus,
+input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus, 
+input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, 
+button:hover, button:active,  button:focus,
+.button:hover, .button:active,.button:focus { color: var(--couleur-emphase); border-color: var(--couleur-emphase); }
 
 .adapt-img.spip_logo {margin: 0;}
 

formulaires/configurer_html5up_telephasic.html

@@ -10,6 +10,16 @@
 		#ACTION_FORMULAIRE
 
 		<fieldset>
+			<legend><:html5up_telephasic:generalites:></legend>
+			<div class="editer-groupe">
+				[(#SAISIE{input, couleur_emphase, 
+					label=<:html5up_telephasic:couleur_emphase:>,
+					explication=<:html5up_telephasic:couleur_emphase_explication:>,
+					class=palette,
+					type=color,
+					defaut=#f35858})]
+
+			</div>
 			<legend><:html5up_telephasic:entete:></legend>
 			<div class="editer-groupe">
 

lang/html5up_telephasic_fr.php

@@ -25,6 +25,8 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
 	// C
 	'cta' => 'Call to action',
 	'cfg_titre_parametrages' => 'Paramétrages',
+	'couleur_emphase' => 'Couleur d\'emphase',
+	'couleur_emphase_explication' => 'Par défaut : #f35858 (hexadécimal) / 243, 88, 88 (RVB)',
 
 	// E
 	'entete' => 'Entête',
@@ -34,6 +36,7 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
 
 	// G
 	'graphisme' => 'Graphisme',
+	'generalites' => 'Généralités',
 
 	// H
 	'html5up_telephasic_titre' => 'HTML5up Telephasic',