/* =====================================================================
   Page « Mon profil » — feuille écrite le 02/09/2026.

   Elle accompagne le code court « mb_profil ». La page reprend la bande
   d'en-tête des archives (.mb-archive-header, dont les règles restent
   dans marche-bio.css et ne sont jamais recopiées ici) puis pose une
   carte blanche à la même échelle que celle du dépôt d'offre et de la
   confirmation : mêmes rayons, mêmes ombres, mêmes espacements.

   Le composant de bouton .ctab-ui__btn et le jeu d'icônes .ctab-ui__icone
   viennent de marche-bio.css : ni le fond, ni le rayon, ni l'ombre, ni la
   taille de texte des boutons ne sont redéfinis ici — uniquement leur
   place dans la mise en page.

   Aucun nom de classe employé ici pour la largeur ou les marges n'est
   porté par <body> : tout est préfixé par .mb-profil-wrapper.

   Tout est écrit en propriétés logiques : le site existe en arabe et la
   page doit se retourner sans retouche.
   ===================================================================== */

.mb-profil-wrapper {
	--pr-vert: #6E9F33;
	--pr-vert-fonce: #3F6731;
	--pr-texte: #3C434A;
	--pr-gris: #6b7280;
	--pr-bord: #e5e9e0;
	--pr-doux: #F2F6EC;
	--pr-rouge: #a4262c;
	--pr-rouge-doux: #fdf2f2;
	--pr-champ: 48px;

	/* Le portrait chevauche la couverture : sa taille sert deux fois, une
	   seule valeur évite qu'un des deux calculs dérive de l'autre. */
	--pr-avatar: clamp(100px, 22vw, 140px);

	box-sizing: border-box;
	color: var(--pr-texte);
	line-height: 1.55;
}

.mb-profil-wrapper *,
.mb-profil-wrapper *::before,
.mb-profil-wrapper *::after { box-sizing: border-box; }


/* ---- La carte ---------------------------------------------------------
   Mêmes valeurs que .mb-form-container et .mb-confirmation-carte : les
   trois écrans se suivent, ils doivent avoir l'air d'un seul.
   La couverture touche les bords : pas de remplissage sur la carte
   elle-même, chaque bloc pose le sien. */
.mb-profil-wrapper .mb-profil-carte {
	max-inline-size: 1040px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid rgba(110, 159, 51, .16);
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}


/* ---- Bandeau de couverture -------------------------------------------
   Trois bornes de hauteur : une part de la largeur, un plancher et un
   plafond. La borne en « vh » compte sur un téléphone tenu en paysage,
   où une couverture proportionnelle à la largeur mangerait l'écran. */
