/* Panel Myriade — feuille unique, sans dépendance externe.
   Sobre à dessein : c'est un outil d'administration, la donnée prime. */

:root {
    --fond: #f2f2f5;
    --surface: #ffffff;
    --surface-2: #ececef;
    --encre: #17171d;
    --encre-douce: #4a4a58;
    --discret: #74748a;
    --trait: #d8d8df;
    --accent: #4b3fa8;
    --accent-doux: #ece9f8;
    --succes: #2c6540;
    --succes-doux: #e0efe4;
    --alerte: #8a6212;
    --alerte-doux: #f7eeda;
    --danger: #9d2f22;
    --danger-doux: #f7e3df;

    --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #111116;
        --surface: #191920;
        --surface-2: #23232c;
        --encre: #e9e9ef;
        --encre-douce: #c3c3d0;
        --discret: #8f8fa0;
        --trait: #2e2e39;
        --accent: #a99bf0;
        --accent-doux: #23204a;
        --succes: #7cbc8d;
        --succes-doux: #1b2c21;
        --alerte: #d8ab5a;
        --alerte-doux: #322715;
        --danger: #e08475;
        --danger-doux: #341f1c;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- structure ---------- */

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

.navigation {
    width: 210px;
    flex: 0 0 210px;
    background: var(--surface);
    border-right: 1px solid var(--trait);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marque {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--encre);
    text-decoration: none;
    padding: 4px 10px 16px;
}

.navigation .lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 5px;
    color: var(--encre-douce);
    text-decoration: none;
}

.navigation .lien:hover { background: var(--surface-2); }

.navigation .lien.active {
    background: var(--accent-doux);
    color: var(--accent);
    font-weight: 600;
}

.pastille {
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
}

.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }

main { padding: 24px 32px 64px; max-width: 1100px; }

/* ---------- bandeau d'identité ---------- */

.bandeau-identite {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--trait);
    font-size: 13.5px;
    color: var(--encre-douce);
}

.bandeau-identite code { font-size: 12px; color: var(--discret); }
.bandeau-identite .alerte { color: var(--alerte); font-weight: 600; }
.bandeau-identite .changer { margin-left: auto; color: var(--accent); }

.mention {
    font-size: 12.5px;
    color: var(--discret);
    font-style: italic;
}

/* ---------- en-tête de page ---------- */

.entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--trait);
}

h1 { font-size: 25px; letter-spacing: -0.02em; margin: 0 0 4px; }
h2 { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--discret); margin: 0 0 12px; }
.sous-titre { margin: 0; color: var(--discret); }

/* ---------- blocs ---------- */

