/* ============================================================
   CXAGENTS ADMIN — coquille applicative
   ------------------------------------------------------------
   Ne définit AUCUNE couleur, AUCUNE taille de police en dur :
   tout vient de `tokens-cxagents-admin.css`, qui importe
   lui-même `colors_and_type.css` (brique partagée, auteur
   agents-web). C'est ce partage qui garantit que les deux
   fronts ne divergeront pas visuellement.

   RÈGLE D'EMPLOI, à tenir dans tout écran futur :
     --app-*         = IDENTITÉ  (où l'on est)   → ardoise
     --color-accent  = ACTION    (ce qu'on fait) → teal

   Ardoise pour dire où l'on est, teal pour dire ce qu'on peut
   faire. Un bouton se lit donc à l'identique dans les deux
   applications : c'est la parenté voulue.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font: var(--fw-regular) var(--fs-15)/1.55 var(--font-sans);
    color: var(--color-ink);
    background: var(--bg);
}

/* ---------- Marqueur de session exceptionnelle (F-20-24) ----------
   Hachuré, pleine largeur, en tête de page : il doit être impossible
   à manquer. Sans lui, une démonstration faite par la porte de
   développement se lit comme une démonstration du parcours réel. */

.bandeau-dev {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0 var(--space-4); height: 38px;
    background: repeating-linear-gradient(135deg,
        var(--dev-bg) 0 14px, #F1E3CB 14px 28px);
    border-bottom: 1px solid var(--dev-bd);
    color: var(--dev-fg);
    font: var(--fw-medium) var(--fs-12)/1 var(--font-sans);
}
.bandeau-dev__etiquette {
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--color-white); background: var(--dev-strong);
    padding: 5px 9px; border-radius: var(--radius-sm);
    font: var(--fw-bold) var(--fs-10)/1 var(--font-sans);
}
.bandeau-dev__note { margin-left: auto; color: var(--dev-strong); opacity: .85; }

/* ---------- Cadre général ---------- */

.cadre { display: flex; min-height: 100vh; }

/* ---------- Rail de navigation ----------
   Le trait de famille le plus reconnaissable du produit : le rail
   sombre. Une barre claire aurait été efficace de loin, mais elle
   aurait fait perdre ce trait (décision d'identité visuelle, § 4). */

.rail {
    flex: 0 0 236px;
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    background: var(--app-accent-deep);
    color: var(--color-white);
}

/* Le LOGO SEUL, sans nom écrit : arbitrage du 2026-09-08. Le nom
   reste sur l'écran de connexion et dans l'onglet du navigateur. */
.rail__logo { display: flex; align-items: center; padding: 0 var(--space-2) var(--space-2); }

.rail__section { display: flex; flex-direction: column; gap: 2px; }
.rail__titre {
    padding: 0 var(--space-3) var(--space-2);
    font: var(--fw-bold) var(--fs-10)/1 var(--font-sans);
    text-transform: uppercase; letter-spacing: .08em;
    color: rgb(255 255 255 / .45);
}
.rail__lien {
    padding: 9px var(--space-3); border-radius: var(--radius-sm);
    color: rgb(255 255 255 / .82); text-decoration: none;
    font: var(--fw-medium) var(--fs-14)/1.2 var(--font-sans);
    transition: background var(--dur-fast) var(--ease);
}
.rail__lien:hover { background: rgb(255 255 255 / .07); color: var(--color-white); }

/* L'ardoise marque l'entrée active — accent d'IDENTITÉ, jamais le teal. */
.rail__lien--actif { background: var(--app-nav-active); color: var(--color-white); }

.rail__pied {
    margin-top: auto; padding-top: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / .12);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.rail__qui {
    font: var(--fw-medium) var(--fs-12)/1.3 var(--font-sans);
    color: rgb(255 255 255 / .6);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lien-discret {
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    color: rgb(255 255 255 / .8); text-decoration: underline;
    font: var(--fw-regular) var(--fs-12)/1.3 var(--font-sans);
}
.lien-discret:hover { color: var(--color-white); }

/* ---------- Page ---------- */

.page { flex: 1; min-width: 0; padding: var(--space-6) var(--space-8); }
.entete { margin-bottom: var(--space-6); }
.entete__titre { margin: 0; font: var(--fw-bold) var(--fs-24)/1.15 var(--font-display); }

.bloc { margin-bottom: var(--space-8); }
.bloc__titre { margin: 0 0 var(--space-4); font: var(--fw-bold) var(--fs-18)/1 var(--font-display); }

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.carte {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-4); text-decoration: none;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); color: var(--color-ink);
    transition: border-color var(--dur-fast) var(--ease);
}
.carte:hover { border-color: var(--app-accent); }
.carte__section {
    font: var(--fw-bold) var(--fs-10)/1 var(--font-sans);
    text-transform: uppercase; letter-spacing: .07em; color: var(--app-accent);
}
.carte__label { font: var(--fw-medium) var(--fs-16)/1.3 var(--font-sans); }

