/* Mots de passe : chargée sur toutes les pages (importmap.php du bundle), n'utilise que les jetons du socle (ui-bundle). */
@layer components {
    /* Tableau des mots de passe : colonnes fixes, cellules tronquées (hors case à cocher et actions). */
    .js-password-passwords-table { table-layout: fixed; }
    /* Largeurs posées par l'en-tête : case à cocher étroite, actions à droite (pastille OTP comprise) dès 768 px. */
    .js-password-passwords-table > thead th:first-child { width: 3rem; }
    @media (width >= 48rem) {
        .js-password-passwords-table > thead th:last-child { width: 15.5rem; }
    }
    .js-password-passwords-table td:not(:last-child):not(:first-child) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Ligne d'ajout : les widgets occupent leur cellule. */
    .js-password-passwords-table .password-form-row :is(.input, .choice-widget) { width: 100%; }

    /* Valeur éditable en place (stamina-password-inline-edit) : soulignée en pointillés. */
    .password-inline-edit {
        color: var(--color-link);
        border-bottom: 1px dashed currentColor;
        cursor: pointer;
        text-decoration: none;
        &:focus-visible { outline: var(--line-width-active, 2px) solid var(--color-focus); outline-offset: 2px; }
        &.is-empty { color: var(--color-danger); font-style: italic; }
        &.is-editing { border-bottom: 0; cursor: default; }
    }
    /* Le champ déborde au-dessus des cellules voisines (colonnes étroites), sur fond de carte. */
    .password-inline-edit__field {
        position: relative;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        min-width: 100%;
        padding: .125rem;
        border-radius: var(--radius-field);
        background: var(--color-surface);
        box-shadow: var(--shadow-card);
        > .input { flex: 1; min-width: 12rem; min-height: 1.875rem; padding-block: .125rem; }
    }
    /* La cellule en cours d'édition doit pouvoir afficher le champ entier. */
    .js-password-passwords-table td:has(.password-inline-edit.is-editing) { overflow: visible; }

    /* Code OTP : pastille avec barre de progression. */
    .password-otp {
        position: relative;
        overflow: hidden;
        padding: .4375rem .5rem;
        > [data-stamina-password-otp-target="timer"] {
            position: absolute;
            inset-inline-start: 0;
            bottom: 0;
            height: 2px;
            width: 100%;
            opacity: .6;
            transition: width 1s linear;
        }
    }

    /* Pastille compteur posée sur un bouton (informations complémentaires). */
    .password-counter {
        position: absolute;
        top: -.375rem;
        inset-inline-end: -.375rem;
        min-width: 1.125rem;
        height: 1.125rem;
        padding: 0 .25rem;
        border-radius: 999px;
        background: var(--color-warning-solid, var(--color-warning));
        color: #fff;
        font-size: .625rem;
        font-weight: 700;
        line-height: 1.125rem;
        text-align: center;
    }

    /* Données masquées : mot de passe non autorisé, ou mot de passe autorisé hors édition (copie au clic droit). */
    .filter-blur { filter: blur(3px); user-select: none; }
    .filter-blur:has(.password-inline-edit.is-editing) { filter: none; user-select: auto; }
    .filter-blur-container { position: relative; display: inline-block; }
    .filter-blur-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--color-muted);
        pointer-events: none;
    }

    /* Contenu riche d'une procédure (TinyMCE). */
    .process-content :is(ul, ol) { padding-left: 1.25rem; }
    .process-content ul { list-style: disc; }
    .process-content ol { list-style: decimal; }
    .process-content :is(p, ul, ol, pre, table) + :is(p, ul, ol, pre, table) { margin-top: .5rem; }
}

/* Écran des mots de passe. Les pièces du socle (card, chip, avatar, menu) et la seule couleur de l'application.
   Une ligne fait 3rem ; les colonnes d'un accès sont les mêmes partout, pour que l'œil les suive de haut en bas. */