.mb-profil-wrapper .mb-profil__couverture {
	position: relative;
	block-size: clamp(110px, min(24vw, 30vh), 220px);
	background-color: var(--pr-doux);
	background-image: linear-gradient(135deg, #6E9F33 0%, #54B435 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Avec une image, le dégradé ne doit plus se voir : la déclaration posée
   en ligne remplace « background-image », et cette classe remplace la
   couleur de repli qui transparaîtrait sur les bords. */
.mb-profil-wrapper .mb-profil__couverture--image {
	background-color: #dfe6d5;
}


/* ---- Portrait et titres ----------------------------------------------
   Le portrait remonte de la moitié de sa hauteur sur la couverture.
   Les titres s'alignent sur sa base tant qu'il y a la place, et passent
   dessous quand la ligne devient trop étroite. */
.mb-profil-wrapper .mb-profil__identite {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 18px;
	margin-block-start: calc(var(--pr-avatar) / -2);
	padding: 0 clamp(16px, 3.5vw, 40px) clamp(14px, 2.4vw, 22px);
}

.mb-profil-wrapper .mb-profil__avatar {
	position: relative;
	display: block;
	cursor: pointer;
	flex: none;
	inline-size: var(--pr-avatar);
	block-size: var(--pr-avatar);
	border-radius: 50%;
	background-color: var(--pr-doux);
	box-shadow: 0 0 0 5px #fff, 0 6px 18px rgba(0, 0, 0, .14);
}

/* Elementor sert « .elementor img { border-radius: 0 } » à spécificité
   égale et APRÈS cette feuille : sans le conteneur nommé ici, le portrait
   redeviendrait carré sur les pages construites avec lui. Pas de
   !important, c'est la leçon du bandeau des archives. */
.mb-profil-wrapper .mb-profil__avatar img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.mb-profil-wrapper .mb-profil__titres {
	min-inline-size: 0;
	flex: 1 1 12ch;
	padding-block-end: 4px;
}

.mb-profil-wrapper .mb-profil__nom {
	margin: 0;
	color: var(--pr-vert-fonce);
	font-size: clamp(1.15rem, 3.2vw, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	overflow-wrap: anywhere;
}

.mb-profil-wrapper .mb-profil__role {
	margin: 2px 0 0;
	color: var(--pr-gris);
	font-size: .9rem;
	overflow-wrap: anywhere;
}


/* ---- Message d'issue --------------------------------------------------
   Un seul bandeau, deux tons. Il est posé après l'en-tête de la carte
   pour rester dans le champ de vision au retour d'un enregistrement. */
.mb-profil-wrapper .mb-profil__message {
	margin: 0 clamp(16px, 3.5vw, 40px) clamp(16px, 2.4vw, 24px);
	padding: 12px 16px;
	border-inline-start: 4px solid var(--pr-vert);
	border-radius: 12px;
	background-color: var(--pr-doux);
	color: var(--pr-vert-fonce);
	font-size: .95rem;
	font-weight: 600;
	overflow-wrap: break-word;
}

.mb-profil-wrapper .mb-profil__message--erreur {
	border-inline-start-color: var(--pr-rouge);
	background-color: var(--pr-rouge-doux);
	color: var(--pr-rouge);
}


/* ---- Sections ---------------------------------------------------------
   Une section = un titre porteur d'icône, un formulaire, un bouton.
   Le trait de séparation remplace une bordure de carte : quatre cartes
   empilées feraient quatre ombres et beaucoup de bruit. */
.mb-profil-wrapper .mb-profil__section {
	padding: clamp(18px, 2.8vw, 28px) clamp(16px, 3.5vw, 40px);
	border-block-start: 1px solid var(--pr-bord);
}

.mb-profil-wrapper .mb-profil__section-titre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--pr-vert-fonce);
	font-size: clamp(1rem, 2.4vw, 1.15rem);
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	overflow-wrap: anywhere;
}

.mb-profil-wrapper .mb-profil__section-titre .ctab-ui__icone {
	color: var(--pr-vert);
}

.mb-profil-wrapper .mb-profil__aide {
	flex: 1 1 16ch;
	min-inline-size: 0;
	margin: 0;
	color: var(--pr-gris);
	font-size: .88rem;
	overflow-wrap: break-word;
}


/* ---- Grille de champs -------------------------------------------------
   Deux colonnes dès qu'une colonne de 260 px tient deux fois, une seule
   sinon. « min(100%, 260px) » évite le débordement à 320 px, où 260 px
   plus les gouttières dépasseraient la largeur disponible. */
.mb-profil-wrapper .mb-profil__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.mb-profil-wrapper .mb-profil__champ {
	display: grid;
	align-content: start;
	gap: 6px;
	min-inline-size: 0;
}

.mb-profil-wrapper .mb-profil__champ > label {
	margin: 0;
	padding: 0;
	color: var(--pr-texte);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
}


/* ---- Champs (échelle de auth-style.css) ------------------------------- */
.mb-profil-wrapper .mb-profil__champ input[type="text"],
.mb-profil-wrapper .mb-profil__champ input[type="email"],
.mb-profil-wrapper .mb-profil__champ input[type="tel"],
.mb-profil-wrapper .mb-profil__champ input[type="password"] {
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--pr-champ);
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--pr-bord);
	border-radius: 12px;
	background-color: #fff;
	color: var(--pr-texte);
	font: inherit;
	font-size: 1rem;
	text-transform: none;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.mb-profil-wrapper .mb-profil__champ input:focus {
	outline: none;
	border-color: var(--pr-vert);
	background-color: #fff;
	box-shadow: 0 0 0 4px rgba(110, 159, 51, .15);
}

/* L'identifiant est montré, pas modifiable : le fond grisé et la bordure
   en tirets le disent avant qu'on ait essayé de cliquer dedans. */
.mb-profil-wrapper .mb-profil__champ input[readonly] {
	border-style: dashed;
	background-color: #f6f7f4;
	color: var(--pr-gris);
	cursor: default;
}

.mb-profil-wrapper .mb-profil__note {
	color: var(--pr-gris);
	font-size: .82rem;
	line-height: 1.45;
	overflow-wrap: break-word;
}


/* ---- Commandes d'image (le geste des réseaux sociaux) -----------------
   Deux zones directement cliquables, plus de section de formulaire : on
   clique l'image que l'on veut remplacer. Le champ de fichier est masqué
   visuellement mais reste focusable — « display: none » l'aurait sorti de
   l'ordre de tabulation, et le clavier n'aurait plus rien pour l'atteindre.
   02/09/2026 */
