/* =========================================================================
   Agapi — système de design de l'application
   Nuit de velours, or, et beaucoup d'air.
   ========================================================================= */

:root {
	--ag-ink:        #140509;
	--ag-ink-2:      #1C070D;
	--ag-surface:    #250A12;
	--ag-surface-2:  #32111B;
	--ag-line:       rgba(227, 167, 44, .16);
	--ag-line-soft:  rgba(246, 234, 220, .10);

	--ag-wine:       #5C0E1E;
	--ag-gold:       #E3A72C;
	--ag-gold-2:     #F3C765;
	--ag-blush:      #E8748A;
	--ag-cream:      #FBF4EA;

	--ag-text:       #F6EADC;
	--ag-muted:      rgba(246, 234, 220, .62);
	--ag-faint:      rgba(246, 234, 220, .38);

	--ag-ok:         #4FBF8B;
	--ag-warn:       #E0A02A;
	--ag-err:        #E4636F;

	--ag-display:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--ag-sans:       'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--ag-r:          16px;
	--ag-r-lg:       24px;
	--ag-r-pill:     999px;

	--ag-shadow:     0 18px 50px rgba(0, 0, 0, .45);
	--ag-shadow-sm:  0 6px 18px rgba(0, 0, 0, .32);

	--ag-max:        1120px;
	--ag-tab-h:      68px;
}

/* --- Réinitialisation ciblée ------------------------------------------- */

/* L'attribut hidden doit toujours l'emporter sur nos display: */
.ag-app [hidden],
[hidden].ag-match,
[hidden].ag-sheet,
[hidden].ag-call,
[hidden] { display: none !important; }

.ag-app,
.ag-auth,
.ag-onboard {
	font-family: var(--ag-sans);
	color: var(--ag-text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.55;
}

.ag-app *,
.ag-auth *,
.ag-onboard * { box-sizing: border-box; }

/* Rien ne doit dépasser sur un petit écran. */
.ag-app, .ag-auth, .ag-onboard { max-width: 100%; }
.ag-app > *, .ag-auth > *, .ag-onboard > *,
.ag-form > *, .ag-field, .ag-card > * { min-width: 0; }

.ag-app img,
.ag-auth img,
.ag-onboard img { max-width: 100%; display: block; }

.ag-i { flex: none; }

/* --- Typographie -------------------------------------------------------- */

.ag-h1 {
	font-family: var(--ag-display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.01em;
	margin: 0 0 .35em;
	color: var(--ag-cream);
}

.ag-h2 {
	font-family: var(--ag-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 .3em;
	color: var(--ag-cream);
}

.ag-h3 {
	font-family: var(--ag-sans);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .01em;
	margin: 0 0 .9rem;
	display: flex;
	align-items: center;
	gap: .55rem;
	color: var(--ag-cream);
}

.ag-h3 .ag-i { color: var(--ag-gold); }

.ag-sub    { color: var(--ag-muted); font-size: 1rem; margin: 0 0 1.5rem; max-width: 46ch; }
.ag-prose  { color: var(--ag-muted); margin: 0 0 1rem; }
.ag-hint   { color: var(--ag-faint); font-size: .82rem; margin: .45rem 0 0; display: block; }
.ag-sep    { opacity: .4; margin: 0 .4rem; }
.ag-dot    { opacity: .5; margin: 0 .3rem; }

/* --- Boutons ------------------------------------------------------------ */

.ag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .82rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--ag-r-pill);
	font: 600 .95rem/1 var(--ag-sans);
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
	white-space: nowrap;
}

.ag-btn:hover  { transform: translateY(-1px); }
.ag-btn:active { transform: translateY(0); }
.ag-btn:disabled,
.ag-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.ag-btn--gold {
	background: linear-gradient(135deg, var(--ag-gold-2), var(--ag-gold));
	color: #3A0A12;
	box-shadow: 0 8px 26px rgba(227, 167, 44, .26);
}
.ag-btn--gold:hover { box-shadow: 0 12px 32px rgba(227, 167, 44, .36); }

.ag-btn--ghost {
	background: transparent;
	border-color: var(--ag-line);
	color: var(--ag-text);
}
.ag-btn--ghost:hover { background: rgba(227, 167, 44, .08); border-color: rgba(227, 167, 44, .34); }

.ag-btn--block { display: flex; width: 100%; }
.ag-btn--tiny  { padding: .5rem .95rem; font-size: .84rem; }

.ag-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: var(--ag-r-pill);
	border: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .04);
	color: var(--ag-text);
	cursor: pointer;
	transition: background .2s, border-color .2s;
	position: relative;
	text-decoration: none;
}
.ag-iconbtn:hover { background: rgba(227, 167, 44, .12); border-color: var(--ag-line); }
.ag-iconbtn.is-locked { color: var(--ag-faint); }

.ag-listbtn {
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
	padding: .95rem .3rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ag-line-soft);
	color: var(--ag-text);
	font: 500 .95rem var(--ag-sans);
	text-align: left;
	cursor: pointer;
	text-decoration: none;
}
.ag-listbtn:last-child { border-bottom: 0; }
.ag-listbtn .ag-i { color: var(--ag-gold); }
.ag-listbtn--danger { color: var(--ag-err); }
.ag-listbtn--danger .ag-i { color: var(--ag-err); }

/* --- Blocs -------------------------------------------------------------- */

.ag-app {
	max-width: var(--ag-max);
	margin: 0 auto;
	padding: 1.25rem 1.15rem calc(var(--ag-tab-h) + 2.5rem);
}

.ag-card {
	background: linear-gradient(180deg, var(--ag-surface), var(--ag-ink-2));
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r-lg);
	padding: 1.4rem;
	margin: 0 0 1.1rem;
	box-shadow: var(--ag-shadow-sm);
}

.ag-notice {
	border-radius: var(--ag-r);
	padding: .9rem 1.1rem;
	margin: 0 0 1rem;
	font-size: .92rem;
	border: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .05);
}
.ag-notice--success { border-color: rgba(79, 191, 139, .35); background: rgba(79, 191, 139, .10); }
.ag-notice--error   { border-color: rgba(228, 99, 111, .40); background: rgba(228, 99, 111, .10); }

.ag-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--ag-muted);
}
.ag-empty .ag-i { color: var(--ag-gold); opacity: .5; margin: 0 auto .8rem; }
.ag-empty svg  { margin-inline: auto; }
.ag-empty p    { margin: 0 0 1.2rem; }
.ag-empty--center { display: grid; place-content: center; min-height: 50vh; }
.ag-empty--center svg { width: 84px; height: auto; opacity: .35; }

/* --- Étiquettes --------------------------------------------------------- */

.ag-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .32rem .8rem;
	border-radius: var(--ag-r-pill);
	font-size: .76rem;
	font-weight: 600;
	background: rgba(246, 234, 220, .07);
	border: 1px solid var(--ag-line-soft);
	color: var(--ag-muted);
	margin: 0;
}
.ag-chip--premium,
.ag-chip--free_access { background: rgba(227, 167, 44, .14); border-color: rgba(227, 167, 44, .4); color: var(--ag-gold-2); }
.ag-chip--trial       { background: rgba(232, 116, 138, .14); border-color: rgba(232, 116, 138, .35); color: var(--ag-blush); }