@layer components {
    .pw-mark { padding: 0 .0625rem; border-radius: .1875rem; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; }
    .pw-empty { margin: 0; padding: 1.5rem .75rem; text-align: center; font-size: .8125rem; color: var(--color-muted); }
    .pw-post { display: contents; }
    .pw-post .menu-link { border: 0; background: none; text-align: left; }
    .btn .pw-post-label, .pw-star .pw-post-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .btn:not(.btn-icon) .pw-post-label { position: static; width: auto; height: auto; clip-path: none; }
    .btn .menu-icon { margin: 0; }
    .pw-star.is-on { color: var(--color-warning); }

    /* La recherche : un seul champ, large. */
    .pw-search {
        display: flex; align-items: center; gap: .75rem; height: 3.25rem; margin-bottom: 1.25rem; padding: 0 1.25rem;
        border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--color-line);
        &:focus-within { box-shadow: 0 0 0 2px var(--color-accent); }
        > i { color: var(--color-accent); font-size: 1.0625rem; }
        > input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 1rem; font-weight: 500; color: var(--color-ink); outline: none; }
        > kbd { padding: .125rem .5rem; border-radius: .375rem; background: var(--color-tile); font: 600 .75rem/1.4 inherit; color: var(--color-muted); }
        &.is-inline { flex: 1 1 22rem; height: 2.75rem; margin: 0; }
    }

    /* Deux colonnes égales, de même hauteur ; chacune défile seule. */
    .pw-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    @media (width >= 64rem) { .pw-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .pw-pane { display: flex; flex-direction: column; min-height: 0; }
    .pw-split > .pw-pane { height: calc(100dvh - 15rem); min-height: 24rem; }
    .pw-split.is-auto { align-items: stretch; }

    /* Demandes d'accès : en haut, tant qu'il en reste. */
    .pw-requests { margin-bottom: 1.25rem; }
    .pw-request-row { grid-template-columns: 2rem minmax(0, 1fr) auto auto; .avatar { --size-avatar: 2rem; font-size: .75rem; } }

    /* Accueil : les dossiers à gauche (comme la base de connaissances), une carte par dossier à droite, reliées par des
       filaments (stamina-password-filaments) dessinés dans l'espace entre les deux colonnes. */
    .pw-vault { position: relative; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
    @media (width >= 64rem) { .pw-vault { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); column-gap: 4.5rem; } }
    .pw-vault-nav, .pw-vault-cards { display: grid; gap: 1.25rem; min-width: 0; > .card { margin: 0; min-width: 0; } }
    .pw-vault-cards { position: relative; z-index: 1; }
    .pw-vault-cards > .pw-empty { margin: 0; }
    .pw-vault-folders .pick-list { padding: .5rem; }
    .pw-nav-item {
        position: relative; padding-block: .4375rem;
        > .avatar { --size-avatar: 1.625rem; font-size: .6875rem; border-radius: .5rem; }
        .pick-item-meta { white-space: nowrap; }
        > .pw-branch-star { flex: none; }
        &.is-linked .pick-item-value { color: var(--color-accent); }
        &.is-match .pick-item-name { color: var(--color-accent); }
        &.is-lit { background: var(--color-accent-soft); }
    }
    .pw-filaments {
        display: none; position: absolute; inset: 0; z-index: 2; overflow: visible; pointer-events: none;
        /* Couleurs opaques : les filaments superposés du tronc ne foncent pas. */
        path { fill: none; stroke: color-mix(in srgb, var(--color-accent) 40%, var(--color-canvas)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s, stroke-width .15s; }
        circle { fill: var(--color-surface); stroke: color-mix(in srgb, var(--color-accent) 55%, var(--color-canvas)); stroke-width: 1.5; transition: fill .15s, stroke .15s; }
        g.is-lit path { stroke: var(--color-accent); stroke-width: 2.25; }
        g.is-lit circle { fill: var(--color-accent); stroke: var(--color-accent); }
    }
    @media (width >= 64rem) { .pw-filaments { display: block; } }
    .pw-folder-card {
        transition: box-shadow .15s;
        &.is-lit { box-shadow: var(--shadow-card), 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent); }
    }
    .pw-folder-card-head {
        display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .625rem 1.25rem .5rem; border-bottom: 1px solid var(--color-line);
        > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 700; }
        .avatar { --size-avatar: 1.875rem; font-size: .8125rem; }
        &:hover { > strong, .pw-branch-go { color: var(--color-accent); } .pw-branch-go { transform: translateX(2px); } }
    }
    .pw-folder-card-body {
        container: pw-list / inline-size; display: grid; padding: .375rem .75rem .625rem;
        .pw-group + .pw-group { margin-top: .25rem; }
        .pw-password-row { min-height: 2.25rem; padding: 0 .5rem; gap: .75rem; }
        .pw-password-row + .pw-password-row { box-shadow: 0 -1px 0 var(--color-line); }
        .pw-row-main { gap: .625rem; }
        .pw-row-main .avatar { --size-avatar: 1.75rem; font-size: .6875rem; }
        .pw-row-text strong { font-size: .8125rem; }
        .pw-row-text small { font-size: .6875rem; }
        .pw-cell { height: 1.75rem; font-size: .75rem; }
    }
    .pw-vault-empty {
        display: flex; align-items: center; gap: 1rem; margin: 0; padding: 1.25rem 1.5rem;
        > p { margin: 0; font-size: .8125rem; color: var(--color-muted); > strong { display: block; margin-bottom: .125rem; font-size: .9375rem; color: var(--color-ink); } }
    }
    .pw-more { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; font-size: .8125rem; font-weight: 600; color: var(--color-accent); }
    .pw-done { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem 0; font-size: .875rem; font-weight: 600; color: var(--color-success); }
    .pw-mini-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 2.5rem; }

    /* Générateur. */
    .pw-generator { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-width: 0; > .range { width: 100%; } }
    .pw-generator-out {
        display: flex; align-items: center; gap: .375rem; padding: .375rem .375rem .375rem .875rem; border-radius: var(--radius-tile); background: var(--color-tile);
        > input { flex: 1; min-width: 0; width: 0; border: 0; background: none; font-size: .9375rem; font-weight: 600; color: var(--color-ink); outline: none; }
        > .btn { flex: none; }
    }
    .pw-generator-menu { display: grid; gap: .75rem; width: min(17rem, calc(100vw - 2rem)); padding: .875rem; > .range { width: 100%; } }

    /* L'en-tête de l'accueil : la recherche, et à côté le générateur en bandeau nuit, comme les cartes phares. */
    .pw-topbar {
        display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem;
        > .pw-search { flex: 1 1 22rem; margin: 0; }
    }
    .pw-genbar {
        display: flex; flex: none; align-items: center; gap: .375rem; height: 3.25rem; min-width: 0; padding: 0 .5rem 0 .625rem;
        border-radius: var(--radius-card); color: #fff; background: var(--color-night);
        box-shadow: 0 14px 30px -22px rgb(30 21 53 / .9);
        .btn-ghost { color: rgb(255 255 255 / .8); &:hover { background: rgb(255 255 255 / .1); color: #fff; } }
        .menu-trigger-icon { color: rgb(255 255 255 / .8); &:hover { background: rgb(255 255 255 / .1); color: #fff; } }
        > .btn-primary { margin-left: .25rem; border-color: var(--color-accent); background: var(--color-accent); color: #fff; &:hover { filter: brightness(1.1); } }
    }
    .pw-genbar-icon { display: grid; place-items: center; flex: none; width: 2.125rem; height: 2.125rem; border-radius: .75rem; background: rgb(255 255 255 / .1); color: #d9ccff; font-size: .8125rem; }
    .pw-field.is-copyable { cursor: pointer; border-radius: .625rem; transition: background-color .15s; &:hover { background: var(--color-accent-soft); } }
    .pw-genbar-out {
        cursor: pointer; width: 13.5rem; min-width: 0; height: 2.25rem; padding: 0 .75rem; border: 0; border-radius: .625rem; outline: none;
        background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
        font-family: var(--font-mono); font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: #fff;
    }
    @media (width < 48rem) { .pw-genbar { flex: 1 1 100%; } .pw-genbar-out { flex: 1; width: auto; } }
    .pw-generator-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .8125rem; color: var(--color-ink-2); cursor: pointer; }

    /* Le générateur et les demandes d'accès : la nuit, comme les cartes phares du tableau de bord. */
    .card.pw-night {
        --color-ink: #fff; --color-ink-2: rgb(255 255 255 / .85); --color-muted: rgb(255 255 255 / .6); --color-line: rgb(255 255 255 / .1);
        --color-tile: rgb(255 255 255 / .08); --color-tile-2: rgb(255 255 255 / .14);
        background: radial-gradient(110% 85% at 100% 0%, rgb(153 102 255 / .28), transparent 60%), var(--color-night);
        color: var(--color-on-night); box-shadow: 0 16px 34px -20px rgb(30 21 53 / .8);
        .card-head h2 { color: #fff; }
        .card-sub { color: rgb(255 255 255 / .6); }
        .card-icon { background: rgb(255 255 255 / .1); color: #d9ccff; }
        .badge { background: rgb(255 255 255 / .14); color: #fff; }
        .btn-outline { border-color: rgb(255 255 255 / .25); background: transparent; color: #fff; &:hover { background: rgb(255 255 255 / .1); } }
        .btn-ghost { color: #fff; &:hover { background: rgb(255 255 255 / .1); } }
        .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
        .pw-generator-out { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); > input { color: #fff; } }
        .pw-done { color: #7ee2a8; }
        .pw-row:hover { background: rgb(255 255 255 / .06); }
        .avatar { background: rgb(255 255 255 / .12); color: #fff; }
    }

    /* Recherche : l'arborescence (dossier, puis ses accès en retrait, reliés par un trait). */
    .pw-tree { padding: 1rem 1.625rem 1.5rem; }
    .pw-tree-sum { margin: .25rem 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
    .pw-branch + .pw-branch { margin-top: .25rem; }
    .pw-branch-head {
        display: flex; align-items: center; gap: .75rem; min-height: 3rem; margin-left: -.5rem; padding: .25rem .75rem .25rem .5rem; border-radius: .75rem;
        transition: background-color .15s, color .15s;
        > strong { font-size: .9375rem; font-weight: 700; }
        .avatar { --size-avatar: 1.875rem; font-size: .8125rem; }
        &:hover { background: var(--color-tile); > strong, .pw-branch-go { color: var(--color-accent); } .pw-branch-go { transform: translateX(2px); } }
    }
    .pw-branch-star { font-size: .6875rem; color: var(--color-warning, #f5a524); }
    .pw-branch-meta { font-size: .75rem; color: var(--color-muted); }
    .pw-branch-go { margin-left: auto; color: var(--color-muted); transition: transform .15s, color .15s; }
    /* Le trait part du milieu de l'icône du dossier ; l'icône de chaque accès s'aligne sur le nom du dossier (et, dans une carte,
       sur son titre). */
    .pw-branch-body { container: pw-list / inline-size; display: grid; margin: 0 0 .5rem calc(.9375rem - 1px); padding-left: 1.125rem; border-left: 2px solid var(--color-line); }
    .pw-branch-body .pw-row.pw-password-row { min-height: 2.5rem; padding-left: .5rem; box-shadow: none; .pw-row-main .avatar { --size-avatar: 1.75rem; font-size: .6875rem; } }
    /* Partout (arborescence, dossier), le nom et le site sur une seule ligne : le site cède sa place le premier, le nom ensuite. */
    .pw-group .pw-row-text { display: flex; align-items: baseline; gap: .5rem; > strong { flex: 0 1 auto; min-width: 0; } > small { flex: 0 1000 auto; min-width: 0; } }
    .pw-pane > .card-body { flex: 1; min-height: 0; overflow-y: auto; padding-top: 0; }
    .pw-pane.is-full { padding: .5rem 1rem 1rem; }

    .pw-list { display: grid; container: pw-list / inline-size; }
    .pw-pane.is-full { container: pw-list / inline-size; }
    .pw-row {
        display: grid; align-items: center; gap: .75rem; min-height: 3rem; padding: .25rem .5rem; border-radius: .75rem; color: var(--color-ink);
        & + .pw-row { box-shadow: 0 -1px 0 var(--color-line); }
        &:hover { background: var(--color-tile); box-shadow: none; }
        &:hover + .pw-row { box-shadow: none; }
    }
    .pw-row-main { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
    .pw-row-main .avatar { --size-avatar: 2rem; font-size: .8125rem; }
    .pw-row-main > strong, .pw-row-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 650; }
    .pw-row-text { display: grid; min-width: 0; line-height: 1.25; }
    .pw-row-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--color-muted); }
    .pw-row-main:hover strong { color: var(--color-accent); }
    .pw-fav { font-size: .6875rem; color: var(--color-warning); }
    /* Sous une catégorie, l'étoile d'un favori prend la place de l'icône, dans la marge : les noms restent alignés. Dans un
       dossier, la poignée la remplace au survol. */
    .pw-group .pw-fav { position: absolute; top: 50%; left: 1.375rem; translate: -50% -50%; }
    .pw-password-row:hover:has(> .pw-check) .pw-fav, .pw-list:has(.pw-check:checked) .pw-fav { opacity: 0; }

    .pw-row[hidden], .pw-group[hidden], .pw-empty[hidden] { display: none; }

    /* Une valeur à copier : du texte dans sa colonne, l'icône de copie au bout ; la case se surligne au survol. */
    .pw-cell {
        display: flex; align-items: center; gap: .5rem; min-width: 0; height: 2.25rem; padding: 0 .625rem; margin-left: -.625rem;
        border: 0; border-radius: .625rem; background: none; text-align: left; color: var(--color-ink-2); font-size: .8125rem; cursor: pointer;
        transition: background-color .15s, color .15s;
        > i { flex: none; margin-left: auto; font-size: .75rem; color: var(--color-muted); opacity: 0; transition: opacity .15s, color .15s; }
        .pw-row:hover > & > i { opacity: 1; }
        &:hover, &:focus-visible { background: var(--color-accent-soft); color: var(--color-accent); > i { opacity: 1; color: var(--color-accent); } }
    }
    .pw-cell-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Le mot de passe ne s'affiche pas : une clé et « Copier », toujours visibles, de même largeur sur chaque ligne. */
    /* Le mot de passe, masqué : huit points, toujours entiers ; l'icône de copie au survol, comme l'identifiant. */
    .pw-cell.is-secret .pw-cell-value { overflow: hidden; text-overflow: clip; letter-spacing: .06em; color: var(--color-ink-2); }
    .pw-cell.is-secret .pw-secret-head { font-family: var(--font-mono); letter-spacing: .02em; }
    .pw-cell.is-secret:hover .pw-cell-value { color: var(--color-accent); }
    /* Le mot de passe : un seul bloc, sans bouton. Clic gauche : affiché en entier à la place des points ; clic droit : copié. */
    .pw-secret-box {
        position: relative; display: flex; align-items: center; min-width: 0; height: 2.25rem; margin-left: -.625rem;
        border-radius: .625rem; transition: background-color .15s;
        > .pw-cell { flex: 1; min-width: 0; height: 100%; margin-left: 0; background: none !important; }
        &:hover, &:focus-within { background: var(--color-accent-soft); }
        &:hover .pw-cell-value { color: var(--color-accent); }
    }
    /* Affiché : le mot de passe reste dans sa colonne et passe à la ligne si besoin (la ligne grandit), sans déborder sur
       le code voisin. */
    .pw-secret-box.is-revealed {
        height: auto; min-height: 2.25rem; padding-block: .3125rem; background: var(--color-accent-soft);
        > .pw-cell { height: auto; }
        .pw-cell.is-secret .pw-cell-value {
            display: block; overflow: visible; white-space: normal; overflow-wrap: anywhere; word-break: break-all; line-height: 1.35;
            font-family: var(--font-mono); letter-spacing: .02em; color: var(--color-ink);
        }
    }
    .pw-cell.pw-otp { position: relative; overflow: hidden; .pw-cell-value { font-weight: 700; letter-spacing: .06em; color: var(--color-accent); font-variant-numeric: tabular-nums; } }

    /* Un accès : nom | site | identifiant | mot de passe | code | … | menu. Tout est serré à gauche, à largeurs bornées ; la
       place qui reste va en fin de ligne, avant le menu. */
    .pw-password-row { grid-template-columns: minmax(9rem, 1.35fr) minmax(7rem, 1fr) minmax(8rem, 1fr) 11rem 5.25rem auto 2rem; }
    .pw-password-row > :last-child { grid-column: -2; }
    /* Les actions courantes, dans la place libre avant le menu, au survol de la ligne seulement ; Modifier en tête, mis en
       avant. Au repos, seule reste l'icône des informations complémentaires quand l'accès en a : elle signale qu'il y a à lire. */
    .pw-quick {
        display: flex; justify-self: end; gap: .125rem;
        > .btn { border-color: transparent; box-shadow: none; color: var(--color-muted); opacity: 0; transition: opacity .15s, color .15s, background-color .15s; }
        > .btn.is-main { margin-inline-end: .375rem; padding-inline: .625rem; color: var(--color-accent); background: var(--color-accent-soft); font-weight: 600; }
        > .btn.is-filled { color: var(--color-accent); opacity: 1; }
        > .btn.is-gap { visibility: hidden; }
        > .btn:hover, > .btn:focus-visible { background: var(--color-accent-soft); color: var(--color-accent); }
        > .btn.is-main:hover, > .btn.is-main:focus-visible { background: var(--color-accent); color: var(--color-on-accent, #fff); }
        .pw-row:hover > & > .btn, &:focus-within > .btn { opacity: 1; }
    }
    /* Place juste suffisante : Modifier garde sa couleur mais perd son libellé. */
    @container pw-list (width < 56rem) { .pw-quick { display: none; } }
    @container pw-list (width < 64rem) { .pw-quick > .btn.is-main { padding-inline: 0; width: 1.75rem; justify-content: center; font-size: 0; > i { font-size: .75rem; } } }
    .pw-site {
        display: flex; align-items: center; gap: .375rem; justify-self: start; min-width: 0; max-width: 100%; height: 1.75rem; padding: 0 .5rem; margin-left: -.5rem;
        border-radius: .5rem; font-size: .75rem; color: var(--color-accent); text-decoration: none; transition: background-color .15s;
        > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        > i { flex: none; font-size: .625rem; opacity: .7; }
        &:hover { background: var(--color-accent-soft); > span { text-decoration: underline; } }
        &.is-plain { color: var(--color-muted); &:hover { background: none; > span { text-decoration: none; } } }
    }
    .pw-none { color: var(--color-muted-2, var(--color-muted)); font-size: .8125rem; }
    .pw-otp { position: relative; overflow: hidden; font-weight: 700; font-variant-numeric: tabular-nums; }
    .pw-otp-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--color-accent); }
    .pw-locked { grid-column: 2 / 5; font-size: .75rem; color: var(--color-muted); }
    /* Liste moyenne (l'accueil) : le site se réduit à son icône, toujours entre le nom et l'identifiant. */
    @container pw-list (width < 46rem) {
        .pw-password-row { grid-template-columns: minmax(0, 1fr) 1.75rem clamp(8rem, 26cqi, 14rem) 11rem 5.25rem 2rem; }
        .pw-quick { display: none; }
        .pw-password-row > .pw-site { justify-content: center; width: 1.75rem; padding: 0; margin: 0; > span { display: none; } > i { font-size: .75rem; opacity: 1; } }
    }
    /* Dans une carte de l'accueil, les colonnes sont celles de la carte entière (sous-grille) : l'identifiant et le site
       prennent la largeur de leur plus long contenu (bornée), le nom ce qui reste ; plus d'identifiant coupé quand il y a la place. */
    .pw-folder-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
    @container pw-list (width >= 38rem) {
        .pw-folder-card-grid {
            column-gap: .75rem;
            grid-template-columns: minmax(8rem, 1fr) fit-content(20rem) fit-content(22rem) 11rem 5.25rem auto 2rem;
            > .pw-group, > .pw-group > *, > .pw-group > .pw-password-row { grid-column: 1 / -1; }
            > .pw-group, > .pw-group > .pw-password-row { grid-template-columns: subgrid; }
            > .pw-group { row-gap: 0; }
            /* Le site déborde à gauche (aligné sur son texte) par un décalage, pas par une marge négative : elle retrancherait
               de la largeur de la colonne et couperait l'adresse. */
            .pw-site { margin-left: 0; translate: -.5rem 0; }
        }
    }
    @container pw-list (38rem <= width < 46rem) {
        .pw-folder-card-grid { grid-template-columns: minmax(6rem, 1fr) 1.75rem fit-content(18rem) 11rem 5.25rem 2rem; }
    }
    /* Colonne étroite : le nom d'abord ; le mot de passe se réduit à son icône de copie. */
    @container pw-list (width < 38rem) {
        .pw-password-row { grid-template-columns: minmax(0, 1fr) clamp(7rem, 30cqi, 12rem) 4rem 4.25rem 2rem; gap: .5rem; }
        .pw-password-row > .pw-site { display: none; }
        .pw-cell.is-secret { justify-content: center; margin-left: 0; > .pw-cell-value { display: none; } > i { opacity: 1; margin: 0; } }
    }
    @container pw-list (width < 30rem) {
        .pw-password-row { grid-template-columns: minmax(0, 1fr) 4rem 4.75rem 2rem; }
        .pw-password-row > .pw-cell:not(.is-secret):not(.pw-otp), .pw-password-row > .pw-none:first-of-type { display: none; }
    }

    /* Le dossier : la barre (recherche + onglets), les catégories, les documents. */
    .pw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
    /* Les onglets, à côté de la recherche : même hauteur, même fond blanc, même ombre (le gris du socle est fait pour l'intérieur
       d'une carte, il disparaît sur le fond de page). */
    .tabs.tabs-pills.pw-tabs {
        align-items: center; height: 2.75rem; margin: 0; padding: .375rem; border-radius: var(--radius-card);
        background: var(--color-surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--color-line);
        .tab { height: 2rem; border-radius: calc(var(--radius-card) - .375rem); }
    }
    .pw-cats { display: flex; flex-wrap: wrap; gap: .375rem; padding: .5rem 0 .25rem; margin-bottom: .75rem; }
    #acces > .pw-list { padding-top: .5rem; }
    .pw-cats > .chip { border: 0; cursor: pointer; > b { font-weight: 700; color: var(--color-muted); } }
    .pw-cats > .chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent, #fff); > i, > b { color: inherit; } }
    .pw-doc-row { grid-template-columns: minmax(0, 1fr) 2rem; > .pw-row-main { color: inherit; text-decoration: none; } }
    .pw-field.detail { grid-template-columns: 2.1875rem minmax(0, 1fr) auto; > div > strong { overflow-wrap: anywhere; } }
    .password-detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.25rem 1.25rem; }
    .pw-secret:not(.is-shown) { -webkit-text-security: disc; text-security: disc; }
    .pw-group > .section-label { margin: 1rem .5rem .25rem; }
    /* La catégorie, entre le dossier et ses accès : son icône en pastille, son nom, son nombre, puis un filet jusqu'au bout de
       la ligne. Son nom s'aligne sur ceux des accès. */
    .pw-group { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
    .pw-cat-head {
        display: flex; align-items: center; gap: .625rem; margin: 1rem 0 .25rem; padding: 0 .5rem;
        font-size: .8125rem; font-weight: 700; color: var(--color-ink);
        > b { padding: .0625rem .4375rem; border-radius: 999px; background: var(--color-tile); font-size: .6875rem; font-weight: 600; color: var(--color-muted); }
        &::after { content: ''; flex: 1; height: 1px; background: var(--color-line); }
    }
    .pw-cat-icon { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--color-accent-soft); color: var(--color-accent); font-size: .75rem; }
    .pw-group:first-child > .pw-cat-head { margin-top: .25rem; }
    /* Sous sa catégorie, un accès n'en répète pas l'icône : son nom s'aligne sur celui de la catégorie. */
    .pw-group > .pw-password-row .pw-row-main { gap: .625rem; > .avatar { --size-avatar: 1.75rem; visibility: hidden; } }
    /* Sous une catégorie, pas de filet entre les accès : le survol suffit à suivre la ligne. Le nom et les valeurs à la même
       taille ; le nom se distingue par sa graisse. */
    .pw-group > .pw-row { position: relative; min-height: 2.125rem; padding-block: .0625rem; }
    .pw-group > .pw-row + .pw-row { box-shadow: none; }
    .pw-group .pw-row-text strong { font-size: .8125rem; font-weight: 650; }
    .pw-group .pw-cell { height: 1.875rem; font-size: .8125rem; }
    .pw-group .pw-secret-box { height: 1.875rem; }
    /* Procédures : la liste à gauche (collante, défilante), la procédure lue à droite. */
    .pw-docs { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
    .pw-docs[hidden] { display: none; }
    @media (width >= 64rem) { .pw-docs { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); } }
    .pw-docs > .card { margin: 0; min-width: 0; }
    .pw-docs-nav {
        position: sticky; top: 1rem; display: grid; gap: .75rem; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: .75rem;
        .pw-group > .section-label { margin: .75rem .5rem .25rem; }
        .pw-group:first-child > .section-label { margin-top: .25rem; }
        .pick-item[hidden] { display: none; }
        .pick-item, .pick-item-text { min-width: 0; }
        .pick-item-name, .pick-item-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        overflow-x: hidden;
        .pick-item.is-active { background: var(--color-accent-soft); .pick-item-name { color: var(--color-accent); } }
    }
    .pw-docs-view { padding: 1.5rem 1.75rem; min-height: 20rem; }
    .pw-reader-head {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--color-line);
        h2 { margin: .375rem 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--color-ink); }
    }
    .pw-reader-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; }
    .pw-reader-actions { display: flex; flex: none; gap: .375rem; }
    .pw-reader-body { font-size: .875rem; line-height: 1.6; color: var(--color-ink-2); }
    /* La configuration du module, sur une page : des listes courtes (intitulé, modifier, supprimer) et les liens des droits. */
    .pw-config { display: grid; gap: 1.25rem; max-width: 56rem; > .card { margin: 0; } }
    .pw-config-list { display: grid; margin: 0; padding: 0; list-style: none; }
    .pw-config-row {
        display: flex; align-items: center; gap: .5rem; padding: .375rem 0; border-bottom: 1px dashed var(--color-line);
        &:last-child { border-bottom: 0; }
    }
    .pw-config-name { flex: 1; min-width: 0; font-weight: 600; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pw-config-links { display: flex; flex-wrap: wrap; gap: .5rem; }
    /* Les consultations, en tête de l'historique (administrateurs) : une ligne par lecture, la plus récente d'abord. */
    .pw-history-title {
        margin: 1.5rem 0 .625rem; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-2);
        &:first-child { margin-top: 0; }
    }
    .pw-accesses {
        display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none;
        & li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .375rem 0; font-size: .8125rem; border-bottom: 1px dashed var(--color-line); }
        & li > i { color: var(--color-muted); text-align: center; }
        & small { color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
    }
    /* L'historique : une frise (un trait, une pastille par entrée), les jours en intertitre, les champs en deux colonnes. */
    .pw-history { display: grid; margin: 0; padding: 0; list-style: none; }
    .pw-history-day {
        margin: 1.25rem 0 .5rem; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted);
        &:first-child { margin-top: 0; }
    }
    .pw-history-entry {
        position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding-bottom: 1rem;
        &::before { content: ''; position: absolute; top: 1.75rem; bottom: 0; left: calc(.875rem - 1px); width: 2px; background: var(--color-line); }
        &:has(+ .pw-history-day)::before, &:last-child::before { display: none; }
    }
    .pw-history-dot {
        display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-size: .625rem;
        .is-create > & { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
        .is-remove > & { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
    }
    .pw-history-head {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; min-height: 1.75rem; margin: 0; padding-top: .25rem;
        > strong { font-size: .8125rem; font-weight: 700; color: var(--color-ink); }
        > span { font-size: .75rem; color: var(--color-muted); }
    }
    .pw-history-fields {
        display: grid; gap: .125rem; margin: .375rem 0 0; padding: .5rem .75rem; border-radius: .75rem; background: var(--color-tile);
        > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .25rem 0; }
        dt { font-size: .75rem; color: var(--color-muted); }
        dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: .8125rem; font-weight: 600; color: var(--color-ink); }
    }
    .pw-history-none { font-weight: 500; font-style: italic; color: var(--color-muted); }
    .pw-history-secret {
        display: inline-flex; align-items: center; gap: .5rem; padding: .125rem .5rem; margin-left: -.5rem; border: 0; border-radius: .5rem; background: none;
        font-weight: 700; letter-spacing: .14em; color: var(--color-ink-2); cursor: pointer;
        > i { font-size: .75rem; letter-spacing: 0; color: var(--color-muted); }
        &:hover { background: var(--color-accent-soft); color: var(--color-accent); > i { color: var(--color-accent); } }
    }
    .pw-history-cat { display: inline-flex; align-items: center; gap: .375rem; > i { color: var(--color-accent); } }
    .pw-history-meta { display: block; > b { font-weight: 500; color: var(--color-muted); } }
    /* Ce qui suit le pointeur pendant un glisser : une étiquette, pas toute la ligne. */
    .pw-drag-ghost {
        position: fixed; top: -100px; left: 0; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: 999px;
        background: var(--color-accent); color: #fff; font-size: .8125rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 24px -10px rgb(30 21 53 / .6);
    }

    /* Glisser un accès vers une autre catégorie : on saisit la ligne elle-même (pas de poignée). */
    .pw-password-row[draggable="true"] { position: relative; }
    /* Cocher des accès pour les actions groupées : la case, dans la marge à gauche, au survol ; dès qu'une case est cochée,
       toutes restent visibles (on est en train de sélectionner). */
    .pw-check {
        position: absolute; left: 1.375rem; top: 50%; translate: -50% -50%; z-index: 1; margin: 0; cursor: pointer; opacity: 0; transition: opacity .15s;
        .pw-password-row:hover > &, &:checked, &:focus-visible { opacity: 1; }
        .pw-list:has(.pw-check:checked) & { opacity: 1; }
    }
    .pw-password-row:has(> .pw-check:checked) { background: var(--color-accent-soft); }
    /* Pendant le glisser : la liste s'efface, la palette des catégories flotte au-dessus, la catégorie actuelle est grisée. */
    .pw-list.is-sorting > .pw-group { opacity: .35; transition: opacity .2s; }
    .pw-password-row.is-dragged { opacity: .4; }
    .pw-drop {
        position: fixed; z-index: 50; top: 50%; left: 50%; translate: -50% -50%; width: min(34rem, calc(100vw - 2rem)); padding: 1rem;
        border-radius: var(--radius-card); background: var(--color-night); color: #fff; box-shadow: 0 30px 60px -20px rgb(30 21 53 / .7);
    }
    .pw-drop-title { margin: 0 0 .75rem .25rem; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
    .pw-drop-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .375rem; }
    .pw-drop-zone {
        display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: .625rem;
        background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); font-size: .8125rem; font-weight: 600;
        transition: background-color .12s, box-shadow .12s, transform .12s;
        > * { pointer-events: none; }
        > i { color: #d9ccff; }
        > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        &.is-over { background: var(--color-accent); box-shadow: none; transform: scale(1.03); > i { color: #fff; } }
        &.is-current { opacity: .35; }
    }
}

/* Paramètres d'un dossier : le dossier, qui y a accès (une ligne par personne), la suppression. */
@layer components {
    .pw-settings { display: grid; gap: 1.25rem; max-width: 56rem; }
    .pw-people { display: grid; margin: 0; padding: 0; list-style: none; }
    .pw-person {
        display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .625rem 0;
        & + & { border-top: 1px solid var(--color-line); }
        > .avatar { width: 2.25rem; height: 2.25rem; }
        &.is-admin > .avatar { color: var(--color-accent); }
        &.is-full > .avatar { color: var(--color-success); }
        &.is-partial > .avatar { color: var(--color-warning); }
    }
    .pw-person-text { display: grid; gap: .125rem; min-width: 0; > strong { font-size: .875rem; } > small { font-size: .75rem; color: var(--color-muted); } }
    .pw-person-items {
        display: flex; flex-wrap: wrap; gap: .375rem; margin: .375rem 0 0; padding: 0; list-style: none;
        > .chip { gap: .375rem; padding-inline-end: .125rem; > i { color: var(--color-muted); } > .btn { width: 1.25rem; height: 1.25rem; } }
    }
    .pw-person-lock { margin-inline-end: .5rem; color: var(--color-muted); }
    .pw-settings-hint { margin: .75rem 0 0; font-size: .75rem; color: var(--color-muted); }
    .pw-settings-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; > p { margin: 0; font-size: .8125rem; color: var(--color-muted); } }
}