/**
 * URRUTIA – Double authentification (front)
 * S'appuie sur les classes et variables PMPro (#loginform, .pmpro_card,
 * .pmpro_message, .pmpro_tag) : seuls les éléments propres à la 2FA sont stylés.
 */

.urr-2fa,
.urr-2fa-compte {
	--urr2fa-marine: #19243d;
	--urr2fa-pastille: #eef2f8;
	--urr2fa-trait: rgba(3, 84, 63, 0.13);
	--urr2fa-doux: #5b6577;
}

/* ---- En-tête de méthode : pastille à icône + titre + consigne ---------- */
.urr-2fa-entete {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 20px;
}
.urr-2fa-methode .urr-2fa-entete {
	margin-bottom: 0;
}
.urr-2fa-pastille {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--urr2fa-pastille);
	color: var(--urr2fa-marine);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.urr-2fa-titre {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 1.05em;
	color: var(--urr2fa-marine);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.urr-2fa-intro {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.55;
	color: var(--urr2fa-doux);
}

/* ---- Champ de code ------------------------------------------------------ */
.pmpro_section #loginform .input.urr-2fa-code,
.urr-2fa-compte .urr-2fa-code {
	font-size: 1.35em;
	letter-spacing: 0.3em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---- Renvoi du code / autres méthodes ----------------------------------- */
.urr-2fa-renvoi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 16px 0 0;
	font-size: 0.85em;
	color: var(--urr2fa-doux);
}
/*
 * Boutons « lien » et « contour » : le thème et PMPro imposent un texte blanc
 * aux <button> (style.css de memberlite, règle :hover/:focus/:active). On
 * reprend la main sur tous les états, spécificité renforcée + !important.
 */
.urr-2fa .pmpro_btn.pmpro_btn-plain,
.urr-2fa .pmpro_btn.pmpro_btn-plain:hover,
.urr-2fa .pmpro_btn.pmpro_btn-plain:focus,
.urr-2fa .pmpro_btn.pmpro_btn-plain:active,
.urr-2fa-compte .pmpro_btn.pmpro_btn-plain,
.urr-2fa-compte .pmpro_btn.pmpro_btn-plain:hover,
.urr-2fa-compte .pmpro_btn.pmpro_btn-plain:focus,
.urr-2fa-compte .pmpro_btn.pmpro_btn-plain:active {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--urr2fa-marine) !important;
	filter: none !important;
	box-shadow: none !important;
	padding: 0;
	font-size: 0.95em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.urr-2fa-compte .pmpro_btn.pmpro_btn-outline,
.urr-2fa-compte .pmpro_btn.pmpro_btn-outline:hover,
.urr-2fa-compte .pmpro_btn.pmpro_btn-outline:focus,
.urr-2fa-compte .pmpro_btn.pmpro_btn-outline:active {
	background: #fff !important;
	border: 1px solid var(--urr2fa-marine) !important;
	color: var(--urr2fa-marine) !important;
	filter: none !important;
	box-shadow: none !important;
}
.urr-2fa-autres {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--urr2fa-trait);
	font-size: 0.9em;
}
.urr-2fa-autres-titre {
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--urr2fa-marine);
}
.urr-2fa-autres ul {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.urr-2fa-autres li {
	margin: 4px 0;
}
.urr-2fa-retour {
	margin: 0;
}
.urr-2fa-actions {
	margin: 16px 0 0;
}

/* ---- Mon compte : cartes de méthodes ------------------------------------ */
.urr-2fa-compte .urr-2fa-methode + .urr-2fa-methode {
	margin-top: 16px;
}
.urr-2fa-compte .pmpro_card_actions form {
	margin: 0;
}
.urr-2fa-compte .pmpro_btn.pmpro_btn-plain.urr-2fa-lien-danger,
.urr-2fa-compte .pmpro_btn.pmpro_btn-plain.urr-2fa-lien-danger:hover,
.urr-2fa-compte .pmpro_btn.pmpro_btn-plain.urr-2fa-lien-danger:focus {
	color: #b42318 !important;
}

.urr-2fa-config {
	margin-top: 20px;
}
.urr-2fa-config > summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
}
.urr-2fa-config > summary::-webkit-details-marker {
	display: none;
}
.urr-2fa-config[open] > summary {
	display: none;
}

.urr-2fa-etapes {
	counter-reset: urr2fa;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}
.urr-2fa-etapes > li {
	counter-increment: urr2fa;
	position: relative;
	padding: 0 0 20px 44px;
	font-size: 0.9em;
	color: var(--urr2fa-doux);
}
.urr-2fa-etapes > li::before {
	content: counter(urr2fa);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--urr2fa-marine);
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}
.urr-2fa-etapes p {
	margin: 0 0 8px;
}
.urr-2fa-etape-titre {
	font-weight: 600;
	color: var(--urr2fa-marine);
	padding-top: 3px;
}
.urr-2fa-qr {
	display: inline-block;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--urr2fa-trait);
	border-radius: 8px;
	line-height: 0;
	margin: 4px 0 12px;
}
.urr-2fa-qr svg {
	width: 180px;
	height: 180px;
}
.urr-2fa-cle code {
	font-size: 1em;
	letter-spacing: 0.08em;
	background: var(--urr2fa-pastille);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--urr2fa-marine);
	word-break: break-all;
}
.urr-2fa-form-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
.urr-2fa-form-inline .urr-2fa-code {
	max-width: 200px;
}

/* ---- Appareil de confiance (écran de vérification) ----------------------- */
.pmpro_section #loginform .login-remember.urr-2fa-confiance {
	display: block;
}
.urr-2fa-confiance-aide {
	display: block;
	margin: 4px 0 0 26px;
	font-size: 0.8em;
	color: var(--urr2fa-doux);
}

/* ---- Confirmation d'identité demandée ----------------------------------- */
.urr-2fa-revalider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.urr-2fa-revalider .pmpro_btn {
	text-decoration: none;
}

/* ---- Liste des appareils de confiance ----------------------------------- */
.urr-2fa-appareils {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	border-top: 1px solid var(--urr2fa-trait);
}
.urr-2fa-compte .urr-2fa-appareils li {
	margin: 0;
	list-style: none;
}
.urr-2fa-appareils li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--urr2fa-trait);
}
.urr-2fa-appareils form {
	margin: 0;
}
.urr-2fa-appareil-nom {
	margin: 0;
	font-weight: 600;
	color: var(--urr2fa-marine);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.urr-2fa-appareil-meta {
	margin: 2px 0 0;
	font-size: 0.85em;
	color: var(--urr2fa-doux);
}