[(#REM)

	Ce squelette définit les styles des boutons de l'espace privé.

	- Liens boutons : <a class="btn">
	- Boutons d'action : \#BOUTON_ACTION
	- Boutons de formulaires : <input class="submit"> et <button>

	Organisation du fichier :

	0. Variables
	1. Base commune à tous les boutons
	2. Variantes génériques
	4. Liens boutons
	5. Boutons de formulaires
	6. Boutons d'action
	7. Groupes de boutons
	8. Boutons avec icônes
	9. Rustines, dépéractions

]#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}
[(#REM)<style>]

/**
 * ============
 * 0. Variables
 * ============
 */

:root {
	/* couleurs partagées */
	--spip-btn-color-white:                var(--spip-color-white);
	--spip-btn-color-black:                var(--spip-color-gray-darker);
	--spip-btn-color-border-accent:       hsla(0, 0%, 0%, 0.2);
	--spip-btn-color-focus:                hsla(var(--spip-color-theme--h), calc(var(--spip-color-theme--s) * 3), var(--spip-color-theme--l), 0.5);
	/* couleurs bouton par défaut */
	--spip-btn-color-main-bg:              hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.9));
	--spip-btn-color-main-border:          var(--spip-btn-color-main-bg);
	--spip-btn-color-main-text:            var(--spip-btn-color-white);
	--spip-btn-color-main-hover-bg:        hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.75));
	--spip-btn-color-main-hover-border:    var(--spip-btn-color-main-hover-bg);
	--spip-btn-color-main-hover-text:      var(--spip-btn-color-main-text);
	--spip-btn-color-main-active-bg:       hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.6));
	--spip-btn-color-main-active-border:   var(--spip-btn-color-main-active-bg);
	--spip-btn-color-main-active-text:     var(--spip-btn-color-main-text);
	/* couleurs bouton secondaire */
	--spip-btn-color-second-bg:            transparent;
	--spip-btn-color-second-border:        hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.95));
	--spip-btn-color-second-text:          hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.85));
	--spip-btn-color-second-hover-bg:      var(--spip-btn-color-main-hover-bg);
	--spip-btn-color-second-hover-border:  var(--spip-btn-color-main-hover-border);
	--spip-btn-color-second-hover-text:    var(--spip-btn-color-main-hover-text);
	--spip-btn-color-second-active-bg:     var(--spip-btn-color-main-active-bg);
	--spip-btn-color-second-active-border: var(--spip-btn-color-main-active-border);
	--spip-btn-color-second-active-text:   var(--spip-btn-color-main-active-text);
	/* couleurs bouton lien */
	--spip-btn-color-link-text:            var(--spip-btn-color-black);
	--spip-btn-color-link-hover-text:      var(--spip-color-theme-dark);
	/* couleurs boutons inverse */
	--spip-btn-color-inverse-bg:           var(--spip-btn-color-white);
	--spip-btn-color-inverse-border:       var(--spip-btn-color-inverse-bg);
	--spip-btn-color-inverse-text:         var(--spip-btn-color-black);
	--spip-btn-color-inverse-hover-bg:     var(--spip-color-gray-lightest);
	--spip-btn-color-inverse-hover-border: var(--spip-btn-color-inverse-hover-bg);
	--spip-btn-color-inverse-hover-text:   var(--spip-btn-color-inverse-text);
	--spip-btn-color-inverse-active-bg:    var(--spip-color-gray-lighter);
	--spip-btn-color-inverse-active-border:var(--spip-btn-color-inverse-active-bg);
	--spip-btn-color-inverse-active-text:  var(--spip-btn-color-inverse-text);
	/* couleur bouton actif (un seul état) */
	--spip-btn-color-on-bg:                var(--spip-btn-color-main-hover-bg);
	--spip-btn-color-on-border:            var(--spip-btn-color-main-hover-border);
	--spip-btn-color-on-text:              var(--spip-btn-color-main-hover-text);
	/* couleurs boutons inactif */
	--spip-btn-color-off-bg:               var(--spip-color-gray-lighter);
	--spip-btn-color-off-border:           var(--spip-btn-color-off-bg);
	--spip-btn-color-off-text:             var(--spip-btn-color-black);
	--spip-btn-color-off-hover-bg:         var(--spip-color-gray-light);
	--spip-btn-color-off-hover-border:     var(--spip-btn-color-off-hover-bg);
	--spip-btn-color-off-hover-text:       var(--spip-btn-color-off-text);
	--spip-btn-color-off-active-bg:        var(--spip-color-gray);
	--spip-btn-color-off-active-border:    var(--spip-btn-color-off-active-bg);
	--spip-btn-color-off-active-text:      var(--spip-btn-color-off-text);
	/* taille normale */
	--spip-btn-font-size:           1em;
	--spip-btn-padding-x:           1rem;
	--spip-btn-padding-y:           0.5rem;
	--spip-btn-margin:              0.25em;
	--spip-btn-border-radius:       0.25em;
	--spip-btn-gutter:              0.5em;
	/* taille mini */
	--spip-btn-font-size-mini:      0.8em;
	--spip-btn-padding-x-mini:      0.5rem;
	--spip-btn-padding-y-mini:      0.1rem;
	--spip-btn-margin-mini:         var(--spip-btn-margin);
	--spip-btn-border-radius-mini:  var(--spip-btn-border-radius);
	/* taille large */
	--spip-btn-font-size-large:     1.15em;
	--spip-btn-padding-x-large:     1.5rem;
	--spip-btn-padding-y-large:     0.75rem;
	--spip-btn-margin-large:        var(--spip-btn-margin);
	--spip-btn-border-radius-large: 0.33em;
}