.ag-pill {
	display: inline-block;
	padding: .3rem .75rem;
	border-radius: var(--ag-r-pill);
	font-size: .78rem;
	font-weight: 600;
	background: rgba(246, 234, 220, .07);
	border: 1px solid var(--ag-line-soft);
	margin: 0;
}
.ag-pill--gold      { background: rgba(227, 167, 44, .13); border-color: rgba(227, 167, 44, .35); color: var(--ag-gold-2); }
.ag-pill--paid      { color: var(--ag-ok); border-color: rgba(79, 191, 139, .4); }
.ag-pill--requested { color: var(--ag-warn); border-color: rgba(224, 160, 42, .4); }
.ag-pill--rejected  { color: var(--ag-err); border-color: rgba(228, 99, 111, .4); }

.ag-badge {
	min-width: 21px; height: 21px;
	padding: 0 6px;
	display: grid; place-items: center;
	border-radius: var(--ag-r-pill);
	background: var(--ag-gold);
	color: #3A0A12;
	font-size: .72rem;
	font-weight: 800;
}

.ag-verified {
	display: inline-grid; place-items: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--ag-gold);
	color: #3A0A12;
	vertical-align: middle;
	margin-left: .3rem;
}

.ag-meter {
	height: 6px;
	border-radius: 3px;
	background: rgba(246, 234, 220, .12);
	overflow: hidden;
	margin: .7rem 0 .4rem;
	max-width: 260px;
}
.ag-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--ag-gold), var(--ag-blush)); }

/* --- Formulaires -------------------------------------------------------- */

.ag-form { display: grid; gap: 1.05rem; }

.ag-field { display: block; }
.ag-field__label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ag-muted);
	margin-bottom: .42rem;
	letter-spacing: .01em;
}

.ag-field input[type="text"],
.ag-field input[type="email"],
.ag-field input[type="password"],
.ag-field input[type="date"],
.ag-field input[type="number"],
.ag-field input[type="search"],
.ag-field select,
.ag-field textarea,
.ag-inputgroup input,
.ag-range input {
	width: 100%;
	padding: .85rem 1rem;
	background: rgba(246, 234, 220, .05);
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r);
	color: var(--ag-text);
	font: 400 .96rem var(--ag-sans);
	transition: border-color .2s, background .2s;
	-webkit-appearance: none;
	appearance: none;
}

.ag-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E3A72C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.6rem;
}

.ag-field input:focus,
.ag-field select:focus,
.ag-field textarea:focus {
	outline: none;
	border-color: rgba(227, 167, 44, .55);
	background: rgba(246, 234, 220, .08);
}

.ag-field input::placeholder,
.ag-field textarea::placeholder { color: var(--ag-faint); }

.ag-field textarea { resize: vertical; min-height: 90px; line-height: 1.55; }

.ag-grid2 { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .ag-grid2 { grid-template-columns: 1fr; } }

.ag-inputgroup { display: flex; align-items: center; gap: .6rem; }
.ag-inputgroup span { color: var(--ag-muted); font-weight: 600; font-size: .9rem; }

.ag-range { display: flex; align-items: center; gap: .7rem; }
.ag-range span { color: var(--ag-faint); }

.ag-check {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-size: .9rem;
	color: var(--ag-muted);
	cursor: pointer;
	line-height: 1.45;
}
.ag-check input {
	width: 20px; height: 20px;
	flex: none;
	margin-top: 1px;
	accent-color: var(--ag-gold);
}

.ag-choice { display: flex; gap: .55rem; flex-wrap: wrap; }
.ag-choice__item { flex: 1 1 calc(33.333% - .4rem); min-width: 88px; cursor: pointer; }
.ag-choice__item input { position: absolute; opacity: 0; pointer-events: none; }
.ag-choice__item span {
	display: block;
	text-align: center;
	padding: .8rem .9rem;
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r);
	font-size: .92rem;
	font-weight: 500;
	transition: all .18s;
	background: rgba(246, 234, 220, .04);
}
.ag-choice__item input:checked + span {
	border-color: var(--ag-gold);
	background: rgba(227, 167, 44, .14);
	color: var(--ag-gold-2);
	font-weight: 600;
}

.ag-form__foot { text-align: center; color: var(--ag-muted); font-size: .9rem; margin: .2rem 0 0; }
.ag-form__foot a { color: var(--ag-gold-2); text-decoration: none; font-weight: 600; }
.ag-form__foot a:hover { text-decoration: underline; }

/* --- Mots-clés ---------------------------------------------------------- */

.ag-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.ag-tag {
	display: inline-block;
	padding: .5rem .95rem;
	border-radius: var(--ag-r-pill);
	border: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .04);
	color: var(--ag-muted);
	font: 500 .87rem var(--ag-sans);
	cursor: pointer;
	transition: all .18s;
}
.ag-tag:hover { border-color: rgba(227, 167, 44, .3); }
.ag-tag.is-on {
	border-color: rgba(227, 167, 44, .5);
	background: rgba(227, 167, 44, .14);
	color: var(--ag-gold-2);
}
.ag-tags--static .ag-tag { cursor: default; }

/* --- Avatars ------------------------------------------------------------ */

.ag-avatar {
	position: relative;
	display: block;
	width: 48px; height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	background: var(--ag-surface-2);
	border: 1px solid var(--ag-line-soft);
}
.ag-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ag-avatar--lg { width: 76px; height: 76px; }
.ag-avatar--xl { width: 112px; height: 112px; border: 3px solid var(--ag-ink); box-shadow: var(--ag-shadow-sm); }
.ag-avatar.is-online::after {
	content: '';
	position: absolute;
	right: 1px; bottom: 1px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--ag-ok);
	border: 2px solid var(--ag-ink);
}

/* --- Barres de navigation ---------------------------------------------- */

.ag-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem 1rem;
	margin-bottom: 1.2rem;
	min-height: 48px;
}
.ag-topbar__title { min-width: 0; }
.ag-topbar__right { min-width: 0; flex-wrap: wrap; }

@media (max-width: 520px) {
	.ag-topbar__right { width: 100%; justify-content: space-between; }
	.ag-topbar .ag-chip { max-width: calc(100% - 3.4rem); }
}
.ag-topbar__brand svg { height: 34px; width: auto; }
.ag-topbar__right { display: flex; align-items: center; gap: .6rem; }

.ag-tabbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	display: flex;
	background: rgba(20, 5, 9, .93);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--ag-line-soft);
	padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
	font-family: var(--ag-sans);
}
.ag-tabbar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .18rem;
	padding: .5rem .2rem;
	color: var(--ag-faint);
	text-decoration: none;
	font-size: .68rem;
	font-weight: 600;
	position: relative;
	transition: color .2s;
}
.ag-tabbar__item:hover { color: var(--ag-muted); }
.ag-tabbar__item.is-active { color: var(--ag-gold); }
.ag-tabbar__badge {
	position: absolute;
	top: .25rem;
	left: 55%;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	display: grid; place-items: center;
	border-radius: var(--ag-r-pill);
	background: var(--ag-blush);
	color: #2A0509;
	font-size: .64rem;
	font-weight: 800;
}

/* --- Connexion / inscription -------------------------------------------- */

