/* Espace adhérent — front.
 *
 * Tout est scopé sous .mdlm-member ou .mdlm-account-link : aucune règle ne peut
 * atteindre le reste du site, et aucune police n'est chargée — la typographie
 * reste celle du thème.
 *
 * Le FORMULAIRE DE CONNEXION, plus bas, habille le CONTENU de sa colonne —
 * titre d'état, champs, icônes, œil, case à cocher, actions — et jamais sa mise
 * en page : carte, colonnes et colonne de droite restent celles d'Elementor.
 */

.mdlm-member {
	text-align: left;
}

/* Le formulaire de connexion garde sa colonne étroite ; l'espace adhérent et
   ses états vides, eux, épousent leur conteneur Elementor et portent leur
   propre largeur. */
.mdlm-member:not(:has(.mdlm-member__tabs)):not(:has(.mdlm-member__empty)) {
	max-width: 34rem;
	margin: 0 auto;
}

.mdlm-member p {
	margin: 0 0 1rem;
}

/* ══ AUTHENTIFICATION ══════════════════════════════════════════════════════
 *
 * Le shortcode est posé dans une colonne Elementor déjà composée : titre,
 * illustration, carte. Le plugin n'ajoute donc NI carte, NI fond, NI largeur
 * fixe — il remplit la place qu'on lui donne, et rien de plus.
 *
 * Tout est scopé sous .mdlm-member : aucune règle ne peut atteindre un
 * formulaire Forminator, un widget Elementor ou le formulaire de contact.
 */
.mdlm-member__auth {
	width: 100%;
	max-width: none;
	text-align: left;
}

/* En-tête d'un état : un titre, un texte court facultatif. Il appartient au
   formulaire — un écart d'un champ le sépare du premier libellé, pas plus. */
.mdlm-member .mdlm-member__auth-head {
	margin: 0 0 1.25rem;
}

/* Pastille décorative à gauche du titre, centrée sur lui. `nowrap` sur la
   ligne : l'icône ne part jamais seule au-dessus du titre ; c'est le titre qui
   passe à la ligne s'il le faut, grâce à `min-width: 0`. */
.mdlm-member .mdlm-member__auth-heading-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .7rem;
}

.mdlm-member .mdlm-member__auth-heading-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--mdlm-tint);
	color: var(--mdlm-blue);
}

.mdlm-member .mdlm-member__auth-heading-svg {
	display: block;
	width: 22px;
	height: 22px;
}

/*
 * Nunito, si le thème ou Elementor la fournit : AUCUNE police n'est chargée par
 * le plugin. À défaut, Nunito Sans, puis la pile système — jamais un repli
 * disgracieux. 1.375rem = 22 px, soit +2 px sur les 20 px d'avant ; même
 * interligne.
 */
