/* ===========================================================================
   FEUILLE D'ÉCRAN — Anonymisation des salariés partis (SEC-05, second volet)
   Écran : Components/Pages/Admin/Anonymisation.razor — /admin/anonymisation

   Une feuille par écran : chacun sa fin de fichier et sa clé de cache. Le
   gabarit fournit les cartes, la grille dense, le tableau de liste, les badges
   et le pied de méthode ; rien n'est redéfini ici.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*.
   =========================================================================== */

/* ===========================================================================
   1. LES DEUX COLONNES « DÉTRUIT / CONSERVÉ »

   *** ELLES SONT EN TÊTE, AVANT LA LISTE, ET C'EST LE POINT DE L'ÉCRAN. ***
   C'est ce qu'on doit avoir lu avant de cliquer, pas après. En pied de page,
   elles auraient été lues une fois le geste fait.

   Côte à côte plutôt que l'une sous l'autre : la question qu'on se pose n'est
   pas « qu'est-ce qui part ? » mais « qu'est-ce qui part PLUTÔT QUE de rester ? »,
   et une comparaison se lit en vis-à-vis.
   =========================================================================== */

.ano-portee {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.ano-portee-col {
    padding: 14px;
}

/* Le filet entre les deux colonnes, pas autour : la carte a déjà son bord. */
.ano-portee-col + .ano-portee-col {
    border-left: 1px solid var(--et-hairline);
}

.ano-portee-col h2 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--et-ink);
}

/* La corbeille en avertissement, le bouclier en succès : la couleur porte le
   sens avant que le titre ne soit lu. Pas de rouge — détruire au bon moment
   n'est pas une panne, c'est le geste attendu. */
.ano-portee-col:first-child h2 .bi { color: var(--et-avertissement-ink); }
.ano-portee-col:last-child h2 .bi  { color: var(--et-succes-ink); }

.ano-portee-col ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-muted);
}

.ano-portee-col li { margin-bottom: 6px; }
.ano-portee-col li:last-child { margin-bottom: 0; }
.ano-portee-col strong { color: var(--et-ink); }

/* ===========================================================================
   2. LA CONFIRMATION

   Ce n'est PAS une fenêtre modale, et c'est la même raison que pour les
   secrets des lots précédents, en plus fort : sur le geste le plus
   irréversible du produit, un clic à côté ne doit rien fermer — ni valider,
   ni annuler par mégarde ce qu'on était en train de lire.
   =========================================================================== */

.ano-confirmation {
    border-left: 3px solid var(--et-danger);
    padding-bottom: 4px;
}

.ano-confirmation-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 6px 14px;
    font-size: 13px;
    color: var(--et-ink);
}

.ano-confirmation-tete .bi { color: var(--et-danger-ink); }

.ano-confirmation-quoi {
    margin: 0 14px 6px 14px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--et-muted);
    max-width: 88ch;
}

.ano-confirmation-quoi strong { color: var(--et-ink); }

.ano-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 14px 12px 14px;
}

/* ===========================================================================
   3. LES LISTES
   =========================================================================== */

/* Ce qu'il reste à détruire : la colonne qui décide. En avertissement quand il
   y a quelque chose, en gris quand il n'y a rien — on voit d'un coup d'œil les
   dossiers où le geste change réellement quelque chose. */
.ano-reste {
    color: var(--et-avertissement-ink);
    font-weight: 600;
}

.ano-compte {
    font-family: var(--et-font-mono);
    font-size: 12px;
    white-space: nowrap;
}

/* ===========================================================================
   4. PALIERS

   Recette à 390 / 768 / 1280 / 1600 px (docs/conventions-responsive.md).
   =========================================================================== */

/* Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible ne
   descend sous 44 px. Le bouton rouge de cet écran est celui du produit sur
   lequel on veut le moins d'ambiguïté de visée. */
@media (max-width: 1024px) {
    .ecran-tete .mx-outils .mx-btn,
    .ano-actions .mx-btn { min-height: 44px; }
}

/* Les deux colonnes passent l'une sous l'autre : en vis-à-vis à cette largeur,
   chaque phrase se casse en cinq lignes et la comparaison ne se lit plus.
   « Détruit » reste en premier — c'est ce qu'on doit lire d'abord. */
@media (max-width: 1100px) {
    .ano-portee { grid-template-columns: 1fr; }
    .ano-portee-col + .ano-portee-col {
        border-left: 0;
        border-top: 1px solid var(--et-hairline);
    }
}

@media (max-width: 560px) {
    .ano-portee-col { padding: 12px; }
    .ano-confirmation-tete,
    .ano-actions { padding-left: 12px; padding-right: 12px; }
    .ano-confirmation-quoi { margin-left: 12px; margin-right: 12px; }
}