.ag-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 74vh;
}
.ag-auth__aside {
	background:
		radial-gradient(120% 80% at 20% 15%, rgba(92, 14, 30, .95), transparent 70%),
		linear-gradient(160deg, #3D0913, #16060B 70%);
	padding: 4rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.6rem;
	position: relative;
	overflow: hidden;
}
.ag-auth__aside::after {
	content: '';
	position: absolute;
	inset: auto -20% -35% auto;
	width: 60%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(227, 167, 44, .16), transparent 65%);
}
.ag-auth__brand svg { width: min(290px, 70%); height: auto; }
.ag-auth__tagline {
	font-family: var(--ag-display);
	font-size: 1.65rem;
	color: var(--ag-cream);
	margin: 0;
	max-width: 18ch;
	line-height: 1.2;
}
.ag-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ag-auth__points li {
	display: flex; align-items: center; gap: .7rem;
	color: var(--ag-muted); font-size: .93rem;
}
.ag-auth__points .ag-i { color: var(--ag-gold); }

.ag-auth__panel {
	background: var(--ag-ink);
	display: grid;
	place-items: center;
	padding: 3rem 1.5rem;
}
.ag-auth__card { width: 100%; max-width: 420px; min-width: 0; }
.ag-auth__panel > * { min-width: 0; }

@media (max-width: 880px) {
	.ag-auth { grid-template-columns: 1fr; }
	.ag-auth__aside { padding: 2.6rem 1.5rem 2rem; text-align: center; align-items: center; }
	.ag-auth__brand svg { width: 210px; }
	.ag-auth__points { display: none; }
	.ag-auth__panel { padding: 2rem 1.15rem 3rem; }
}

/* --- Onboarding --------------------------------------------------------- */

.ag-onboard { max-width: 560px; margin: 0 auto; padding: 1.5rem 1.15rem 4rem; }
.ag-onboard__head { margin-bottom: 2rem; }
.ag-onboard__logo svg { height: 34px; width: auto; margin: 0 auto 1.2rem; }
.ag-progress { height: 4px; border-radius: 2px; background: rgba(246, 234, 220, .1); overflow: hidden; }
.ag-progress__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--ag-gold), var(--ag-blush)); transition: width .35s ease; }

.ag-step { display: none; animation: ag-fade .35s ease; }
.ag-step.is-active { display: block; }
@keyframes ag-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ag-onboard__nav { display: flex; gap: .7rem; margin-top: 1.8rem; }
.ag-onboard__nav .ag-btn { flex: 1; }

.ag-cards-choice { display: grid; gap: .7rem; }
.ag-cards-choice__item {
	display: flex; align-items: center; gap: .85rem;
	padding: 1.05rem 1.2rem;
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r);
	background: rgba(246, 234, 220, .04);
	color: var(--ag-text);
	font: 600 .98rem var(--ag-sans);
	cursor: pointer;
	transition: all .18s;
	text-align: left;
}
.ag-cards-choice__item .ag-i { color: var(--ag-gold); }
.ag-cards-choice__item:hover { border-color: rgba(227, 167, 44, .35); }
.ag-cards-choice__item.is-on { border-color: var(--ag-gold); background: rgba(227, 167, 44, .13); }

/* --- Photos ------------------------------------------------------------- */

.ag-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: .6rem;
	max-width: 560px;
}
.ag-photos__item,
.ag-photos__add {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--ag-r);
	overflow: hidden;
	background: var(--ag-surface-2);
}
.ag-photos__item img { width: 100%; height: 100%; object-fit: cover; }
.ag-photos__add {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .4rem;
	border: 1px dashed rgba(227, 167, 44, .35);
	color: var(--ag-gold);
	cursor: pointer;
	font-size: .8rem;
	font-weight: 600;
	background: rgba(227, 167, 44, .05);
	transition: background .2s;
}
.ag-photos__add:hover { background: rgba(227, 167, 44, .12); }
.ag-photos__remove {
	position: absolute; top: .4rem; right: .4rem;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 0;
	background: rgba(20, 5, 9, .75);
	color: var(--ag-cream);
	cursor: pointer;
}
.ag-photos__pending {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: .3rem;
	text-align: center;
	font-size: .68rem;
	font-weight: 700;
	background: rgba(224, 160, 42, .9);
	color: #2A0509;
}
.ag-photos__pending--no { background: rgba(228, 99, 111, .9); color: #fff; }

/* --- Découverte : le paquet -------------------------------------------- */

.ag-app--discover { max-width: 480px; }

.ag-quota {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .2rem .45rem;
	text-align: center;
	font-size: .86rem;
	color: var(--ag-muted);
	margin: 0 0 .9rem;
}
.ag-quota a { color: var(--ag-gold-2); text-decoration: none; font-weight: 600; }

.ag-likers { margin-bottom: 1.1rem; }
.ag-likers__title {
	display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
	font: 600 .84rem var(--ag-sans);
	color: var(--ag-muted);
	margin: 0 0 .6rem;
}
.ag-likers__title .ag-i { color: var(--ag-blush); }
.ag-likers__row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; -ms-overflow-style: none; }
.ag-likers__row::-webkit-scrollbar { display: none; }
.ag-likers__item {
	flex: none;
	width: 46px; height: 46px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(227, 167, 44, .5);
}
.ag-likers__item img { width: 100%; height: 100%; object-fit: cover; }
.ag-likers__item.is-blurred img { filter: blur(9px) saturate(.7); }
.ag-likers__unlock {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-top: .55rem;
	font-size: .82rem; font-weight: 600;
	color: var(--ag-gold-2);
	text-decoration: none;
}

.ag-deck {
	position: relative;
	aspect-ratio: 3 / 4.05;
	max-height: min(50vh, 470px);
	margin-bottom: 1.1rem;
}
.ag-deck__loading { position: absolute; inset: 0; display: grid; place-items: center; }

.ag-spinner {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 2px solid rgba(227, 167, 44, .22);
	border-top-color: var(--ag-gold);
	animation: ag-spin .8s linear infinite;
	display: block;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

.ag-swipe {
	position: absolute;
	inset: 0;
	border-radius: var(--ag-r-lg);
	overflow: hidden;
	background: var(--ag-surface);
	box-shadow: var(--ag-shadow);
	transform-origin: center bottom;
	will-change: transform;
	user-select: none;
	touch-action: pan-y;
}
.ag-swipe__photos { position: absolute; inset: 0; }
.ag-swipe__photos img { width: 100%; height: 100%; object-fit: cover; }
.ag-swipe__shade {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(12, 3, 6, .94) 0%, rgba(12, 3, 6, .55) 32%, transparent 62%);
	pointer-events: none;
}
.ag-swipe__bars {
	position: absolute; top: .7rem; left: .7rem; right: .7rem;
	display: flex; gap: .28rem;
	z-index: 3;
}
.ag-swipe__bars span {
	flex: 1; height: 3px; border-radius: 2px;
	background: rgba(251, 244, 234, .3);
}
.ag-swipe__bars span.is-on { background: var(--ag-gold); }
.ag-swipe__nav { position: absolute; inset: 0; display: flex; z-index: 2; }
.ag-swipe__nav button { flex: 1; background: none; border: 0; cursor: pointer; }

