/**
 * Members area and account in the front of 2026 (openspec restyle-member-pages): login, registration, directory,
 * profile, subscription, sponsorship, search, invoices. Loaded by the theme on the apps of WFront::NOINDEX_APPS;
 * the old stylesheets of these apps are not loaded with the setting front_2026.
 */

/* ---------- Forms and buttons of the apps ---------- */

.form-label, .col-form-label {
	font-weight: 600;
}

.form-control, .form-select {
	min-height: 44px;
	border-color: var(--trait);
	border-radius: var(--rayon);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
	border-color: var(--bleu-texte);
	box-shadow: 0 0 0 3px #0496ff40;
}

.form-check-input:checked {
	border-color: var(--bleu-texte);
	background-color: var(--bleu-texte);
}

.form-text {
	color: var(--gris);
}

.btn-primary {
	--bs-btn-bg: var(--bleu-texte);
	--bs-btn-border-color: var(--bleu-texte);
	--bs-btn-hover-bg: var(--bleu-sombre);
	--bs-btn-hover-border-color: var(--bleu-sombre);
	--bs-btn-active-bg: var(--bleu-sombre);
	--bs-btn-active-border-color: var(--bleu-sombre);
	font-weight: 700;
}

.btn-secondary, .btn-outline-secondary {
	--bs-btn-color: var(--encre);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--encre);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--encre);
	--bs-btn-hover-border-color: var(--encre);
	font-weight: 700;
}

.input-group > .btn-bleu, .input-group > .btn-contour, .input-group > .btn-encre {
	border-radius: 0 var(--rayon) var(--rayon) 0;
}

.pagination {
	--bs-pagination-color: var(--encre);
	--bs-pagination-active-bg: var(--encre);
	--bs-pagination-active-border-color: var(--encre);
	--bs-pagination-border-color: var(--trait);
	--bs-pagination-hover-color: var(--bleu-texte);
	justify-content: center;
	margin-top: 24px;
}

/* ---------- Pages of the account: text and form side by side ---------- */

.compte-page__grille, .connexion__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(28px, 4vw, 56px);
	margin-bottom: 72px;
}

.compte-page__texte:empty {
	display: none;
}

.compte-page__grille:has(> .compte-page__texte:empty) {
	grid-template-columns: minmax(0, 640px);
}

.connexion__bloc, .souscription {
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: #fff;
}

.connexion__bloc h2, .souscription h2 {
	margin: 0 0 16px;
	font-size: 1.3rem;
}

.connexion__bloc p {
	color: var(--gris);
}

.connexion__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}

.connexion__contact {
	margin-top: 24px;
	color: var(--gris);
}

/* ---------- Tabs of the account (profile, subscription, sponsorship) ---------- */

.compte-onglets .nav {
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.compte-onglets .nav-link {
	padding: 8px 16px;
	border: 1px solid var(--trait);
	border-radius: 999px;
	color: var(--encre);
	font-weight: 600;
}

.compte-onglets .nav-link:hover {
	border-color: var(--encre);
}

.compte-onglets .nav-link.active, .compte-onglets .nav-link[aria-current="page"] {
	border-color: var(--encre);
	background: var(--encre);
	color: #fff;
}

/* ---------- Profile ---------- */

.wity-action-profile form {
	max-width: 800px;
	margin-inline: auto;
}

.wity-action-profile h2, .wity-action-profile legend {
	margin-top: 32px;
	font-size: 1.3rem;
}

/* ---------- Subscription ---------- */

.souscription__consigne {
	margin-bottom: 12px;
	font-weight: 600;
}

.souscription__montants {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.souscription__montants .btn-contour {
	justify-content: center;
	font-size: 1.15rem;
}

.souscription__autre {
	grid-column: 1 / -1;
}

.souscription__montants .btn-contour:hover, .souscription__montants .btn-contour:focus-visible {
	background: var(--encre);
	color: #fff;
}

.custom-price-input {
	display: none;
	margin-top: 16px;
}

.custom-price-input.show {
	display: block;
}

.souscription__note {
	margin: 20px 0 0;
	color: var(--gris);
	font-size: .9rem;
}

.modal .price-container {
	padding: 16px;
	text-align: center;
}

.modal .modal-footer {
	justify-content: center;
	gap: 16px;
}

/* ---------- Directory ---------- */

.annuaire__intro {
	max-width: 60ch;
	color: var(--gris);
	font-size: 1.1rem;
}

.annuaire__grille {
	display: grid;
	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(28px, 4vw, 56px);
	margin: 32px 0 72px;
}

.annuaire__recherche {
	padding: 24px;
	border-radius: var(--rayon);
	background: var(--brume);
}

.annuaire__recherche h2 {
	margin: 0 0 16px;
	font-size: 1.2rem;
}

.annuaire__champ {
	margin-bottom: 16px;
}

.annuaire__champ .form-check {
	margin-top: 4px;
	font-size: .9rem;
}

.annuaire__compte {
	margin: 0 0 12px;
	color: var(--gris);
	font-weight: 600;
}

.annuaire__liste {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--trait);
	list-style: none;
}

.annuaire__liste a {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 14px 32px 14px 0;
	border-bottom: 1px solid var(--trait);
	color: var(--encre);
	text-decoration: none;
}

.annuaire__liste a::after {
	content: "›";
	position: absolute;
	top: 50%;
	right: 8px;
	color: var(--bleu-texte);
	font-size: 1.6rem;
	transform: translateY(-50%);
}

.annuaire__liste a:hover .annuaire__nom {
	color: var(--bleu-texte);
	text-decoration: underline;
}

.annuaire__nom {
	font-weight: 700;
}

.annuaire__fonction {
	color: var(--gris);
	font-size: .95rem;
}

.membre-fiche {
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
}

.membre-fiche__tete {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.membre-fiche__photo {
	flex: none;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--brume);
	object-fit: cover;
}

.membre-fiche__photo--vide {
	display: grid;
	place-items: center;
	color: var(--bleu-texte);
	font-size: 3rem;
}

.membre-fiche h2 {
	margin: 0 0 4px;
	font-size: 1.5rem;
}

.membre-fiche__fonction {
	margin: 0 0 8px;
	color: var(--gris);
}

.membre-fiche__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.membre-fiche__infos {
	display: grid;
	gap: 12px;
	margin: 0 0 24px;
}

.membre-fiche__infos > div {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--trait);
}

.membre-fiche__infos dt {
	color: var(--gris);
	font-weight: 600;
}

.membre-fiche__infos dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* ---------- Search, password lost, invoices ---------- */

.wity-app-search .search-form {
	max-width: 800px;
	margin: auto;
}

.wity-app-search dl dd {
	margin-bottom: 20px;
}

.wity-app-user.wity-action-password_lost, .wity-app-user.wity-action-password_lost_reset {
	max-width: 560px;
}

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
	.compte-page__grille, .connexion__grille, .annuaire__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.compte-page__grille:has(> .compte-page__texte:empty) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.membre-fiche__tete {
		flex-direction: column;
		align-items: flex-start;
	}

	.membre-fiche__infos > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* Registration without its text: the form takes the width */
.row > .compte-page__texte:empty + [class*="col-"] {
	width: 100%;
	max-width: 640px;
}