.mb-profil-wrapper .mb-profil__fichier,
.mb-profil-wrapper .mb-profil__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bouton posé en haut à droite de la couverture. « inset-inline-end » et
   non « right » : en arabe il doit passer de l'autre côté. */
.mb-profil-wrapper .mb-profil__declencheur {
	position: absolute;
	inset-block-start: clamp(10px, 2vw, 16px);
	inset-inline-end: clamp(10px, 2vw, 16px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 44px;
	min-inline-size: 44px;
	max-inline-size: calc(100% - 2 * clamp(10px, 2vw, 16px));
	margin: 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, .86);
	color: var(--pr-vert-fonce);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s, box-shadow .2s;
}

.mb-profil-wrapper .mb-profil__declencheur:hover {
	background-color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.mb-profil-wrapper .mb-profil__declencheur-texte {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Le champ étant masqué, c'est son étiquette qui doit montrer le focus,
   et par un contour net : un simple changement de fond passerait inaperçu
   sur une photo de couverture claire. */
.mb-profil-wrapper .mb-profil__fichier:focus-visible + .mb-profil__declencheur {
	outline: 3px solid #fff;
	outline-offset: 3px;
	background-color: #fff;
	box-shadow: 0 0 0 5px rgba(63, 103, 49, .55);
}

.mb-profil-wrapper .mb-profil__avatar-zone {
	position: relative;
	flex: none;
}

/* Voile au survol : il dit que le cercle entier est cliquable, et pas
   seulement la pastille. */
.mb-profil-wrapper .mb-profil__avatar::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color .2s;
	pointer-events: none;
	z-index: 1;
}

.mb-profil-wrapper .mb-profil__avatar:hover::after {
	background-color: rgba(0, 0, 0, .22);
}

.mb-profil-wrapper .mb-profil__fichier:focus-visible + .mb-profil__avatar {
	outline: 3px solid var(--pr-vert-fonce);
	outline-offset: 5px;
}

/* Pastille sur fond clair, légèrement en débord du cercle. 44 px de côté,
   la cible tactile minimale — sachant que le cercle entier (100 px au
   moins) reste lui aussi cliquable. */
.mb-profil-wrapper .mb-profil__pastille-photo {
	position: absolute;
	inset-block-end: -4px;
	inset-inline-end: -4px;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 2px solid var(--pr-doux);
	border-radius: 50%;
	background-color: #fff;
	color: var(--pr-vert-fonce);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: background-color .2s, color .2s;
	z-index: 2;
}

.mb-profil-wrapper .mb-profil__avatar:hover .mb-profil__pastille-photo {
	background-color: var(--pr-doux);
	color: var(--pr-vert);
}

.mb-profil-wrapper .mb-profil__pastille-photo .ctab-ui__icone {
	inline-size: 20px;
	block-size: 20px;
}


/* « hidden » posé par le script ne suffisait pas : la règle du navigateur
   pour cet attribut vient de sa feuille par défaut, et « display: inline-flex »
   du composant de bouton, écrit dans une feuille d'auteur, passait devant.
   On redit la règle ici, à la même origine. Pas de !important : le sélecteur
   nommant l'attribut suffit. 02/09/2026 */
.mb-profil-wrapper .mb-profil__valider[hidden],
.mb-profil-wrapper .mb-profil__images-erreur[hidden] {
	display: none;
}


/* ---- Barre sous l'en-tête : contrainte, erreur, actions secondaires ---- */
.mb-profil-wrapper .mb-profil__images-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 0 clamp(16px, 3.5vw, 40px) clamp(14px, 2vw, 20px);
}

.mb-profil-wrapper .mb-profil__images-erreur {
	flex: 1 1 100%;
	order: 3;
	margin: 0;
	padding: 10px 14px;
	border-inline-start: 4px solid var(--pr-rouge);
	border-radius: 12px;
	background-color: var(--pr-rouge-doux);
	color: var(--pr-rouge);
	font-size: .9rem;
	font-weight: 600;
	overflow-wrap: break-word;
}

.mb-profil-wrapper .mb-profil__images-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Retrait : action secondaire, offerte seulement quand une image existe.
   C'est un vrai bouton d'envoi, donc atteignable au clavier et
   fonctionnel sans script. */