.ag-swipe__info {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.35rem 1.3rem 1.5rem;
	z-index: 3;
	pointer-events: none;
}
.ag-swipe__info h2 {
	font-family: var(--ag-display);
	font-size: 1.85rem;
	font-weight: 600;
	margin: 0 0 .22rem;
	color: #fff;
	line-height: 1.1;
}
.ag-swipe__meta {
	display: flex; align-items: center; gap: .35rem;
	font-size: .84rem; color: rgba(255, 255, 255, .82);
	margin: 0 0 .55rem;
}
.ag-swipe__intent {
	display: inline-block;
	padding: .24rem .7rem;
	border-radius: var(--ag-r-pill);
	background: rgba(227, 167, 44, .2);
	border: 1px solid rgba(227, 167, 44, .45);
	color: var(--ag-gold-2);
	font-size: .74rem; font-weight: 700;
	margin: 0 0 .6rem;
}
.ag-swipe__bio {
	font-size: .88rem;
	color: rgba(255, 255, 255, .82);
	margin: 0 0 .6rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ag-swipe__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ag-swipe__tags span {
	padding: .26rem .65rem;
	border-radius: var(--ag-r-pill);
	background: rgba(251, 244, 234, .14);
	font-size: .72rem;
	color: #fff;
	backdrop-filter: blur(4px);
}

.ag-swipe__stamp {
	position: absolute;
	top: 2.2rem;
	padding: .4rem 1rem;
	border: 3px solid;
	border-radius: 10px;
	font: 800 1.15rem/1 var(--ag-sans);
	letter-spacing: .06em;
	opacity: 0;
	z-index: 4;
	transition: opacity .12s;
}
.ag-swipe__stamp--like { left: 1.4rem; color: var(--ag-ok); border-color: var(--ag-ok); transform: rotate(-14deg); }
.ag-swipe__stamp--pass { right: 1.4rem; color: var(--ag-err); border-color: var(--ag-err); transform: rotate(14deg); }

.ag-deck__actions { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.ag-round {
	display: grid; place-items: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	border: 1px solid var(--ag-line-soft);
	background: var(--ag-surface);
	color: var(--ag-text);
	cursor: pointer;
	box-shadow: var(--ag-shadow-sm);
	transition: transform .16s, box-shadow .2s, background .2s;
}
.ag-round:hover { transform: translateY(-2px) scale(1.04); }
.ag-round--pass { color: var(--ag-err); }
.ag-round--like {
	color: #3A0A12;
	background: linear-gradient(135deg, var(--ag-gold-2), var(--ag-gold));
	border-color: transparent;
	box-shadow: 0 10px 28px rgba(227, 167, 44, .32);
}
.ag-round--profile { width: 48px; height: 48px; color: var(--ag-muted); }

/* --- Fenêtre de match --------------------------------------------------- */

.ag-match {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: rgba(12, 3, 6, .93);
	backdrop-filter: blur(8px);
	animation: ag-fade .3s ease;
}
.ag-match__inner {
	text-align: center;
	max-width: 380px;
	width: 100%;
	background: linear-gradient(180deg, var(--ag-surface), var(--ag-ink));
	border: 1px solid rgba(227, 167, 44, .3);
	border-radius: var(--ag-r-lg);
	padding: 2rem 1.6rem 1.6rem;
	box-shadow: var(--ag-shadow);
}
.ag-match__mark svg { width: 74px; height: auto; margin: 0 auto 1rem; }
.ag-match__title {
	font-family: var(--ag-display);
	font-size: 2.5rem;
	color: var(--ag-gold);
	margin: 0 0 .3rem;
}
.ag-match__text { color: var(--ag-muted); margin: 0 0 1.6rem; }
.ag-match__avatars { display: flex; justify-content: center; margin-bottom: 1.8rem; }
.ag-match__avatars img {
	width: 96px; height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ag-gold);
}
.ag-match__avatars img:last-child { margin-left: -22px; }
.ag-match .ag-btn { margin-bottom: .6rem; }

/* --- Panneau coulissant ------------------------------------------------- */

.ag-sheet {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(12, 3, 6, .7);
	backdrop-filter: blur(4px);
}
.ag-sheet__panel {
	width: 100%;
	max-width: 480px;
	background: var(--ag-ink-2);
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r-lg) var(--ag-r-lg) 0 0;
	padding: 1.3rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom));
	max-height: 88vh;
	overflow-y: auto;
	animation: ag-up .28s ease;
}
@keyframes ag-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.ag-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.ag-sheet__head h3 { font-family: var(--ag-display); font-size: 1.4rem; margin: 0; color: var(--ag-cream); }
.ag-sheet__body { display: grid; gap: 1rem; }
.ag-sheet__body.is-disabled { opacity: .45; pointer-events: none; }

@media (min-width: 700px) {
	.ag-sheet { align-items: center; }
	.ag-sheet__panel { border-radius: var(--ag-r-lg); }
}

.ag-lock {
	text-align: center;
	padding: 1.4rem 1rem;
	border: 1px solid rgba(227, 167, 44, .28);
	border-radius: var(--ag-r);
	background: rgba(227, 167, 44, .07);
}
.ag-lock__icon { color: var(--ag-gold); display: block; margin-bottom: .5rem; }
.ag-lock__icon svg { margin-inline: auto; }
.ag-lock p { color: var(--ag-muted); font-size: .9rem; margin: 0 0 1rem; }

.ag-lockdot {
	position: absolute;
	right: -2px; bottom: -2px;
	width: 16px; height: 16px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ag-gold);
	color: #3A0A12;
}

/* --- Messagerie --------------------------------------------------------- */

.ag-chat {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 1.2rem;
	max-width: var(--ag-max);
	height: calc(100vh - var(--ag-tab-h) - 2rem);
	min-height: 520px;
}
.ag-chat__list {
	background: var(--ag-ink-2);
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r-lg);
	overflow-y: auto;
	padding: 1rem .7rem;
}
.ag-chat__listhead { padding: .2rem .5rem 1rem; }
.ag-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ag-thread {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .75rem .7rem;
	border-radius: var(--ag-r);
	text-decoration: none;
	color: inherit;
	transition: background .18s;
}
.ag-thread:hover { background: rgba(246, 234, 220, .05); }
.ag-thread.is-active { background: rgba(227, 167, 44, .12); }
.ag-thread__body { flex: 1; min-width: 0; }
.ag-thread__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ag-thread__top strong { font-size: .95rem; font-weight: 600; }
.ag-thread__top em { font-size: .74rem; color: var(--ag-faint); font-style: normal; flex: none; }
.ag-thread__preview {
	display: block;
	font-size: .84rem;
	color: var(--ag-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ag-thread__new { color: var(--ag-gold-2); font-weight: 600; }

.ag-chat__panel {
	background: var(--ag-ink-2);
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}
.ag-chat__head {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .02);
}
.ag-chat__back { display: none; }
.ag-chat__who { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.ag-chat__who strong { display: block; font-size: .96rem; }
.ag-chat__who em { font-style: normal; font-size: .76rem; color: var(--ag-faint); }
.ag-chat__tools { display: flex; gap: .35rem; }
.ag-chat__tools .ag-iconbtn { width: 38px; height: 38px; }

.ag-chat__stream {
	flex: 1;
	overflow-y: auto;
	padding: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
}
.ag-chat__intro { text-align: center; padding: 1rem 0 1.8rem; }
.ag-chat__intro img {
	width: 74px; height: 74px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto .8rem;
	border: 2px solid var(--ag-gold);
}
.ag-chat__intro p { color: var(--ag-muted); font-size: .9rem; margin: 0; }

.ag-bubble {
	max-width: 74%;
	padding: .68rem .95rem;
	border-radius: 18px;
	font-size: .93rem;
	line-height: 1.45;
	word-wrap: break-word;
	position: relative;
	animation: ag-fade .22s ease;
}
.ag-bubble--them {
	align-self: flex-start;
	background: var(--ag-surface-2);
	border-bottom-left-radius: 5px;
}
.ag-bubble--me {
	align-self: flex-end;
	background: linear-gradient(135deg, var(--ag-gold-2), var(--ag-gold));
	color: #3A0A12;
	border-bottom-right-radius: 5px;
	font-weight: 500;
}
.ag-bubble time { display: block; font-size: .66rem; opacity: .6; margin-top: .25rem; }
.ag-bubble img { border-radius: 12px; margin: -.2rem 0 .2rem; max-height: 300px; object-fit: cover; }
.ag-bubble audio { width: 220px; max-width: 100%; }

.ag-chat__quota {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .4rem;
	text-align: center;
	font-size: .8rem;
	color: var(--ag-faint);
	margin: 0;
	padding: .5rem 1rem 0;
}
.ag-chat__quota a { color: var(--ag-gold-2); text-decoration: none; font-weight: 600; margin-left: .35rem; }

.ag-composer {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--ag-line-soft);
}
.ag-composer__btn {
	position: relative;
	display: grid; place-items: center;
	width: 40px; height: 40px;
	flex: none;
	border-radius: 50%;
	border: 0;
	background: rgba(246, 234, 220, .05);
	color: var(--ag-muted);
	cursor: pointer;
}
.ag-composer__btn:hover { background: rgba(227, 167, 44, .13); color: var(--ag-gold); }
.ag-composer__btn.is-locked { color: var(--ag-faint); }
.ag-composer input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: .8rem 1.1rem;
	border-radius: var(--ag-r-pill);
	border: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .05);
	color: var(--ag-text);
	font: 400 .95rem var(--ag-sans);
}
.ag-composer input[type="text"]:focus { outline: none; border-color: rgba(227, 167, 44, .5); }
.ag-composer__send {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	flex: none;
	border-radius: 50%;
	border: 0;
	background: linear-gradient(135deg, var(--ag-gold-2), var(--ag-gold));
	color: #3A0A12;
	cursor: pointer;
}