/**
 * ==================================
 * 1. Base commune à tous les boutons
 * ==================================
 */

.btn,
input.submit,
input.reset,
button {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	padding: var(--spip-btn-padding-y) var(--spip-btn-padding-x);
	margin-bottom: var(--spip-btn-margin);
	background-color: var(--spip-btn-color-main-bg);
	color: var(--spip-btn-color-main-text);
	border: 1px solid var(--spip-btn-color-main-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	border-radius: var(--spip-btn-border-radius);
	text-decoration: none;
	font-size: var(--spip-btn-font-size);
	font-family: inherit;
	font-weight: 400;
	line-height: var(--spip-line-height);
	user-select: none;
	transition: all 0.1s;
}
a.btn, 
#wysiwyg a.btn, #wysiwyg a.btn:hover, 
input.submit,
input.reset,
button {
	text-decoration: none;
	cursor: pointer;
}

/* Survol */
.btn:hover,
.btn:focus,
input.submit:hover,
input.submit:focus,
input.reset:hover,
input.reset:focus,
button:hover {
	background-color: var(--spip-btn-color-main-hover-bg);
	border-color: var(--spip-btn-color-main-hover-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-main-hover-text);
	text-decoration: none;
	transition: all 0.2s;
}
/* Focus : outline */
.btn:focus,
input.submit:focus,
input.reset:focus,
button:focus {
	box-shadow: 0 0 0 0.2rem var(--spip-btn-color-focus);
}
/* Actif */
.btn:active,
input.submit:active,
input.reset:active,
button:active {
	background-color: var(--spip-btn-color-main-active-bg);
	border-color: var(--spip-btn-color-main-active-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-main-active-text);
}


/**
 * ================================
 * 2. Variantes génériques communes
 * ================================
 */


/**
 * Variante secondaire : boutons mis en retrait, juste une bordure
 */
.btn_secondaire,
input.submit.btn_secondaire,
input.reset.btn_secondaire,
button.btn_secondaire {
	background-color: var(--spip-btn-color-second-bg);
	border-color: var(--spip-btn-color-second-border);
	color: var(--spip-btn-color-second-text);
}
.btn_secondaire:hover,
.btn_secondaire:focus,
input.submit.btn_secondaire:hover,
input.submit.btn_secondaire:focus,
input.reset.btn_secondaire:hover,
input.reset.btn_secondaire:focus,
button.btn_secondaire:hover,
button.btn_secondaire:focus {
	background-color: var(--spip-btn-color-second-hover-bg);
	border-color: var(--spip-btn-color-second-hover-border);
	color: var(--spip-btn-color-second-hover-text);
}
.btn_secondaire:active,
input.submit.btn_secondaire:active,
input.reset.btn_secondaire:active,
button.btn_secondaire:active {
	background-color: var(--spip-btn-color-second-active-bg);
	border-color: var(--spip-btn-color-second-active-border);
	color: var(--spip-btn-color-second-active-text);
}

/**
 * Variante link : boutons affichés comme un lien
 */
.btn_link,
input.submit.btn_link,
input.reset.btn_link,
button.btn_link {
	background-color: transparent;
	border-color: transparent;
	color: var(--spip-btn-color-link-text);
}
.btn_link:hover,
.btn_link:focus,
.btn_link:active,
.btn_link.spip_out:hover,
.btn_link.spip_out:focus,
.btn_link.spip_out:active,
input.submit.btn_link:hover,
input.submit.btn_link:focus,
input.submit.btn_link:active,
input.reset.btn_link:hover,
input.reset.btn_link:focus,
input.reset.btn_link:active,
button.btn_link:hover,
button.btn_link:focus,
button.btn_link:active {
	background-color: transparent;
	border-color: transparent;
	color: var(--spip-btn-color-link-hover-text);
}

/**
 * Variante actif : idem pour tous les états (survol et cie).
 */
.btn_on,
input.submit.btn_on,
input.reset.btn_on,
button.btn_on,
.btn_on:hover,
input.submit.btn_on:hover,
input.reset.btn_on:hover,
button.btn_on:hover,
.btn_on:focus,
input.submit.btn_on:focus,
input.reset.btn_on:focus,
button.btn_on:focus,
.btn_on:active,
input.submit.btn_on:active,
input.reset.btn_on:active,
button.btn_on:active {
	background-color: var(--spip-btn-color-on-bg);
	border-color: var(--spip-btn-color-on-border);
	color: var(--spip-btn-color-on-text);
	border-bottom-color: var(--spip-btn-color-border-accent);
}

/**
 * Variante inactif
 */
.btn_off,
input.submit.btn_off,
input.reset.btn_off,
button.btn_off {
	background-color: var(--spip-btn-color-off-bg);
	border-color: var(--spip-btn-color-off-border);
	color: var(--spip-btn-color-off-text);
	border-bottom-color: var(--spip-btn-color-border-accent);
}
.btn_off:hover,
.btn_off:focus,
input.submit.btn_off:hover,
input.submit.btn_off:focus,
input.reset.btn_off:hover,
button.btn_off:hover,
button.btn_off:focus {
	background-color: var(--spip-btn-color-off-hover-bg);
	border-color: var(--spip-btn-color-off-hover-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-off-hover-text);
}
.btn_off:active,
input.submit.btn_off:active,
input.reset.btn_off:active,
button.btn_off:active {
	background-color: var(--spip-btn-color-off-active-bg);
	border-color: var(--spip-btn-color-off-active-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-off-active-text);
}

/**
 * Variante inverse : couleurs inversées (blanc)
 */
.btn_inverse,
input.submit.btn_inverse,
input.reset.btn_inverse,
button.btn_inverse {
	background-color: var(--spip-btn-color-inverse-bg);
	color: var(--spip-btn-color-inverse-text);
	border-color: var(--spip-btn-color-inverse-border);
}
.btn_inverse.btn_secondaire,
input.submit.btn_inverse.btn_secondaire,
input.reset.btn_inverse.btn_secondaire,
button.btn_inverse.btn_secondaire {
	color: var(--spip-btn-color-inverse-border);
	background-color: transparent;
}
.btn_inverse.btn_link,
input.submit.btn_inverse.btn_link,
input.reset.btn_inverse.btn_link,
button.btn_inverse.btn_link {
	color: var(--spip-btn-color-inverse-border);
	background-color: transparent;
	border-color: transparent;
}
.btn_inverse:hover,
.btn_inverse:focus,
input.submit.btn_inverse:hover,
input.submit.btn_inverse:focus,
input.reset.btn_inverse:hover,
input.reset.btn_inverse:focus,
button.btn_inverse:hover,
button.btn_inverse:focus {
	background-color: var(--spip-btn-color-inverse-hover-bg);
	color: var(--spip-btn-color-inverse-hover-text);
	border-color: var(--spip-btn-color-inverse-hover-border);
}
.btn_inverse:active,
input.submit.btn_inverse:active,
input.reset.btn_inverse:active,
button.btn_inverse:active {
	background-color: var(--spip-btn-color-inverse-active-bg);
	color: var(--spip-btn-color-inverse-active-text);
	border-color: var(--spip-btn-color-inverse-active-border);
}

/**
 * Variante bloc : pleine largeur
 */
.btn_bloc,
input.submit.btn_bloc,
input.reset.btn_bloc,
.formulaire_spip input.submit.btn_bloc, /* pour avoir précédence sur les règles de forms.css */
.formulaire_spip input.reset.btn_bloc, /* idem */
button.btn_bloc {
	display: flex;
	width: 100%;
	justify-content: center;
	text-align: center;
}
/* Pour les boutons d'actions il faut ajouter *en plus* la classe bloc sur le formulaire */
.bouton_action_post.bloc {
	display: flex;
}

/**
 * Variante désactivé : boutons non cliquables
 */
.btn_desactive,
input.submit.btn_desactive,
input.reset.btn_desactive,
button.btn_desactive {
	opacity: 0.66;
	pointer-events: none;
}

/**
 * Variante danger (voir aussi dans icons.css)
 */
.btn_danger,
.btn.danger, /* support temporaire des vieux boutons d'action */
input.submit.btn_danger,
input.reset.btn_danger,
button.btn_danger {
	background-color: transparent;
	border-color: transparent transparent var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-black);
	background-image: url(#CHEMIN_IMAGE{rayures-sup.svg});
	text-shadow: 0 0 0.25em white, 0 0 0.5em white, 0 0 1em white; /* Lisibilité */
}
.btn_danger:hover,
.btn_danger:focus,
.btn.danger:hover,
.btn.danger:focus,
input.submit.btn_danger:hover,
input.submit.btn_danger:focus,
input.reset.btn_danger:hover,
input.reset.btn_danger:focus,
button.btn_danger:hover,
button.btn_danger:focus {
	background-color: transparent;
	border-color: transparent transparent var(--spip-btn-color-border-accent);
	color: hsl(0, 100%, 45%);
}

/**
 * Variantes de tailles
 * Ajuste de la police, des marges, etc.
 */
<BOUCLE_tailles(DATA){source table, #LISTE{mini,large}}>
.btn_#VALEUR,
input.submit.btn_#VALEUR,
input.reset.btn_#VALEUR,
button.btn_#VALEUR,
.groupe-btns_#VALEUR .btn,
.groupe-btns_#VALEUR input.submit,
.groupe-btns_#VALEUR input.reset,
.groupe-btns_#VALEUR button {
	font-size: var\(--spip-btn-font-size-#VALEUR\);
	padding: var\(--spip-btn-padding-y-#VALEUR\) var\(--spip-btn-padding-x-#VALEUR\);
	border-radius: var\(--spip-btn-border-radius-#VALEUR\);
	margin-bottom: var\(--spip-btn-margin-#VALEUR\);
}
</BOUCLE_tailles>[(#REM)/**/]


/**
 * ================
 * 4. Liens boutons
 * ================
 *
 * Markup :
 * <a class="bouton [variante]">…</a>
 */
.btn {}
/* Garder la couleur de base pour les boutons liens externes */
.btn[rel=external],
.btn.spip_out {
	color: inherit;
}


/**
 * ==============================
 * 5. Boutons de formulaires spip
 * ==============================
 *
 * Markup :
 *
 * <form class="formulaire_spip">
 *   <input type="submit" class="submit [variante]" value="Valider" />
 *   <button type="submit" class="[variante]">Valider</button>
 * </form>
 */

.formulaire_spip .boutons .btn,
.formulaire_spip .boutons input.submit,
.formulaire_spip .boutons input.reset,
.formulaire_spip .boutons button,
.formulaire_spip .boutons .groupe-btns,
.act .bouton_action_post {
	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: inline-flex;
	vertical-align: middle;
}
.bouton_action_post.bloc div {
	flex: 1 1 auto;
}

/* Dans le footer d'une boîte */
.box__footer .bouton_action_post { 
	margin-bottom: 0;
}

/* Fix bouton d'action + classe .icone : combinaison obsolète à ne plus utiliser */
.bouton_action_post.icone {
	display: inline-flex !important;
	padding: 0 !important;
	background: none !important;
}
.bouton_action_post.icone b,
.box .bouton_action_post.icone b,
.btn.icone b {
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	text-shadow: inherit !important;
	color: inherit !important;
	margin: 0 !important;
}
.bouton_action_post.icone .icone-image img {
	max-height: 100%;
}

/* Ajustements pour le filtre |bouton_action_horizontal */
.bouton_action_post .icone-fonction:after {
	background-position: bottom 0 right 0;
}
.bouton_action_post .icone-fonction.icone-fonction-new:after {
	background-position: top 0 right 0;
}

/**
 * =====================
 * 7. Groupes de boutons
 * =====================
 *
 * Markup :
 *
 * <div class="groupe-btns">
 *   <a class="btn">…</a>
 *   <a class="btn">…</a>
 * </div>
 */

.groupe-btns {
	display: inline-flex;
	flex-flow: row nowrap;
	margin-bottom: var(--spip-btn-margin);
}
.groupe-btns .btn,
.groupe-btns .bouton_action_post,
.groupe-btns input.submit,
.groupe-btns input.reset,
.groupe-btns button {
	flex: 0 1 auto;
	margin: 0;
}
.groupe-btns .bouton_action_post .submit {
	margin: 0;
}
/* Ne garder l'arrondi qu'aux extrémités */
.groupe-btns:not(.groupe-btns_vertical) .btn:not(:last-child):not(:only-child),
.groupe-btns:not(.groupe-btns_vertical) input.submit:not(:last-child):not(:only-child),
.groupe-btns:not(.groupe-btns_vertical) input.reset:not(:last-child):not(:only-child),
.groupe-btns:not(.groupe-btns_vertical) > button:not(:last-child):not(:only-child),
.groupe-btns:not(.groupe-btns_vertical) .bouton_action_post:not(:last-child):not(:only-child) .submit {
	border-top-#RIGHT-radius: 0;
	border-bottom-#RIGHT-radius: 0;
}
.groupe-btns:not(.groupe-btns_vertical) .btn:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) input.submit:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) input.reset:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) > button:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) .bouton_action_post:not(:first-child) .submit {
	border-top-#LEFT-radius: 0;
	border-bottom-#LEFT-radius: 0;
}
/* Bordures pour séparer */
.groupe-btns:not(.groupe-btns_vertical) .btn:not(:first-child):not(.btn_secondaire),
.groupe-btns:not(.groupe-btns_vertical) input.submit:not(:first-child):not(.btn_secondaire),
.groupe-btns:not(.groupe-btns_vertical) input.reset:not(:first-child):not(.btn_secondaire),
.groupe-btns:not(.groupe-btns_vertical) > button:not(:first-child):not(.btn_secondaire),
.groupe-btns:not(.groupe-btns_vertical) .bouton_action_post:not(:first-child):not(.btn_secondaire) .submit {
	border-#LEFT-color: var(--spip-btn-color-border-accent) !important;
}
.groupe-btns:not(.groupe-btns_vertical) .btn:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) input.submit:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) input.reset:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) > button:not(:first-child),
.groupe-btns:not(.groupe-btns_vertical) .bouton_action_post:not(:first-child) .submit {
	margin-#LEFT: -1px; /* bordure haut par dessus le bouton précédent */
}
.groupe-btns:not(.groupe-btns_vertical) .btn_secondaire:not(:last-child),
.groupe-btns:not(.groupe-btns_vertical) input.submit.btn_secondaire:not(:last-child),
.groupe-btns:not(.groupe-btns_vertical) input.reset.btn_secondaire:not(.last-child),
.groupe-btns:not(.groupe-btns_vertical) > button.btn_secondaire:not(:last-child),
.groupe-btns:not(.groupe-btns_vertical) .bouton_action_post.btn_secondaire:not(:last-child) .submit {
	border-#RIGHT-color: transparent;
}