.mb-profil-wrapper .mb-profil__retrait {
	min-block-size: 44px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--pr-bord);
	border-radius: 10px;
	background-color: #fff;
	color: var(--pr-gris);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: border-color .2s, color .2s, background-color .2s;
}

.mb-profil-wrapper .mb-profil__retrait:hover,
.mb-profil-wrapper .mb-profil__retrait:focus-visible {
	border-color: var(--pr-rouge);
	background-color: var(--pr-rouge-doux);
	color: var(--pr-rouge);
}


/* ---- Envoi en cours ---------------------------------------------------
   Le script envoie dès qu'un fichier est choisi : sans marque visible, le
   temps de téléversement passerait pour une page figée. */
.mb-profil-wrapper .mb-profil__images--envoi .mb-profil__declencheur,
.mb-profil-wrapper .mb-profil__images--envoi .mb-profil__avatar,
.mb-profil-wrapper .mb-profil__images--envoi .mb-profil__retrait {
	pointer-events: none;
	opacity: .75;
}

.mb-profil-wrapper .mb-profil__images--envoi .mb-profil__pastille-photo .ctab-ui__icone {
	display: none;
}

.mb-profil-wrapper .mb-profil__images--envoi .mb-profil__pastille-photo::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	border: 3px solid rgba(110, 159, 51, .25);
	border-block-start-color: var(--pr-vert);
	border-radius: 50%;
	animation: mb-profil-rotation .8s linear infinite;
}

@keyframes mb-profil-rotation {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {

	.mb-profil-wrapper .mb-profil__images--envoi .mb-profil__pastille-photo::before {
		animation: none;
	}
}


/* ---- Barre d'action ---------------------------------------------------
   Seule la place du bouton est décidée ici ; son apparence vient du
   composant .ctab-ui__btn de marche-bio.css. */
.mb-profil-wrapper .mb-profil__barre {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin-block-start: 18px;
}


/* ---- Écran des personnes non connectées ------------------------------- */
.mb-profil-wrapper .mb-profil-carte--refus {
	display: grid;
	justify-items: center;
	gap: clamp(16px, 2.6vw, 26px);
	padding: clamp(24px, 4vw, 44px);
	text-align: center;
}

.mb-profil-wrapper .mb-profil__pastille {
	display: grid;
	place-items: center;
	inline-size: max(72px, min(120px, 24vw, 16vh));
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--pr-doux);
	color: var(--pr-vert-fonce);
}

.mb-profil-wrapper .mb-profil__pastille .ctab-ui__icone {
	inline-size: 46%;
	block-size: 46%;
}

.mb-profil-wrapper .mb-profil__refus-texte {
	display: grid;
	gap: 8px;
	max-inline-size: 56ch;
}

.mb-profil-wrapper .mb-profil__refus-titre {
	margin: 0;
	color: var(--pr-vert-fonce);
	font-size: clamp(1.15rem, 3.4vw, 1.6rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	overflow-wrap: break-word;
}

.mb-profil-wrapper .mb-profil__refus-texte p {
	margin: 0;
	color: var(--pr-gris);
	overflow-wrap: break-word;
}


/* Sous 560 px, le libellé du bouton de couverture n'a plus la place : il
   reste dans l'arbre d'accessibilité, le pictogramme suffit à l'œil, et la
   cible garde ses 44 px. */
@media (max-width: 560px) {

	.mb-profil-wrapper .mb-profil__declencheur {
		padding: 10px;
	}

	.mb-profil-wrapper .mb-profil__declencheur-texte {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}


/* ---- Très petites largeurs -------------------------------------------
   Sous 480 px, le portrait et les titres cessent de partager une ligne :
   à 320 px il restait moins de dix caractères au nom. Le bouton d'action
   prend toute la largeur, plus facile à viser au pouce. */
@media (max-width: 480px) {

	.mb-profil-wrapper .mb-profil__identite {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.mb-profil-wrapper .mb-profil__titres {
		flex-basis: 100%;
		padding-block-end: 0;
	}

	.mb-profil-wrapper .mb-profil__barre {
		justify-content: stretch;
	}

	.mb-profil-wrapper .mb-profil__barre .ctab-ui__btn {
		inline-size: 100%;
	}

	/* Les actions secondaires se rangent sous l'aide plutot que de partager
	   sa ligne : a 320 px, deux boutons cote a cote se chevauchaient. */
	.mb-profil-wrapper .mb-profil__images-barre {
		justify-content: center;
		text-align: center;
	}

	.mb-profil-wrapper .mb-profil__images-actions {
		flex: 1 1 100%;
		justify-content: center;
	}
}