/* Espace réservé, dessiné COMME TEL — jamais rempli de faux contenu. */
.reserve {
    padding: var(--space-5); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md); color: var(--color-ink-2);
    background: var(--app-accent-tint);
}
.reserve p { margin: 0 0 var(--space-2); }
.reserve__note { font: var(--fw-regular) var(--fs-12)/1.4 var(--font-sans); color: var(--color-ink-3); }

/* État vide — le compte sans aucun droit. Il doit rester digne. */
.vide {
    max-width: 46rem; padding: var(--space-6);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.vide__titre { margin: 0 0 var(--space-3); font: var(--fw-bold) var(--fs-18)/1.3 var(--font-display); }
.vide p { margin: 0 0 var(--space-3); color: var(--color-ink-2); }

/* ---------- Connexion ----------
   L'image de fond n'est pas fournie : le repli en dégradé ardoise
   tient le rôle. C'est exactement l'exigence « la page doit tenir
   sans image » — la mise en page ne dépend pas du visuel. */

.fond-connexion {
    min-height: 100vh; display: grid; place-items: center; padding: var(--space-5);
    background:
        radial-gradient(1200px 600px at 20% 0%, rgb(255 255 255 / .06), transparent 60%),
        linear-gradient(150deg, var(--app-accent-deep) 0%, var(--app-accent) 55%, #2E3540 100%);
}
.encart {
    width: 100%; max-width: 27rem; padding: var(--space-6) var(--space-6) var(--space-5);
    background: var(--bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    text-align: center;
}
.encart__logo { display: block; margin: 0 auto var(--space-3); }
.encart__nom { margin: 0; font: var(--fw-extrabold) var(--fs-20)/1.1 var(--font-display); letter-spacing: .02em; }
.encart__sous { margin: 6px 0 var(--space-5); font-size: var(--fs-12); color: var(--color-ink-3); }
.encart__aide {
    margin: var(--space-5) 0 0; padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-12); color: var(--color-ink-3);
}
.encart__aide span { display: block; }

.bouton {
    display: block; width: 100%; padding: 12px var(--space-4);
    border: 0; border-radius: var(--radius-sm); cursor: pointer;
    font: var(--fw-bold) var(--fs-15)/1.2 var(--font-sans); text-decoration: none;
}
/* Accent d'ACTION : teal, identique à CXAGENT WEB. */
.bouton--action { background: var(--color-accent); color: var(--fg-on-accent); }
.bouton--action:hover { background: var(--color-accent-hover); }

.bouton--dev {
    background: var(--dev-bg); color: var(--dev-fg);
    border: 1px solid var(--dev-bd); font-size: var(--fs-14);
}
.porte-dev { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border); }
.porte-dev__note { margin: var(--space-2) 0 0; font-size: var(--fs-10); color: var(--color-ink-3); }

.avis { text-align: left; padding: var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.avis strong { display: block; margin-bottom: 4px; font: var(--fw-bold) var(--fs-14)/1.3 var(--font-sans); }
.avis p { margin: 0; font-size: var(--fs-13, var(--fs-14)); }
.avis--refus { background: var(--color-warning-tint); border: 1px solid var(--dev-bd); color: var(--color-warning-deep); }
.avis--panne { background: var(--color-danger-tint); border: 1px solid var(--color-danger); color: var(--color-danger-deep); }
.avis--info  { background: var(--app-accent-tint); border: 1px solid var(--app-accent-bd); color: var(--color-ink-2); }

/* ---------- Focus visible, partout ---------- */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* =============================================================
   Liste des utilisateurs — ADM-13, lots L1 a L4
   =============================================================
   Rappel de la separation d'accents (docs/design/decision-identite-visuelle.md) :
   l'ardoise --app-accent dit OU L'ON EST, le teal --color-accent dit CE QU'ON
   FAIT. Les onglets de portee sont donc en ardoise, le bouton Filtrer en teal.
   Le badge de l'autre front porte --front-web, sa teinte propre : on reconnait
   CXAGENT WEB a sa couleur, sans avoir a lire l'etiquette.
   ============================================================= */

/* --- Bascule de portee (visible seulement si habilitation) --- */
.portees { display: flex; align-items: center; gap: var(--space-2);
           margin: 0 0 var(--space-5); border-bottom: 1px solid var(--border); }
.portees__onglet { padding: 10px var(--space-4); margin-bottom: -1px;
                   border-bottom: 2px solid transparent; text-decoration: none;
                   color: var(--color-ink-2);
                   font: var(--fw-bold) var(--fs-14)/1 var(--font-sans); }
.portees__onglet:hover { color: var(--color-ink); }
.portees__onglet--actif { color: var(--app-accent-deep);
                          border-bottom-color: var(--app-accent); }
/* La mention n'est pas decorative : elle previent AVANT le clic que la
   consultation elargie laisse une trace nominative au journal. */
.portees__trace { margin-left: auto; padding: 3px 9px; border-radius: 999px;
                  background: var(--dev-bg); border: 1px solid var(--dev-bd);
                  color: var(--dev-fg);
                  font: var(--fw-extrabold) var(--fs-10)/1.6 var(--font-sans);
                  text-transform: uppercase; letter-spacing: .06em; }

/* --- Barre de filtres --- */
.filtres { display: flex; align-items: flex-end; gap: var(--space-3);
           flex-wrap: wrap; margin: 0 0 var(--space-4); }
.filtres__champ { display: flex; flex-direction: column; gap: 4px; }
.filtres__label { font: var(--fw-bold) var(--fs-12)/1 var(--font-sans);
                  color: var(--color-ink-2); }
.filtres input[type="search"], .filtres select {
    min-width: 200px; padding: 9px var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--color-white); font: var(--fw-regular) var(--fs-14)/1.2 var(--font-sans);
}
.filtres .bouton { width: auto; padding: 10px var(--space-5); }

/* --- Compteur --- */
.liste__compte { margin: 0 0 var(--space-3);
                 font: var(--fw-bold) var(--fs-14)/1 var(--font-sans); }
.liste__precision { font-weight: var(--fw-regular); color: var(--color-ink-3); }

/* --- Tableau --- */
.liste { width: 100%; border-collapse: collapse; background: var(--bg-card);
         border: 1px solid var(--border); border-radius: var(--radius-md);
         overflow: hidden; }
.liste th, .liste td { padding: 12px var(--space-4); text-align: left;
                       border-bottom: 1px solid var(--border-soft);
                       vertical-align: middle; }
.liste thead th { background: var(--app-accent-tint); color: var(--app-accent-deep);
                  font: var(--fw-extrabold) var(--fs-12)/1 var(--font-sans);
                  text-transform: uppercase; letter-spacing: .04em;
                  border-bottom: 1px solid var(--app-accent-bd); }
.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr:hover { background: var(--app-accent-tint); }
.liste__tri { color: inherit; text-decoration: none; }
.liste__tri:hover { text-decoration: underline; }
.liste__tri--actif { color: var(--app-accent-deep); }
/* Une absence se dit, elle ne se laisse pas en case vide : une case vide se lit
   comme une donnee qui n'a pas charge. */
.liste__aucun { color: var(--color-ink-3); font-style: italic; font-size: var(--fs-12); }

/* --- Identite --- */
.pastille { display: inline-flex; align-items: center; justify-content: center;
            width: 32px; height: 32px; margin-right: var(--space-3);
            border-radius: 999px; background: var(--app-accent);
            color: var(--color-white);
            font: var(--fw-extrabold) var(--fs-12)/1 var(--font-sans); }
.collab__nom { font: var(--fw-bold) var(--fs-14)/1.3 var(--font-sans); }
.collab__email { display: block; margin-left: 44px; color: var(--color-ink-3);
                 font: var(--fw-regular) var(--fs-12)/1.3 var(--font-sans); }

/* --- Jetons (droits, applications) --- */
.jeton { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 9px;
         border-radius: 999px; border: 1px solid var(--app-accent-bd);
         background: var(--app-accent-tint); color: var(--app-accent-deep);
         font: var(--fw-bold) var(--fs-12)/1.5 var(--font-sans); }
.jeton--ici { border-color: var(--app-accent-bd); }
.jeton--autre { border-color: var(--front-web-bd); background: var(--front-web-tint);
                color: var(--front-web); }

/* --- Statuts --- */
.statut { display: inline-block; padding: 3px 9px; border-radius: 999px;
          font: var(--fw-bold) var(--fs-12)/1.5 var(--font-sans); }
.statut--actif   { background: var(--app-accent-tint); color: var(--app-accent-deep); }
.statut--invite  { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.statut--inactif { background: var(--color-danger-tint); color: var(--color-danger-deep); }

/* --- Pagination --- */
.pages { display: flex; align-items: center; gap: var(--space-4);
         margin-top: var(--space-4); }
.pages__lien { color: var(--color-accent);
               font: var(--fw-bold) var(--fs-14)/1 var(--font-sans); }
.pages__position { color: var(--color-ink-3);
                   font: var(--fw-regular) var(--fs-12)/1 var(--font-sans); }