.ag-call { position: absolute; inset: 0; z-index: 20; background: var(--ag-ink); display: flex; flex-direction: column; }
.ag-call__head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--ag-line-soft); }
.ag-call__frame { flex: 1; }
.ag-call__frame iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) {
	.ag-chat { grid-template-columns: 1fr; height: auto; }
	.ag-chat.has-thread .ag-chat__list { display: none; }
	.ag-chat:not(.has-thread) .ag-chat__panel { display: none; }
	.ag-chat__panel { height: calc(100vh - var(--ag-tab-h) - 2.5rem); }
	.ag-chat__back { display: grid; }
}

/* --- Fiche profil ------------------------------------------------------- */

.ag-profilepage { max-width: 620px; }
.ag-gallery {
	position: relative;
	aspect-ratio: 3 / 4;
	max-height: 62vh;
	border-radius: var(--ag-r-lg);
	overflow: hidden;
	background: var(--ag-surface);
	margin-bottom: 1.3rem;
}
.ag-gallery__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .3s; }
.ag-gallery__slide.is-active { opacity: 1; }
.ag-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.ag-gallery--empty { display: grid; place-items: center; }
.ag-gallery--empty svg { width: 90px; height: auto; opacity: .3; }
.ag-gallery__dots { position: absolute; bottom: .9rem; left: 0; right: 0; display: flex; justify-content: center; gap: .35rem; z-index: 2; }
.ag-gallery__dots button {
	width: 8px; height: 8px; padding: 0;
	border-radius: 50%; border: 0;
	background: rgba(251, 244, 234, .35);
	cursor: pointer;
}
.ag-gallery__dots button.is-active { background: var(--ag-gold); width: 20px; border-radius: 4px; }

.ag-profilepage__meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--ag-muted); font-size: .88rem; margin: 0 0 .8rem; }
.ag-profilepage__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.ag-profilepage__meta .ag-i { color: var(--ag-gold); }
.ag-profilepage__section { margin-top: 1.6rem; }
.ag-profilepage__actions { display: flex; gap: .7rem; margin-top: 2rem; flex-wrap: wrap; }

.ag-creatorlink {
	display: flex; align-items: center; gap: .9rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid rgba(227, 167, 44, .3);
	border-radius: var(--ag-r);
	background: rgba(227, 167, 44, .07);
	text-decoration: none; color: inherit;
}
.ag-creatorlink .ag-i { color: var(--ag-gold); }
.ag-creatorlink strong { display: block; font-size: .95rem; }
.ag-creatorlink em { font-style: normal; font-size: .84rem; color: var(--ag-muted); }

/* --- Premium ------------------------------------------------------------ */

.ag-premium { max-width: 940px; }
.ag-premium__head { text-align: center; margin-bottom: 2.2rem; }
.ag-premium__crown { display: block; color: var(--ag-gold); margin-bottom: .6rem; }
.ag-premium__crown svg { margin-inline: auto; }
.ag-premium__head .ag-sub { margin-inline: auto; }

.ag-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 2.6rem; }
.ag-plan {
	position: relative;
	background: linear-gradient(180deg, var(--ag-surface), var(--ag-ink-2));
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r-lg);
	padding: 1.7rem 1.3rem 1.4rem;
	text-align: center;
}
.ag-plan.is-featured {
	border-color: rgba(227, 167, 44, .5);
	box-shadow: 0 16px 44px rgba(227, 167, 44, .14);
	transform: scale(1.02);
}
.ag-plan__save {
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	padding: .22rem .8rem;
	border-radius: var(--ag-r-pill);
	background: var(--ag-blush);
	color: #2A0509;
	font-size: .74rem; font-weight: 800;
}
.ag-plan__name { font-family: var(--ag-display); font-size: 1.5rem; margin: 0 0 .1rem; color: var(--ag-cream); }
.ag-plan__note { font-size: .8rem; color: var(--ag-faint); margin: 0 0 1rem; }
.ag-plan__price { font-size: 1.9rem; font-weight: 700; color: var(--ag-gold); margin: 0; line-height: 1.1; }
.ag-plan__unit { font-size: .8rem; color: var(--ag-muted); margin: .2rem 0 1.3rem; }

.ag-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-bottom: 2.6rem; }
.ag-feature { display: flex; gap: .9rem; align-items: flex-start; }
.ag-feature__icon {
	display: grid; place-items: center;
	width: 42px; height: 42px; flex: none;
	border-radius: 12px;
	background: rgba(227, 167, 44, .12);
	color: var(--ag-gold);
}
.ag-feature strong { display: block; font-size: .95rem; margin-bottom: .15rem; }
.ag-feature p { margin: 0; font-size: .86rem; color: var(--ag-muted); }

.ag-payinfo { background: var(--ag-ink-2); border: 1px solid var(--ag-line-soft); border-radius: var(--ag-r-lg); padding: 1.6rem; }
.ag-steps { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ag-muted); display: grid; gap: .45rem; font-size: .92rem; }
.ag-steps li::marker { color: var(--ag-gold); font-weight: 700; }

/* --- Créateurs ---------------------------------------------------------- */

.ag-creators__head { margin-bottom: 1.6rem; }
.ag-search {
	display: flex; align-items: center; gap: .6rem;
	padding: .45rem .5rem .45rem 1rem;
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r-pill);
	background: rgba(246, 234, 220, .05);
	max-width: 460px;
	margin-bottom: 1rem;
}
.ag-search .ag-i { color: var(--ag-faint); }
.ag-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ag-text); font: 400 .93rem var(--ag-sans); }
.ag-search input:focus { outline: none; }

