/* Ville - Interface. Système propriétaire de la Ville de Décines-Charpieu.
   Les règles du thème étant très précises, celles-ci commencent par body et portent !important quand il le faut. */

/* Panneau du compte : icônes rétablies. La graisse 400 de Font Awesome gratuit ne contient ni l'engrenage ni la déconnexion. */
body #user-sidebar li > a::before {
	font-weight: 900 !important;
}

body #user-sidebar li > a {
	min-height: 44px;
}

/* Bouton de fermeture : 44 pixels de large, sans carré clair au survol, focus visible au clavier. */
body #user-close,
body #user-close:hover,
body #user-close:focus {
	background: transparent !important;
}

body #user-close:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

body #nav-user.active #user-close {
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 60px;
	padding: 0 !important;
}

body #nav-user.active #user-close i {
	width: auto !important;
	color: #fff !important;
	font-size: 32px !important;
	line-height: 1 !important;
}

/* En-tête du panneau : bleu de la Ville, une photo, deux lignes de texte. */
body #user-sidebar #user-cover {
	padding: 0 !important;
	background: #1f436b !important;
}

body #user-sidebar #user-cover .user-cover-layer {
	display: none !important;
}

body #user-sidebar #user-cover > a {
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 18px 20px !important;
	background: transparent !important;
}

body #user-sidebar #user-cover img {
	position: static !important;
	flex: 0 0 64px;
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	border-radius: 50%;
}

body #user-sidebar #user-cover > a > span {
	position: static !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	text-shadow: none !important;
}

body #user-sidebar #user-cover .woffice-welcome {
	display: block !important;
	margin: 2px 0 0 !important;
	color: #fff !important;
	font-size: 17px !important;
	font-style: normal !important;
	font-weight: 700;
	line-height: 1.3 !important;
	text-shadow: none !important;
}

/* Petits formats : une seule barre bleue, le logo blanc enfin visible, les icônes du menu alignées. */
@media (max-width: 1023px) {
	body #navbar {
		background: #1f436b !important;
		box-shadow: none !important;
	}

	body #navbar #nav-buttons a,
	body #navbar #nav-buttons i,
	body #navbar #nav-buttons .fa {
		color: #fff !important;
	}

	body #navigation {
		background: #1f436b !important;
		border-top: 1px solid rgba(255, 255, 255, .18) !important;
	}

	body #navigation li > a {
		display: flex !important;
		align-items: center;
		padding-left: 18px !important;
	}

	body #navigation li > a::before {
		position: static !important;
		display: inline-block !important;
		flex: 0 0 26px;
		width: 26px;
		margin: 0 10px 0 0 !important;
		text-align: center;
	}

	/* Le bleu de l'en-tête passe sous la barre : la photo n'est plus coupée. */
	body #user-sidebar #user-cover > a {
		padding-top: 52px !important;
	}
}

/* Menu principal : la rubrique active garde sa barre, sans fond clair, de la largeur de la rubrique et juste sous elle. */
@media (min-width: 1024px) {
	body #navigation li.current-menu-item::before,
	body #navigation li.current-menu-ancestor::before,
	body #navigation li.current_page_item::before {
		background: transparent !important;
	}

	html body nav#navigation ul.main-menu > li.current-menu-item::after,
	html body nav#navigation ul.main-menu > li.current-menu-ancestor::after {
		top: auto !important;
		right: 6px !important;
		bottom: 20px !important;
		left: 4px !important;
		width: auto !important;
		margin-left: 0 !important;
	}
}

@media (max-width: 1023px) {
	body #navigation li.current-menu-item > a,
	body #navigation li.current-menu-ancestor > a {
		background: transparent !important;
		box-shadow: inset 3px 0 0 #fff;
		color: #fff !important;
	}
}

/* Annuaire : autant de colonnes que la largeur en permet, et une page qui ne saute plus au chargement. */
body #buddypress #members-list {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
}

body.directory #members-dir-list {
	min-height: 80vh;
}

html.annuaire-attente body #dir-filters {
	visibility: hidden;
}

html.annuaire-attente body #members-dir-list::before {
	content: "Chargement de l'annuaire…";
	display: block;
	padding: 48px 0;
	color: #5a6980;
	font-size: 15px;
	text-align: center;
	visibility: visible;
}

@media (max-width: 600px) {
	body #buddypress #members-list {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	}
}

/* Mon compte : une colonne de navigation, des onglets clairs, une fiche lisible. */
body.bp-user #woffice_cover_upload,
body.bp-user .bp-widget.base > h3 {
	display: none !important;
}

@media (min-width: 992px) {
	body.bp-user .woffice-profile--vertical > .col-md-4 {
		flex: 0 0 300px;
		max-width: 300px;
		padding-right: 12px;
	}

	body.bp-user .woffice-profile--vertical > .col-md-8 {
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
	}
}

body.bp-user #woffice-bp-sidebar {
	padding: 20px 12px 12px !important;
	border-radius: 16px;
}