/* variante vertical */
.groupe-btns.groupe-btns_vertical {
	flex-flow: column wrap;
	vertical-align: middle;
}
.groupe-btns.groupe-btns_vertical .btn:not(:last-child),
.groupe-btns.groupe-btns_vertical input.submit:not(:last-child),
.groupe-btns.groupe-btns_vertical input.reset:not(:last-child),
.groupe-btns.groupe-btns_vertical > button.submit:not(:last-child),
.groupe-btns.groupe-btns_vertical .bouton_action_post:not(:last-child) .submit {
	border-bottom-#LEFT-radius: 0;
	border-bottom-#RIGHT-radius: 0;
	margin-bottom: 0;
}
.groupe-btns.groupe-btns_vertical .btn:not(:first-child),
.groupe-btns.groupe-btns_vertical input.submit:not(:first-child),
.groupe-btns.groupe-btns_vertical input.reset:not(:first-child),
.groupe-btns.groupe-btns_vertical > button:not(:first-child),
.groupe-btns.groupe-btns_vertical .bouton_action_post:not(:first-child) .submit {
	border-top-#LEFT-radius: 0;
	border-top-#RIGHT-radius: 0;
}
.groupe-btns.groupe-btns_vertical .btn:not(:first-child):not(.btn_secondaire),
.groupe-btns.groupe-btns_vertical input.submit:not(:first-child):not(.btn_secondaire),
.groupe-btns.groupe-btns_vertical input.reset:not(:first-child):not(.btn_secondaire),
.groupe-btns.groupe-btns_vertical > button:not(:first-child):not(.btn_secondaire),
.groupe-btns.groupe-btns_vertical .bouton_action_post:not(:first-child):not(.btn_secondaire) .submit {
	border-top-color: var(--spip-btn-color-border-accent);
	margin-top: -1px; /* bordure haut par dessus le bouton précédent */
}
.groupe-btns.groupe-btns_vertical .btn_secondaire:not(:last-child),
.groupe-btns.groupe-btns_vertical input.submit.btn_secondaire:not(:last-child),
.groupe-btns.groupe-btns_vertical input.reset.btn_secondaire:not(:last-child),
.groupe-btns.groupe-btns_vertical > button.btn_secondaire:not(:last-child),
.groupe-btns.groupe-btns_vertical .bouton_action_post.btn_secondaire:not(:last-child) .submit {
	border-bottom: 0;
}