.ag-segment { display: inline-flex; gap: .3rem; padding: .25rem; border-radius: var(--ag-r-pill); background: rgba(246, 234, 220, .05); }
.ag-segment a {
	padding: .45rem 1rem;
	border-radius: var(--ag-r-pill);
	font-size: .84rem; font-weight: 600;
	color: var(--ag-muted); text-decoration: none;
}
.ag-segment a.is-on { background: rgba(227, 167, 44, .18); color: var(--ag-gold-2); }

.ag-creatorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.ag-creatorcard {
	display: block;
	border-radius: var(--ag-r-lg);
	overflow: hidden;
	background: var(--ag-surface);
	border: 1px solid var(--ag-line-soft);
	text-decoration: none; color: inherit;
	transition: transform .2s, border-color .2s;
}
.ag-creatorcard:hover { transform: translateY(-3px); border-color: rgba(227, 167, 44, .4); }
.ag-creatorcard__photo { display: block; aspect-ratio: 1; background: var(--ag-surface-2); }
.ag-creatorcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.ag-creatorcard__body { display: block; padding: .85rem .95rem 1rem; }
.ag-creatorcard__body strong { display: block; font-size: .95rem; }
.ag-creatorcard__body em { display: block; font-style: normal; font-size: .8rem; color: var(--ag-muted); margin: .1rem 0 .4rem; min-height: 1.2em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-creatorcard__meta { display: block; font-size: .76rem; color: var(--ag-gold-2); font-weight: 600; }

.ag-callout {
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 1.3rem;
	border-radius: var(--ag-r-lg);
	border: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .03);
}
.ag-callout .ag-i { color: var(--ag-gold); }
.ag-callout strong { display: block; margin-bottom: .3rem; }
.ag-callout p { margin: 0; font-size: .88rem; color: var(--ag-muted); }

.ag-creatorpage { max-width: 780px; }
.ag-creatorpage__head { text-align: center; position: relative; padding-top: 0; margin-bottom: 2rem; }
.ag-creatorpage__cover {
	height: 150px;
	border-radius: var(--ag-r-lg);
	background:
		radial-gradient(100% 120% at 30% 0%, rgba(92, 14, 30, .9), transparent 70%),
		linear-gradient(120deg, #3D0913, #1C070D);
	margin-bottom: -56px;
}
.ag-creatorpage__head .ag-avatar--xl { margin: 0 auto .8rem; }
.ag-statrow { display: flex; justify-content: center; gap: 2rem; margin: 1rem 0 1.4rem; }
.ag-statrow span { display: block; text-align: center; }
.ag-statrow strong {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	font-family: var(--ag-sans);
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--ag-gold);
}
.ag-statrow em { font-style: normal; font-size: .76rem; color: var(--ag-muted); }
.ag-creatorpage__cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

.ag-postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.ag-post {
	position: relative;
	border-radius: var(--ag-r);
	overflow: hidden;
	background: var(--ag-surface);
	border: 1px solid var(--ag-line-soft);
}
.ag-post__media { aspect-ratio: 1; }
.ag-post__media img { width: 100%; height: 100%; object-fit: cover; }
.ag-post__media img.is-blur { filter: blur(9px) saturate(.7); transform: scale(1.1); }
.ag-post__play { position: absolute; top: .6rem; right: .6rem; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.ag-post__lock {
	position: absolute; inset: 0;
	display: grid; place-content: center; justify-items: center; gap: .5rem;
	background: rgba(12, 3, 6, .55);
	color: var(--ag-cream);
	text-align: center;
	padding: 1rem;
}
.ag-post__lock .ag-i { color: var(--ag-gold); }
.ag-post__lock p { margin: 0; font-size: .82rem; font-weight: 600; }
.ag-post__caption { padding: .7rem .8rem 0; font-size: .85rem; color: var(--ag-muted); margin: 0; }
.ag-post__time { display: block; padding: .35rem .8rem .7rem; font-size: .72rem; color: var(--ag-faint); }
.ag-post__status {
	position: absolute; top: .5rem; left: .5rem;
	padding: .2rem .6rem;
	border-radius: var(--ag-r-pill);
	font-size: .68rem; font-weight: 700;
	background: rgba(12, 3, 6, .8);
}
.ag-post__status--published { color: var(--ag-ok); }
.ag-post__status--pending   { color: var(--ag-warn); }
.ag-post__status--rejected  { color: var(--ag-err); }
.ag-post__del {
	position: absolute; top: .5rem; right: .5rem;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(12, 3, 6, .8);
	color: var(--ag-cream);
	cursor: pointer;
}

/* --- Studio ------------------------------------------------------------- */

.ag-studio { max-width: 860px; }
.ag-studio__hero { text-align: center; margin-bottom: 2rem; }
.ag-studio__badge {
	display: grid; place-items: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	background: rgba(227, 167, 44, .14);
	color: var(--ag-gold);
	margin: 0 auto 1rem;
}
.ag-studio__hero .ag-sub { margin-inline: auto; }

.ag-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.ag-tile {
	padding: 1.1rem 1.2rem;
	border-radius: var(--ag-r);
	background: linear-gradient(180deg, var(--ag-surface), var(--ag-ink-2));
	border: 1px solid var(--ag-line-soft);
}
.ag-tile em { display: block; font-style: normal; font-size: .78rem; color: var(--ag-muted); margin-bottom: .3rem; }
.ag-tile strong { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ag-gold); }

.ag-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ag-rules li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--ag-muted); }
.ag-rules .ag-i { color: var(--ag-gold); margin-top: 3px; }

.ag-publish { display: grid; gap: 1rem; }
.ag-publish__drop {
	display: grid; place-content: center; justify-items: center; gap: .5rem;
	padding: 2.2rem 1rem;
	border: 1px dashed rgba(227, 167, 44, .35);
	border-radius: var(--ag-r);
	background: rgba(227, 167, 44, .05);
	color: var(--ag-gold);
	cursor: pointer;
	font-size: .9rem; font-weight: 600;
	text-align: center;
}
.ag-publish__preview img,
.ag-publish__preview video { border-radius: var(--ag-r); max-height: 280px; width: 100%; object-fit: cover; }

.ag-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 1rem; }
.ag-table th {
	text-align: left;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ag-faint);
	font-weight: 700;
	padding: .5rem .4rem;
	border-bottom: 1px solid var(--ag-line-soft);
}
.ag-table td { padding: .7rem .4rem; border-bottom: 1px solid var(--ag-line-soft); color: var(--ag-muted); }
.ag-table tr:last-child td { border-bottom: 0; }

.ag-account__summary { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ag-account__summary > div { flex: 1 1 200px; min-width: 0; }

.ag-blocklist { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ag-blocklist li {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .6rem .8rem;
	border-radius: var(--ag-r);
	background: rgba(246, 234, 220, .04);
	font-size: .9rem;
}

/* --- Divers ------------------------------------------------------------- */

.ag-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--ag-tab-h) + 1rem);
	transform: translateX(-50%) translateY(20px);
	z-index: 200;
	padding: .8rem 1.3rem;
	border-radius: var(--ag-r-pill);
	background: var(--ag-surface-2);
	border: 1px solid var(--ag-line);
	color: var(--ag-text);
	font: 500 .88rem var(--ag-sans);
	box-shadow: var(--ag-shadow);
	opacity: 0;
	transition: opacity .25s, transform .25s;
	max-width: 90vw;
	text-align: center;
}
.ag-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.ag-app *, .ag-auth *, .ag-onboard * { animation: none !important; transition: none !important; }
}