.mdlm-member .mdlm-member__auth-title {
	min-width: 0;
	margin: 0;
	color: var(--mdlm-navy);
	font-family: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Texte d'état : bleu doux, sous le bleu marine du titre et des libellés, mais
   dans la palette bleue — plus le gris neutre d'avant. */
.mdlm-member .mdlm-member__auth-text {
	margin: .5rem 0 0;
	color: var(--mdlm-ink-soft);
	font-size: .95rem;
	line-height: 1.55;
}

/* ── Champs ───────────────────────────────────────────────────────────────
   Depuis 1.8.4, les trois états rendent le MÊME balisage : champ, enveloppe,
   icône, saisie, et bouton œil pour un mot de passe. Plus aucune classe de
   wp_login_form() n'est visée. */
/* Le formulaire épouse sa colonne : aucune largeur imposée par le plugin. */
.mdlm-member__form {
	width: 100%;
	margin: 0;
}

/*
 * Un rythme, trois temps : les champs se suivent d'un écart constant, puis un
 * écart plus large avant les actions. C'est cet écart qui dit « ici, on saisit ;
 * là, on valide ». Les marges verticales se fusionnent : l'écart avant le
 * bouton est donc celui du bouton, quel que soit l'élément qui le précède.
 */
.mdlm-member__auth .mdlm-member__field {
	margin: 0 0 1.1rem;
}

.mdlm-member__auth .mdlm-member__form .mdlm-member__submit {
	margin-top: 1.4rem;
}

.mdlm-member__input {
	display: block;
	width: 100%;
}

.mdlm-member__auth label {
	display: block;
	margin-bottom: .4rem;
	color: var(--mdlm-navy);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
}

.mdlm-member__auth input[type="text"],
.mdlm-member__auth input[type="email"],
.mdlm-member__auth input[type="password"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	background: #FFF;
	border: 1px solid var(--mdlm-border-input);
	border-radius: var(--mdlm-radius-sm);
	color: var(--mdlm-navy);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Survol : la bordure se fonce, sans passer au bleu — le bleu est réservé au
   champ qui a réellement le focus. */
.mdlm-member__auth input[type="text"]:hover,
.mdlm-member__auth input[type="email"]:hover,
.mdlm-member__auth input[type="password"]:hover {
	border-color: var(--mdlm-muted);
}

/*
 * FOCUS : bordure bleue et halo discret. On remplace l'anneau du navigateur
 * plutôt que de le supprimer — un champ qu'on ne voit pas atteindre au clavier
 * est inutilisable.
 */
.mdlm-member__auth input[type="text"]:focus,
.mdlm-member__auth input[type="email"]:focus,
.mdlm-member__auth input[type="password"]:focus {
	outline: none;
	border-color: var(--mdlm-blue);
	box-shadow: 0 0 0 3px rgba(23, 143, 230, .18);
}

/*
 * Gris-bleu clair, 14 px, poids normal : un exemple, jamais une saisie. La
 * valeur tapée reste à 16 px en bleu marine, la différence se voit d'un coup
 * d'œil. OPACITÉ PLEINE : Firefox en applique d'office une réduite, et la teinte
 * est déjà choisie claire.
 */
.mdlm-member__auth input::placeholder {
	color: var(--mdlm-placeholder);
	font-size: 14px;
	font-weight: 400;
	opacity: 1;
}

/* Le remplissage automatique des navigateurs peint un fond jaune : on le
   ramène au blanc sans casser le texte. */
.mdlm-member__auth input:-webkit-autofill {
	-webkit-text-fill-color: var(--mdlm-navy);
	-webkit-box-shadow: 0 0 0 40px #FFF inset;
}

/* ── Enveloppe de saisie : icône à gauche, œil à droite ─────────────────────
   L'icône et le bouton sont posés EN ABSOLU sur le champ, centrés sur sa
   hauteur ; le rembourrage de la saisie leur réserve leur place. Sur un
   téléphone rien ne bouge : le texte ne passe jamais sous l'un ou l'autre. */
.mdlm-member__auth .mdlm-member__input-wrap {
	position: relative;
	display: block;
	width: 100%;
}

/* Spécificité relevée d'un cran : un kit Elementor qui habille les champs
   (`.elementor-kit-N input:not(...)`) ne doit pas reprendre ce rembourrage. */
.mdlm-member .mdlm-member__auth .mdlm-member__input-wrap input.mdlm-member__input {
	padding-left: 2.75rem;
}

.mdlm-member .mdlm-member__auth .mdlm-member__input-wrap--password input.mdlm-member__input {
	padding-right: 3.25rem;
}

.mdlm-member__auth .mdlm-member__input-icon {
	position: absolute;
	top: 50%;
	left: .85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	color: var(--mdlm-blue);
	transform: translateY(-50%);
	pointer-events: none;
}

.mdlm-member__auth .mdlm-member__input-svg {
	display: block;
	width: 19px;
	height: 19px;
}

/*
 * Bouton œil. Qualifié par la BALISE : les thèmes habillent volontiers tout
 * <button> — fond, bordure, couleur au survol et au focus —, et une classe
 * seule perdrait. Chaque état est donc redéclaré, sans !important.
 */
.mdlm-member .mdlm-member__auth button.mdlm-member__toggle {
	position: absolute;
	top: 50%;
	right: .3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	color: var(--mdlm-muted);
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color .15s ease, color .15s ease;
}

.mdlm-member .mdlm-member__auth button.mdlm-member__toggle:hover,
.mdlm-member .mdlm-member__auth button.mdlm-member__toggle:focus {
	background: var(--mdlm-tint);
	border: 0;
	color: var(--mdlm-navy);
}

.mdlm-member .mdlm-member__auth button.mdlm-member__toggle:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: 0;
}

/* `hidden` tant que le script n'a pas pris la main : le display ci-dessus
   l'emporterait sur la feuille du navigateur. */
.mdlm-member .mdlm-member__auth button.mdlm-member__toggle[hidden] {
	display: none;
}

.mdlm-member__auth .mdlm-member__toggle-svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* Un seul pictogramme à la fois : l'œil ouvert propose d'afficher, l'œil barré
   de masquer. Le libellé accessible, lui, est tenu par le script. */
.mdlm-member__auth .mdlm-member__toggle[data-mdlm-visible="false"] .mdlm-member__toggle-svg--hide,
.mdlm-member__auth .mdlm-member__toggle[data-mdlm-visible="true"] .mdlm-member__toggle-svg--show {
	display: none;
}

/* ── Se souvenir de moi ─────────────────────────────────────────────────────
   Une VRAIE case à cocher : seul son dessin change. `appearance: none` retire
   le rendu du système, la coche blanche est un SVG en data URI — aucune
   ressource distante. En contraste forcé (Windows), on rend la main au
   navigateur plutôt que de risquer une case invisible. */
.mdlm-member__auth .mdlm-member__remember {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: -.2rem 0 0;
}

.mdlm-member .mdlm-member__auth input.mdlm-member__checkbox {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: #FFF no-repeat center / 12px 12px;
	border: 1.5px solid var(--mdlm-border-input);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.mdlm-member .mdlm-member__auth input.mdlm-member__checkbox:hover {
	border-color: var(--mdlm-blue);
}

.mdlm-member .mdlm-member__auth input.mdlm-member__checkbox:checked {
	background-color: var(--mdlm-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23FFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: var(--mdlm-blue);
}

.mdlm-member .mdlm-member__auth input.mdlm-member__checkbox:focus {
	outline: none;
}

.mdlm-member .mdlm-member__auth input.mdlm-member__checkbox:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: 2px;
}

.mdlm-member__auth label.mdlm-member__checkbox-label {
	display: inline;
	margin: 0;
	color: var(--mdlm-ink-soft);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

@media (forced-colors: active) {
	.mdlm-member .mdlm-member__auth input.mdlm-member__checkbox {
		-webkit-appearance: auto;
		appearance: auto;
	}
}

/* ══ ACTION PRINCIPALE D'UN ÉCRAN D'AUTHENTIFICATION ══════════════════════
 *
 * Deux éléments différents portent la même action : les <button> des trois
 * états d'authentification — connexion comprise depuis 1.8.4, qui ne rend plus
 * l'<input type="submit"> de wp_login_form() —, et le lien « Se connecter » de
 * l'état déconnecté de Mon compte.
 *
 * Leur GÉOMÉTRIE est donc décrite UNE SEULE FOIS, dans une liste de sélecteurs
 * commune : trois blocs séparés auraient fini par diverger d'un pixel ou d'un
 * dixième de rem, et les écrans n'auraient plus eu le même bouton.
 *
 * Pleine largeur : sur ces écrans, le bouton EST l'action. Rien d'autre ne se
 * dispute l'attention, et une cible pleine largeur se vise au doigt comme à la
 * souris.
 */
.mdlm-member__submit .mdlm-member__button,
.mdlm-member__empty .mdlm-member__actions .mdlm-member__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	padding: .75rem 1.5rem;
	border-radius: var(--mdlm-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.mdlm-member__submit {
	margin: 0 0 1.15rem;
}

/*
 * ── UNE EXCEPTION, ET UNE SEULE ──────────────────────────────────────────
 *
 * Dans la carte « Votre espace adhérent », le bouton n'est pas l'action d'un
 * FORMULAIRE mais celle d'une invitation : il vit au milieu d'un message
 * centré, dans une carte de 36 rem. Étalé sur toute cette largeur, il pèse plus
 * que le texte qu'il accompagne.
 *
 * Il garde donc sa hauteur, ses couleurs, son survol et son focus — toute sa
 * géométrie commune — et ne se voit poser qu'un plafond. En dessous de ce
 * plafond, il reste à 100 % : sur un téléphone, il occupe toujours la largeur
 * disponible.
 */
.mdlm-member__empty .mdlm-member__actions {
	display: flex;
	justify-content: center;
}

.mdlm-member__empty .mdlm-member__actions .mdlm-member__button {
	max-width: 260px;
}

/*
 * Les couleurs — bleu, survol bleu marine, anneau de focus — viennent toutes de
 * la variante « --action », plus bas. Les règles propres à l'<input> de
 * wp_login_form() ont été retirées en 1.8.4 : plus rien ne le rend.
 */

/* Pression visuelle : le bouton s'enfonce d'un pixel, et rien de plus. */
.mdlm-member .mdlm-member__submit button.mdlm-member__button:active {
	transform: translateY(1px);
}

/*
 * Flèche des actions principales d'authentification. Libellé et flèche forment
 * UN groupe centré dans le bouton — la flèche n'est pas repoussée au bord. Au
 * survol comme au focus clavier, elle avance de 3 px, en 150 ms, et rien de
 * plus. Trait légèrement renforcé pour tenir face au texte en gras.
 */
/* Même flèche, mêmes règles, pour le CTA « Découvrir l'adhésion » (1.8.7). */
.mdlm-member .mdlm-member__auth .mdlm-member__submit .mdlm-member__button,
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__actions .mdlm-member__button {
	justify-content: center;
	gap: .6rem;
}

.mdlm-member .mdlm-member__auth .mdlm-member__button-text,
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__button-text {
	min-width: 0;
}

.mdlm-member .mdlm-member__auth .mdlm-member__button-arrow,
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__button-arrow {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	stroke-width: 2;
	transition: transform .15s ease;
}

.mdlm-member .mdlm-member__auth .mdlm-member__button:hover .mdlm-member__button-arrow,
.mdlm-member .mdlm-member__auth .mdlm-member__button:focus-visible .mdlm-member__button-arrow,
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__button:hover .mdlm-member__button-arrow,
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__button:focus-visible .mdlm-member__button-arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.mdlm-member .mdlm-member__auth .mdlm-member__button-arrow,
	.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__button-arrow {
		transition: none;
	}
}

/* ── Lien secondaire ──────────────────────────────────────────────────────── */
/* Sous un bouton pleine largeur, le lien doit se lire comme une issue de
   secours, pas comme une seconde action : centré sous lui, plus petit, sans
   soulignement au repos. */
.mdlm-member__auth-link {
	margin: 0;
	font-size: .9rem;
	text-align: center;
}

.mdlm-member__auth-link a {
	color: var(--mdlm-blue);
	text-decoration: none;
}

.mdlm-member__auth-link a:hover,
.mdlm-member__auth-link a:focus {
	color: var(--mdlm-navy);
	text-decoration: underline;
}

/* ── Messages d'état ──────────────────────────────────────────────────────
   Une ligne bordée, jamais un bandeau pleine largeur : le message accompagne
   le formulaire, il ne le remplace pas. */
.mdlm-member__alert {
	margin: 0 0 1.15rem;
	padding: .75rem 1rem;
	border-left: 3px solid currentColor;
	border-radius: 0 var(--mdlm-radius-sm) var(--mdlm-radius-sm) 0;
	font-size: .92rem;
	line-height: 1.5;
}

.mdlm-member__alert--error {
	color: var(--mdlm-red-hover);
	background: rgba(239, 32, 36, .07);
}

.mdlm-member__alert--success {
	color: var(--mdlm-green-ink);
	background: rgba(105, 184, 44, .10);
}

.mdlm-member__alert--info {
	color: var(--mdlm-navy);
	background: var(--mdlm-tint);
}

/* Les boutons sont pleine largeur à toutes les tailles : il n'y a plus de
   règle mobile à écrire pour cela. On resserre seulement les marges. */
@media screen and (max-width: 30rem) {
	.mdlm-member .mdlm-member__auth-title {
		font-size: 1.25rem;
	}

	.mdlm-member .mdlm-member__auth-heading-row {
		gap: .6rem;
	}

	.mdlm-member .mdlm-member__auth-heading-icon {
		width: 39px;
		height: 39px;
	}

	.mdlm-member .mdlm-member__auth-heading-svg {
		width: 20px;
		height: 20px;
	}

	.mdlm-member .mdlm-member__auth-head {
		margin-bottom: 1.1rem;
	}
}

/* ── Messages ──────────────────────────────────────────────────────────────
   Volontairement générique : « identifiant ou mot de passe incorrect » ne dit
   pas lequel des deux, et ne renseigne donc pas qui cherche à deviner des
   adresses. */
.mdlm-member__error {
	padding: .75rem 1rem;
	border-left: 3px solid currentColor;
	font-weight: 600;
}

.mdlm-member__message {
	font-size: 1.05rem;
}

.mdlm-member__hello {
	font-size: 1.15rem;
	font-weight: 600;
}

/* ── Fiche de compte ───────────────────────────────────────────────────────
   Deux colonnes sur écran confortable, une seule en dessous : un libellé et sa
   valeur ne se lisent pas côte à côte sur un téléphone. */
.mdlm-member__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .25rem 1rem;
	margin: 0 0 1.5rem;
}

@media screen and (min-width: 30rem) {
	.mdlm-member__list {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	}
}

.mdlm-member__label {
	margin: 0;
	font-weight: 600;
}

.mdlm-member__value {
	margin: 0 0 .5rem;
	overflow-wrap: anywhere;
}

.mdlm-member__actions {
	margin-top: 1.5rem;
}

.mdlm-member__button {
	display: inline-block;
	padding: .6rem 1.2rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	text-decoration: none;
}

.mdlm-member__lost {
	font-size: .9rem;
}

/* ── Lien d'en-tête ────────────────────────────────────────────────────────
   Une icône seule, dans une pastille ronde de 40 px : l'en-tête Elementor manque
   de place, et le lien ne doit jamais peser plus que le bouton rouge « Adhérer ».
   Bleu, jamais rouge — le rouge plein reste l'engagement public.

   inline-flex centré, aucune marge, aucun retour à la ligne : la pastille tient
   dans la hauteur de l'en-tête sans la modifier. Mêmes dimensions sur mobile,
   où 40 px restent une zone tactile correcte.

   Règles qualifiées par la BALISE (`a.`) : un thème applique volontiers sa
   couleur de lien et son soulignement, et l'emporterait sur une classe seule.
   Rien ici n'atteint un autre lien ou une autre icône du site. */
.mdlm-account-link {
	--mdlm-navy: #0B3D82;
	--mdlm-navy-deep: #082E63;
	--mdlm-blue: #178FE6;
	--mdlm-tint: #EAF5FE;
}

a.mdlm-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mdlm-navy);
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .15s ease, color .15s ease;
}