/* Variante bloc */
.groupe-btns.groupe-btns_bloc,
.groupe-btns.groupe-btns_bloc .bouton_action_post div {
	display: flex;
}
.groupe-btns.groupe-btns_bloc .btn,
.groupe-btns.groupe-btns_bloc .bouton_action_post,
.groupe-btns.groupe-btns_bloc .bouton_action_post div ,
.groupe-btns.groupe-btns_bloc .bouton_action_post .submit,
.groupe-btns.groupe-btns_bloc input.submit,
.groupe-btns.groupe-btns_bloc input.reset,
.groupe-btns.groupe-btns_bloc button {
	flex: 1 1 auto;
}

/* Variante groupe de boutons menu.
   Les boutons reprennent l'apparence de boutons inactifs par défaut,
   sauf ceux qui ont la classe .btn_on, ou les secondaires / liens */
.groupe-btns_menu .btn:not(.btn_on):not(.btn_secondaire):not(.btn_link),
.groupe-btns_menu input.submit:not(.btn_on):not(.btn_secondaire):not(.btn_link),
.groupe-btns_menu input.reset:not(.btn_on):not(.btn_secondaire):not(.btn_link),
.groupe-btns_menu button:not(.btn_on):not(.btn_secondaire):not(.btn_link) {
	background-color: var(--spip-btn-color-off-bg);
	border-color: var(--spip-btn-color-off-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-off-text);
}
.groupe-btns_menu .btn:not(.btn_on):not(.btn_secondaire):not(.btn_link):hover,
.groupe-btns_menu .btn:not(.btn_on):not(.btn_secondaire):not(.btn_link):focus,
.groupe-btns_menu input.submit:not(.btn_on):not(.btn_secondaire):not(.btn_link):hover,
.groupe-btns_menu input.submit:not(.btn_on):not(.btn_secondaire):not(.btn_link):focus,
.groupe-btns_menu input.reset:not(.btn_on):not(.btn_secondaire):not(.btn_link):hover,
.groupe-btns_menu input.reset:not(.btn_on):not(.btn_secondaire):not(.btn_link):focus,
.groupe-btns_menu button:not(.btn_on):not(.btn_secondaire):not(.btn_link):hover,
.groupe-btns_menu button:not(.btn_on):not(.btn_secondaire):not(.btn_link):focus {
	background-color: var(--spip-btn-color-off-hover-bg);
	border-color: var(--spip-btn-color-off-hover-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-off-hover-text);
}
.groupe-btns_menu .btn:not(.btn_on):not(.btn_secondaire):not(.btn_link):active,
.groupe-btns_menu input.submit:not(.btn_on):not(.btn_secondaire):not(.btn_link):active,
.groupe-btns_menu input.reset:not(.btn_on):not(.btn_secondaire):not(.btn_link):active,
.groupe-btns_menu button:not(.btn_on):not(.btn_secondaire):not(.btn_link):active {
	background-color: var(--spip-btn-color-off-active-bg);
	border-color: var(--spip-btn-color-off-active-border);
	border-bottom-color: var(--spip-btn-color-border-accent);
	color: var(--spip-btn-color-off-active-text);
}

