/*
 * Projet : kalliope.litteratura.fr
 * Auteur : Azziz EL KHIATI
 * Date : 08/08/2026
 * Edi : PhpStorm
 * Licence : AGPL v3
 *
 * La parure de la fabrique, unique et stable : kalliope n'est pas un
 * livre, c'est l'atelier qui fait les livres. Les valeurs et leurs
 * raisons sont au wiki, page Le systeme visuel. Le bronze ne remplit
 * que le bouton d'entree : partout ailleurs il souligne.
 */

:root {
    --fond:    #eae6dc;
    --panneau: #ffffff;
    --encre:   #26292c;
    --sourd:   #6f6a5e;
    --accent:  #8a5a24;
    --filet:   #d8d2c3;
    --filet-doux: #eeebe2;
    --alerte-fond: #f3ecd9;
    --alerte-encre: #4a3a1e;
    --refus-fond: #f6e8e6;
    --refus-filet: #8c3a34;
    --refus-encre: #5c2622;
    --actif-fond: #f4f0e6;
    --efface: #a29b8a;
    --titrage: Georgia, 'Times New Roman', serif;
}

body {
    background: var(--fond);
    color: var(--encre);
    min-height: 100vh;
}

/* Bootstrap teinte ses `code` en rose framboise : la parure n'a pas
   cette couleur, et une cle de reglage n'est pas une alerte. */
code {
    color: var(--encre);
}

/* ---------- la connexion, le frontispice ---------- */

.k-front {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 2rem 1.5rem;
}

.k-front-schema {
    flex: 0 1 540px;
    max-width: 540px;
}

.k-front-schema svg {
    display: block;
    width: 100%;
    height: auto;
}