a.mdlm-account-link:hover {
	background: var(--mdlm-tint);
	color: var(--mdlm-navy-deep);
	text-decoration: none;
}

a.mdlm-account-link:focus {
	text-decoration: none;
}

/* Jamais de focus supprimé sans remplacement : un anneau net, décalé du disque. */
a.mdlm-account-link:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: 2px;
	background: var(--mdlm-tint);
	color: var(--mdlm-navy-deep);
}

a.mdlm-account-link .mdlm-account-link__icon {
	display: block;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: 0;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	a.mdlm-account-link {
		transition: none;
	}
}

/* ══ COMPOSANT COMPTE — ÉTAT CONNECTÉ, MENU, CONFIRMATION ═════════════════
 *
 * Tout part de `.mdlm-account*` : aucune règle ne peut atteindre un autre
 * élément de l'en-tête, et surtout pas le bouton « Adhérer », qui n'est pas
 * touché par ce lot. Les jetons sont ceux déjà posés plus haut sur
 * `.mdlm-account-link` ; ils sont répétés ici pour que le groupe et la boîte —
 * que le script déplace sous <body> — restent justes hors de ce contexte.
 *
 * ÉTAT CONNECTÉ, VISIBLE SANS SURVOL : le groupe porte en permanence un fond
 * bleu très clair et une bordure discrète. C'est le seul signal — ni pastille
 * verte, ni badge, ni texte : un en-tête n'est pas un centre de notifications.
 * La hauteur reste celle du lien déconnecté (48 px) : l'en-tête ne grandit pas.
 */

.mdlm-account {
	--mdlm-navy: #0B3D82;
	--mdlm-navy-deep: #082E63;
	--mdlm-blue: #178FE6;
	--mdlm-blue-ink: #0A63B0;
	--mdlm-tint: #EAF5FE;
	--mdlm-line: #D9ECFA;
	--mdlm-exit: #C9181C;

	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	height: 48px;
	border: 1px solid var(--mdlm-line);
	border-radius: 999px;
	background: var(--mdlm-tint);
	vertical-align: middle;
}

/* Le lien principal perd son disque : c'est le GROUPE qui porte la pastille. */
.mdlm-account a.mdlm-account-link--logged-in {
	width: 42px;
	height: 100%;
	border-radius: 999px 0 0 999px;
	background: transparent;
	color: var(--mdlm-blue-ink);
}

.mdlm-account a.mdlm-account-link--logged-in:hover,
.mdlm-account a.mdlm-account-link--logged-in:focus-visible {
	background: #DCEDFC;
	color: var(--mdlm-navy-deep);
}

.mdlm-account a.mdlm-account-link--logged-in .mdlm-account-link__icon {
	width: 26px;
	height: 26px;
}

/* Zone secondaire : étroite mais HAUTE — 28 × 48 px reste une cible tactile
   correcte, sans élargir le composant plus que nécessaire. */
.mdlm-account button.mdlm-account__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 28px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: transparent;
	color: var(--mdlm-blue-ink);
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: background-color .15s ease, color .15s ease;
}

.mdlm-account button.mdlm-account__toggle:hover {
	background: #DCEDFC;
	color: var(--mdlm-navy-deep);
}

.mdlm-account button.mdlm-account__toggle:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: -2px;
	background: #DCEDFC;
}

.mdlm-account .mdlm-account__chevron {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
	transition: transform .15s ease;
}

.mdlm-account[data-mdlm-open] .mdlm-account__chevron {
	transform: rotate(180deg);
}

/* ── Menu secondaire ───────────────────────────────────────────────────── */

.mdlm-account .mdlm-account__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--mdlm-line);
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 10px 26px rgba(11, 61, 130, .14);
}

.mdlm-account .mdlm-account__menu[hidden] {
	display: none;
}

.mdlm-account .mdlm-account__item {
	display: flex;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--mdlm-navy);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: background-color .15s ease, color .15s ease;
}

.mdlm-account .mdlm-account__item:hover {
	background: var(--mdlm-tint);
	color: var(--mdlm-navy-deep);
	text-decoration: none;
}

.mdlm-account .mdlm-account__item:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: -2px;
	background: var(--mdlm-tint);
}

/* La sortie ne se teinte qu'au survol ou au focus : au repos, elle reste une
   ligne de menu ordinaire — un rouge permanent dans un en-tête alarmerait sans
   raison. */
.mdlm-account .mdlm-account__item--exit:hover,
.mdlm-account .mdlm-account__item--exit:focus-visible {
	color: var(--mdlm-exit);
}

.mdlm-account .mdlm-account__item-icon {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}

/* ── Confirmation de déconnexion ─────────────────────────────────────────
 *
 * Refondue en 1.8.24 pour porter l'identité du site plutôt qu'un gris de boîte
 * de dialogue. Les valeurs ne sont pas inventées : elles sont RELEVÉES sur le
 * bouton « Adhérer » de l'en-tête réel — rouge `#EF2024`, texte blanc, pastille
 * (rayon plein), Nunito 800, 48 px de haut, aucune ombre. Le bouton de sortie
 * de cette boîte est donc le même bouton, au même endroit de la palette.
 *
 * TYPOGRAPHIE : `Nunito` est déjà servie par le kit Elementor du site — c'est
 * la police de ses titres et de son bouton « Adhérer ». On la RÉFÉRENCE, on ne
 * la charge pas (règle du § 8), avec la pile système en repli : sans elle, la
 * boîte reste lisible et sobre.
 *
 * Le comportement n'a pas bougé d'une ligne : mêmes attributs, mêmes crochets
 * pour le script, mêmes rôles ARIA. Ce bloc ne fait que du dessin. */

.mdlm-account-dialog {
	--mdlm-navy: #0B3D82;
	--mdlm-navy-deep: #082E63;
	--mdlm-blue: #178FE6;
	--mdlm-blue-ink: #0A63B0;
	--mdlm-tint: #EAF5FE;
	--mdlm-line: #D9ECFA;
	--mdlm-line-strong: #B8C9DB;
	--mdlm-muted: #50677F;
	--mdlm-exit: #EF2024;
	--mdlm-exit-deep: #C9181C;
	--mdlm-font: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 20px;
	font-family: var(--mdlm-font);
}

.mdlm-account-dialog[hidden] {
	display: none;
}

/* Voile BLEUTÉ, pas noir : le site est bleu, et un noir plat le ferait
   paraître éteint. Le flou reste discret et n'est appliqué que là où il est
   réellement pris en charge — ailleurs, le voile seul suffit. */
.mdlm-account-dialog .mdlm-account-dialog__overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 46, 99, .42);
}

@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
	.mdlm-account-dialog .mdlm-account-dialog__overlay {
		background: rgba(8, 46, 99, .34);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
}

.mdlm-account-dialog .mdlm-account-dialog__box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	padding: 28px 28px 24px;
	border: 1px solid var(--mdlm-line);
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 0 24px 60px rgba(8, 46, 99, .22), 0 2px 8px rgba(8, 46, 99, .08);
	text-align: center;
}

/* Pastille d'en-tête : BLEUE, pas rouge. La boîte pose une question, elle
   n'annonce pas un incident — un rond rouge en tête alarmerait avant même
   d'avoir été lu. Le rouge est réservé au bouton qui agit. */
.mdlm-account-dialog .mdlm-account-dialog__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	margin: 0 0 16px;
	border-radius: 50%;
	background: var(--mdlm-tint);
	color: var(--mdlm-blue-ink);
}

.mdlm-account-dialog .mdlm-account-dialog__icon {
	display: block;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}