/* Si boutons de formulaire ou pied d'une boîte : bloc et alignement */
.groupe-btns.act,
.groupe-btns.boutons {
	display: flex;
	justify-content: flex-end;
}


/**
 * ======================
 * 8. Boutons avec icônes
 * ======================
 *
 * Markup :
 *
 * <a class="btn sp-icone sp-icone_ajouter">Bouton</a>
 * <a class="btn"><svg class="sp-icon sp-icone_ajouter"></svg> Bouton</a>
 */

/* Base */
.btn.sp-icone:before,
.btn .sp-icone,
button.sp-icone:before,
button .sp-icone,
input.submit.sp-icone:before,
input.reset.sp-icone:before,
.bouton_action_post .icone-image {
	margin-#RIGHT: var(--spip-btn-gutter); /* fallback */
	margin-inline-end: var(--spip-btn-gutter);
}

/* Bouton avec uniquement une icône, sans label */
.btn_icone {
	padding-left: var(--spip-btn-padding-x);
	padding-right: var(--spip-btn-padding-x);
}
.btn_icone.btn_mini {
	padding-left: var(--spip-btn-padding-x-mini);
	padding-right: var(--spip-btn-padding-x-mini);
}
.btn_icone.btn_large {
	padding-left: var(--large-spip-btn-padding-x-large);
	padding-right: var(--spip-btn-padding-x-large);
}
.btn_icone.sp-icone:before,
.btn_icone .sp-icone {
	margin: 0;
}

/* Icône après le texte */
.btn_icone_after.sp-icone:before,
.btn_icone_after .sp-icone {
	order: 2;
	margin-#LEFT: var(--spip-btn-gutter); /* fallback */
	margin-#RIGHT: 0; /* fallback */
	margin-inline-start: var(--spip-btn-gutter);
	margin-inline-end: 0;
}

/**
 * ===========================
 * 9. Rustines et déprécations
 * ===========================
 */

/* Formulaire editer_liens
 * Dans les listes, les boutons d'ajout et de retrait doivent avoir les classes .btn_mini et .btn_link
 * En leur absence, on @extend .btn_mini à la main en fallback */

.liste-objets-associer button:not(.btn_mini),
.liste-objets-lies button:not(.btn_mini) {
	font-size: var(--spip-btn-font-size-mini);
	padding: var(--spip-btn-padding-y-mini) var(--spip-btn-padding-x-mini);
	border-radius: var(--spip-btn-border-radius-mini);
	margin-bottom: var(--spip-btn-margin-mini);
}