body.bp-user #item-header {
	width: auto !important;
	height: auto !important;
	margin: 0 0 12px !important;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs ul {
	display: block !important;
	width: auto !important;
	height: auto !important;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs ul li {
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 2px !important;
	padding: 0 !important;
	border: 0 !important;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs ul li a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 12px !important;
	border-radius: 10px;
	background: transparent !important;
	color: #22324a !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs ul li a:hover {
	background: #f2f5f9 !important;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs ul li a::before {
	position: static !important;
	display: inline-block !important;
	flex: 0 0 22px;
	width: 22px;
	margin: 0 !important;
	color: #1f436b !important;
	font: 900 16px "Font Awesome 5 Free" !important;
	text-align: center;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs ul li.current a {
	background: #e8eef6 !important;
	color: #1f436b !important;
	font-weight: 700;
}

body.bp-user #buddypress #woffice-bp-sidebar .main-navs ul li.current a::before {
	color: #1f436b !important;
}

body.bp-user #buddypress #woffice-bp-sidebar #xprofile-personal-li a::before { content: "\f007" !important; }
body.bp-user #buddypress #woffice-bp-sidebar #calendar-personal-li a::before { content: "\f073" !important; }
body.bp-user #buddypress #woffice-bp-sidebar #notifications-personal-li a::before { content: "\f0f3" !important; }
body.bp-user #buddypress #woffice-bp-sidebar #reservations-personal-li a::before { content: "\f274" !important; }
body.bp-user #buddypress #woffice-bp-sidebar #settings-personal-li a::before { content: "\f013" !important; }

body.bp-user #buddypress #subnav {
	width: auto !important;
	height: auto !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
}

body.bp-user #buddypress #subnav ul {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-start !important;
	gap: 8px;
	height: auto !important;
}

body.bp-user #buddypress #subnav ul li {
	float: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

body.bp-user #buddypress #subnav ul li a {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
	width: auto !important;
	height: auto !important;
	min-height: 44px;
	padding: 0 16px !important;
	border: 1px solid #d9e0ea !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #22324a !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}

body.bp-user #buddypress #subnav ul li a::before {
	position: static !important;
	display: inline-block !important;
	margin: 0 !important;
	color: #1f436b !important;
	font: 900 15px "Font Awesome 5 Free" !important;
}

body.bp-user #buddypress #subnav ul li.current a,
body.bp-user #buddypress #subnav ul li.selected a {
	border-color: #1f436b !important;
	background: #1f436b !important;
	color: #fff !important;
	font-weight: 700;
}

body.bp-user #buddypress #subnav ul li.current a::before,
body.bp-user #buddypress #subnav ul li.selected a::before {
	color: #fff !important;
}

body.bp-user #buddypress #subnav #public-personal-li a::before { content: "\f06e" !important; }
body.bp-user #buddypress #subnav #edit-personal-li a::before { content: "\f304" !important; }
body.bp-user #buddypress #subnav #change-avatar-personal-li a::before { content: "\f030" !important; }
body.bp-user #buddypress #subnav #general-personal-li a::before { content: "\f023" !important; }
body.bp-user #buddypress #subnav #notifications-personal-li a::before { content: "\f0e0" !important; }
body.bp-user #buddypress #subnav #profile-personal-li a::before { content: "\f06e" !important; }
body.bp-user #buddypress #subnav #data-personal-li a::before { content: "\f019" !important; }
body.bp-user #buddypress #subnav #notifications-my-notifications-personal-li a::before { content: "\f0f3" !important; }
body.bp-user #buddypress #subnav #read-personal-li a::before { content: "\f187" !important; }

body.bp-user .screen-heading {
	margin: 0 0 12px !important;
	font-size: 24px !important;
}

body.bp-user .bp-widget table,
body.bp-user .bp-widget tbody,
body.bp-user .bp-widget tr,
body.bp-user .bp-widget td {
	background: transparent !important;
}

body.bp-user .bp-widget td {
	padding: 12px 8px !important;
	border: 0 !important;
	border-bottom: 1px solid #edf0f5 !important;
	font-size: 15px;
}

body.bp-user .bp-widget td.label {
	width: 200px;
	color: #5a6980 !important;
	font-weight: 500 !important;
}

/* Le bouton de menu du thème, en petit format, ne sert à rien : la navigation reste affichée. */
body #woffice-bp-menu-toggle {
	display: none !important;
}

/* Cloche de la barre : le thème posait un carré clair au survol, l'icône blanche y disparaissait. */
body #nav-buttons a:hover {
	background: transparent !important;
}

body #nav-buttons #nav-notification-trigger:hover {
	border-radius: 10px;
	background: rgba(255, 255, 255, .14) !important;
}

body #nav-buttons #nav-notification-trigger:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* Le panneau des notifications s'ouvre sous la barre : il ne la coupe plus et la croix reste lisible. */
@media (min-width: 1024px) {
	body #woffice-notifications-menu {
		top: 100px !important;
		right: 30px !important;
		border-radius: 16px;
	}

	body.admin-bar #woffice-notifications-menu {
		top: 132px !important;
	}
}