.mdlm-account-dialog .mdlm-account-dialog__title {
	margin: 0 0 10px;
	padding: 0;
	color: var(--mdlm-navy);
	font-family: var(--mdlm-font);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.mdlm-account-dialog .mdlm-account-dialog__text {
	margin: 0 auto 24px;
	padding: 0;
	max-width: 30ch;
	color: var(--mdlm-muted);
	font-family: var(--mdlm-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.mdlm-account-dialog .mdlm-account-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Les deux boutons partagent UNE géométrie : deux définitions séparées
   finiraient par diverger d'un pixel, et la paire cesserait d'en être une. */
.mdlm-account-dialog .mdlm-account-dialog__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	box-sizing: border-box;
	min-width: 140px;
	min-height: 48px;
	margin: 0;
	padding: 0 22px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--mdlm-font);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.mdlm-account-dialog .mdlm-account-dialog__button:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: 3px;
}

.mdlm-account-dialog .mdlm-account-dialog__button--cancel {
	border-color: var(--mdlm-line);
	background: #FFFFFF;
	color: var(--mdlm-navy);
}

.mdlm-account-dialog .mdlm-account-dialog__button--cancel:hover {
	border-color: var(--mdlm-blue);
	background: var(--mdlm-tint);
	color: var(--mdlm-navy-deep);
}

/* Le rouge d'« Adhérer », au caractère près. */
.mdlm-account-dialog a.mdlm-account-dialog__button--exit {
	border-color: var(--mdlm-exit);
	background: var(--mdlm-exit);
	color: #FFFFFF;
	text-decoration: none;
}

.mdlm-account-dialog a.mdlm-account-dialog__button--exit:hover,
.mdlm-account-dialog a.mdlm-account-dialog__button--exit:focus-visible {
	border-color: var(--mdlm-exit-deep);
	background: var(--mdlm-exit-deep);
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(201, 24, 28, .26);
}

/* ── Téléphone ───────────────────────────────────────────────────────────
 * Les boutons passent en colonne, la SORTIE en premier : sur une pile, le
 * pouce tombe sur le bouton du bas, et ce doit être « Annuler ». */
@media (max-width: 480px) {
	.mdlm-account-dialog {
		padding: 16px;
	}

	.mdlm-account-dialog .mdlm-account-dialog__box {
		padding: 24px 20px 20px;
		border-radius: 20px;
	}

	.mdlm-account-dialog .mdlm-account-dialog__badge {
		width: 50px;
		height: 50px;
		margin-bottom: 14px;
	}

	.mdlm-account-dialog .mdlm-account-dialog__title {
		font-size: 20px;
	}

	.mdlm-account-dialog .mdlm-account-dialog__text {
		margin-bottom: 20px;
		font-size: 14.5px;
	}

	.mdlm-account-dialog .mdlm-account-dialog__actions {
		flex-direction: column-reverse;
		gap: 10px;
	}

	.mdlm-account-dialog .mdlm-account-dialog__button {
		width: 100%;
		min-width: 0;
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * BOUTON DE DÉCONNEXION AUTONOME — [mdlm_logout_button]   (1.8.25, couleurs 1.8.26)
 *
 * Pour un menu mobile ou une sidebar, là où l'icône de l'en-tête n'a pas sa
 * place.
 *
 * ── LA GÉOMÉTRIE VIENT DU VOISIN, LA COULEUR DE L'ACTION ────────────────
 * Le gabarit reste celui de « Mon compte », relevé dans le menu mobile réel du
 * site — pleine largeur, 52 px, rayon 12, Nunito 700 16 px : le bouton ne doit
 * pas se remarquer comme une pièce rapportée dans la liste.
 *
 * Mais **ce n'est pas une entrée de menu comme les autres** : elle met fin à la
 * session. En bleu marine sur blanc (1.8.25), rien ne la distinguait de
 * « Mon compte ». Elle passe donc en **danger DOUX** : fond rosé très pâle,
 * bordure rose, texte et pictogramme rouge profond.
 *
 * **Jamais un rouge plein.** Le § 8 réserve `#EF2024` plein à l'ENGAGEMENT —
 * « Adhérer », dans le même popup, deux entrées plus bas. Deux rouges pleins
 * côte à côte, et le plus important des deux perd. Le contour dit « attention »,
 * l'aplat dit « clique ici » : un seul des deux est vrai ici.
 *
 * Contraste calculé du texte : **5,37:1** au repos, **5,74:1** au survol,
 * **5,26:1** à l'appui — AA tenu partout, et le rouge reste assez sombre pour
 * ne pas crier.
 *
 * ── PORTÉE STRICTE ──────────────────────────────────────────────────────
 * Chaque règle part de `.mdlm-logout-button`. **Aucune ne vise un bouton
 * Elementor**, ni `.elementor-button`, ni un `a` de menu : le plugin habille
 * l'élément qu'il rend, et rien d'autre. La balise (`a.mdlm-logout-button`)
 * est qualifiée pour passer devant la couleur de lien du thème, sans aucun
 * `!important`.
 * ════════════════════════════════════════════════════════════════════════ */

a.mdlm-logout-button {
	/* Jetons LOCAUX : ceux de la confirmation vivent sur `.mdlm-account-dialog`
	   et ne descendent pas jusqu'ici. Chaque couleur n'est écrite qu'une fois,
	   et un thème qui les redéfinirait reprendrait la main sans toucher à une
	   règle.

	   L'encre est le `#C9181C` du § 8 — le rouge de survol d'« Adhérer », plus
	   sombre que `#EF2024` et donc lisible en TEXTE, ce que le rouge plein
	   n'est pas. Les quatre autres en sont des dérivés très pâles : le § 8 n'a
	   pas de famille rosée, et en inventer une ailleurs l'aurait dispersée. */
	--mdlm-logout-ink: #C9181C;
	--mdlm-logout-ink-hover: #B91519;
	--mdlm-logout-surface: #FFF4F4;
	--mdlm-logout-surface-hover: #FDEBEC;
	--mdlm-logout-surface-active: #FBDFE0;
	--mdlm-logout-line: #F6B7B9;
	--mdlm-logout-line-hover: #EF8F92;
	--mdlm-logout-font: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	/* 52 px : la cible tactile confortable, et la hauteur des entrées voisines. */
	min-height: 52px;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--mdlm-logout-line);
	border-radius: 12px;
	background: var(--mdlm-logout-surface);
	color: var(--mdlm-logout-ink);
	font-family: var(--mdlm-logout-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/*
 * Couleurs protégées (1.8.37) : classe DOUBLÉE. Le kit Elementor pose
 * `.elementor-kit-134 a { color }` (0,1,1) et `a:hover` (0,2,1) ; à poids égal,
 * l'ordre d'impression décidait, et le texte passait au bleu. Ces règles pèsent
 * 0,2,1 au repos et 0,3,1 au survol, au focus et à l'appui, quel que soit l'ordre.
 */
a.mdlm-logout-button.mdlm-logout-button,
a.mdlm-logout-button.mdlm-logout-button:visited {
	color: var(--mdlm-logout-ink);
}

a.mdlm-logout-button.mdlm-logout-button:hover,
a.mdlm-logout-button.mdlm-logout-button:focus,
a.mdlm-logout-button.mdlm-logout-button:focus-visible,
a.mdlm-logout-button.mdlm-logout-button:active {
	color: var(--mdlm-logout-ink-hover);
}

a.mdlm-logout-button:hover,
a.mdlm-logout-button:focus {
	border-color: var(--mdlm-logout-line-hover);
	background: var(--mdlm-logout-surface-hover);
	color: var(--mdlm-logout-ink-hover);
	text-decoration: none;
}

/* Le thème pose un contour noir et une ombre blanche sur tout focus :
   neutralisés ici, remplacés par un anneau de la couleur du bouton — un anneau
   bleu sur un bouton rouge se lirait comme un second composant. */
a.mdlm-logout-button:focus {
	outline: none;
	box-shadow: none;
}

a.mdlm-logout-button:focus-visible {
	outline: 2px solid var(--mdlm-logout-ink);
	outline-offset: 2px;
}

a.mdlm-logout-button:active {
	border-color: var(--mdlm-logout-line-hover);
	background: var(--mdlm-logout-surface-active);
	color: var(--mdlm-logout-ink-hover);
}

.mdlm-logout-button .mdlm-logout-button__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: inherit;
}

.mdlm-logout-button .mdlm-logout-button__label {
	/* Un libellé long se replie plutôt que de pousser l'icône hors du bouton. */
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mdlm-account button.mdlm-account__toggle,
	.mdlm-account .mdlm-account__chevron,
	.mdlm-account .mdlm-account__item,
	.mdlm-account-dialog .mdlm-account-dialog__button,
	a.mdlm-logout-button {
		transition: none;
	}
}

/* ══ ESPACE ADHÉRENT — DESIGN ═════════════════════════════════════════════
 *
 * Palette officielle (§ 8 de CLAUDE.md) posée en variables LOCALES à
 * .mdlm-member : rien ne fuit vers le reste du site, et un thème qui
 * redéfinirait ces jetons reprendrait la main sans toucher à une seule règle.
 * Aucune valeur n'est répétée en dur ailleurs dans cette feuille.
 *
 * Aucune police n'est chargée : la typographie vient du thème, on ne règle ici
 * que la HIÉRARCHIE — poids, tailles relatives, couleurs.
 *
 * Chaleureux et associatif, jamais « tableau de bord SaaS » : cartes blanches,
 * bordures bleu très clair, coins arrondis, ombres à peine perceptibles.
 */

.mdlm-member {
	--mdlm-navy: #0B3D82;
	--mdlm-blue: #178FE6;
	--mdlm-red: #EF2024;
	--mdlm-red-hover: #C9181C;
	--mdlm-green: #69B82C;
	--mdlm-green-ink: #3F7A12;
	--mdlm-amber: #FFB000;
	--mdlm-amber-ink: #7A5200;
	--mdlm-tint: #EAF5FE;
	--mdlm-line: #D9ECFA;
	--mdlm-muted: #50677F;
	--mdlm-pale: #F8FBFE;
	--mdlm-border-input: #B8C9DB;
	/* Authentification : texte secondaire bleu doux, et placeholder gris-bleu
	   clair — deux fonctions, deux teintes, jamais le gris de --mdlm-muted. */
	--mdlm-ink-soft: #365B85;
	--mdlm-placeholder: #7F92AA;
	--mdlm-radius: 12px;
	--mdlm-radius-sm: 8px;
	--mdlm-shadow: 0 1px 2px rgba(11, 61, 130, .05);
	/* Survol d'un onglet (1.8.27) : un cran sous l'onglet actif (#EAF5FE +
	   barre + bleu marine), texte bleu soutenu lisible (≈ 5,6:1). */
	--mdlm-tab-hover: #F1F8FE;
	--mdlm-blue-ink: #0A63B0;
}

/* Les pictogrammes suivent la couleur du texte : aucune information ne repose
   sur eux, ils accompagnent toujours un mot écrit. */
.mdlm-member__icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ── Bandeau d'accueil ──────────────────────────────────────────────────── */
.mdlm-member__hero {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0 0 1.75rem;
	padding: 1.75rem 2.25rem;
	background: linear-gradient(135deg, var(--mdlm-tint) 0%, var(--mdlm-pale) 100%);
	border: 1px solid var(--mdlm-line);
	border-radius: var(--mdlm-radius);
}

.mdlm-member__hero-main {
	flex: 1 1 auto;
	min-width: 0;
}

.mdlm-member__eyebrow {
	margin: 0 0 .35rem;
	color: var(--mdlm-blue);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mdlm-member .mdlm-member__hello {
	margin: 0 0 .7rem;
	color: var(--mdlm-navy);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
}

.mdlm-member__hero-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .6rem;
}

.mdlm-member__hero-year {
	color: var(--mdlm-navy);
	font-size: 1.05rem;
	font-weight: 600;
}

.mdlm-member__hero-school {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .9rem;
	color: var(--mdlm-muted);
	font-size: .95rem;
}

/* Une pastille et une phrase courte, là où s'étalait un bandeau vert pleine
   largeur qui répétait le badge affiché deux lignes plus haut. */
.mdlm-member__hero-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0;
	color: var(--mdlm-muted);
	font-size: .9rem;
	line-height: 1.5;
}

.mdlm-member__hero-school .mdlm-member__icon {
	color: var(--mdlm-blue);
}

/* Zone décorative : trois disques, aucune image, aucune dépendance. Elle
   n'apporte aucune information — donc elle disparaît sans regret en dessous de
   48 rem, où chaque pixel doit servir au texte. */
.mdlm-member__hero-decor {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .6rem;
}

/* Photo de profil MDLM, à la place du motif (1.8.34). Rond, recadré, liseré
   blanc sur le dégradé du bandeau ; aucun cadre ni texte autour. */
.mdlm-member__hero-photo {
	flex: 0 0 auto;
	width: 100px;
	height: 100px;
	overflow: hidden;
	border: 3px solid #FFF;
	border-radius: 50%;
	background: var(--mdlm-tint);
	box-shadow: 0 0 0 1px var(--mdlm-line), var(--mdlm-shadow);
}

.mdlm-member .mdlm-member__hero-photo img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}

.mdlm-member__hero-decor span {
	display: block;
	border-radius: 50%;
}

/*
 * Trois disques d'une SEULE famille de bleus, et non un aplat de couleurs : la
 * décoration accompagne le bandeau, elle ne rivalise pas avec le badge de
 * statut ni avec le bouton d'action.
 */
.mdlm-member__hero-decor span:nth-child(1) {
	width: 18px;
	height: 18px;
	background: var(--mdlm-blue);
	opacity: .22;
}

.mdlm-member__hero-decor span:nth-child(2) {
	width: 58px;
	height: 58px;
	background: var(--mdlm-blue);
	opacity: .12;
}

.mdlm-member__hero-decor span:nth-child(3) {
	width: 30px;
	height: 30px;
	background: var(--mdlm-navy);
	opacity: .10;
}

/* ── Badge de statut ──────────────────────────────────────────────────────
   Le mot est TOUJOURS écrit : la couleur souligne, elle ne porte jamais
   l'information à elle seule. */
.mdlm-member__badge {
	display: inline-block;
	padding: .22rem .75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mdlm-member__badge--active {
	color: var(--mdlm-green-ink);
	background: rgba(105, 184, 44, .14);
}

.mdlm-member__badge--pending {
	color: var(--mdlm-amber-ink);
	background: rgba(255, 176, 0, .16);
}

.mdlm-member__badge--expired {
	color: var(--mdlm-muted);
	background: rgba(80, 103, 127, .10);
}

/* ── Pastilles d'état ─────────────────────────────────────────────────────
   L'état des droits et la confirmation de paiement se répètent d'un écran à
   l'autre : en pavé coloré ils saturaient la page, en pastille ils informent
   sans crier. Le vert reste employé avec parcimonie, sur une surface réduite.

   Le mot est toujours écrit : la couleur et le pictogramme ne font que
   souligner. */
.mdlm-member__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .28rem .75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.mdlm-member__chip--on {
	color: var(--mdlm-green-ink);
	background: rgba(105, 184, 44, .10);
}

.mdlm-member__chip--off,
.mdlm-member__chip--muted {
	color: var(--mdlm-muted);
	background: rgba(80, 103, 127, .06);
}

.mdlm-member__chip .mdlm-member__icon {
	width: 15px;
	height: 15px;
}

/* Confirmation discrete : un pictogramme, une phrase, pas d'aplat. Le vert se
   limite a la coche, ce qui suffit a signaler une bonne nouvelle sans repeindre
   la carte. */
.mdlm-member__confirm {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: .9rem 0 0;
	color: var(--mdlm-muted);
	font-size: .9rem;
	line-height: 1.5;
}

.mdlm-member__confirm .mdlm-member__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--mdlm-green-ink);
	transform: translateY(2px);
}