.bloc {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.encart {
    background: var(--accent-doux);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.encart p { margin: 0 0 10px; }
.encart p:last-child { margin-bottom: 0; }

/* ---------- cartes de l'accueil ---------- */

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.carte {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    color: var(--encre);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.carte:hover { border-color: var(--accent); }
.carte .nombre { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.carte .libelle { color: var(--discret); font-size: 13.5px; }

.rappel { margin-top: 18px; }

/* ---------- tableaux ---------- */

.liste { width: 100%; border-collapse: collapse; background: var(--surface); }

.liste th {
    text-align: left;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--discret);
    font-weight: 600;
    padding: 10px 14px;
    border-bottom: 1px solid var(--trait);
}

.liste td { padding: 11px 14px; border-bottom: 1px solid var(--trait); }
.liste tr.cliquable { cursor: pointer; }
.liste tr.cliquable:hover { background: var(--surface-2); }
.liste tr.courant { background: var(--accent-doux); }

/* ---------- listes et paires ---------- */

.puces { margin: 0; padding-left: 18px; }
.puces li { margin-bottom: 5px; }

.paires { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 8px 18px; margin: 0; }
.paires dt { color: var(--discret); font-size: 13.5px; }
.paires dd { margin: 0; }

/* ---------- contrôles ---------- */

.barre-outils { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ligne-formulaire { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.recherche, .saisie {
    padding: 8px 11px;
    border: 1px solid var(--trait);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font: inherit;
    min-width: 220px;
}

.recherche:focus-visible, .saisie:focus-visible, .bouton:focus-visible, .liste tr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.case { display: flex; align-items: center; gap: 6px; color: var(--encre-douce); }

.bouton {
    padding: 8px 14px;
    border: 1px solid var(--trait);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.bouton:hover { border-color: var(--accent); color: var(--accent); }
.bouton.danger { color: var(--danger); border-color: var(--danger); }
.bouton.danger:hover { background: var(--danger-doux); }

.lien-action {
    background: none;
    border: none;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 0 0 0 8px;
    text-decoration: underline;
}

/* ---------- formulaires ---------- */

/* Un titre de section porte déjà l'étiquette en capitales : à l'intérieur d'un
   bloc, h3 sépare sans recommencer ce traitement. */
h3 {
    font-size: 14px;
    margin: 22px 0 10px;
    color: var(--encre-douce);
}

.bloc > h3:first-child { margin-top: 0; }

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
}

.formulaire .ligne-formulaire { margin-top: 0; align-items: center; }

.champ { display: flex; flex-direction: column; gap: 5px; }

.champ label {
    font-size: 13px;
    color: var(--discret);
    letter-spacing: 0.02em;
}

.champ .saisie { width: 100%; }

/* Le champ fautif se signale sur sa bordure : l'utilisateur cherche où
   corriger, pas un bandeau de plus en haut de page. */
.champ.en-erreur .saisie { border-color: var(--danger); }

.erreur-champ { margin: 0; font-size: 13px; color: var(--danger); }
.aide { margin: 0; font-size: 13px; color: var(--discret); }

.bouton.principal {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
    font-weight: 600;
}

.bouton.principal:hover { background: var(--accent); color: var(--surface); filter: brightness(1.1); }

.bouton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}

.bouton:disabled:hover { border-color: var(--trait); color: var(--encre); }
.bouton.principal:disabled:hover { border-color: var(--accent); color: var(--surface); }

textarea.saisie { resize: vertical; font-family: inherit; }

/* Trois axes sur une ligne : les saisies de coordonnées sont courtes, et la
   ligne se termine par le bouton qui les applique. */
.coordonnees {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.coordonnees .champ { flex: 0 0 auto; }
.saisie.courte { min-width: 0; width: 86px; }

.liste td.actions { white-space: nowrap; }
.lien-action.danger { color: var(--danger); }

/* ---------- états et messages ---------- */

.etat { font-size: 13px; padding: 2px 8px; border-radius: 999px; }
.etat.actif { background: var(--succes-doux); color: var(--succes); }
.etat.inactif { background: var(--surface-2); color: var(--discret); }

.etiquette {
    font-size: 12px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--accent-doux);
    color: var(--accent);
    margin-left: 6px;
}

.absent { color: var(--discret); font-style: italic; }
.vide, .chargement { color: var(--discret); padding: 20px 0; }

.succes {
    background: var(--succes-doux);
    color: var(--succes);
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.avertissement {
    background: var(--alerte-doux);
    color: var(--alerte);
    padding: 10px 14px;
    border-radius: 6px;
}

.erreur {
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--danger-doux);
    color: var(--danger);
}

.erreur.saisie { background: var(--alerte-doux); color: var(--alerte); }
.erreur .message { margin: 0 0 8px; font-weight: 600; }
.erreur .champs { margin: 0 0 10px; padding-left: 18px; font-weight: 400; }

/* ---------- pagination ---------- */

.pagination {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--trait);
}

.pagination .position { color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.pagination .mention { margin-left: 4px; }

/* ---------- confirmation ---------- */

/* La confirmation prend la place du bouton : pas de boite de dialogue, donc
   pas de clic dans le vide ni de texte tronque. */
.confirmation {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-radius: 6px;
    background: var(--danger-doux);
}

.confirmation .question { display: flex; flex-direction: column; color: var(--danger); }
.confirmation .consequence { font-size: 13px; opacity: 0.85; }

/* ---------- bandeau d'état de l'API ---------- */

.bandeau-etat {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 24px;
    font-size: 13.5px;
}

.bandeau-etat.degrade { background: var(--alerte-doux); color: var(--alerte); }
.bandeau-etat.rompu { background: var(--danger-doux); color: var(--danger); }
.bandeau-etat .voir { margin-left: auto; color: inherit; }

.carte.bon .nombre { color: var(--succes); }
.carte.mauvais .nombre { color: var(--danger); }

/* ---------- adhésions ---------- */

.adhesions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.adhesion {
    border: 1px solid var(--trait);
    border-left: 3px solid var(--discret);
    border-radius: 6px;
    padding: 14px 16px;
    background: var(--surface);
}

.adhesion.en_attente { border-left-color: var(--accent); }
.adhesion.acceptee { border-left-color: var(--succes); }
.adhesion.refusee { border-left-color: var(--danger); }

.entete-adhesion { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.entete-adhesion .sens { font-weight: 600; }
.entete-adhesion .statut { color: var(--discret); font-size: 13px; }

.adhesion .corps { margin: 0 0 8px; }
.adhesion blockquote {
    margin: 8px 0;
    padding-left: 12px;
    border-left: 2px solid var(--trait);
    color: var(--encre-douce);
}

.adhesion .motif { color: var(--discret); font-size: 13.5px; }
.actions-adhesion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ---------- divers ---------- */

.mono { font-family: var(--mono); font-size: 13px; }
.petit { font-size: 12px; }
a { color: var(--accent); }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    background: var(--danger-doux);
    color: var(--danger);
    z-index: 1000;
}

#blazor-error-ui .recharger { margin-left: 10px; }

@media (max-width: 760px) {
    .panel { flex-direction: column; }
    .navigation { width: auto; flex: none; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--trait); }
    main { padding: 18px; }
    .bandeau-identite { padding: 9px 18px; }
    .paires { grid-template-columns: 1fr; gap: 2px 0; }
    .paires dd { margin-bottom: 10px; }
}