/* --- Profils de démonstration ------------------------------------------ */

.ag-demo {
	display: inline-block;
	padding: .18rem .6rem;
	border-radius: var(--ag-r-pill);
	background: rgba(232, 116, 138, .22);
	border: 1px solid rgba(232, 116, 138, .5);
	color: var(--ag-blush);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
	margin-left: .4rem;
}
.ag-swipe__demo {
	position: absolute;
	top: 1.4rem; left: 1.1rem;
	z-index: 4;
}

.ag-topbar__title { margin: 0; }

/* --- Vérification d'identité -------------------------------------------- */

.ag-verify { max-width: 680px; }

.ag-verify__hero { text-align: center; margin-bottom: 1.6rem; }
.ag-verify__hero .ag-sub { margin-inline: auto; }

.ag-verify__seal {
	display: grid;
	place-items: center;
	width: 66px; height: 66px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: rgba(227, 167, 44, .13);
	border: 1px solid rgba(227, 167, 44, .35);
	color: var(--ag-gold);
}
.ag-verify__seal--verified {
	background: linear-gradient(135deg, var(--ag-gold-2), var(--ag-gold));
	border-color: transparent;
	color: #3A0A12;
	box-shadow: 0 10px 30px rgba(227, 167, 44, .3);
}
.ag-verify__seal--pending { background: rgba(232, 116, 138, .14); border-color: rgba(232, 116, 138, .4); color: var(--ag-blush); }

.ag-verify__done { display: flex; align-items: flex-start; gap: 1.1rem; }
.ag-verify__done > div { flex: 1; min-width: 0; }
.ag-verify__done .ag-btn { margin-top: .4rem; }

.ag-verify__spin {
	display: grid; place-items: center;
	width: 44px; height: 44px; flex: none;
	border-radius: 50%;
	background: rgba(232, 116, 138, .14);
	color: var(--ag-blush);
}

.ag-verified--lg { width: 44px; height: 44px; flex: none; margin: 0; }

/* Zones de dépôt */

.ag-drops { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .ag-drops { grid-template-columns: 1fr; } }

.ag-drop {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: .35rem;
	padding: 1.4rem 1rem 1.2rem;
	border: 1px dashed rgba(227, 167, 44, .38);
	border-radius: var(--ag-r);
	background: rgba(227, 167, 44, .05);
	cursor: pointer;
	text-align: center;
	transition: border-color .2s, background .2s;
}
.ag-drop:hover { background: rgba(227, 167, 44, .1); border-color: rgba(227, 167, 44, .6); }
.ag-drop.has-file { border-style: solid; border-color: rgba(79, 191, 139, .5); background: rgba(79, 191, 139, .07); }

.ag-drop__preview {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	background: rgba(246, 234, 220, .05);
	color: var(--ag-gold);
	overflow: hidden;
	margin-bottom: .3rem;
}
.ag-drop__preview img { width: 100%; height: 100%; object-fit: cover; }

.ag-drop__label { font-weight: 600; font-size: .93rem; }
.ag-drop__hint  { font-size: .8rem; color: var(--ag-faint); }

.ag-promise {
	border: 1px solid var(--ag-line-soft);
	border-radius: var(--ag-r);
	padding: 1.1rem 1.2rem;
	background: rgba(246, 234, 220, .03);
}
.ag-promise .ag-h3 { margin-bottom: .7rem; }

/* Carte de rappel dans Mon compte */

.ag-verifycard--verified { border-color: rgba(227, 167, 44, .35); }
.ag-verifycard .ag-verified { vertical-align: -4px; margin-right: .2rem; }

/* --- Porte-monnaie ------------------------------------------------------ */

.ag-wallet { max-width: 680px; }

.ag-balance {
	text-align: center;
	padding: 2rem 1.4rem;
	margin-bottom: 1.1rem;
	border-radius: var(--ag-r-lg);
	border: 1px solid rgba(227, 167, 44, .3);
	background:
		radial-gradient(110% 130% at 50% 0%, rgba(92, 14, 30, .8), transparent 70%),
		linear-gradient(180deg, var(--ag-surface), var(--ag-ink-2));
}
.ag-balance__label { display: block; font-size: .8rem; color: var(--ag-muted); letter-spacing: .04em; }
.ag-balance__amount {
	display: block;
	font-family: var(--ag-sans);
	font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.05;
	color: var(--ag-gold);
	margin: .2rem 0 .6rem;
}
.ag-balance__note { margin: 0 auto; max-width: 40ch; color: var(--ag-muted); font-size: .88rem; }

.ag-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.ag-stepbtn {
	display: grid;
	place-items: center;
	padding: 1.1rem .6rem;
	border-radius: var(--ag-r);
	border: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .04);
	text-decoration: none;
	color: var(--ag-text);
	transition: all .18s;
}
.ag-stepbtn:hover { border-color: rgba(227, 167, 44, .5); background: rgba(227, 167, 44, .1); transform: translateY(-2px); }
.ag-stepbtn strong { font-size: 1.02rem; font-weight: 700; }

.ag-txlist { list-style: none; margin: 0; padding: 0; }
.ag-tx {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--ag-line-soft);
}
.ag-tx:last-child { border-bottom: 0; }
.ag-tx__body strong { display: block; font-size: .92rem; font-weight: 500; }
.ag-tx__body em { font-style: normal; font-size: .76rem; color: var(--ag-faint); }
.ag-tx__amount { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.ag-tx.is-in  .ag-tx__amount { color: var(--ag-ok); }
.ag-tx.is-out .ag-tx__amount { color: var(--ag-muted); }

.ag-walletcard__amount {
	font-family: var(--ag-display);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ag-gold);
	margin: 0 0 .3rem;
	line-height: 1.1;
}

/* --- Rythme, niveaux, garantie ------------------------------------------ */

.ag-level {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .26rem .7rem;
	border-radius: var(--ag-r-pill);
	font-size: .74rem;
	font-weight: 700;
	border: 1px solid var(--ag-line-soft);
	background: rgba(246, 234, 220, .06);
	color: var(--ag-muted);
}
.ag-level--regulier { border-color: rgba(227, 167, 44, .45); background: rgba(227, 167, 44, .13); color: var(--ag-gold-2); }
.ag-level--etoile {
	border-color: transparent;
	background: linear-gradient(135deg, var(--ag-gold-2), var(--ag-gold));
	color: #3A0A12;
}
.ag-level--new { border-color: rgba(232, 116, 138, .45); background: rgba(232, 116, 138, .13); color: var(--ag-blush); }

.ag-rhythm {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .78rem;
	color: var(--ag-muted);
}
.ag-rhythm .ag-i { color: var(--ag-gold); }
.ag-rhythm--streak .ag-i { color: var(--ag-ok); }

.ag-creatorpage__level {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem .9rem;
	margin: .2rem 0 0;
}

.ag-creatorcard__tags { display: block; margin-bottom: .35rem; }

.ag-guarantee {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.2rem 1.3rem;
	margin-bottom: 1.4rem;
	border-radius: var(--ag-r-lg);
	border: 1px solid rgba(79, 191, 139, .28);
	background: rgba(79, 191, 139, .07);
}
.ag-guarantee > .ag-i { color: var(--ag-ok); flex: none; }
.ag-guarantee strong { display: block; margin-bottom: .25rem; }
.ag-guarantee p { margin: 0; font-size: .88rem; color: var(--ag-muted); }