.mdlm-member__confirm strong {
	color: var(--mdlm-navy);
	font-weight: 600;
}

/* Une pastille, puis une phrase courte : elles se suivent sur une ligne et
   passent l'une sous l'autre quand la place manque. */
.mdlm-member__chip-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .7rem;
	margin: 1rem 0 0;
}

.mdlm-member__chip-text {
	color: var(--mdlm-muted);
	font-size: .875rem;
	line-height: 1.5;
}

/* ── Onglets ──────────────────────────────────────────────────────────────
   Des liens, pas des boutons pilotés par script : le clavier les atteint
   nativement et l'onglet courant porte aria-current. Sur petit écran la barre
   défile horizontalement — et elle seule, jamais la page. */
.mdlm-member__tabs {
	display: flex;
	gap: .25rem;
	margin: 0 0 1.75rem;
	border-bottom: 2px solid var(--mdlm-line);

	/*
	 * ── LA BARRE DÉFILE, LA PAGE NON, ET RIEN NE DÉBORDE VERTICALEMENT ──
	 *
	 * « overflow-x: auto » seul met implicitement overflow-y à « auto » : la
	 * bordure basse de l'onglet actif, qui dépasse d'un pixel, suffisait alors
	 * à faire apparaître une barre de défilement VERTICALE parasite dans la
	 * navigation. overflow-y: hidden ferme la question.
	 *
	 * scrollbar-width: none masque la barre horizontale elle-même : le défilement
	 * reste possible au doigt et à la molette, sans filet gris en travers des
	 * onglets. -webkit-scrollbar fait de même sur les moteurs WebKit.
	 */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mdlm-member__tabs::-webkit-scrollbar {
	display: none;
}

/*
 * La barre active est un PSEUDO-ELEMENT, pas une bordure.
 *
 * Avec une bordure, l'onglet inactif en portait une transparente de meme
 * epaisseur : elle se superposait mal a la ligne du conteneur et laissait voir
 * DEUX traits. Le pseudo-element, lui, se pose exactement par-dessus la ligne
 * (bottom: -2px pour 2px de bordure) : on ne voit qu'un seul trait, et il
 * descend juste ce qu'il faut pour paraitre pose dessus.
 */
.mdlm-member__tab {
	position: relative;
	flex: 0 0 auto;
	padding: .75rem 1.05rem .8rem;
	border-radius: var(--mdlm-radius-sm) var(--mdlm-radius-sm) 0 0;
	color: var(--mdlm-muted);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}

/*
 * Survol et focus clavier : fond bleu très clair, texte bleu soutenu. Jamais
 * sur l'onglet ACTIF, qui garde son fond, son bleu marine et sa barre — avant
 * 1.8.27, le survoler le faisait retomber au rang d'un onglet ordinaire.
 * `:focus` seul ne colore plus rien : un clic à la souris ne laisse pas d'état.
 */
.mdlm-member__tab:not(.mdlm-member__tab--active):hover,
.mdlm-member__tab:not(.mdlm-member__tab--active):focus-visible {
	color: var(--mdlm-blue-ink);
	background: var(--mdlm-tab-hover);
}

.mdlm-member__tab:focus:not(:focus-visible) {
	outline: none;
}

.mdlm-member__tab:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: -3px;
}

/*
 * L'onglet actif porte une barre BLEUE et épaisse. Le rouge est la couleur des
 * appels à l'action — « Adhérer », « Télécharger » — et l'employer pour une
 * position de navigation le dévaluait tout en attirant l'œil au mauvais endroit.
 */