.k-front-legend {
    border-top: 1px solid var(--filet);
    color: var(--sourd);
    font-size: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.k-front-legend p {
    margin-bottom: 0.25rem;
}

.k-front-divider {
    align-self: stretch;
    border-left: 1px solid var(--filet);
    margin: 3rem 0;
}

.k-front-gate {
    flex: 0 0 380px;
    width: 380px;
}

@media (max-width: 991.98px) {
    .k-front-schema,
    .k-front-divider {
        display: none;
    }

    .k-front-gate {
        flex-basis: auto;
        max-width: 380px;
        width: 100%;
    }
}

.k-brand {
    font-family: var(--titrage);
    color: var(--encre);
    text-align: center;
    margin-bottom: 0.25rem;
}

.k-baseline {
    color: var(--sourd);
    text-align: center;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.k-fleuron {
    width: 80px;
    border: 0;
    border-top: 2px solid var(--accent);
    margin: 0 auto 1.5rem;
    opacity: 1;
}

.k-refus {
    background: var(--refus-fond);
    border-left: 4px solid var(--refus-filet);
    color: var(--refus-encre);
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.k-label {
    color: var(--sourd);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.k-input {
    border: 1.5px solid var(--filet);
    border-radius: 4px;
}

.k-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(138, 90, 36, 0.15);
}

.k-button {
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    color: #ffffff;
    width: 100%;
    padding: 0.65rem;
}

.k-button:hover,
.k-button:focus {
    background: #6f4a1e;
    color: #ffffff;
}

.k-login-foot {
    color: var(--efface);
    font-size: 0.6875rem;
    text-align: center;
    margin-top: 1.75rem;
}

/* ---------- l'ossature de l'atelier ---------- */

.k-topbar {
    background: var(--panneau);
    border-bottom: 2px solid var(--accent);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.75rem;
}

.k-topbar .k-mark {
    font-family: var(--titrage);
    font-size: 1.5rem;
    color: var(--encre);
    text-decoration: none;
}

.k-topbar .k-topbar-baseline {
    color: var(--sourd);
    font-size: 0.75rem;
}

.k-topbar .k-who {
    margin-left: auto;
    color: #4a463c;
    font-size: 0.8125rem;
}

.k-exit {
    border: 1.5px solid var(--filet);
    border-radius: 4px;
    background: var(--panneau);
    color: #4a463c;
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
}

.k-exit:hover {
    border-color: var(--accent);
    color: var(--encre);
}

.k-shell {
    display: flex;
    min-height: calc(100vh - 56px);
}

.k-nav {
    background: var(--panneau);
    border-right: 1px solid var(--filet);
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
}

.k-nav a {
    color: #4a463c;
    display: block;
    font-size: 0.875rem;
    padding: 0.8rem 1.625rem;
    text-decoration: none;
    border-left: 4px solid transparent;
}

.k-nav a:hover {
    background: var(--actif-fond);
}

.k-nav a.actif {
    background: var(--actif-fond);
    border-left-color: var(--accent);
    color: var(--encre);
    font-weight: 600;
}

.k-nav .k-version {
    color: var(--efface);
    display: block;
    font-size: 0.6875rem;
    margin-top: auto;
    padding: 1rem 1.625rem;
    text-decoration: none;
    border-left: 4px solid transparent;
}

.k-nav .k-version:hover {
    background: var(--actif-fond);
    color: var(--accent);
}

.k-nav .k-version.actif {
    background: var(--actif-fond);
    border-left-color: var(--accent);
    color: var(--accent);
}

/* ---------- l'escamotage ---------- */

.k-fold {
    background: var(--panneau);
    border: 1.5px solid var(--filet);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    padding: 0.35rem 0.4rem;
}

.k-fold span {
    background: var(--sourd);
    display: block;
    height: 1.5px;
    width: 14px;
}

.k-fold:hover {
    border-color: var(--accent);
}

.k-fold:hover span {
    background: var(--accent);
}

/* Escamotee : la colonne disparait entierement. Une colonne reduite a
   des pastilles muettes couterait sa place sans rendre son service. */
body.k-folded .k-nav {
    display: none;
}

.k-folded-boot body .k-nav {
    display: none;
}

body.k-folded .k-fold,
.k-folded-boot body .k-fold {
    background: var(--actif-fond);
    border-color: var(--accent);
}

body.k-folded .k-fold span,
.k-folded-boot body .k-fold span {
    background: var(--accent);
}

/* ---------- le suivi des processus ---------- */

.k-dot {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 0.35rem;
    width: 10px;
}

.k-dot-sain  { background: #4a7a3a; }
.k-dot-veille { background: #b8860b; }
.k-dot-panne { background: var(--refus-filet); }
.k-dot-vide  { background: transparent; border: 1.5px solid #b6ac97; }

.k-run-failed td {
    background: var(--refus-fond);
}

.k-etat-panne {
    color: var(--refus-filet);
    font-size: 0.8125rem;
}

.k-path {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.5rem 0 1rem;
}

.k-path-step {
    align-items: center;
    display: flex;
}

.k-path-label {
    color: var(--sourd);
    font-size: 0.8125rem;
}

.k-path-label.actif {
    color: var(--encre);
    font-weight: 600;
}

.k-path-actions {
    border-top: 1px solid var(--filet-doux);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
}

.k-button-inline {
    width: auto;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
}

.k-journal-time {
    color: var(--sourd);
    font-family: Consolas, monospace;
    font-size: 0.75rem;
    white-space: nowrap;
    width: 1%;
}

.k-journal-output {
    background: #faf8f3;
    border-left: 4px solid var(--filet);
    color: #4a463c;
    font-size: 0.75rem;
    margin: 0.5rem 0 0;
    max-height: 18rem;
    overflow: auto;
    padding: 0.6rem 0.8rem;
    white-space: pre-wrap;
}

.k-journal-output.echec {
    border-left-color: var(--refus-filet);
}

/* ---------- les notes de version ---------- */

.k-release {
    border-bottom: 1px solid var(--filet-doux);
    padding: 0.75rem 0;
}

.k-release:last-child {
    border-bottom: 0;
}

.k-release-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.k-release-tag {
    color: var(--accent);
    font-size: 0.8125rem;
}

.k-alerte code {
    color: #6b5a35;
}

.k-release-date {
    color: var(--sourd);
    font-size: 0.6875rem;
}

.k-release-note {
    color: var(--encre);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* le depliage, par details et summary : le navigateur sait deja faire */

.k-nav details summary {
    color: #4a463c;
    cursor: pointer;
    font-size: 0.875rem;
    list-style: none;
    padding: 0.8rem 1.625rem;
    border-left: 4px solid transparent;
    position: relative;
}

.k-nav details summary::-webkit-details-marker {
    display: none;
}

.k-nav details summary::after {
    content: '\25B8';
    color: var(--sourd);
    font-size: 0.6875rem;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

.k-nav details[open] summary::after {
    content: '\25BE';
    color: var(--accent);
}

.k-nav details summary:hover {
    background: var(--actif-fond);
}

.k-nav .k-nav-child {
    font-size: 0.84375rem;
    padding-left: 2.75rem;
}

.k-main {
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem 2.5rem;
}

/* ---------- les panneaux ---------- */

.k-alerte {
    background: var(--alerte-fond);
    border-left: 4px solid var(--accent);
    color: var(--alerte-encre);
    font-size: 0.875rem;
    padding: 0.7rem 1.25rem;
    margin-bottom: 1.5rem;
}

.k-alerte code {
    color: #6b5a35;
    font-size: 0.75rem;
}

.k-panel {
    background: var(--panneau);
    border: 0;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.k-panel .k-panel-title {
    font-family: var(--titrage);
    font-size: 1.0625rem;
    color: var(--encre);
    border-bottom: 1px solid var(--filet);
    padding: 1rem 1.25rem 0.75rem;
    margin: 0;
}

.k-panel .k-panel-body {
    padding: 1rem 1.25rem 1.25rem;
    overflow-x: auto;
}

.k-panel table {
    margin-bottom: 0;
}

.k-panel th {
    color: var(--sourd);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom-color: var(--filet) !important;
}

.k-panel td {
    border-bottom-color: var(--filet-doux) !important;
    font-size: 0.875rem;
}

.k-vide {
    color: var(--sourd);
    font-size: 0.875rem;
    text-align: center;
    padding: 2.5rem 1rem 0.5rem;
}

.k-vide-renvoi {
    color: var(--accent);
    font-size: 0.78125rem;
    text-align: center;
    padding-bottom: 2rem;
}

.k-note {
    color: var(--sourd);
    font-size: 0.78125rem;
    margin: 0.5rem 0 0;
}

/* La version et l'étage sur la porte : lisibles sans peser, parce
   qu'on les cherche du regard et qu'on ne les lit pas. */
.k-login-version {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}

.k-login-etage::before {
    content: '·';
    margin: 0 0.4rem;
}

.k-etat-bon {
    color: #4a7a3a;
    font-size: 0.8125rem;
}

/* Un pas qui court n'est ni franchi ni en panne : il attend, et il le
   dit d'une couleur qui n'est ni l'une ni l'autre. */
.k-etat-encours {
    color: #b8860b;
    font-size: 0.8125rem;
}

.k-encours {
    background: var(--alerte-fond);
    border-left: 3px solid #b8860b;
    color: var(--alerte-encre);
    padding: 0.5rem 0.75rem;
}

/* ---------- trois largeurs ---------- */

@media (max-width: 991.98px) {
    .k-shell {
        flex-direction: column;
    }

    .k-nav {
        border-right: 0;
        border-bottom: 1px solid var(--filet);
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
        width: 100%;
        flex-basis: auto;
    }

    .k-nav a {
        border-left: 0;
        border-bottom: 4px solid transparent;
    }

    .k-nav a.actif {
        border-left: 0;
        border-bottom-color: var(--accent);
    }

    .k-nav .k-version {
        margin-left: auto;
        margin-top: 0;
        align-self: center;
        border-left: 0;
    }

    /* La colonne est deja un bandeau qui s'empile : le bouton n'aurait
       rien a escamoter, il disparait, et l'etat retenu ne s'applique pas. */
    .k-fold {
        display: none;
    }

    body.k-folded .k-nav,
    .k-folded-boot body .k-nav {
        display: flex;
    }
}

/* ---------- l'écart du dépôt ---------- */

/* Six états, et le gris est un choix : ce qui va bien ne doit pas
   retenir l'œil. Seul ce qui appelle un geste porte une couleur, et
   seul ce qui appelle de la prudence porte un fond. */
.k-ecart {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.k-ecart-a_jour,
.k-ecart-absent,
.k-ecart-inchange {
    color: var(--efface);
}

/* Ce qui attend un geste : verser, ranger, charger. */
.k-ecart-jamais,
.k-ecart-neuf,
.k-ecart-grossi,
.k-ecart-maigri {
    color: var(--accent);
    font-weight: 600;
}

/* Une instance qui sert un millésime périmé sans que rien ne le crie. */
.k-ecart-retard {
    background: var(--alerte-fond);
    color: var(--alerte-encre);
}

/* Ce qu'il ne faut surtout pas reposer, et ce qui n'a pas sa place. */
.k-ecart-etranger,
.k-ecart-hors-depot {
    background: var(--refus-fond);
    color: var(--refus-encre);
}

.k-ecart-aveugle,
.k-ecart-inconnu {
    color: var(--sourd);
    font-style: italic;
}

.k-ecart-compte,
.k-ecart-date {
    color: var(--sourd);
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
}

/* Un geste dans une cellule de tableau : un lien de forme, un bouton de
   nature. Un vrai bouton par cellule ferait seize boutons par écran. */
.k-ecart-geste {
    display: inline;
}

.k-lien {
    background: none;
    border: 0;
    color: var(--accent);
    font-size: 0.75rem;
    padding: 0;
    text-decoration: underline;
}

.k-lien:hover,
.k-lien:focus {
    color: var(--encre);
}

.k-commande {
    background: var(--filet-doux);
    border-left: 3px solid var(--filet);
    font-size: 0.8125rem;
    margin: 0.35rem 0 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0.75rem;
}

/* ---------- l'écran du frontispice ---------- */

/* Le fil d'Ariane et la voix de l'écran : deux pièces que la fabrique
   n'avait pas et qui servent partout dès qu'un écran porte un geste. */
.k-fil {
    color: var(--sourd);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.k-fil a {
    color: var(--sourd);
}

.k-dit {
    background: var(--actif-fond);
    border-left: 3px solid var(--accent);
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
}

.k-dit-refus {
    background: var(--refus-fond);
    border-left-color: var(--refus-filet);
    color: var(--refus-encre);
}

/* Une case de table qui dit un écart : Bootstrap peint chaque case par ses
   variables de table, qui passent devant la couleur et le fond de la règle
   ci-dessus ; la case les reçoit donc par ces variables. L'édition due qui
   manque à la collection et la colonne « En base » des dictionnaires se
   marquent ainsi à l'écran, et non plus dans le seul code (#79). */
.table > :not(caption) > * > .k-dit-refus {
    --bs-table-color-state: var(--refus-encre);
    --bs-table-bg-state: var(--refus-fond);
}

/* Trois colonnes, et elles se replient l'une sous l'autre en dessous de
   la largeur où le cadrage cesse d'être praticable à la souris. */
.k-frontispice {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr) minmax(0, 26rem);
}

@media (max-width: 1400px) {
    .k-frontispice {
        grid-template-columns: minmax(0, 1fr);
    }
}

.k-fr-compte {
    color: var(--sourd);
    font-size: 0.8125rem;
    margin: 0.5rem 0 0.35rem;
}

.k-fr-planche {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    max-height: 32rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.k-fr-piece {
    background: var(--panneau);
    border: 1px solid var(--filet);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem;
    text-align: left;
}

.k-fr-piece[hidden] {
    display: none;
}

.k-fr-piece img {
    aspect-ratio: 4 / 5;
    display: block;
    object-fit: contain;
    width: 100%;
}

.k-fr-piece.retenue {
    background: var(--actif-fond);
    border-color: var(--accent);
    border-width: 2px;
    padding: calc(0.35rem - 1px);
}

/* Ce qui manque se voit, et ne se retient pas. */
.k-fr-piece.sans-cartel {
    background: var(--refus-fond);
    border-color: var(--refus-filet);
}

.k-fr-piece.sans-fichier {
    background: var(--alerte-fond);
    border-style: dashed;
    cursor: not-allowed;
    opacity: 0.75;
}

.k-fr-trou {
    align-items: center;
    aspect-ratio: 4 / 5;
    color: var(--alerte-encre);
    display: flex;
    font-size: 0.6875rem;
    justify-content: center;
}

.k-fr-cartel {
    font-size: 0.6875rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-fr-manque {
    color: var(--refus-encre);
    font-size: 0.625rem;
}

.k-fr-note {
    color: var(--sourd);
    font-size: 0.8125rem;
    margin: 0.75rem 0 0;
}

/* Le cadrage se dessine sur la pièce, jamais sur une approximation. */
.k-fr-scene {
    background: var(--filet-doux);
    display: inline-block;
    line-height: 0;
    position: relative;
    touch-action: none;
    user-select: none;
    width: 100%;
}

.k-fr-scene img {
    display: block;
    max-height: 34rem;
    object-fit: contain;
    width: 100%;
}

.k-fr-cadre {
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 9999px rgba(38, 41, 44, 0.35);
    pointer-events: none;
    position: absolute;
}

.k-fr-vide {
    color: var(--efface);
    left: 0;
    line-height: 1.4;
    position: absolute;
    text-align: center;
    top: 45%;
    width: 100%;
}

.k-fr-outils {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.k-fr-mesure {
    color: var(--sourd);
    font-size: 0.8125rem;
}

.k-fr-seuil {
    align-items: center;
    color: var(--sourd);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.25rem;
}

.k-fr-seuil input {
    border: 1px solid var(--filet);
    padding: 0.15rem 0.3rem;
    width: 4rem;
}

.k-fr-encre {
    align-items: center;
    background: var(--actif-fond);
    border: 1px solid var(--filet);
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
}

.k-fr-pastille {
    border: 1px solid var(--filet);
    flex: 0 0 auto;
    height: 1.75rem;
    width: 1.75rem;
}

.k-fr-sourd {
    color: var(--sourd);
    font-size: 0.8125rem;
}

.k-fr-reglage {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 8rem 1fr 3rem;
    margin-bottom: 0.6rem;
}

.k-fr-reglage output {
    text-align: right;
}

.k-fr-titre {
    border-top: 1px solid var(--filet);
    font-family: var(--titrage);
    font-size: 1rem;
    margin: 1.25rem 0 0.75rem;
    padding-top: 0.75rem;
}

.k-fr-apercu {
    background: var(--filet-doux);
    padding: 0.75rem;
    text-align: center;
}

.k-fr-apercu img {
    background: #ffffff;
    max-width: 100%;
}

.k-fr-motif {
    display: block;
    margin: 1rem 0 0.75rem;
}

.k-fr-motif span {
    display: block;
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.k-fr-motif textarea {
    border: 1px solid var(--filet);
    padding: 0.4rem 0.6rem;
    width: 100%;
}

.k-fr-declarer {
    background: var(--accent);
    border: 0;
    color: var(--panneau);
}

.k-fr-declarer:disabled {
    background: var(--efface);
}

.k-fr-ok {
    color: var(--accent);
}

.k-fr-ecart {
    color: var(--refus-encre);
}

/* Le filet qui separe deux blocs dans un meme panneau. */
.k-filet {
    border: 0;
    border-top: 1px solid var(--filet);
    margin: 1.25rem 0 1rem;
}

/* Le droit d une nature, dit a cote de son ecart. */
.k-droit {
    display: block;
    font-size: 0.72rem;
    margin-top: 0.2rem;
}
.k-droit-muet { color: var(--sourd); }
.k-droit-favorable { color: var(--sourd); }
.k-droit-bloquant { color: #8c3a34; font-weight: 600; }
.k-droit-sous-reserve { color: #8a5a24; font-weight: 600; }

/*
 * Le geste principal d'un formulaire porte le bronze de la parure.
 * Le bleu par defaut du socle front n'appartient a aucune de nos
 * planches, et un ecran qui ne ressemble pas a son dessin se relit
 * comme un ecran d'un autre produit.
 */
.k-btn-bronze {
    background: var(--accent);
    border: 1.5px solid var(--accent);
    color: #ffffff;
}

.k-btn-bronze:hover,
.k-btn-bronze:focus {
    background: #74491c;
    border-color: #74491c;
    color: #ffffff;
}

/* Un repos qu on ne peut pas affirmer se distingue d un repos su. */
.k-repos-doute {
    color: #8a5a24;
}

/* Une note qui recopie sa voisine se distingue sans crier. */
.k-note-repetee {
    color: var(--sourd);
    font-size: 0.78rem;
}

/* La navigation reste sous les yeux, et la version avec elle : le
   panneau se fixe à la fenêtre au lieu de s'étirer avec la page, sans
   quoi la version, calée en bas, sortait du champ dès qu'un écran
   dépassait la fenêtre. Constaté le 5 septembre 2026, #277. */
.k-nav {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

/* Les onglets d'un écran d'instance : le composant qui manquait. Les
   accès aux écrans de travail s'écrivaient avec la classe du fil
   d'Ariane et celle de la note ; ils étaient la chose la plus discrète
   de la page. Un onglet se lit à sa taille, l'actif à son filet bronze,
   la planche le-controle-du-contenu.svg fixe les deux. */
.k-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
    border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
    margin: 0.5rem 0 1.25rem;
    padding: 0 0.75rem;
}

.k-onglet {
    color: #4a463c;
    display: inline-block;
    font-size: 0.875rem;
    padding: 0.7rem 0 0.55rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.k-onglet:hover,
.k-onglet:focus {
    color: var(--encre);
    border-bottom-color: var(--filet);
}

.k-onglet.actif {
    color: var(--encre);
    border-bottom-color: var(--accent);
}

/* La nature qu'on contrôle : une colonne nommée, verticale, avec son
   compte ; une nature vide se dit vide, elle ne s'affiche pas en zéro. */
.k-natures {
    margin: 0 0 1rem;
}

.k-natures-titre {
    color: var(--sourd);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.k-natures a,
.k-natures .actif {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
    padding: 0.35rem 0.5rem;
    text-decoration: none;
    color: #4a463c;
    border-left: 3px solid transparent;
}

.k-natures a:hover {
    background: var(--actif-fond);
}

.k-natures .actif {
    color: var(--encre);
    border-left-color: var(--accent);
    background: var(--actif-fond);
}

.k-natures .compte {
    color: var(--sourd);
    font-variant-numeric: tabular-nums;
}

.k-natures .vide {
    color: var(--efface);
    font-style: italic;
}

/* Sortir de la fabrique est un lien, pas le geste principal de la page. */
.k-lien-sortie {
    color: var(--accent);
    font-size: 0.875rem;
    text-decoration: none;
}

.k-lien-sortie:hover {
    text-decoration: underline;
}

/* Les formulaires de déclaration et de correction d'un auteur : les
   libellés en sourd et en petites capitales, les valeurs qui se
   déduisent en monospace, un champ verrouillé sur fond écru, et un
   aperçu de ce qui serait posé qui se distingue de ce qui l'est. Les
   planches declarer-un-auteur.svg et corriger-un-auteur.svg fixent
   les deux ; les classes existaient dans le gabarit sans exister ici. */
.k-form .form-label {
    color: var(--sourd);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.k-form .form-control,
.k-form .form-select {
    border: 1.5px solid var(--filet);
    font-size: 0.875rem;
}

.k-form .form-control:focus,
.k-form .form-select:focus {
    border-color: var(--accent);
    box-shadow: none;
}

.k-form .k-deduit {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.k-form .k-verrou {
    background: #f4f2ec;
}

.k-form .k-hint {
    color: var(--accent);
    font-size: 0.75rem;
}

.k-apercu {
    background: var(--actif-fond);
    border-left: 4px solid var(--accent);
    padding: 0.75rem 1.25rem 1rem;
}

.k-apercu .k-panel-title {
    border: 0;
    padding: 0 0 0.5rem;
}

.k-apercu code {
    font-size: 0.8125rem;
}

/*
 * Les reglages et leur correction (ticket #235, planche
 * `les-reglages.svg`). La portee se lit en pastille : qui lit ce
 * reglage. Un reglage que personne ne lit se dit en bronze sur ecru,
 * pour qu'on ne le corrige pas en croyant agir. Le bouton d'une ligne
 * souligne et n'emplit pas : le bronze plein reste au geste principal.
 */
.k-portee {
    background: var(--filet-doux);
    border-radius: 9px;
    color: var(--sourd);
    float: right;
    font-size: 0.6875rem;
    padding: 0.1rem 0.6rem;
}

.k-portee-muette {
    background: var(--alerte-fond);
    border: 1px solid var(--accent);
    color: var(--accent);
}

.k-bouton-souligne {
    background: var(--panneau);
    border: 1.5px solid var(--accent);
    border-radius: 4px;
    color: var(--accent);
    padding: 0.4rem 1rem;
    width: 100%;
}

.k-bouton-souligne:hover {
    background: var(--actif-fond);
    color: var(--accent);
}

/*
 * La demande d'arret d'une passe (ticket #235, planche
 * `le-pilotage-des-aspirations.svg`) : un filet rouge sourd qui n'emplit
 * pas. Le geste demande, il n'interrompt pas.
 */
.k-bouton-arret {
    background: var(--panneau);
    border: 1.5px solid var(--refus-filet);
    border-radius: 4px;
    color: var(--refus-filet);
    font-size: 0.8125rem;
    padding: 0.3rem 0.8rem;
}

.k-bouton-arret:hover {
    background: var(--refus-fond);
    color: var(--refus-filet);
}

/*
 * Le sommaire d'une oeuvre (ticket #341, planches
 * `composer-le-sommaire.svg` et `ce-que-la-composition-poserait.svg`).
 * Une entree composee porte un filet bronze a gauche, une entree ecartee
 * un filet rouge sourd et un fond ecru, son titre barre ; un intertitre se
 * lit en petites capitales ; une suite d'entrees que la composition ne
 * touche pas se plie en une ligne effacee ; un motif manquant se dit en
 * rouge sourd. La poignee se saisit pour placer une entree apres une
 * autre ; la ligne survolee porte le filet bronze au-dessus.
 */
.k-sommaire .k-panel-title .k-note {
    font-family: var(--bs-body-font-family);
    font-variant-numeric: lining-nums;
}

.k-som-outils {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
}

.k-som-outils .k-lien {
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.k-som-outils .k-lien:hover {
    text-decoration: underline;
}

.k-som-geste {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.k-som-geste .form-control,
.k-som-geste .form-select {
    border: 1.5px solid var(--filet);
    font-size: 0.78125rem;
    max-width: 14rem;
}

.k-som-legende {
    color: var(--sourd);
    font-size: 0.75rem;
    margin: 0 0 0.5rem;
}

.k-som-trait {
    display: inline-block;
    height: 0.8rem;
    margin-right: 0.3rem;
    vertical-align: -0.1rem;
    width: 3px;
}

.k-som-trait-composee { background: var(--accent); }
.k-som-trait-ecartee { background: var(--refus-filet); }

.k-som-arbre td {
    vertical-align: top;
}

.k-som-coche {
    white-space: nowrap;
    width: 2.75rem;
}

.k-som-poignee {
    color: var(--efface);
    cursor: grab;
    display: inline-block;
    margin-right: 0.35rem;
    user-select: none;
}

.k-som-poignee:hover {
    color: var(--accent);
}

.k-som-arbre tr.k-som-saisie td {
    opacity: 0.5;
}

.k-som-arbre tr.k-som-survol td {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.k-som-chiffre {
    color: var(--sourd);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.k-som-arbre tr.k-som-composee td:first-child,
.k-som-arbre tr.k-som-neuve td:first-child,
.k-som-cote.k-som-composee,
.k-som-cote.k-som-neuve {
    box-shadow: inset 3px 0 0 var(--accent);
}

.k-som-arbre tr.k-som-ecartee td {
    background: var(--alerte-fond);
}

.k-som-arbre tr.k-som-ecartee td:first-child,
.k-som-cote.k-som-ecartee {
    box-shadow: inset 3px 0 0 var(--refus-filet);
}

.k-som-arbre tr.k-som-ecartee .k-som-titre,
.k-som-cote.k-som-ecartee .k-som-titre-cote {
    color: var(--efface);
    text-decoration: line-through;
}

.k-som-titre {
    background: none;
    border: 0;
    color: var(--encre);
    padding: 0;
    text-align: left;
}

.k-som-titre:hover,
.k-som-titre:focus {
    color: var(--accent);
    text-decoration: underline;
}

.k-som-intertitre {
    font-size: 0.8125rem;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.k-som-marque {
    color: var(--accent);
    display: block;
    font-size: 0.72rem;
}

.k-som-ecartee .k-som-marque {
    color: var(--refus-filet);
}

.k-som-slug {
    font-size: 0.75rem;
}

.k-som-pli td {
    border-bottom: 1px solid var(--filet) !important;
    border-top: 1px solid var(--filet);
    color: var(--efface);
    font-size: 0.75rem;
    font-style: italic;
    padding: 0.3rem 0 0.3rem 5.5rem;
}

.k-som-clef {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.k-som-manque {
    background: var(--refus-fond);
    border-radius: 9px;
    color: var(--refus-encre);
    font-family: var(--bs-body-font-family);
    font-size: 0.72rem;
    padding: 0.1rem 0.6rem;
}

.k-som-manque-dit {
    color: var(--refus-filet);
}

.k-som-sans-motif {
    background: var(--refus-fond);
    border-color: var(--refus-filet);
}

.k-som-sans-motif::placeholder {
    color: var(--refus-filet);
}

.k-som-obligatoire {
    color: var(--refus-filet);
    letter-spacing: 0;
    text-transform: none;
}

.k-som-pastille {
    border-radius: 9px;
    font-size: 0.72rem;
    padding: 0.1rem 0.6rem;
    white-space: nowrap;
}

.k-som-pastille-orpheline {
    background: var(--refus-fond);
    color: var(--refus-encre);
}

.k-som-pastille-a-placer {
    background: var(--alerte-fond);
    color: var(--alerte-encre);
}

.k-som-cotes {
    border-collapse: collapse;
    width: 100%;
}

.k-som-cotes th {
    width: 50%;
}

.k-som-cotes td {
    font-size: 0.84375rem;
    padding: 0.25rem 0.5rem;
}

.k-som-cotes td + td {
    border-left: 1px solid var(--filet);
}

.k-som-cote-marque {
    color: var(--accent);
    float: right;
    font-size: 0.72rem;
}

.k-som-ecartee .k-som-cote-marque {
    color: var(--refus-filet);
}

.k-som-cote-bas {
    color: var(--sourd);
    float: right;
    font-size: 0.72rem;
}

.k-som-poser {
    background: var(--actif-fond);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

/* La composition en cours se dit en tête du sommaire, avec « Montrer ce
   qui serait posé » : le geste qui la montre se voit sans défiler (#377). */
.k-som-encours {
    align-items: center;
    background: var(--actif-fond);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
}

/* ---------- les onglets d'un écran, les pages d'une liste ---------- */

/* Le mécanisme commun (templates/disposition/) : ce qu'un écran empilait
   en panneaux se range en onglets, et une liste longue se lit page après
   page. Les onglets reprennent .k-onglets, posés en tête du panneau qui
   les porte ; le compte d'un onglet fermé se lit sans l'ouvrir. La
   pagination reprend les classes de Bootstrap à la parure : la page
   ouverte porte le filet bronze de l'onglet actif, les autres sont des
   liens. Planche : les-ecrans-en-onglets-et-en-pages.svg */
.k-volets > .k-onglets {
    border-top: 0;
    margin: 0;
    padding: 0 1.25rem;
}

.k-onglet-compte {
    color: var(--sourd);
}

.k-onglet.actif .k-onglet-compte {
    color: var(--encre);
}

.k-pages {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    justify-content: space-between;
    margin: 0 0 0.75rem;
}

.k-pages-compte {
    color: var(--sourd);
    font-size: 0.8125rem;
}

.k-pages .pagination {
    --bs-pagination-padding-x: 0.45rem;
    --bs-pagination-padding-y: 0.05rem;
    --bs-pagination-font-size: 0.84375rem;
    --bs-pagination-color: var(--accent);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 1.5px;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-radius: 4px;
    --bs-pagination-hover-color: var(--encre);
    --bs-pagination-hover-bg: var(--actif-fond);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--encre);
    --bs-pagination-focus-bg: var(--actif-fond);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--encre);
    --bs-pagination-active-bg: var(--actif-fond);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-disabled-color: var(--efface);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    gap: 0.25rem;
    margin: 0;
}

.k-pages .page-item .page-link {
    border-radius: var(--bs-pagination-border-radius);
    margin-left: 0;
}

/* La recherche d'une liste paginée (#393) : le champ au-dessus du compte et
   des pages, sur sa propre ligne ; ce qui reste sur ce qu'il y avait se lit
   d'abord. Planche : maquettes/une-liste-paginee-porte-sa-recherche.svg */
.k-pages-cherche {
    align-items: center;
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.k-pages-cherche .k-input {
    max-width: 22rem;
}

.k-pages-cherche .k-bouton-souligne {
    padding: 0.2rem 0.9rem;
    width: auto;
}

.k-pages-effacer {
    color: var(--accent);
    font-size: 0.84375rem;
}

.k-pages-trouvees {
    color: var(--encre);
    font-weight: 600;
}

/* Les notes qui expliquent un panneau se replient sous lui : elles restent
   à un clic, et ne poussent plus les lignes sous le pli. */
.k-regles > summary {
    color: var(--sourd);
    cursor: pointer;
    font-size: 0.8125rem;
    margin: 1rem 0 0.25rem;
}

.k-regles[open] > summary {
    margin-bottom: 0.5rem;
}

/* Le titre d'un panneau rangé en onglet reste dans la page pour qui la lit
   sans la voir ; à l'œil, l'onglet ouvert le dit déjà. Un panneau inclus
   tel quel dans un onglet perd son second cadre. */
.k-volets > [role="tabpanel"] > .k-panel-title {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.k-volets > [role="tabpanel"] > .k-panel {
    margin: -1rem -1.25rem -1.25rem;
}

/*
 * La fenetre d'une piece du controle du contenu (#424) : large et haute,
 * par-dessus la liste, le TEI dans une zone qui se lit, la page servie dans
 * un cadre qui prend la place qu'il faut. Planches :
 * maquettes/la-fenetre-d-une-piece-le-brut.svg et
 * maquettes/la-fenetre-d-une-piece-ce-qui-s-affiche.svg
 */
body:has(.k-fenetre) {
    overflow: hidden;
}

.k-fenetre {
    overflow-y: auto;
}

.k-fenetre-dialogue {
    width: 96vw;
    max-width: 96vw;
    margin: 2vh auto;
}

.k-fenetre .modal-content {
    min-height: 94vh;
    background: var(--panneau);
    border-color: var(--filet);
}

.k-fenetre-tei {
    min-height: 60vh;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.85rem;
}

.k-fenetre-cadre {
    width: 100%;
    height: 72vh;
    border: 1px solid var(--filet);
    border-radius: 4px;
    background: #ffffff;
}

/* Ouvrir un geste (#419) : le bouton à contour bronze, entre le geste qui
   écrit (k-btn-bronze) et le lien qui mène à lire (k-lien-sortie). Il mène
   à l'écran où le geste se montre puis s'écrit, et se remplit au survol.
   Planche une-action-se-presente-en-bouton.svg ; gabarit
   disposition/_geste.html.twig. */
.k-btn-geste {
    background: var(--panneau);
    border: 1.5px solid var(--accent);
    color: var(--accent);
}

.k-btn-geste:hover,
.k-btn-geste:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}