/* --- La semaine du créateur --------------------------------------------- */

.ag-week {
	padding: 1.4rem;
	margin-bottom: 1.1rem;
	border-radius: var(--ag-r-lg);
	border: 1px solid var(--ag-line-soft);
	background: linear-gradient(180deg, var(--ag-surface), var(--ag-ink-2));
}
.ag-week--done { border-color: rgba(79, 191, 139, .3); }
.ag-week--todo { border-color: rgba(227, 167, 44, .3); }
.ag-week__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.ag-week__head .ag-h3 { margin: 0; }

.ag-week__count { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .7rem; }
.ag-week__count strong {
	font-family: var(--ag-sans);
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--ag-gold);
}
.ag-week__count span { color: var(--ag-muted); font-size: .9rem; }

.ag-meter--wide { max-width: none; height: 8px; border-radius: 4px; }

.ag-week__msg  { margin: .8rem 0 0; font-size: .92rem; font-weight: 600; }
.ag-week--done .ag-week__msg { color: var(--ag-ok); }
.ag-week--todo .ag-week__msg { color: var(--ag-gold-2); }
.ag-week__due  { margin: .5rem 0 0; font-size: .88rem; color: var(--ag-muted); }
.ag-week__next {
	display: flex; align-items: center; gap: .4rem;
	margin: .8rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid var(--ag-line-soft);
	font-size: .84rem;
	color: var(--ag-faint);
}
.ag-week__next .ag-i { color: var(--ag-gold); }

.ag-pact .ag-steps { margin-top: .8rem; }

/* --- Chiffres : toujours des chiffres alignés, jamais des bâtons -------- */

.ag-balance__amount,
.ag-week__count strong,
.ag-match__title,
.ag-plan__price,
.ag-walletcard__amount,
.ag-tile strong,
.ag-swipe__info h2 {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.ag-tile strong,
.ag-plan__price {
	font-family: var(--ag-sans);
}

/* Le rythme sur les cartes de l'annuaire */
.ag-creatorcard__rhythm {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .74rem;
	color: var(--ag-muted);
	margin-top: .2rem;
}
.ag-creatorcard__rhythm .ag-i { color: var(--ag-gold); }

/* --- Le fil de publications --------------------------------------------- */

.ag-feed { display: block; }

.ag-feed__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.2rem 0 .3rem;
}
.ag-feed__head:first-child { margin-top: 0; }
.ag-feed__head .ag-h2 { margin: 0; }
.ag-feed__more { font-size: .84rem; font-weight: 600; color: var(--ag-gold-2); text-decoration: none; white-space: nowrap; }
.ag-feed__more:hover { text-decoration: underline; }

.ag-feed__intro { color: var(--ag-muted); font-size: .92rem; margin: .4rem 0 0; max-width: 62ch; }

.ag-feed__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1rem;
	margin-top: 1.2rem;
}

.ag-feed__wallet {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 1.6rem 0 0;
	padding: .9rem 1.1rem;
	border-radius: var(--ag-r);
	border: 1px solid rgba(227, 167, 44, .28);
	background: rgba(227, 167, 44, .07);
	font-size: .88rem;
	color: var(--ag-muted);
}
.ag-feed__wallet .ag-i { color: var(--ag-gold); flex: none; }

/* La carte */

.ag-fpost {
	border-radius: var(--ag-r-lg);
	overflow: hidden;
	background: linear-gradient(180deg, var(--ag-surface), var(--ag-ink-2));
	border: 1px solid var(--ag-line-soft);
	transition: transform .2s ease, border-color .2s ease;
	display: flex;
	flex-direction: column;
}
.ag-fpost:hover { transform: translateY(-3px); border-color: rgba(227, 167, 44, .35); }

.ag-fpost__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .75rem .85rem;
}
.ag-fpost__who { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; min-width: 0; }
.ag-fpost__who .ag-avatar { width: 36px; height: 36px; }
.ag-fpost__id { min-width: 0; }
.ag-fpost__id strong {
	display: block;
	font-size: .89rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ag-fpost__id em { font-style: normal; font-size: .72rem; color: var(--ag-faint); }

.ag-fpost__tag {
	flex: none;
	padding: .2rem .55rem;
	border-radius: var(--ag-r-pill);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .02em;
	background: rgba(232, 116, 138, .16);
	border: 1px solid rgba(232, 116, 138, .35);
	color: var(--ag-blush);
}
.ag-fpost__tag--open { background: rgba(79, 191, 139, .14); border-color: rgba(79, 191, 139, .35); color: var(--ag-ok); }

.ag-fpost__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--ag-surface-2);
	overflow: hidden;
}
.ag-fpost__media img { width: 100%; height: 100%; object-fit: cover; }
.ag-fpost__media img.is-blur { filter: blur(10px) saturate(.7) brightness(.8); transform: scale(1.1); }

.ag-fpost__media--text {
	display: grid;
	place-items: center;
	padding: 1.6rem 1.2rem;
	aspect-ratio: 4 / 3;
}
.ag-fpost__media--text p {
	margin: 0;
	font-family: var(--ag-display);
	font-size: 1.25rem;
	line-height: 1.35;
	text-align: center;
	color: var(--ag-cream);
}
.ag-fpost__media--text p.is-blur { filter: blur(7px); user-select: none; }

.ag-fpost__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(12, 3, 6, .6);
	color: #fff;
	backdrop-filter: blur(4px);
	pointer-events: none;
}

.ag-fpost__lock {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .5rem;
	padding: 1.2rem 1rem;
	text-align: center;
	background: linear-gradient(180deg, rgba(12, 3, 6, .35), rgba(12, 3, 6, .72));
}
.ag-fpost__lockicon {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(227, 167, 44, .18);
	border: 1px solid rgba(227, 167, 44, .4);
	color: var(--ag-gold);
}
.ag-fpost__locktitle {
	margin: 0;
	font-size: .88rem;
	font-weight: 700;
	color: var(--ag-cream);
}
.ag-fpost__promise {
	font-size: .7rem;
	line-height: 1.35;
	color: rgba(251, 244, 234, .68);
	max-width: 22ch;
}

.ag-fpost__caption {
	margin: 0;
	padding: .8rem .9rem 1rem;
	font-size: .87rem;
	color: var(--ag-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ag-verified--sm { width: 15px; height: 15px; margin-left: .15rem; vertical-align: -2px; }

@media (max-width: 560px) {
	.ag-feed__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
	.ag-fpost__head { padding: .6rem .65rem; }
	.ag-fpost__caption { padding: .6rem .7rem .8rem; font-size: .82rem; }
	.ag-fpost__promise { display: none; }
}

/* --- Protection des contenus -------------------------------------------- */

.ag-marked {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: .45rem .9rem .7rem;
	font-size: .7rem;
	color: var(--ag-faint);
	cursor: help;
}
.ag-marked .ag-i { color: var(--ag-gold); opacity: .7; }

/* Le glisser-déposer et l'appui long ne servent à rien sur un média privé. */
.ag-fpost__media img,
.ag-fpost__media video,
.ag-post__media img,
.ag-gallery img,
.ag-swipe__photos img,
.ag-bubble img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.ag-guarantee__rule {
	margin: .6rem 0 0 !important;
	padding-top: .6rem;
	border-top: 1px solid rgba(79, 191, 139, .22);
	font-size: .84rem !important;
	color: var(--ag-faint) !important;
}