/* Espace adhérent — CSS FONCTIONNEL (1.9.23).
 *
 * La présentation publique (couleurs, typographie, cartes, boutons, Mon
 * compte, confirmation de déconnexion, Connexion) appartient au thème. Cette
 * feuille ne garde que la mécanique sans laquelle les scripts du plugin ne
 * fonctionnent pas, quel que soit le thème :
 *
 *   1. [hidden] des éléments qu'un thème afficherait en flex / bloc ;
 *   2. bascule de l'œil du mot de passe          (mdlm-auth.js) ;
 *   3. menu du compte                            (mdlm-account.js) ;
 *   4. confirmation de déconnexion, déplacée sous <body> (mdlm-account.js) ;
 *   5. sélecteur de photo et confirmation qui s'efface (mdlm-avatar.js).
 *
 * Mise en file avec ces scripts seulement (handle mdlm-member-core). Aucune
 * couleur, aucune police, aucune ombre, aucun rayon. Spécificités basses :
 * le thème reste maître de tout le reste.
 */

/* 1. [hidden] ---------------------------------------------------------------
   Le navigateur masque [hidden], mais une règle d'affichage d'un thème
   (display: flex…) l'emporterait : le script s'appuie sur cet attribut. */
.mdlm-member__toggle[hidden],
.mdlm-account__menu[hidden],
.mdlm-account-dialog[hidden],
.mdlm-member__file-name[hidden],
.mdlm-member__alert[hidden] {
	display: none;
}

/* 2. Œil du mot de passe : un seul pictogramme à la fois, selon l'état posé
   par mdlm-auth.js. */
.mdlm-member__toggle[data-mdlm-visible="false"] .mdlm-member__toggle-svg--hide,
.mdlm-member__toggle[data-mdlm-visible="true"] .mdlm-member__toggle-svg--show {
	display: none;
}

/* 3. Menu du compte : ancré sous le composant, au-dessus du contenu. */
.mdlm-account {
	position: relative;
}

.mdlm-account__menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 200;
}

/* 4. Confirmation de déconnexion : couvre la fenêtre, centrée, au-dessus de
   tout ; le voile occupe toute la surface (un clic dessus ferme, géré par le
   script) et la boîte passe devant lui. */
.mdlm-account-dialog {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mdlm-account-dialog__overlay {
	position: absolute;
	inset: 0;
}

.mdlm-account-dialog__box {
	position: relative;
}

/* 5. Photo de profil : le VRAI champ fichier, transparent, recouvre son
   bouton (clic, clavier, required et lecteurs d'écran intacts). */
.mdlm-member__file-picker {
	position: relative;
}

.mdlm-member__file-input {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* Confirmation qui s'efface : mdlm-avatar.js pose .is-dismissing, attend la
   fin du fondu, puis l'attribut hidden. */
.mdlm-member__alert[data-mdlm-autodismiss] {
	transition: opacity .3s ease;
}

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

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

/* Texte réservé aux lecteurs d'écran (1.10.0, bloc Boîte à idées). */
.mdlm-member .mdlm-member__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 6. Bandeau d'accueil (1.11.3) -------------------------------------------
   SEULE exception à la règle « le thème habille » : quelques règles de mise
   en page du bandeau, portées ici parce que la salutation et la structure du
   bandeau ont changé avec le plugin. Couleurs, polices, fonds et rayons
   restent ceux du thème. Toutes les règles sont bornées au bandeau, et
   pèsent au moins (0,3,0) : elles l'emportent sur celles du thème (0,2,0,
   0,3,0 pour :has()) quel que soit l'ordre d'impression des feuilles. */

/* Un nom de famille d'un seul long mot passe à la ligne au lieu de
   déborder ; un nom composé coupe à ses espaces, comme avant. Jamais tronqué. */
.mdlm-member .mdlm-member__hero .mdlm-member__hello {
	overflow-wrap: anywhere;
}

/* La pastille des droits n'est plus là : le dernier élément ne garde pas
   de marge, l'espace du bas est celui du rembourrage du bandeau. */
.mdlm-member .mdlm-member__hero .mdlm-member__hero-main > :last-child {
	margin-bottom: 0;
}

/* Téléphone : la photo à côté du label et de la salutation, l'année, le
   statut et l'établissement sur toute la largeur dessous. Ni la photo ni son
   lien ne disparaissent ; le texte ne se loge plus dans une colonne étroite.
   L'établissement est facultatif : aucune rangée ne lui est réservée. */
@media (max-width: 30rem) {
	.mdlm-member .mdlm-member__hero:has(> .mdlm-member__hero-main + .mdlm-member__hero-aside) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: .7rem .875rem;
		padding: 1rem 1rem 1.1rem;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__hero-main {
		display: contents;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__hero-head {
		grid-row: 1;
		grid-column: 1;
		align-self: center;
		min-width: 0;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__hero-aside {
		grid-row: 1;
		grid-column: 2;
		gap: .35rem;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__hero-line,
	.mdlm-member .mdlm-member__hero .mdlm-member__hero-school {
		grid-column: 1 / -1;
		margin: 0;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__eyebrow {
		margin-bottom: .25rem;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__hello {
		margin: 0;
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__hero-photo {
		width: 48px;
		height: 48px;
	}

	.mdlm-member .mdlm-member__hero .mdlm-member__hero-photo-label {
		max-width: 5rem;
		line-height: 1.2;
	}
}