[(#REM)

	Ce squelette définit les styles des menus onglets de l'espace privé

	Organisation du fichier :

	1. Onglets simples
	2. Barre onglets

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


/* ============
 * 0. Variables
 * ============
 */
:root {
	--spip-tabs-border-width: 2px;
	--spip-tabs-border-radius: var(--spip-border-radius);
	--spip-tabs-spacing-x: 1em;
	--spip-tabs-spacing-y: 0.5em;
}


/**
 * =================
 * 0. Onglets (tous)
 * =================
 * Styles mutualisés
 */
.onglets_simple a:focus,
.barre_onglet a:focus {
	box-shadow: 0 0 0 0.2rem var(--spip-btn-color-focus);
	outline: none;
	z-index: 2;
}


/* ==================
 * 1. Onglets simples
 * ==================
 *
 * Markup :
 *
 * div.onglets_simple
 *   ul
 *     li
 *       strong | a
 * div.onglets_simple.second
 *   ul
 *     li
 *       strong | a
 *   ul…
 */

/**
 * Onglets de base
 */
.onglets_simple {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	margin: calc(var(--spip-spacing-y) * 1.5) 0;
	border-bottom: var(--spip-tabs-border-width) solid hsla(0, 0%, 0%, 0.1);
}
.onglets_simple ul {
	display: flex;
	flex-flow: row wrap;
	padding: 0;
	margin: 0 0 calc(var(--spip-tabs-border-width) * -1); /* Empiéter sur la bordure du bas */
	list-style: none;
}
.onglets_simple ul:only-of-type {
	flex: 1; /* si groupe unique, permettre d'aggrandir pour garder l'alignement à gauche */
}
.onglets_simple ul + ul,
.onglets_simple.second ul + ul {
	margin-#LEFT: calc(var(--spip-tabs-spacing-x) * 2);
}
.onglets_simple li {
	display: flex;
	padding: 0;
	margin: 0;
}
/* Items */
.onglets_simple li strong,
.onglets_simple li a {
	flex: 1;
	position: relative;
	display: block;
	padding: calc(var(--spip-tabs-spacing-y) * 2) var(--spip-tabs-spacing-x);
	border-bottom: var(--spip-tabs-border-width) solid transparent;
	transition: background 0.15s, border 0.15s;
	text-align: center;
	font-weight: 500;
	font-size: 0.9em;
	background-position: center var(--spip-left);
	background-repeat: no-repeat;
}
/* Items non exposés (liens) */
.onglets_simple li a {
	color: var(--spip-color-gray-dark);
	text-decoration: none;
}
.onglets_simple li a:hover,
.onglets_simple li a:active {
	cursor: pointer;
	z-index: 2;
}
.onglets_simple li a:hover {
	background-color: var(--spip-color-theme-lightest);
	border-bottom-color: var(--spip-color-theme-light);
}
.onglets_simple li a:active {
	background-color: var(--spip-color-theme-lighter);
	border-bottom-color: var(--spip-color-theme);
}
/* Item exposé */
.onglets_simple li strong {
	color: var(--spip-color-theme-dark);
	border-bottom-color: var(--spip-color-theme-dark);
	z-index: 2;
}
/* Divers */
.onglets_simple .cadre-icone {
	display: none;
}
/* Variante bloc */
.onglets_simple.bloc ul {
	flex-wrap: nowrap;
}
.onglets_simple.bloc ul li {
	flex: 1;
}


/**
 * Onglets secondaires = filtres
 */
.onglets_simple.second {
	border: 0;
	justify-content: flex-start;
}
.onglets_simple.second ul {
	margin: 0;
}
/* Items */
.onglets_simple.second li strong,
.onglets_simple.second li a {
	padding: var(--spip-tabs-spacing-y) var(--spip-tabs-spacing-x);
	text-transform: none;
	border: 1px solid var(--spip-color-gray-light);
	border-radius: var(--spip-tabs-border-radius);
}
.onglets_simple.second li:not(:first-child) > * {
	border-top-#LEFT-radius: 0;
	border-bottom-#LEFT-radius: 0;
}
.onglets_simple.second li:not(:last-child) > * {
	border-top-#RIGHT-radius: 0;
	border-bottom-#RIGHT-radius: 0;
}
.onglets_simple.second li:not(:first-child):not(:only-child) > * {
	margin-#LEFT: -1px;
}
/* Items non exposés (liens) */
.onglets_simple.second li a {
	background-color: transparent;
}
.onglets_simple.second li a:hover,
.onglets_simple.second li a:focus,
.onglets_simple.second li a:active {
	color: var(--spip-color-theme-dark);
	border-color: var(--spip-color-theme);
}
.onglets_simple.second li a:hover {
	background-color: var(--spip-color-theme-lightest);
}
.onglets_simple.second li a:active {
	background-color: var(--spip-color-theme-light);
}
/* Item exposé */
.onglets_simple.second li strong {
	background-color: var(--spip-color-theme-dark);
	border-color: var(--spip-color-theme-dark);
	color: white;
}


/* ================
 * 2. Barre onglets
 * ================
 *
 * Markup :
 *
 * div.barre_onglet
 *   ul
 *     li
 *       [img.cadre-icone]
 *       strong | a
 */
.barre_onglet {
	margin: calc(var(--spip-spacing-y) * 1.5) 0;
}
.barre_onglet ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	margin: 0;
	text-align: var(--spip-left);
	list-style:none;
}
.barre_onglet li {
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
}
/* Items */
.barre_onglet a,
.barre_onglet strong {
	display: block;
	padding: calc(var(--spip-tabs-spacing-y) * 1.5) var(--spip-tabs-spacing-x);
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, border 0.15s;
	border-radius: 99em;
}
.barre_onglet li:first-child a,
.barre_onglet li:first-child strong {
	padding-#LEFT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
}
.barre_onglet li:last-child a,
.barre_onglet li:last-child strong {
	padding-#RIGHT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
}
.barre_onglet li:not(:last-child) a,
.barre_onglet li:not(:last-child) strong {
	border-right: 1px solid hsla(0, 0%, 0%, 0.1);
}
.barre_onglet li:not(:first-child) a,
.barre_onglet li:not(:first-child) strong {
	border-top-#LEFT-radius: 0;
	border-bottom-#LEFT-radius: 0;
}
.barre_onglet li:not(:last-child) a,
.barre_onglet li:not(:last-child) strong {
	border-top-#RIGHT-radius: 0;
	border-bottom-#RIGHT-radius: 0;
}
/* Item non exposé (lien) */
.barre_onglet a {
	background-color: var(--spip-color-gray-lighter);
	text-decoration: none;
	color: var(--spip-color-theme-dark);
}
.barre_onglet a:hover {
	text-decoration: none;
	background-color: var(--spip-color-theme-lighter);
}
.barre_onglet a:active {
	text-decoration: none;
	background-color: var(--spip-color-theme-light);
	color: var(--spip-color-theme-darker);
}
/* Items exposés */
.barre_onglet strong,
.barre_onglet strong.on {
	background-color: var(--spip-color-theme-dark);
	color: var(--spip-color-white);
	z-index: 1;
}
/* Icônes */
.barre_onglet .cadre-icone {
	top: 50%;
	#LEFT: var(--spip-tabs-spacing-x);
	transform: translateY(-50%);
}
.barre_onglet .cadre-icone + a,
.barre_onglet .cadre-icone + strong {
	padding-#LEFT: calc(24px + (var(--spip-tabs-spacing-x) * 2));
}
.barre_onglet li:first-child .cadre-icone {
	#LEFT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
}
.barre_onglet li:first-child .cadre-icone + a,
.barre_onglet li:first-child .cadre-icone + strong {
	padding-#LEFT: calc(24px + (var(--spip-tabs-spacing-x) * 2.5)); /* plus grand because arrondi */
}