/* Pages Profil : chargée sur toutes les pages (importmap.php du bundle), n'utilise que les jetons du socle (ui-bundle). */
@layer components {
[data-stamina-turbo-region] .profile-card__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-stamina-turbo-region] .profile-card__head { margin-bottom: 12px; }


[data-stamina-turbo-region] .profile-card__avatar { display: inline-flex; flex: none; }

[data-stamina-turbo-region] .profile-card__name { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--color-ink, #1d1531); }
[data-stamina-turbo-region] .profile-card__sub { margin-top: 2px; font-size: 13px; color: var(--color-muted, #a1a5b7); overflow-wrap: anywhere; }
[data-stamina-turbo-region] .profile-card__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
[data-stamina-turbo-region] .profile-card__badges .badge { color: var(--color-ink-2, #3f4254); }

[data-stamina-turbo-region] .profile-card__actions { width: 100%; margin-top: 16px; }

[data-stamina-turbo-region] .profile-card__details { width: 100%; margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--color-line, #eff0f4); text-align: left; }
[data-stamina-turbo-region] .profile-card__details .contact-details__row:first-child { padding-top: 4px; }
[data-stamina-turbo-region] .profile-card__hint { margin-top: 2px; font-size: 11.5px; color: var(--color-muted, #a1a5b7); }


[data-stamina-turbo-region] .profile-card .contact-details__icon.is-success { background: color-mix(in srgb, var(--color-success) 12%, #fff); color: var(--color-success); }
[data-stamina-turbo-region] .profile-card .contact-details__icon.is-warning { background: color-mix(in srgb, var(--color-warning) 16%, #fff); color: var(--color-warning); }


[data-stamina-turbo-region] .profile-tabs { margin-bottom: 24px !important; }
}

/* Accès d'un compte (Profile/_access_cards : profil et fiche utilisateur) : une carte par usage, le mode d'emploi
   à gauche, ce qui est relié à droite ; lignes plates séparées d'un filet, une seule action par ligne. */
@layer components {
.access-cards { display: flex; flex-direction: column; gap: 1.25rem; }
.access-card__layout { display: grid; grid-template-columns: 21.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .access-card__layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.access-card__why { margin: 0 0 .875rem; font-size: .8125rem; line-height: 1.5; color: var(--color-ink-2); }
.access-card__why code, .access-card__steps code { white-space: nowrap; padding: .0625rem .3125rem; border-radius: .3125rem; background: var(--color-tile); font-size: .71875rem; }
.access-card__steps { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: access-step; }
.access-card__steps > li { position: relative; padding: 0 0 .5rem 1.75rem; font-size: .78125rem; line-height: 1.45; color: var(--color-ink-2); counter-increment: access-step; }
.access-card__steps > li::before {
    content: counter(access-step); position: absolute; left: 0; top: -.0625rem; display: grid; place-items: center; width: 1.1875rem; height: 1.1875rem;
    border-radius: 50%; background: color-mix(in srgb, var(--color-primary-500) 12%, var(--color-surface)); color: var(--color-primary-600); font-size: .6875rem; font-weight: 700;
}
.access-card__buttons { display: flex; flex-wrap: wrap; gap: .375rem; }
.access-card__hint { margin: .625rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--color-muted); overflow-wrap: anywhere; }
.access-card__hint > i { margin-right: .375rem; }
.access-card__hint b { font-weight: 600; color: var(--color-ink-2); }
.access-card__list-title { margin: 0 0 .25rem; font-size: .75rem; font-weight: 600; color: var(--color-muted); }
.access-card__empty { display: flex; align-items: center; gap: .625rem; padding: 1.125rem; border: 1px dashed var(--color-line); border-radius: .75rem; font-size: .78125rem; color: var(--color-muted); }
.access-card__empty > i { font-size: 1rem; color: var(--color-muted-2); }

.access-list { margin: 0; padding: 0; list-style: none; }
.access-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto 2rem; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--color-line); }
.access-list > .access-row:first-child { border-top: 0; }
.access-row__icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--color-tile); color: var(--color-ink-2); font-size: .8125rem; }
.access-row__main { min-width: 0; }
.access-row__name { overflow: hidden; font-size: .84375rem; font-weight: 500; color: var(--color-ink); text-overflow: ellipsis; white-space: nowrap; }
.access-row.is-pending .access-row__name { color: var(--color-ink-2); }
.access-row__meta { overflow: hidden; font-size: .75rem; color: var(--color-muted); text-overflow: ellipsis; white-space: nowrap; }
.access-row__seen { font-size: .75rem; color: var(--color-ink-2); text-align: right; white-space: nowrap; }
.access-row__seen.is-idle { color: var(--color-muted); }
.access-row__seen-inline { display: none; }
.access-row__action { display: flex; justify-content: flex-end; }
.access-row__revoke { color: var(--color-muted); }
.access-row__revoke:hover { color: var(--color-danger); }
.access-row__tag { display: inline-block; margin-left: .375rem; padding: .0625rem .4375rem; border-radius: 999px; background: var(--color-tile); font-size: .6875rem; font-weight: 500; color: var(--color-muted); vertical-align: .0625rem; }
.access-row__tag.is-warn { background: var(--color-warning-soft, color-mix(in srgb, var(--color-warning) 14%, var(--color-surface))); color: var(--color-warning); }
@media (max-width: 640px) {
    .access-row { grid-template-columns: 1.75rem minmax(0, 1fr) 2rem; }
    .access-row__seen { display: none; }
    .access-row__seen-inline { display: inline; }
}
.access-foot { margin: .25rem 0 0; font-size: .75rem; color: var(--color-muted); }
.access-foot > i { margin-right: .375rem; }
}