/* MasterSphere – Comptes : utilise les couleurs du thème MasterSphere s'il est actif, sinon les siennes */
.msa-modal, .msa-page, .msa-account, .msa-lock {
	--msa-bg: var(--paper, #fffdf8);
	--msa-soft: var(--bg, #f7f2e8);
	--msa-ink: var(--ink, #231d14);
	--msa-muted: var(--muted, #75685a);
	--msa-line: var(--line, #e6dccb);
	--msa-accent: var(--accent, #8a4b1f);
	--msa-accent-soft: var(--accent-soft, #f3e4d3);
	--msa-ok: #2f6b3a;
	--msa-err: #a32d2d;
	--msa-serif: var(--serif, Georgia, "Times New Roman", serif);
	--msa-sans: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-family: var(--msa-sans);
	color: var(--msa-ink);
}
.msa-noscroll, .msa-noscroll body { overflow: hidden; }

/* ----- fenêtre ----- */
.msa-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; }
.msa-modal[hidden] { display: none; }
.msa-overlay { position: absolute; inset: 0; background: rgba(36, 27, 19, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease; }
.msa-dialog { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; background: var(--msa-bg); border-radius: 24px; box-shadow: 0 30px 80px rgba(36, 27, 19, .35); padding: 30px 30px 26px; transform: translateY(14px) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.msa-modal.is-open .msa-overlay { opacity: 1; }
.msa-modal.is-open .msa-dialog { transform: none; opacity: 1; }
.msa-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--msa-soft); color: var(--msa-muted); font-size: 1rem; cursor: pointer; }
.msa-close:hover { background: var(--msa-accent-soft); color: var(--msa-ink); }
@media (max-width: 520px) { .msa-modal { place-items: end center; padding: 0; } .msa-dialog { max-width: none; border-radius: 22px 22px 0 0; padding: 26px 20px 22px; max-height: 92vh; } }

/* ----- en-tête des formulaires ----- */
.msa-box { width: 100%; }
.msa-head { text-align: center; margin-bottom: 18px; }
.msa-logo { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: radial-gradient(circle at 35% 30%, #f0c08c, var(--msa-accent)); box-shadow: 0 8px 18px rgba(138, 75, 31, .3); }
.msa-title { font-family: var(--msa-serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--msa-ink); }
.msa-sub { color: var(--msa-muted); font-size: .95rem; margin-top: 6px; line-height: 1.45; }
.msa-box .msa-title, .msa-box .msa-sub, .msa-box .msa-form { display: none; }
.msa-box[data-tab="connexion"] .msa-t-connexion, .msa-box[data-tab="inscription"] .msa-t-inscription, .msa-box[data-tab="oubli"] .msa-t-oubli { display: block; }
.msa-box[data-tab="connexion"] .msa-f-connexion, .msa-box[data-tab="inscription"] .msa-f-inscription, .msa-box[data-tab="oubli"] .msa-f-oubli { display: block; }
.msa-box[data-tab="reset"] .msa-title { display: block; }

.msa-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--msa-soft); border-radius: 999px; margin: 0 0 18px; }
.msa-tab { border: 0; background: none; padding: 10px 8px; border-radius: 999px; font: 600 .95rem var(--msa-sans); color: var(--msa-muted); cursor: pointer; transition: .15s; }
.msa-box[data-tab="connexion"] .msa-tab[data-go="connexion"], .msa-box[data-tab="inscription"] .msa-tab[data-go="inscription"] { background: var(--msa-bg); color: var(--msa-accent); box-shadow: 0 2px 8px rgba(60, 40, 20, .12); }
.msa-box[data-tab="oubli"] .msa-tabs { display: none; }

/* ----- champs ----- */
.msa-field { display: block; margin: 0 0 14px; }
.msa-field > span:first-child { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--msa-ink); }
.msa-field small { font-weight: 400; color: var(--msa-muted); }
.msa-field input, .msa-pw input {
	width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1.5px solid var(--msa-line); border-radius: 12px;
	background: #fff; color: var(--msa-ink); font: 1rem var(--msa-sans); transition: border-color .15s, box-shadow .15s;
}
.msa-field input:focus, .msa-pw input:focus { outline: none; border-color: var(--msa-accent); box-shadow: 0 0 0 4px rgba(138, 75, 31, .14); }
.msa-pw { position: relative; display: block; }
.msa-pw input { padding-right: 48px; }
.msa-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; cursor: pointer; opacity: .55; font-size: 1.05rem; }
.msa-eye:hover, .msa-eye.on { opacity: 1; background: var(--msa-soft); }
.msa-meter { display: block; height: 5px; border-radius: 99px; background: var(--msa-line); margin-top: 8px; overflow: hidden; }
.msa-meter i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .2s, background .2s; }
.msa-meter i.weak { background: #c0392b; } .msa-meter i.mid { background: #d9a03a; } .msa-meter i.good { background: #3d8b4a; }
.msa-bad input, .msa-bad .msa-pw input { border-color: var(--msa-err) !important; box-shadow: 0 0 0 4px rgba(163, 45, 45, .1) !important; }
.msa-check.msa-bad { color: var(--msa-err); }
.msa-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -2px 0 16px; flex-wrap: wrap; }
.msa-check { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; color: var(--msa-ink); margin: 0 0 16px; line-height: 1.4; cursor: pointer; }
.msa-row .msa-check { margin: 0; }
.msa-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--msa-accent); flex: none; }
.msa-check a { color: var(--msa-accent); }
.msa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ----- boutons ----- */
.msa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
	padding: 14px 20px; border: 2px solid var(--msa-accent); border-radius: 999px; background: var(--msa-accent); color: #fff !important;
	font: 600 1rem var(--msa-sans); text-decoration: none !important; cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s;
	box-shadow: 0 8px 18px rgba(138, 75, 31, .25);
}
.msa-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(138, 75, 31, .3); }
.msa-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.msa-btn.is-busy::before { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: msa-spin .7s linear infinite; }
@keyframes msa-spin { to { transform: rotate(360deg); } }
.msa-btn-ghost { background: transparent; color: var(--msa-accent) !important; box-shadow: none; }
.msa-btn-ghost:hover { background: var(--msa-accent-soft); box-shadow: none; }
.msa-btn-danger { background: var(--msa-err); border-color: var(--msa-err); box-shadow: none; }
.msa-link { border: 0; background: none; padding: 0; color: var(--msa-accent); font: 600 .92rem var(--msa-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.msa-alt { text-align: center; margin: 16px 0 0; font-size: .93rem; color: var(--msa-muted); }

/* ----- messages ----- */
.msa-msg { border-radius: 12px; padding: 11px 14px; margin: 0 0 16px; font-size: .93rem; line-height: 1.45; }
.msa-msg.err { background: #fbeaea; color: var(--msa-err); border: 1px solid #f0caca; }
.msa-msg.ok { background: #e8f3e9; color: var(--msa-ok); border: 1px solid #c8e2cb; }
.msa-note { color: var(--msa-muted); text-align: center; }

/* ----- page « Mon compte » ----- */
.msa-page { max-width: 460px; margin: 10px auto 40px; background: var(--msa-bg); border: 1px solid var(--msa-line); border-radius: 24px; padding: 30px; box-shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 14px 40px rgba(60, 40, 20, .08); }
@media (max-width: 520px) { .msa-page { padding: 22px 18px; } }
.msa-account { max-width: 720px; margin: 0 auto 40px; }
.msa-hello { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.msa-hello > div { flex: 1; min-width: 200px; }
.msa-hello .msa-btn { width: auto; }
.msa-avatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font: 600 1.6rem var(--msa-serif); color: #fff; background: radial-gradient(circle at 35% 30%, #f0c08c, var(--msa-accent)); flex: none; }
.msa-card { background: var(--msa-bg); border: 1px solid var(--msa-line); border-radius: 20px; padding: 24px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 10px 30px rgba(60, 40, 20, .06); }
.msa-card h2 { font-family: var(--msa-serif); font-size: 1.35rem; margin: 0 0 16px; }
.msa-card .msa-btn { width: auto; }
.msa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .msa-grid { grid-template-columns: 1fr; } }
.msa-more { margin: 4px 0 14px; }
.msa-more summary, .msa-danger summary { cursor: pointer; font-weight: 600; color: var(--msa-accent); margin-bottom: 10px; }
.msa-danger summary { color: var(--msa-err); margin: 0; }
.msa-danger[open] summary { margin-bottom: 12px; }
.msa-danger p { color: var(--msa-muted); }

/* ----- contenu réservé ----- */
.msa-lock { text-align: center; max-width: 520px; margin: 20px auto; padding: 34px 26px; background: var(--msa-bg); border: 1px solid var(--msa-line); border-radius: 24px; box-shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 14px 40px rgba(60, 40, 20, .08); }
.msa-lock-icon { font-size: 2.2rem; margin-bottom: 6px; }
.msa-lock p { color: var(--msa-muted); }
.msa-lock-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.msa-lock-actions .msa-btn { width: auto; }