Ticket #4468 : refacto des boutons de l'espace privé

Unifier styles des icônes (classe .icone), boutons d'actions et boutons de validation des formulaires. Même police, graisse et couleurs pour tous. Portage des classes .add, .del, .edit et.config qui ajoutent des icônes aux boutons d'actions, ainsi que de .link, .right et .left. Ajout également de nouvelles classes modificatrices à toute fin utile : .secondary, .block, et .boutons_groupe. Testé en ltr et rtl.

* Un peu de rangement : on déplace tout ce qui concerne les boutons dans boutons.css (c'était auparavant réparti entre theme.css et forms.css).
* De même pour icons.css : on y déplace toutes les règles en rapport qui étaient dans theme.css
* On introduit une nouvelle classe générique .bouton pour afficher n'importe quel élément comme un bouton, à priori surtout pour des liens (pierrox et nicod_).
* On mutualise le plus possible les règles entre les liens boutons, les boutons de formulaire et les boutons d'action.
* Refacto complète du composant .icone : on passe aussi en flexbox comme les boutons, on répare ce qui était cassé (la variante .right notamment).
* La combinaison bouton d'action + classe .icone est dépréciée, on continue de la supporter mais elle est maintenant inutile.
* Ajout de quelques animations au survol et au focus. On essaie de pas faire trop bling, à voir à l'usage.
* Recadrage des icônes génériques add.svg et cie afin de pouvoir les réutiliser plus facilement. Ajout de quelques variantes svg manquantes.
* On passe l'image de fond en svg aussi tant qu'à faire.

prive/images/rayures-danger.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><g fill-opacity=".66"><path d="M4.233 0v2.117L2.117 4.233H0zM0 0h2.117L0 2.117z"/></g></svg>
\ No newline at end of file

prive/images/rayures-gris.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><path d="M4.233 0v2.117L2.117 4.233H0zM0 0h2.117L0 2.117z" fill-opacity=".08"/></svg>
\ No newline at end of file

prive/images/rayures-sup.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><path d="M4.233 0v2.117L2.117 4.233H0z" fill-opacity=".145"/><path d="M4.233 0H2.117L0 2.117v2.116z" fill="#eb6114" fill-opacity=".149"/><path d="M0 0h2.117L0 2.117z" fill-opacity=".145"/><path d="M4.233 4.233H2.117l2.116-2.116z" fill="#eb6114" fill-opacity=".149"/></svg>
\ No newline at end of file

prive/squelettes/inclure/barre-nav.html

@@ -78,7 +78,7 @@
 				<ul class="rapides creer">
 					<BOUCLE_creer(DATA)
 						{source tableau, #GET{boutons}}
-						{cle=outils_rapides}><BOUCLE_creersous(DATA){source tableau, #SOUSMENU}{par position}>[<li class="bouton"><a
+						{cle=outils_rapides}><BOUCLE_creersous(DATA){source tableau, #SOUSMENU}{par position}>[<li class="rapides__item"><a
 						href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
 						title="[(#VALEUR{libelle}|_T|attribut_html)]"
 						class="bando2_#CLE"><span>(#VALEUR{libelle}|_T)</span></a></li>]
@@ -90,7 +90,7 @@
 					<ul class="rapides collaborer">
 					<BOUCLE_collaborer(DATA)
 						{source tableau, #GET{boutons}}
-						{cle=outils_collaboratifs}><BOUCLE_collaborersous(DATA){source tableau, #SOUSMENU}>[<li class="bouton"><a
+						{cle=outils_collaboratifs}><BOUCLE_collaborersous(DATA){source tableau, #SOUSMENU}>[<li class="rapides__item"><a
 							href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
 							title="[(#VALEUR{libelle}|_T|attribut_html)]"
 							class="bando2_#CLE"><span>(#VALEUR{libelle}|_T)</span></a></li>]</BOUCLE_collaborersous></BOUCLE_collaborer>

prive/themes/spip/bando.css.html

@@ -96,11 +96,11 @@
 
 #bando_outils ul.creer {float:#ENV{left};}
 #bando_outils ul.collaborer {float:#ENV{left};margin-#ENV{right}:20px;}
-#bando_outils ul.rapides li.bouton{ float:#ENV{left}; }
-#bando_outils ul.rapides li.bouton a{ display:block; padding:2px;background-position:center;background-repeat:no-repeat;background-size: 16px;}
-#bando_outils ul.rapides li.bouton a span { visibility:hidden;display:block;height:24px;width:24px;overflow:hidden; }
-#bando_outils ul.rapides li.bouton a:hover, #bando_outils ul.rapides li.bouton a:focus{background-color:#[(#ENV{claire}|couleur_eclaircir)];}
-#bando_outils ul.rapides li.bouton{ margin-top:0px;}
+#bando_outils ul.rapides li.rapides__item{ float:#ENV{left}; }
+#bando_outils ul.rapides li.rapides__item a{ display:block; padding:2px;background-position:center;background-repeat:no-repeat;background-size: 16px;}
+#bando_outils ul.rapides li.rapides__item a span { visibility:hidden;display:block;height:24px;width:24px;overflow:hidden; }
+#bando_outils ul.rapides li.rapides__item a:hover, #bando_outils ul.rapides li.rapides__item a:focus{background-color:#[(#ENV{claire}|couleur_eclaircir)];}
+#bando_outils ul.rapides li.rapides__item{ margin-top:0px;}
 
 #bando_outils #rapides {float:#ENV{right};}
 #bando_outils #rapides .formulaire_recherche {margin:3px 0;clear:none;}

prive/themes/spip/boutons.css.html

+[(#REM)
+
+	Ce squelette définit les styles des boutons de l'espace privé.
+
+	- Liens boutons : <a class="bouton">
+	- Boutons d'action : \#BOUTON_ACTION
+	- Boutons de formulaires : <input class="submit"> et <button>
+
+	Organisation du fichier :
+
+	1. Base commune à tous les boutons
+	2. Variantes génériques
+	3. Variantes icônes
+	4. Liens boutons
+	5. Boutons de formulaires
+	6. Boutons d'action
+	7. Groupes de boutons
+
+<style>]
+#CACHE{3600*100,cache-client}
+#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
+#HTTP_HEADER{Vary: Accept-Encoding}
+
+#SET{couleurs, #ARRAY{
+	claire,     ##ENV{claire}|couleur_luminance{0.05}|couleur_saturation{0.33, strict},
+	foncee,     #ENV{foncee}|couleur_luminance{0.55},
+	foncee_max, #ENV{foncee}|couleur_luminance{0.75},
+}}
+
+[(#REM) Tailles et valeurs associées ]
+#SET{paddings, #ARRAY{
+	16, #LISTE{0.5em, 1.25em},
+	24, #LISTE{0.5em, 1.25em},
+	32, #LISTE{0.5em, 1.25em},
+}}
+#SET{font-sizes, #ARRAY{
+	16, 0.85em,
+	24, 1em,
+	32, 1.15em,
+}}
+#SET{heights, #ARRAY{
+	16, calc\(\(#GET{paddings/16/0} * 2\) + 16px + 2px\),
+	24, calc\(\(#GET{paddings/24/0} * 2\) + 24px + 2px\),
+	32, calc\(\(#GET{paddings/32/0} * 2\) + 32px + 2px\),
+}}
+#SET{tailles, #ARRAY{
+	16, #ARRAY{font-size, #GET{font-sizes/16}, height, #GET{heights/16}, padding, #GET{paddings/16}},
+	24, #ARRAY{font-size, #GET{font-sizes/24}, height, #GET{heights/24}, padding, #GET{paddings/24}},
+	32, #ARRAY{font-size, #GET{font-sizes/32}, height, #GET{heights/32}, padding, #GET{paddings/32}},
+}}
+
+/**
+ * ==================================
+ * 1. Base commune à tous les boutons
+ * ==================================
+ * Fond gris clair, police, alignement.
+ */
+
+.bouton,
+.bouton_action_post,
+.formulaire_spip input.submit,
+.formulaire_spip button {
+	border-radius: 0.33em;
+	text-decoration: none;
+	margin-bottom: 0.25em;
+	vertical-align: middle;
+}
+.bouton,
+.bouton_action_post .submit,
+.formulaire_spip input.submit,
+.formulaire_spip button {
+	position: relative;
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box; /* Ignorer le padding pour les dimensions */
+	display: -webkit-inline-box;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+	-webkit-box-pack: center;
+	    -ms-flex-pack: center;
+	  justify-content: center;
+	-webkit-box-align: center;
+	   -ms-flex-align: center;
+	      align-items: center;
+	vertical-align: middle; /* Répété juste pour .bouton_action_post */
+	text-align: center;
+	min-height: [(#GET{tailles/16/height})];
+	padding: [(#GET{tailles/16/padding}|implode{' '})];
+	border: 1px solid transparent; /* Garder les mêmes dimensions que ceux avec bordure */
+	background-color: #GET{couleurs/claire};
+	/* background-color: hsla(0, 0%, 0%, 0.08); */
+	color: #666;
+	font-family: inherit;
+	font-weight: bold;
+	font-size: [(#GET{tailles/16/font-size})];
+	line-height: 1;
+	transition: all 0.2s, transform 0.05s;
+}
+/* Fix form dans colonne */
+.lat .formulaire_spip input.submit {
+	padding: [(#GET{tailles/16/padding}|implode{' '})]; /* Obligé de dupliquer la règle */
+}
+
+/* Survol, focus & active : fond très foncé */
+.bouton:hover,
+.bouton:focus,
+.bouton_action_post .submit:hover,
+.bouton_action_post .submit:focus,
+.formulaire_spip input.submit:hover,
+.formulaire_spip input.submit:focus,
+.formulaire_spip button:hover,
+.formulaire_spip button:focus {
+	background: [#(#GET{couleurs/foncee})]; /* background tout court pour surcharger image éventuelle */
+	color: white;
+	-webkit-box-shadow: 0 0 0.75em [ #(#ENV{claire}|couleur_luminance{0.15}|couleur_saturation{1, strict})];
+	        box-shadow: 0 0 0.75em [ #(#ENV{claire}|couleur_luminance{0.15}|couleur_saturation{1, strict})];
+	text-decoration: none;
+}
+.bouton:active,
+.bouton_action_post .submit:active,
+.formulaire_spip input.submit:active,
+.formulaire_spip button:active {
+	background: #[(#GET{couleurs/foncee_max})]; /* background tout court pour surcharger image éventuelle */
+	color: white;
+	-webkit-transform: translateY(0.1em);
+	    -ms-transform: translateY(0.1em);
+	        transform: translateY(0.1em);
+}
+
+/* Image-icône éventuelle */
+.bouton .icone-image,
+.bouton_action_post .submit .icone-image,
+.formulaire_spip button .icone-image {
+	margin-#ENV{right}: 0.5em;
+}
+
+
+/**
+ * ================================
+ * 2. Variantes génériques communes
+ * ================================
+ * Nb : on fait en sorte de garder les couleurs de base pour le survol et cie.
+ */
+
+/* Variante principal : boutons mis en avant, fond de couleur du thème */
+.bouton.principal:not(:hover):not(:focus):not(:active),
+.bouton_action_post.principal .submit:not(:hover):not(:focus):not(:active),
+.formulaire_spip input.submit.principal:not(:hover):not(:focus):not(:active),
+.formulaire_spip button.principal:not(:hover):not(:focus):not(:active) {
+	background-color: #ENV{foncee};
+	color: white;
+}
+
+/* Variante secondaire : boutons mis en retrait, juste une bordure */
+.bouton.secondaire:not(:hover):not(:focus):not(:active),
+.bouton_action_post.secondaire .submit:not(:hover):not(:focus):not(:active),
+.formulaire_spip input.submit.secondaire:not(:hover):not(:focus):not(:active),
+.formulaire_spip button.secondaire:not(:hover):not(:focus):not(:active) {
+	background: transparent;
+	border-color: #ENV{claire};
+}
+.bouton.secondaire:hover,
+.bouton.secondaire:focus,
+.bouton_action_post.secondaire .submit:hover,
+.bouton_action_post.secondaire .submit:focus,
+.formulaire_spip input.submit.secondaire:hover,
+.formulaire_spip input.submit.secondaire:focus,
+.formulaire_spip button.secondaire:hover,
+.formulaire_spip button.secondaire:focus {
+	border-color: #GET{couleurs/foncee_max}; /* Idem fond */
+}
+.bouton.secondaire:active,
+.bouton_action_post.secondaire .submit:active,
+.formulaire_spip input.submit.secondaire:active,
+.formulaire_spip button.secondaire:active {
+	border-color: #GET{couleurs/foncee_max}; /* Idem fond */
+}
+
+/* Variante link : boutons affichés comme un lien */
+.bouton.link,
+.bouton_action_post.link .submit,
+.formulaire_spip input.submit.link,
+.formulaire_spip button.link {
+	background-color: transparent;
+	padding-left: 0; /* garder une marge verticale */
+	padding-right: 0; /* garder une marge verticale */
+}
+.bouton.link:hover,
+.bouton.link:focus,
+.bouton.link:active,
+.bouton_action_post.link .submit:hover,
+.bouton_action_post.link .submit:focus,
+.bouton_action_post.link .submit:active,
+.formulaire_spip input.submit.link:hover,
+.formulaire_spip input.submit.link:focus,
+.formulaire_spip input.submit.link:active,
+.formulaire_spip button.link:hover,
+.formulaire_spip button.link:focus,
+.formulaire_spip button.link:active {
+	background-color: transparent;
+	color: #ENV{foncee};
+	-webkit-box-shadow: none;
+	        box-shadow: none;
+}
+
+/* Variante bloc : pleine largeur */
+.bouton.bloc,
+.formulaire_spip input.submit.bloc,
+.formulaire_spip button.bloc {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	width: 100%;
+}
+.bouton_action_post.bloc,
+.bouton_action_post.bloc div {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+.bouton_action_post.bloc div,
+.bouton_action_post.bloc .submit {
+	-webkit-box-flex: 1;
+	        -ms-flex: 1 1 auto;
+	            flex: 1 1 auto;
+}
+
+/* Variantes alignements : boutons flottants à gauche ou à droite */
+.bouton.right,
+.bouton_action_post.right,
+.formulaire_spip input.submit.right,
+.formulaire_spip button.right {
+	float: #ENV{right};
+}
+.bouton.left,
+.bouton_action_post.left,
+.formulaire_spip input.submit.left,
+.formulaire_spip button.left {
+	float: #ENV{left};
+}
+
+/* Variante désactivé : boutons non cliquables */
+.bouton.desactive,
+.bouton_action_post.desactive,
+.formulaire_spip input.submit.desactive,
+.formulaire_spip button.desactive {
+	opacity: 0.8;
+	-webkit-filter: grayscale(100%);
+	        filter: grayscale(100%);
+	pointer-events: none;
+}
+
+/* Variante danger (voir aussi dans icons.css) */
+.bouton.danger,
+.bouton_action_post.danger .submit,
+.formulaire_spip input.submit.danger,
+.formulaire_spip button.danger {
+	background-color: transparent !important;
+	background-image: url(#CHEMIN_IMAGE{rayures-sup.svg}) !important;
+	color: #222 !important;
+	text-shadow: 0 0 0.25em white, 0 0 0.5em white, 0 0 1em white; /* Lisibilité */
+}
+.bouton.danger:hover,
+.bouton.danger:focus,
+.bouton_action_post.danger .submit:hover,
+.bouton_action_post.danger .submit:focus,
+.formulaire_spip input.submit.danger:hover,
+.formulaire_spip input.submit.danger:focus,
+.formulaire_spip button.danger:hover,
+.formulaire_spip button.danger:focus {
+	-webkit-box-shadow: none;
+	        box-shadow: none;
+	color: red !important;
+}
+
+/* Variante sans icône (préférence utilisateur) */
+.icones_texte .bouton:before,
+.icones_texte .bouton_action_post .submit:before,
+.icones_texte .formulaire_spip button:before,
+.icones_texte .icone-image {
+	display: none !important;
+}
+.icones_texte .formulaire_spip input.submit:not(.danger) {
+	background-image: none !important;
+	padding-left: #GET{tailles/16/padding/1} !important; /* Todo autres tailles ? */
+}
+
+/* Variantes tailles */
+ <BOUCLE_icones_tailles(DATA) {source table, #GET{tailles}}>
+.bouton.s#CLE,
+.bouton_action_post.s#CLE .submit,
+.formulaire_spip input.submit.s#CLE,
+.formulaire_spip button.s#CLE {
+	font-size: [(#VALEUR{fontsize})];
+	min-height: [(#VALEUR{height})]; /* Pour hauteur identique avec ou sans icone */
+	padding: [(#VALEUR{padding}|implode{' '})];
+}
+.bouton.s#CLE:before,
+.bouton_action_post.s#CLE .submit:before,
+.formulaire_spip button.s#CLE:before {
+	width: [(#CLE)]px !important; /* Obligé important */
+	height: [(#CLE)]px !important;
+}
+.formulaire_spip input.submit.s#CLE {
+	background-size: [(#CLE)]px;
+	padding-#ENV{left}: [(#VALEUR{padding/1})];
+}
+</BOUCLE_icones_tailles>
+
+
+/**
+ * ===================
+ * 3. Variantes images
+ * ===================
+ * Des images/icônes pour des boutons avec des fonctions précises : ajouter, supprimer, etc.
+ * Certaines règles sont mutualisées avec icons.css
+ * On peut aussi mettre manuellement une icône dans le HTML : <img class="icone-image">
+ */
+
+#SET{icones, #LISTE{add, del, config, edit, import, export, new, fermer, ouvrir, ok}}
+/* Styles communs */
+<BOUCLE_icones_common(DATA) {source table, #GET{icones}} {","}>
+.bouton.#VALEUR:before,
+.bouton_action_post.#VALEUR .submit:before,
+.formulaire_spip button.#VALEUR:before
+</BOUCLE_icones_common>
+{
+	content: '';
+	display: block;
+	width: 16px;
+	height: 16px;
+	margin-#ENV{right}: 0.5em;
+	background-size: 100%;
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+<BOUCLE_icones_submit(DATA) {source table, #GET{icones}} {","}>
+.formulaire_spip input.submit.#VALEUR
+</BOUCLE_icones_submit>
+{
+	padding-#ENV{left}: calc(16px + 1.5em); /* Todo autres tailles */
+	background-size: 16px 16px;
+	background-position: center left 1em;
+	background-repeat: no-repeat;
+}
+/* Images */
+<BOUCLE_icones_images(DATA) {source table, #GET{icones}}>
+.icone .icone-fonction-#VALEUR:after,
+.bouton.#VALEUR:before,
+.bouton_action_post.#VALEUR .submit:before,
+.formulaire_spip input.submit.#VALEUR,
+.formulaire_spip button.#VALEUR:before {
+	background-image: url(#CHEMIN_IMAGE{#VALEUR-xx.svg});
+}
+/* Au survol on met une variante mono de couleur claire */
+.bouton.#VALEUR:hover:before,
+.bouton.#VALEUR:focus:before,
+.bouton_action_post.#VALEUR .submit:hover:before,
+.bouton_action_post.#VALEUR .submit:focus:before,
+.formulaire_spip input.submit.#VALEUR:hover,
+.formulaire_spip input.submit.#VALEUR:focus,
+.formulaire_spip button.#VALEUR:hover:before,
+.formulaire_spip button.#VALEUR:focus:before  {
+	background-image: url(#CHEMIN_IMAGE{#VALEUR-inverse-xx.svg});
+}
+</BOUCLE_icones_images>
+[(#REM)/**/]
+
+
+/**
+ * ================
+ * 4. Liens boutons
+ * ================
+ *
+ * Markup :
+ * <a class="bouton [variante]">…</a>
+ */
+.bouton {}
+
+
+/**
+ * =========================
+ * 5. Boutons de formulaires
+ * =========================
+ *
+ * Markup :
+ *
+ * <form class="formulaire_spip">
+ *   <input type="submit" class="submit [variante]" value="Valider" />
+ *   <button type="submit" class="[variante]">Valider</button>
+ * </form>
+ */
+
+/* Couleur différente pour les boutons de base et les boutons d'actions dans un pied de boîte */
+.formulaire_spip input.submit,
+.formulaire_spip button,
+.act .bouton_action_post .submit:not(:hover):not(:focus) {
+	background-color: #ENV{claire};
+	color: #[(#ENV{foncee}|couleur_luminance{0.85})];
+	color: hsla(0, 0%, 0%, 0.9);
+	margin-bottom: 0;
+}
+
+
+/**
+ * ===================
+ * 6. Boutons d'action
+ * ===================
+ *
+ * Markup :
+ *
+ * <form class="bouton_action_post [variante]">
+ *   <div><button class="submit">Action</button></div>
+ * </form>
+ */
+
+.bouton_action_post {
+	display: -webkit-inline-box;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+}
+.bouton_action_post div {
+	border-radius: inherit;
+	display: inherit;
+}
+.bouton_action_post .submit {
+	border-radius: inherit;
+}
+/* Dans le footer d'une boîte */
+.box .ft .bouton_action_post { 
+	margin-bottom: 0;
+}
+
+/* Fix bouton d'action + classe .icone : combinaison obsolète à ne plus utiliser */
+.bouton_action_post.icone {
+	display: -webkit-inline-box !important;
+	display: -ms-inline-flexbox !important;
+	display: inline-flex !important;
+	padding: 0 !important;
+	background: none !important;
+}
+
+/**
+ * =====================
+ * 7. Groupes de boutons
+ * =====================
+ *
+ * Markup :
+ *
+ * <div class="groupe-boutons">
+ *   <a class="bouton">…</a>
+ *   <a class="bouton">…</a>
+ * </div>
+ */
+
+.groupe-boutons {
+	display: -webkit-inline-box;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+	   -webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	        -ms-flex-flow: row nowrap;
+	            flex-flow: row nowrap;
+}
+/* Si boutons de formulaire ou pied d'une boîte : bloc et alignement */
+.groupe-boutons.act,
+.groupe-boutons.boutons {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: end;
+	   -ms-flex-pack: end;
+	 justify-content: flex-end;
+}
+.groupe-boutons .bouton,
+.groupe-boutons .bouton_action_post,
+.groupe-boutons input.submit,
+.groupe-boutons button {
+	-webkit-box-flex: 0;
+	        -ms-flex: 0 1 auto;
+	            flex: 0 1 auto;
+}
+.groupe-boutons:not(.vertical) .bouton:not(:last-child),
+.groupe-boutons:not(.vertical) .bouton_action_post:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit:not(:last-child),
+.formulaire_spip .groupe-boutons:not(.vertical) button:not(:last-child) {
+	border-top-#ENV{right}-radius: 0;
+	border-bottom-#ENV{right}-radius: 0;
+}
+.groupe-boutons:not(.vertical) .bouton:not(:first-child),
+.groupe-boutons:not(.vertical) .bouton_action_post:not(:first-child) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit:not(:first-child),
+.formulaire_spip .groupe-boutons:not(.vertical) button:not(:first-child) {
+	border-top-#ENV{left}-radius: 0;
+	border-bottom-#ENV{left}-radius: 0;
+}
+.groupe-boutons:not(.vertical) .bouton:not(:first-child):not(.secondaire),
+.groupe-boutons:not(.vertical) .bouton_action_post:not(:first-child):not(.secondaire) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit:not(:first-child):not(.secondaire),
+.formulaire_spip .groupe-boutons:not(.vertical) button:not(:first-child):not(.secondaire) {
+	border-#ENV{left}: 1px solid hsla(0, 0%, 0%, 0.15);
+	margin-left: -1px; /* bordure gauche par dessus le bouton précédent */
+}
+.groupe-boutons:not(.vertical) .bouton.secondaire:not(:last-child),
+.groupe-boutons:not(.vertical) .bouton_action_post.secondaire:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit.secondaire:not(:last-child),
+.formulaire_spip .groupe-boutons:not(.vertical) button.secondaire:not(:last-child) {
+	border-#ENV{right}: 0;
+}
+
+/* variante vertical */
+.groupe-boutons.vertical {
+	   -webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	        -ms-flex-flow: column wrap;
+	            flex-flow: column wrap;
+}
+.groupe-boutons.vertical .bouton:not(:last-child),
+.groupe-boutons.vertical .bouton_action_post:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit:not(:last-child),
+.formulaire_spip .groupe-boutons.vertical button.submit:not(:last-child) {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	margin-bottom: 0;
+}
+.groupe-boutons.vertical .bouton:not(:first-child),
+.groupe-boutons.vertical .bouton_action_post:not(:first-child) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit:not(:first-child),
+.formulaire_spip .groupe-boutons.vertical button:not(:first-child) {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+.groupe-boutons.vertical .bouton:not(:first-child):not(.secondaire),
+.groupe-boutons.vertical .bouton_action_post:not(:first-child):not(.secondaire) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit:not(:first-child):not(.secondaire),
+.formulaire_spip .groupe-boutons.vertical button:not(:first-child):not(.secondaire) {
+	border-top: 1px solid hsla(0, 0%, 0%, 0.15);
+	margin-top: -1px; /* bordure haut par dessus le bouton précédent */
+}
+.groupe-boutons.vertical .bouton.secondaire:not(:last-child),
+.groupe-boutons.vertical .bouton_action_post.secondaire:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit.secondaire:not(:last-child),
+.formulaire_spip .groupe-boutons.vertical button.secondaire:not(:last-child) {
+	border-bottom: 0;
+}
+
+/* Variante bloc */
+.groupe-boutons.bloc {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+.groupe-boutons.bloc .bouton,
+.groupe-boutons.bloc .bouton_action_post,
+.groupe-boutons.bloc .bouton_action_post div ,
+.groupe-boutons.bloc .bouton_action_post .submit,
+.groupe-boutons.bloc input.submit,
+.groupe-boutons.bloc button {
+	-webkit-box-flex: 1;
+	        -ms-flex: 1 1 auto;
+	            flex: 1 1 auto;
+}
+
+/* Dans un formulaire : ajustements */
+.formulaire_spip .boutons.groupe-boutons {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex; /* pleine largeur */
+	-webkit-box-pack: end;
+	   -ms-flex-pack: end;
+	 justify-content: flex-end;
+}
\ No newline at end of file

prive/themes/spip/forms.css.html

 #CACHE{0}
 [(#REM)
 
-	Ce squelette definit les styles de l'espace prive
+	Ce squelette definit les styles des formulaires de l'espace prive
+
+	Les styles des boutons sont dans boutons.css.html
 
 	Note: l'entete "Vary:" sert a repousser l'entete par
 	defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
@@ -157,7 +159,7 @@ h3.titrem {position:relative;}
 /* Remarques importantes */
 .formulaire_spip .attention { display: block; margin-bottom: #ENV{margin-bottom}; font-weight: normal; color: #514721; background-color:#FFF6BF; padding: 5px;}
 
-
+/* Boutons (voir aussi dans boutons.css) */
 .formulaire_spip input.submit,
 .formulaire_spip input.reset,
 .formulaire_spip input.button {
@@ -167,7 +169,6 @@ h3.titrem {position:relative;}
 /* icone d'aide */
 img.aide {padding: 2px !important;box-sizing: border-box;}
 
-
 /* Fieldset */
 .formulaire_spip .editer.fieldset {padding:0;}
 .formulaire_spip fieldset {border: 0;width:auto;border-top: 1px solid #ccc;margin-top: [(#ENV{margin-bottom}|strdiv{4})em];padding-bottom:[(#ENV{margin-bottom}|strdiv{4})em];}
@@ -177,13 +178,22 @@ img.aide {padding: 2px !important;box-sizing: border-box;}
 
 .formulaire_spip .editer fieldset label {color: #444444;}
 
-/* boutons */
+/**
+ * Conteneur des boutons
+ * Les boutons eux-mêmes sont dans boutons.css.html
+ */
 .formulaire_spip .boutons { margin-bottom:0;clear:both;padding: [(#ENV{margin-bottom}|strdiv{2})em] 10px;text-align: #ENV{right};background-color: #[(#ENV{claire}|couleur_eclaircir)];border-top: 1px solid [(#ENV{claire})];}
 
 #navigation .formulaire_spip .boutons,
 #extra .formulaire_spip .boutons { padding: [(#ENV{margin-bottom}|strdiv{4})em] 5px}
 
 .formulaire_spip .boutons .image_loading {float:none;}
+.formulaire_spip input,
+.formulaire_spip button,
+.bouton_action_post .submit {
+	cursor: pointer;
+}
+
 /* Bouton de validation */
 input[type="file"] {border: none;background-color: transparent;}
 /* Pour IE, qui grossit le bouton submit */
@@ -225,7 +235,13 @@ input[type="submit"],input[type="reset"] {font-size: inherit;}
 }
 
 
-/* Formulaires particuliers ----------------------------------------------------------------*/
+/**
+ * ========================
+ * Formulaires particuliers
+ * ========================
+ */
+
+
 .formulaire_editer_article .editer.editer_liens_sites {border-bottom: 1px solid #ccc;}
 
 /* edition d'un auteur */
@@ -313,14 +329,6 @@ input[type="submit"],input[type="reset"] {font-size: inherit;}
 .formulaire_traduire .liste-objets .first_row {display:none;}
 .formulaire_traduire .supprimer_trad {float:#ENV{right};}
 
-/* les boutons action */
-form.bouton_action_post, form.bouton_action_post div {display:inline;}
-form.bouton_action_post.link button.submit, .formulaire_spip .boutons input.link,.formulaire_spip button.link {margin:0;font-weight:normal;}
-
-.formulaire_spip button {cursor:pointer;}
-form.bouton_action_post.link button.submit, .formulaire_spip .boutons input.link,.formulaire_spip button.link {background:none;border:0;cursor:pointer;padding:0 0 1px;color:#444;}
-form.bouton_action_post.link button.submit:hover, .formulaire_spip .boutons input.link:hover,.formulaire_spip button.link:hover {border-bottom:1px solid;padding:0;}
-
 /* formulaire_editer_logo */
 .formulaire_editer_logo .titrem,.formulaire_editer_logo .ajouter_survol {text-transform: uppercase;}
 /* Date picker : passer par dessus des icones et du menu haut */

prive/themes/spip/images/add-inverse-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0A32 32 0 0 0 0 32a32 32 0 0 0 32 32 32 32 0 0 0 32-32A32 32 0 0 0 32 0zm-3.402 8H35.1c.903 0 1.67.315 2.302.947.633.633.95 1.402.95 2.305v14.092h14.091c.904 0 1.673.316 2.305.949.633.632.947 1.4.947 2.303v6.506c0 .903-.315 1.67-.947 2.302-.632.632-1.4.948-2.305.948H38.352v14.093c0 .904-.316 1.67-.948 2.303a3.14 3.14 0 0 1-2.304.95h-6.504c-.904 0-1.67-.318-2.303-.95a3.136 3.136 0 0 1-.95-2.303V38.352H11.253c-.904 0-1.672-.316-2.305-.948-.632-.633-.947-1.4-.947-2.302v-6.506c0-.903.315-1.671.947-2.303a3.142 3.142 0 0 1 2.305-.95h14.094V11.253c0-.904.316-1.672.949-2.305.632-.632 1.4-.947 2.303-.947z" fill="#fff"/></svg>
\ No newline at end of file

prive/themes/spip/images/add-xx.svg

-<svg version="1.1"
-		 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-		 width="64"
-		 height="64"
-		 viewBox="0 0 64 64">
-	<g transform="translate(32 32) scale(0.5)">
-		<circle fill="#4caf50" cx="32" cy="32" r="32" />
-		<g transform="translate(8 8) scale(0.75)">
-			<path transform="scale(0.1582)" fill="#fff" d="M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811V27.406c0-7.611-2.666-14.084-7.994-19.414
-				C242.488,2.666,236.02,0,228.398,0h-54.812c-7.612,0-14.084,2.663-19.414,7.993c-5.33,5.33-7.994,11.803-7.994,19.414v118.775
-				H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589v54.819c0,7.618,2.662,14.086,7.992,19.411
-				c5.33,5.332,11.803,7.994,19.414,7.994h118.771V374.59c0,7.611,2.664,14.089,7.994,19.417c5.33,5.325,11.802,7.987,19.414,7.987
-				h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77
-				c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411v-54.819C401.991,165.973,399.332,159.502,394,154.175z"
-				/>
-		</g>
-	</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g stroke-width=".5"><circle fill="#4caf50" cx="32" cy="32" r="32"/><path fill="#fff" d="M54.748 26.293c-.632-.633-1.4-.949-2.304-.949H38.352V11.252c0-.903-.316-1.671-.949-2.304C36.771 8.316 36.003 8 35.1 8h-6.503c-.903 0-1.671.316-2.303.948-.633.633-.949 1.4-.949 2.304v14.092H11.252c-.903 0-1.671.317-2.304.949-.632.632-.948 1.4-.948 2.303v6.505c0 .903.316 1.67.948 2.303.633.632 1.4.948 2.304.948h14.092v14.093c0 .903.316 1.672.948 2.304.633.632 1.4.948 2.304.948H35.1c.904 0 1.671-.316 2.304-.948.632-.633.948-1.4.948-2.304V38.352h14.092c.904 0 1.672-.316 2.304-.948.632-.632.948-1.4.948-2.303v-6.505c0-.903-.315-1.671-.948-2.303z"/></g></svg>
\ No newline at end of file

prive/themes/spip/images/config-inverse-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 340.274 340.274"><path fill="#fff" d="M293.63 124.392l-5.795-13.739c19.846-44.856 18.53-46.189 14.676-50.08l-25.353-24.77-2.516-2.12h-2.937c-1.55 0-6.173 0-44.712 17.48l-14.184-5.719C194.477 0 192.597 0 187.229 0h-35.766c-5.362 0-7.446-.006-24.448 45.606l-14.123 5.734c-26.044-10.997-41.318-16.564-45.44-16.564l-3.38.105-27.27 26.737c-4.139 3.891-5.583 5.263 15.401 49.425l-5.774 13.691C0 142.684 0 144.424 0 149.916v35.069c0 5.5 0 7.44 46.585 24.127l5.773 13.667c-19.843 44.832-18.51 46.178-14.655 50.032l25.353 24.8 2.522 2.168h2.951c1.525 0 6.092 0 44.685-17.516l14.16 5.758c18.334 45.438 20.217 45.427 25.597 45.427h35.772c5.47 0 7.41 0 24.463-45.59l14.195-5.74c26.014 11 41.253 16.586 45.349 16.586l3.404-.096 27.479-26.901c3.909-3.945 5.278-5.31-15.59-49.288l5.735-13.702c46.496-17.967 46.496-19.853 46.496-25.221v-35.03c-.005-5.519-.005-7.446-46.644-24.074zM170.128 225.061c-32.798 0-59.504-26.187-59.504-58.365 0-32.153 26.707-58.315 59.504-58.315 32.78 0 59.43 26.168 59.43 58.315-.005 32.178-26.655 58.365-59.43 58.365z"/></svg>
\ No newline at end of file

prive/themes/spip/images/config-xx.svg

-<svg version="1.1"
-		 xmlns="http://www.w3.org/2000/svg"
-		 xmlns:xlink="http://www.w3.org/1999/xlink"
-		 width="64"
-		 height="64"
-		 viewBox="0 0 340.274 340.274">
-	<g transform="translate(170.137 170.137) scale(0.5)">
-		<path fill="#777777" d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937
-			c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765
-			c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032
-			c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127
-			l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516
-			l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74
-			c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702
-			c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474
-			c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315
-			C229.552,202.287,202.902,228.474,170.128,228.474z"/>
-	</g>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   viewBox="0 0 340.274 340.274"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="config-xx.svg"
+   inkscape:version="1.0.1 (1.0.1+r73)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="10.171875"
+     inkscape:cx="32"
+     inkscape:cy="32"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="#777"
+     d="M293.63 124.392l-5.795-13.739c19.846-44.856 18.53-46.189 14.676-50.08l-25.353-24.77-2.516-2.12h-2.937c-1.55 0-6.173 0-44.712 17.48l-14.184-5.719C194.477 0 192.597 0 187.229 0h-35.766c-5.362 0-7.446-.006-24.448 45.606l-14.123 5.734c-26.044-10.997-41.318-16.564-45.44-16.564l-3.38.105-27.27 26.737c-4.139 3.891-5.583 5.263 15.401 49.425l-5.774 13.691C0 142.684 0 144.424 0 149.916v35.069c0 5.5 0 7.44 46.585 24.127l5.773 13.667c-19.843 44.832-18.51 46.178-14.655 50.032l25.353 24.8 2.522 2.168h2.951c1.525 0 6.092 0 44.685-17.516l14.16 5.758c18.334 45.438 20.217 45.427 25.597 45.427h35.772c5.47 0 7.41 0 24.463-45.59l14.195-5.74c26.014 11 41.253 16.586 45.349 16.586l3.404-.096 27.479-26.901c3.909-3.945 5.278-5.31-15.59-49.288l5.735-13.702c46.496-17.967 46.496-19.853 46.496-25.221v-35.03c-.005-5.519-.005-7.446-46.644-24.074zM170.128 225.061c-32.798 0-59.504-26.187-59.504-58.365 0-32.153 26.707-58.315 59.504-58.315 32.78 0 59.43 26.168 59.43 58.315-.005 32.178-26.655 58.365-59.43 58.365z"
+     stroke-width=".5"
+     id="path2"
+     style="fill:#444444;fill-opacity:1" />
 </svg>

prive/themes/spip/images/del-inverse-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0A32 32 0 0 0 0 32a32 32 0 0 0 32 32 32 32 0 0 0 32-32A32 32 0 0 0 32 0zM11.271 25.453h41.454c.909 0 1.683.32 2.32.955.636.637.953 1.409.975 2.319v6.544c0 .91-.318 1.683-.954 2.319-.636.636-1.408.955-2.318.955H11.271c-.908 0-1.68-.32-2.318-.955C8.317 36.954 8 36.18 8 35.27v-6.544c0-.91.317-1.682.953-2.319a3.161 3.161 0 0 1 2.318-.955z" fill="#fff"/></svg>
\ No newline at end of file

prive/themes/spip/images/del-xx.svg

-<svg version="1.1"
-		 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-		 x="0px" y="0px"
-		 width="64"
-		 height="64"
-		 viewBox="0 0 64 64">
-	<g transform="translate(32 32) scale(0.5)">
-		<circle cx="32" cy="32" r="32" fill="#E21B1B" />
-		<path transform="translate(8 8) scale(0.1194)" fill="#fff" d="M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811
-		H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589
-		v54.819c0,7.618,2.662,14.086,7.992,19.411c5.33,5.332,11.803,7.994,19.414,7.994h118.771
-		H374.77 c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411
-		v-54.819C401.991,165.973,399.332,159.502,394,154.175z" />
-	</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g stroke-width=".5"><circle cx="32" cy="32" r="32" fill="#e21b1b"/><path fill="#fff" d="M55.044 26.408c-.637-.636-1.41-.954-2.319-.954H11.272c-.908 0-1.681.318-2.318.954-.636.637-.954 1.41-.954 2.319v6.545c0 .91.318 1.682.954 2.318.637.636 1.41.954 2.318.954h41.476c.91 0 1.682-.318 2.318-.954.636-.636.954-1.408.954-2.318v-6.545c-.022-.91-.34-1.682-.976-2.319z"/></g></svg>
\ No newline at end of file

prive/themes/spip/images/edit-inverse-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 179.5 179.5"><path d="M150.33 0c-4.416 0-8.54 1.671-11.597 4.727l-9.723 9.724L165.1 50.539l9.674-9.674c2.617-2.617 4.7-7.145 4.7-10.567.3-4.735-1.51-9.064-4.7-12.254l-7.11-7.11-6.207-6.207C158.646 1.824 154.616 0 150.33 0zm-25.28 18.417L9.953 133.513l36.034 36.04L161.083 54.455l-36.033-36.04zM5.998 137.495l-3.686 25.801-.011-.01L0 179.5l16.215-2.3-.011-.012 25.8-3.686-36.006-36.007z" fill="#fff"/></svg>
\ No newline at end of file

prive/themes/spip/images/edit-xx.svg

-<svg version="1.1"
-		 xmlns="http://www.w3.org/2000/svg"
-		 xmlns:xlink="http://www.w3.org/1999/xlink"
-		 width="64"
-		 height="64"
-		 viewBox="0 0 179.5 179.5">
-	<g transform="translate(71.8 71.8) scale(0.6)">
-		<path fill="#324A5E" d="M42,173.3l-36-36L138.6,4.7c6.3-6.3,16.4-6.3,22.7,0L174.6,18c6.3,6.3,6.3,16.4,0,22.7L42,173.3z"/>
-		<path fill="#FC6F58" d="M174.6,40.7c6.3-6.3,6.3-16.4,0-22.7L161.3,4.7c-6.3-6.3-16.4-6.3-22.7,0l-9.9,9.9l36,36L174.6,40.7z"/>
-		<path fill="#F1543F" d="M174.6,18l-7.1-7.1l-21.3,21.3l18.5,18.5l9.9-9.9C180.9,34.4,180.9,24.2,174.6,18z"/>
-		<rect fill="#2B3B4E" x="7.2" y="89.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -45.0305 96.5264)" width="173.5" height="26.3"/>
-		<polygon fill="#FFDC8D" points="42,173.3 0,179.3 6,137.3 "/>
-		<polygon fill="#FFD15D" points="42,173.3 24,155.3 0,179.3 0,179.3 "/>
-		<polygon fill="#324A5E" points="16.2,177 2.3,163.1 0,179.3 "/>
-		<polygon fill="#2B3B4E" points="0,179.3 0,179.3 16.2,177 9.3,170 "/>
-	</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 179.5 179.5"><g stroke-width=".599"><path fill="#324a5e" d="M42.041 173.494L6.006 137.46l132.73-132.73a16.01 16.01 0 0 1 22.721 0l13.313 13.314a16.01 16.01 0 0 1 0 22.722z"/><path fill="#fc6f58" d="M174.77 40.765a16.01 16.01 0 0 0 0-22.722L161.457 4.73a16.01 16.01 0 0 0-22.722 0l-9.91 9.91 36.036 36.034z"/><path fill="#f1543f" d="M174.77 18.043l-7.107-7.107-21.32 21.32 18.518 18.519 9.91-9.91c6.306-6.406 6.306-16.616 0-22.822z"/><path fill="#2b3b4e" d="M23.298 154.826L146.1 32.024l18.615 18.615L41.913 173.441z"/><path fill="#ffdc8d" d="M6.006 137.459l36.035 36.035L0 179.5z"/><path fill="#ffd15d" d="M24.023 155.477L0 179.5l42.041-6.006z"/><path fill="#324a5e" d="M0 179.5l16.216-2.302-13.914-13.914z"/><path fill="#2b3b4e" d="M16.216 177.198l-6.907-7.007L0 179.5z"/></g></svg>
\ No newline at end of file

prive/themes/spip/images/export-inverse-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M60 13V4H4v56h56v-9" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 32h38" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal" d="M50.525 19.15a2.5 2.5 0 0 0-2.524 2.575v20.55a2.5 2.5 0 0 0 4.212 1.897l11-10.352a2.5 2.5 0 0 0 0-3.64l-11-10.352a2.5 2.5 0 0 0-1.688-.678z" color="#000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="#fff" fill-rule="evenodd"/></svg>
\ No newline at end of file

prive/themes/spip/images/export-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M60 13V4H4v56h56v-9" fill="none" stroke="#444" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 32h38" fill="none" stroke="#444" stroke-width="8" stroke-linecap="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal" d="M50.525 19.15a2.5 2.5 0 0 0-2.524 2.575v20.55a2.5 2.5 0 0 0 4.212 1.897l11-10.352a2.5 2.5 0 0 0 0-3.64l-11-10.352a2.5 2.5 0 0 0-1.688-.678z" color="#000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="#444" fill-rule="evenodd"/></svg>
\ No newline at end of file

prive/themes/spip/images/fermer-inverse-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M31.744.08A31.92 31.92 0 0 0 .08 32 31.92 31.92 0 0 0 32 63.918 31.92 31.92 0 0 0 63.918 32 31.92 31.92 0 0 0 32 .08a31.92 31.92 0 0 0-.256 0zM21.246 14.395c.78 0 1.449.279 2.006.835l8.691 8.692 8.692-8.692a2.732 2.732 0 0 1 2.004-.835c.78 0 1.449.278 2.006.835l4.011 4.01c.558.558.836 1.226.836 2.006 0 .78-.279 1.449-.836 2.006l-8.691 8.691 8.691 8.69c.557.557.836 1.226.836 2.006 0 .78-.279 1.448-.836 2.006l-4.011 4.011a2.73 2.73 0 0 1-2.004.836c-.78 0-1.449-.278-2.006-.836l-8.692-8.691-8.691 8.691a2.736 2.736 0 0 1-2.006.836c-.78 0-1.446-.278-2.004-.836l-4.012-4.011a2.738 2.738 0 0 1-.835-2.006c0-.78.279-1.447.835-2.004l8.692-8.692-8.692-8.691a2.736 2.736 0 0 1-.835-2.006c0-.78.278-1.446.835-2.004l4.012-4.012a2.731 2.731 0 0 1 2.004-.835z" fill="#fff"/></svg>
\ No newline at end of file

prive/themes/spip/images/import-inverse-xx.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M60 17V4H4v56h56V47" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="square" stroke-linejoin="round"/><path d="M60 32H22" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal" d="M29.475 19.15a-2.5 2.5 0 0 1 2.524 2.575v20.55a-2.5 2.5 0 0 1-4.212 1.897l-11-10.352a-2.5 2.5 0 0 1 0-3.64l11-10.352a-2.5 2.5 0 0 1 1.688-.678z" color="#000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="#fefefe" fill-rule="evenodd"/></svg>
\ No newline at end of file