.mdlm-member__tab--active {
	color: var(--mdlm-navy);
	background: var(--mdlm-tint);
}

/*
 * ── UN SEUL TRAIT, SUR TOUTE LA LARGEUR DE L'ONGLET ──────────────────────
 *
 * « left: 0; right: 0 » plutôt qu'un retrait : le fond actif et la barre
 * forment ainsi UNE SEULE composante, et non un bloc surmontant un trait plus
 * court qui paraissait détaché.
 *
 * « bottom: -2px » pose la barre exactement sur la bordure de 2 px du
 * conteneur, et « z-index: 1 » la peint PAR-DESSUS : la ligne bleu clair
 * disparaît sous l'onglet actif au lieu de transparaître. On ne voit donc
 * qu'un seul trait, simplement plus épais et plus foncé à cet endroit.
 */
.mdlm-member__tab--active::after {
	content: "";
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: -2px;
	left: 0;
	height: 4px;
	border-radius: 2px 2px 0 0;
	background: var(--mdlm-blue);
}

/* ── En-tête de section ─────────────────────────────────────────────────── */
.mdlm-member__section-head {
	margin: 0 0 1.25rem;
}

.mdlm-member .mdlm-member__section-title {
	margin: 0 0 .3rem;
	color: var(--mdlm-navy);
	font-size: 1.35rem;
	font-weight: 700;
}

.mdlm-member__section-text {
	margin: 0;
	color: var(--mdlm-muted);
	font-size: .95rem;
	line-height: 1.55;
}

/* ── Grille de cartes ─────────────────────────────────────────────────────
   auto-fit plutôt qu'une requête média : la grille mesure son CONTENEUR réel,
   donc elle se comporte correctement dans une colonne Elementor étroite comme
   en pleine largeur. Le min() interdit tout débordement horizontal. */
.mdlm-member__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	align-items: start;
	gap: 1.25rem;
	margin: 0 0 1.25rem;
}

/* Deux colonnes au plus : au-delà, les cartes de réglages deviennent des
   bandeaux étroits illisibles. */
.mdlm-member__grid--duo {
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	max-width: 100%;
}

.mdlm-member__card {
	background: #FFF;
	border: 1px solid var(--mdlm-line);
	border-radius: var(--mdlm-radius);
	box-shadow: var(--mdlm-shadow);
	overflow: hidden;
}

.mdlm-member__card--wide {
	margin: 0 0 1.25rem;
}

/*
 * -- OU METTRE L'AIR DANS UN EN-TETE --------------------------------------
 *
 * La passe precedente avait resserre les deux espaces a la fois. C'etait une
 * erreur : un titre et son sous-titre forment UN COUPLE, ils ont besoin de
 * respirer entre eux ; le vide, lui, se trouvait SOUS le sous-titre, avant le
 * filet.
 *
 * On redonne donc .1rem au couple et on en retire .25rem en bas. Le bilan est
 * negatif -- l'en-tete est plus court qu'avant, pas plus haut -- et l'oeil y
 * gagne tout de meme.
 */
/*
 * -- UN OBJET MEDIA, PAS DEUX BLOCS EMPILES -------------------------------
 *
 * L'icone et la colonne de texte sont deux enfants de l'en-tete. Le titre et
 * le sous-titre vivent dans la colonne, donc ils partagent la meme abscisse --
 * et cela reste vrai si le sous-titre passe a la ligne.
 *
 * flex-start, et non center : l'icone reste accrochee au TITRE qu'elle
 * designe. Centree, elle descendrait vers le milieu du bloc des qu'un
 * sous-titre occuperait deux lignes.
 *
 * Le rembourrage bas est nettement plus court que le haut : l'en-tete se
 * termine sur un sous-titre, qui porte deja sa propre demi-interligne.
 */
.mdlm-member__card-head {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: 1rem 1.4rem .45rem;
	border-bottom: 1px solid var(--mdlm-line);
	background: var(--mdlm-pale);
}

/* La colonne de texte : min-width a zero pour qu'un titre long puisse revenir
   a la ligne au lieu d'etirer l'en-tete. */
.mdlm-member__card-heading {
	flex: 1 1 auto;
	min-width: 0;
}

.mdlm-member .mdlm-member__card-title {
	margin: 0;
	color: var(--mdlm-navy);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.mdlm-member__card-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mdlm-tint);
	color: var(--mdlm-blue);
}

.mdlm-member__card-subtitle {
	margin: .4rem 0 0;
	color: var(--mdlm-muted);
	font-size: .85rem;
	line-height: 1.35;
}

/*
 * Carte d'exercice : son sous-titre porte le STATUT de cette annee-la. Avec
 * plusieurs exercices empiles, c'est la seule facon de savoir lequel est
 * lequel sans remonter au bandeau.
 */
.mdlm-member__card--exercise .mdlm-member__card-subtitle {
	display: inline-block;
	margin-top: .5rem;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--mdlm-tint);
	color: var(--mdlm-navy);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Une suite d'exercices se lit comme une liste : meme ecart entre chacun. */
.mdlm-member__card--exercise + .mdlm-member__card--exercise {
	margin-top: 1.25rem;
}

/*
 * Le rembourrage bas est plus court que le haut : une carte se termine sur une
 * valeur ou un bouton, qui portent deja leur propre marge. Repeter la meme
 * hauteur en bas laissait un vide que rien ne justifiait.
 */
.mdlm-member__card-body {
	padding: 1.15rem 1.4rem 1.15rem;
}

.mdlm-member__card-body > :last-child {
	margin-bottom: 0;
}

.mdlm-member__hint {
	margin: .85rem 0 0;
	color: var(--mdlm-muted);
	font-size: .875rem;
	line-height: 1.55;
}

/* ── Listes label / valeur ────────────────────────────────────────────────
   Deux colonnes quand la place le permet, une seule en dessous : un libellé et
   sa valeur ne se lisent pas côte à côte sur un téléphone. */
.mdlm-member__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .1rem .75rem;
	margin: 0 0 .5rem;
}

/* Derniere liste d'une carte : elle s'arrete ou elle s'arrete. */
.mdlm-member__card-body > .mdlm-member__list:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 26rem) {
	.mdlm-member__list {
		grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
		gap: .55rem .75rem;
	}
}

.mdlm-member__label {
	margin: 0;
	color: var(--mdlm-muted);
	font-size: .875rem;
	font-weight: 600;
}

.mdlm-member__value {
	margin: 0 0 .55rem;
	color: var(--mdlm-navy);
	overflow-wrap: anywhere;
}

@media screen and (min-width: 26rem) {
	.mdlm-member__value {
		margin-bottom: 0;
	}
}

.mdlm-member__value--amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Pastille : le mode de soutien, en toutes lettres. */
.mdlm-member__pill {
	display: inline-block;
	padding: .2rem .7rem;
	border-radius: 999px;
	background: var(--mdlm-tint);
	color: var(--mdlm-navy);
	font-size: .85rem;
	font-weight: 600;
}

/* Synthèse financière : les montants s'alignent sur leurs chiffres, pour que
   deux lignes se comparent d'un coup d'œil. */
.mdlm-member__summary .mdlm-member__value {
	font-variant-numeric: tabular-nums;
}

/* ── Note d'aide ──────────────────────────────────────────────────────────── */
.mdlm-member__note {
	margin: 1.5rem 0 0;
	padding: .9rem 0 0;
	border-top: 1px solid var(--mdlm-line);
}

.mdlm-member__note-title {
	margin: 0;
	color: var(--mdlm-navy);
	font-size: .9rem;
	font-weight: 600;
}

.mdlm-member__note-text {
	margin: .3rem 0 0;
	color: var(--mdlm-muted);
	font-size: .875rem;
	line-height: 1.55;
}

/* ── Encaissements ─────────────────────────────────────────────────────────
   Des blocs étiquetés, pas une ligne compacte : sur un téléphone ils s'empilent
   au lieu de se télescoper. */
.mdlm-member__payments {
	margin: 1.25rem 0 0;
}

/*
 * ── UN ENCAISSEMENT TIENT SUR UNE LIGNE ───────────────────────────────────
 *
 * Trois colonnes : le montant, le groupe de métadonnées, l'action. Le groupe
 * du milieu prend tout l'espace restant (1fr) et se subdivise lui-même, ce qui
 * permet au nombre de métadonnées de varier — la date manque parfois, la
 * référence est facultative — sans jamais décaler le bouton.
 *
 * « minmax(0, 1fr) » et non « 1fr » : sans le minimum à zéro, une référence
 * longue imposerait sa largeur à la piste et pousserait le bouton hors du bloc.
 *
 * Sous 48 rem, les trois colonnes se replient (voir plus bas).
 */
.mdlm-member__payment {
	display: grid;
	grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) auto;
	align-items: center;
	gap: .75rem 1.25rem;
	padding: .9rem 1.15rem;
	margin: 0 0 .65rem;
	background: var(--mdlm-pale);
	border: 1px solid var(--mdlm-line);
	border-radius: var(--mdlm-radius-sm);
}

.mdlm-member__payment-action {
	min-width: 0;
}

