/* ===========================================================================
   FEUILLE D'ÉCRAN — Clés d'API (INT-01)
   Écran : Components/Pages/Admin/ClesApi.razor — /admin/cles-api

   POURQUOI CE FICHIER EXISTE, ET PAS UN BLOC DE PLUS DANS modele-erp.css
   Une feuille par écran donne à chacun sa fin de fichier et sa clé de cache ;
   les styles d'écran empilés en fin de gabarit faisaient se télescoper deux
   branches ouvertes le même jour, non sur le fond mais sur la dernière ligne.

   CE QUI RESTE DANS LE GABARIT : les cartes, la grille dense, le gabarit de
   liste, les badges d'état et le pied de méthode. Rien n'est redéfini ici.

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

/* ===========================================================================
   1. LE PANNEAU DU SECRET

   *** IL NE RESSEMBLE À RIEN D'AUTRE DANS LE PRODUIT, ET C'EST VOULU. *** Il
   porte la seule information de l'application qui ne se retrouve pas : une
   fois masquée, elle n'existe plus nulle part. Un bandeau d'alerte ordinaire
   se lit comme les dizaines d'autres et se referme d'un réflexe.

   Ce n'est PAS une fenêtre modale, pour la même raison : une modale se ferme
   d'un clic à côté, et ce clic-là coûterait une clé.
   =========================================================================== */

.cla-secret {
    border-left: 3px solid var(--et-avertissement-mark);
    padding: 14px;
}

.cla-secret-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--et-ink);
    margin-bottom: 6px;
}

.cla-secret-tete .bi {
    color: var(--et-avertissement-ink);
}

.cla-secret-avert {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: var(--et-muted);
    line-height: 1.5;
    max-width: 82ch;
}

/* Le secret lui-même : en chasse fixe, sélectionnable d'un geste, et qui passe
   à la ligne plutôt que de déborder — on le copie, on ne le lit pas. */
.cla-secret-valeur {
    padding: 10px 12px;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono);
    font-size: 13px;
    color: var(--et-ink);
    word-break: break-all;
    user-select: all;
    margin-bottom: 8px;
}

.cla-secret-usage {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: var(--et-muted);
    word-break: break-all;
}

/* ===========================================================================
   2. LE CHOIX DES PORTÉES

   Une grille auto-ajustée plutôt qu'une colonne : une société peut en avoir
   soixante, et une liste verticale de soixante cases se parcourt à la molette
   au lieu de se lire d'un coup d'œil.
   =========================================================================== */

.cla-portees {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2px 12px;
    padding: 8px 14px 12px 14px;
}

.cla-portee {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 3px 0;
    font-size: 12px;
    cursor: pointer;
}

.cla-portee code {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-ink);
}

.cla-vide {
    padding: 14px;
    font-size: 13px;
    color: var(--et-muted);
    max-width: 82ch;
}

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

/* Le nombre de portées, dans la liste : c'est un compte, il s'aligne comme un
   nombre et porte le détail en infobulle — étaler soixante permissions dans
   une cellule rendrait la ligne illisible pour une information qu'on ne
   consulte qu'au cas par cas. */
.cla-portees-liste {
    font-family: var(--et-font-mono);
    cursor: help;
}

/* ===========================================================================
   3. 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 — et une cible ne rétrécit jamais. Les cases de portée
   sont les plus petites de l'écran, et cocher la mauvaise donne une clé trop
   large. */
@media (max-width: 1024px) {
    .ecran-tete .mx-outils .mx-btn,
    .cla-actions .mx-btn,
    .cla-secret .mx-btn { min-height: 44px; }

    .cla-portee { min-height: 44px; }
    /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes
       les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */
}

/* Une seule colonne de portées : à cette largeur, deux colonnes coupent les
   codes de permission au milieu. */
@media (max-width: 720px) {
    .cla-portees { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .cla-secret { padding: 12px; }
    .cla-portees,
    .cla-actions { padding-left: 12px; padding-right: 12px; }
}