.mdlm-member__payment-action .mdlm-member__actions {
	margin: 0;
}

/* Dans la ligne compacte, le bouton se contente de ce qu'il lui faut. */
.mdlm-member__payment-action .mdlm-member__button {
	padding: .55rem 1rem;
	font-size: .88rem;
	white-space: nowrap;
}

.mdlm-member__payment:last-child {
	margin-bottom: 0;
}

.mdlm-member .mdlm-member__payment-amount {
	margin: 0;
	color: var(--mdlm-navy);
	font-size: 1.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * 11 rem par métadonnée : c'est la largeur qu'exige « MDLM-COT-2026-2027-000001 »
 * pour tenir sur une seule ligne à .82 rem. Une piste plus étroite ferait
 * revenir la référence à la ligne au moment précis où les quatre colonnes
 * apparaissent — d'où ce minimum, mesuré, plutôt qu'une valeur ronde.
 *
 * auto-fit distribue ce qui tient : quatre métadonnées côte à côte sur un
 * écran large, deux sur une tablette, une sur un téléphone. Le bouton, lui, ne
 * bouge pas de sa colonne.
 */
.mdlm-member__payment-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: .6rem 1rem;
	min-width: 0;
}

.mdlm-member__meta {
	min-width: 0;
}

/*
 * Ce sont des ÉTIQUETTES, pas des titres : elles nomment la donnée, elles ne
 * la concurrencent pas. D'où une taille et une graisse réduites, et surtout
 * plus de lettres espacées — en capitales, l'interlettrage attire l'œil, ce
 * qu'on ne veut pas ici.
 */
.mdlm-member__meta-label {
	display: block;
	color: var(--mdlm-muted);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	opacity: .85;
	text-transform: uppercase;
}

/*
 * La donnée n'est JAMAIS tronquée : une référence de virement sert à retrouver
 * une opération sur un relevé, l'amputer la rendrait inutile. Elle revient à la
 * ligne si la place manque, et « anywhere » l'autorise à couper au milieu d'un
 * groupe de chiffres plutôt que de déborder du bloc.
 */
.mdlm-member__meta-value {
	display: block;
	margin-top: .1rem;
	color: var(--mdlm-navy);
	font-size: .82rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mdlm-member__receipt-number {
	margin: 0 0 .75rem;
	color: var(--mdlm-navy);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95rem;
	overflow-wrap: anywhere;
}

/* ── Enfants ──────────────────────────────────────────────────────────────
   Une sous-carte par enfant : une liste verticale brute ne distinguait pas un
   enfant du suivant. Le nom de famille est facultatif au contrat — rien ne
   s'affiche à sa place, surtout pas un tiret. */
.mdlm-member__kids {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 1rem;
}

/*
 * Chaque enfant a sa carte, et deux teintes tres claires alternent pour qu'on
 * les distingue d'un coup d'oeil sans les separer les unes des autres. On reste
 * dans la famille des bleus : pas de gris plat, pas d'arc-en-ciel.
 *
 * Un liseret bleu a gauche donne le point d'accroche du regard.
 */
.mdlm-member__kid {
	padding: 1.1rem 1.25rem;
	background: var(--mdlm-pale);
	border: 1px solid var(--mdlm-line);
	border-left: 3px solid var(--mdlm-blue);
	border-radius: var(--mdlm-radius-sm);
}

.mdlm-member__kid:nth-child(even) {
	background: var(--mdlm-tint);
	border-left-color: var(--mdlm-navy);
}

.mdlm-member .mdlm-member__kid-name {
	margin: 0 0 .5rem;
	color: var(--mdlm-navy);
	font-size: 1.05rem;
	font-weight: 700;
}

.mdlm-member__kid-meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .4rem;
	color: var(--mdlm-muted);
	font-size: .875rem;
}

.mdlm-member__kid-meta:last-child {
	margin-bottom: 0;
}

.mdlm-member__kid-meta .mdlm-member__icon {
	width: 16px;
	height: 16px;
	color: var(--mdlm-blue);
}

/* ── États vides ──────────────────────────────────────────────────────────── */
.mdlm-member__empty {
	max-width: 36rem;
	margin: 0 auto;
	padding: 2.5rem 2rem;
	background: linear-gradient(135deg, var(--mdlm-tint) 0%, var(--mdlm-pale) 100%);
	border: 1px solid var(--mdlm-line);
	border-radius: var(--mdlm-radius);
	text-align: center;
}

/* Téléphone (1.8.37) : le conteneur Elementor de « Mon compte » n'a aucun
   rembourrage sous 768 px, et la carte touchait les bords de l'écran. L'air est
   posé sur la racine du shortcode qui porte un état vide (déconnecté, ou compte
   sans adhésion) ; la carte garde son rembourrage et sa largeur maximale. */
@media screen and (max-width: 767px) {
	.mdlm-member:has(> .mdlm-member__empty) {
		padding-right: 16px;
		padding-left: 16px;
	}
}

.mdlm-member__empty-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: #FFF;
	border: 1px solid var(--mdlm-line);
	color: var(--mdlm-blue);
}

.mdlm-member__empty-mark .mdlm-member__icon {
	width: 30px;
	height: 30px;
}

.mdlm-member .mdlm-member__empty-title {
	margin: 0 0 .6rem;
	color: var(--mdlm-navy);
	font-size: 1.4rem;
	font-weight: 700;
}

.mdlm-member__message {
	margin: 0 0 1.5rem;
	color: var(--mdlm-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* ── Compte connecté sans adhésion (1.8.7) ────────────────────────────────
   Même carte que l'état déconnecté — fond bleu très clair, bordure, rayon,
   centrage —, mais plus compacte, et d'un ton d'accueil : ce n'est pas une
   erreur. Tout est porté par le modificateur : la carte déconnectée ne change
   pas. Spécificité à trois classes, au-dessus de `.mdlm-member p`. */
.mdlm-member .mdlm-member__empty--no-adhesion {
	padding: 1.75rem 1.5rem 1.5rem;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-mark {
	width: 56px;
	height: 56px;
	margin-bottom: .85rem;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-mark .mdlm-member__icon {
	width: 26px;
	height: 26px;
}

/* Nunito si le thème la fournit — aucune police chargée par le plugin. */
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-title {
	margin: 0 0 .45rem;
	color: var(--mdlm-navy);
	font-family: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__message {
	margin: 0 0 .35rem;
	color: var(--mdlm-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-note {
	margin: 0 0 1rem;
	color: var(--mdlm-ink-soft);
	font-size: .875rem;
	line-height: 1.5;
}

/* L'e-mail : un repère, pas le centre de la carte. Pastille blanche légère,
   qui passe à la ligne plutôt que de déborder. */
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-account {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .3rem;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 1.1rem;
	padding: .35rem .9rem;
	background: #FFF;
	border: 1px solid var(--mdlm-line);
	border-radius: 999px;
	font-size: .85rem;
	line-height: 1.4;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-account-label {
	color: var(--mdlm-ink-soft);
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-account-mail {
	color: var(--mdlm-navy);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__actions {
	margin: 0;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-contact {
	margin: .8rem 0 0;
	font-size: .9rem;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-contact a {
	color: var(--mdlm-blue);
	text-decoration: none;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-contact a:hover,
.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-contact a:focus {
	color: var(--mdlm-navy);
	text-decoration: underline;
}

.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-contact a:focus-visible {
	outline: 2px solid var(--mdlm-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

@media screen and (max-width: 30rem) {
	.mdlm-member .mdlm-member__empty--no-adhesion {
		padding: 1.5rem 1rem 1.25rem;
	}

	.mdlm-member .mdlm-member__empty--no-adhesion .mdlm-member__empty-title {
		font-size: 1.25rem;
	}
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.mdlm-member__actions {
	margin: 1.25rem 0 0;
}

/*
 * ── POURQUOI CES SÉLECTEURS SONT SI EXPLICITES ────────────────────────────
 *
 * Ce sont des balises <a> : le thème et Elementor leur imposent une couleur de
 * lien, souvent avec une spécificité supérieure à une simple classe. C'est ce
 * qui produisait un bouton au fond rouge et au texte bleu, illisible.
 *
 * En qualifiant chaque règle par l'ancêtre .mdlm-member ET la balise, la
 * couleur du bouton l'emporte sans qu'un seul !important soit nécessaire — et
 * le pictogramme, qui suit currentColor, reprend la bonne teinte avec elle.
 */
.mdlm-member a.mdlm-member__button,
.mdlm-member button.mdlm-member__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--mdlm-radius-sm);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/*
 * ACTION PRINCIPALE D'UN ECRAN DE CONSULTATION : bleu.
 *
 * Le rouge est la couleur de l'engagement sur le site public -- « Adherer ».
 * Telecharger un justificatif n'engage a rien : c'est un service rendu, et le
 * bleu de la charte le dit mieux, sans crier.
 */
.mdlm-member a.mdlm-member__button--action,
.mdlm-member a.mdlm-member__button--action:visited,
.mdlm-member button.mdlm-member__button--action {
	background: var(--mdlm-blue);
	border-color: var(--mdlm-blue);
	color: #FFF;
}

.mdlm-member a.mdlm-member__button--action:hover,
.mdlm-member a.mdlm-member__button--action:focus,
.mdlm-member a.mdlm-member__button--action:active,
.mdlm-member button.mdlm-member__button--action:hover,
.mdlm-member button.mdlm-member__button--action:focus {
	background: var(--mdlm-navy);
	border-color: var(--mdlm-navy);
	color: #FFF;
	text-decoration: none;
}

/*
 * SORTIE : un contour rouge tres pale. La deconnexion n'est pas une action
 * qu'on encourage, elle ne doit donc pas ressembler a un bouton plein ; mais
 * elle doit se reconnaitre au premier coup d'oeil, d'ou la teinte.
 */
.mdlm-member a.mdlm-member__button--exit,
.mdlm-member a.mdlm-member__button--exit:visited,
.mdlm-member button.mdlm-member__button--exit {
	background: #FFF;
	border-color: rgba(239, 32, 36, .35);
	color: var(--mdlm-red-hover);
	font-weight: 500;
}

.mdlm-member a.mdlm-member__button--exit:hover,
.mdlm-member a.mdlm-member__button--exit:focus,
.mdlm-member button.mdlm-member__button--exit:hover,
.mdlm-member button.mdlm-member__button--exit:focus {
	background: rgba(239, 32, 36, .06);
	border-color: var(--mdlm-red);
	color: var(--mdlm-red-hover);
	text-decoration: none;
}

.mdlm-member button.mdlm-member__button--action:active {
	transform: translateY(1px);
}

/* ── Photo de profil (1.8.32) ─────────────────────────────────────────────
   Un cercle, puis le formulaire. Le cercle recadre visuellement une image
   rectangulaire (object-fit) : aucun outil de recadrage. */
.mdlm-member__avatar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.25rem 1.5rem;
}

.mdlm-member__avatar-frame {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border: 1px solid var(--mdlm-line);
	border-radius: 50%;
	background: var(--mdlm-tint);
}

.mdlm-member .mdlm-member__avatar-frame img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.mdlm-member__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--mdlm-blue);
}

.mdlm-member__avatar-placeholder .mdlm-member__icon {
	width: 40px;
	height: 40px;
}

.mdlm-member__avatar-body {
	flex: 1 1 16rem;
	min-width: 0;
}

.mdlm-member__avatar-form {
	margin: 0;
}

/* ── Sélecteur de fichier (1.8.35) ────────────────────────────────────────
   Une zone bleu très clair bordée : bouton « Choisir une image » à gauche, nom
   du fichier à droite. Le vrai champ est posé, transparent, sur le bouton. */
.mdlm-member .mdlm-member__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	max-width: 32rem;
	padding: .5rem;
	border: 1px dashed var(--mdlm-border-input);
	border-radius: var(--mdlm-radius);
	background: var(--mdlm-pale);
}

.mdlm-member .mdlm-member__file-picker {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	max-width: 100%;
}

/* Transparent mais présent : cliquable, focalisable, validé, annoncé. */
.mdlm-member input.mdlm-member__file-input {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	font-size: 0;
}

.mdlm-member .mdlm-member__file-button {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem .95rem;
	border: 1px solid var(--mdlm-line);
	border-radius: var(--mdlm-radius-sm);
	background: #FFF;
	color: var(--mdlm-navy);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mdlm-member .mdlm-member__file-button .mdlm-member__icon {
	width: 18px;
	height: 18px;
	color: var(--mdlm-blue);
}

.mdlm-member .mdlm-member__file-picker:hover .mdlm-member__file-button {
	border-color: var(--mdlm-blue);
	background: var(--mdlm-tint);
}

/* Focus clavier sur le vrai champ, dessiné sur le bouton qu'il recouvre. */
.mdlm-member input.mdlm-member__file-input:focus-visible + .mdlm-member__file-button {
	border-color: var(--mdlm-blue);
	background: var(--mdlm-tint);
	outline: 2px solid var(--mdlm-navy);
	outline-offset: 2px;
}

.mdlm-member .mdlm-member__file-name {
	flex: 1 1 8rem;
	min-width: 0;
	overflow: hidden;
	color: var(--mdlm-muted);
	font-size: .875rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mdlm-member .mdlm-member__file-name[hidden] {
	display: none;
}

.mdlm-member .mdlm-member__file-name.is-selected {
	color: var(--mdlm-navy);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.mdlm-member .mdlm-member__file-button {
		transition: none;
	}
}

.mdlm-member .mdlm-member__avatar .mdlm-member__hint {
	margin: .45rem 0 0;
}

/* Actions côte à côte (1.8.34) : repli naturel à la ligne, aucune largeur forcée. */
.mdlm-member .mdlm-member__avatar-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: .85rem 0 0;
}

.mdlm-member__card--avatar .mdlm-member__alert {
	margin-bottom: 1rem;
}

/* Confirmation temporaire qui s'efface (mdlm-avatar.js). */
.mdlm-member__card--avatar .mdlm-member__alert[data-mdlm-autodismiss] {
	transition: opacity .3s ease;
}

.mdlm-member__card--avatar .mdlm-member__alert.is-dismissing {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mdlm-member__card--avatar .mdlm-member__alert[data-mdlm-autodismiss] {
		transition: none;
	}
}

@media screen and (max-width: 30rem) {
	/* Qualifiée par .mdlm-member : ce bloc précède celui de 48 rem (72 px). */
	.mdlm-member .mdlm-member__hero-photo {
		width: 64px;
		height: 64px;
	}

	.mdlm-member__avatar-frame {
		width: 80px;
		height: 80px;
	}

	.mdlm-member__avatar-body {
		flex-basis: 100%;
	}

	/* Très petit écran : le libellé peut passer à la ligne plutôt que déborder. */
	.mdlm-member .mdlm-member__file-button {
		white-space: normal;
	}

	/* Côte à côte s'ils tiennent, sinon chacun sa ligne — jamais de débordement. */
	.mdlm-member .mdlm-member__avatar-actions .mdlm-member__button {
		flex: 1 1 auto;
		justify-content: center;
	}
}

.mdlm-member a.mdlm-member__button:focus-visible,
.mdlm-member button.mdlm-member__button:focus-visible {
	outline: 2px solid var(--mdlm-navy);
	outline-offset: 2px;
}

/* ── Pied de page ─────────────────────────────────────────────────────────
   La déconnexion, UNE FOIS, séparée du contenu métier par un filet. */
.mdlm-member__footer {
	display: flex;
	justify-content: flex-end;
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--mdlm-line);
}

/* ── Marge latérale du tableau de bord (1.8.27) ──────────────────────────
   Le conteneur Elementor de « Mon compte » (1000 px au plus, sans
   rembourrage) touche les bords sous cette largeur. Seul le tableau de bord —
   la racine qui porte les onglets — reçoit l'air ; au-delà, rien ne change. */
@media screen and (max-width: 1024px) {
	.mdlm-member:has(> .mdlm-member__tabs) {
		padding-right: 14px;
		padding-left: 14px;
	}
}

@media screen and (max-width: 767px) {
	.mdlm-member:has(> .mdlm-member__tabs) {
		padding-right: 11px;
		padding-left: 11px;
	}
}

/* ── Petit écran ──────────────────────────────────────────────────────────
   Les grilles sont déjà fluides ; on replie le bandeau et on resserre les
   rembourrages. Aucun débordement horizontal : seule la barre d'onglets
   défile. */
@media screen and (max-width: 48rem) {
	/* Rythme resserré (1.8.27) : bandeau → onglets → contenu à 20 px. */
	.mdlm-member__hero {
		margin-bottom: 1.25rem;
		padding: 1.5rem 1.25rem;
	}

	.mdlm-member__tabs {
		margin-bottom: 1.25rem;
	}

	/* La zone décorative n'apporte aucune information : elle s'efface. */
	.mdlm-member__hero-decor {
		display: none;
	}

	/* La photo, elle, reste : plus petite, calée en haut, écart resserré pour
	   laisser sa place au texte (1.8.34). */
	.mdlm-member__hero:has(> .mdlm-member__hero-photo) {
		align-items: flex-start;
		gap: 1rem;
	}

	.mdlm-member__hero-photo {
		width: 72px;
		height: 72px;
		border-width: 2px;
	}

	.mdlm-member .mdlm-member__hello {
		font-size: 1.45rem;
	}

	/* Meme regle qu'en grand : le vide est sous le sous-titre, pas au-dessus. */
	.mdlm-member__card-head {
		gap: .55rem;
		padding: .9rem 1.1rem .4rem;
	}

	.mdlm-member__card-body {
		padding: 1.1rem;
	}

	.mdlm-member__footer {
		justify-content: stretch;
	}

	.mdlm-member__footer .mdlm-member__button {
		justify-content: center;
		width: 100%;
	}

	/*
	 * Le bloc d'encaissement se replie : montant et métadonnées l'un sous
	 * l'autre, puis l'action en pleine largeur. C'est le seul endroit où le
	 * bouton s'étire — ailleurs il garde sa taille naturelle.
	 */
	.mdlm-member__payment {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: .75rem;
	}

	.mdlm-member__payment-action {
		width: 100%;
	}

	.mdlm-member__payment-action .mdlm-member__button {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdlm-member__tab,
	.mdlm-member__button {
		transition: none;
	}
}