/* Stenzor — feuille de style écrite à la main.
   Pas de gabarit d'interface tiers : l'objectif est un rendu proche d'un
   vrai logiciel comptable (MyUnisoft, Pennylane), pas d'une maquette
   générique. Voir CLAUDE.md pour la raison du choix (exclusion de Streamlit).

   ============================================================
   CHARTE GRAPHIQUE — référence à tenir à jour, pas à redécouvrir
   ============================================================

   Mise au point le 11/09/2026, après qu'un bouton (« Se déconnecter ») a
   été stylé à la main plutôt que rattaché au composant qui existait déjà
   pour le même usage (`.lien-bouton`) — un premier signe que la charte
   vivait seulement dans les CSS déjà écrits, jamais explicitée nulle part.
   Cette section est la source unique : avant d'écrire une nouvelle règle
   de bouton, de couleur ou de composant, chercher ici d'abord.

   --- Couleurs -------------------------------------------------
   Celle du nouveau logo de l'Enseignement catholique (charte graphique,
   octobre 2024) — sept couleurs à dominante bleue, un bleu ciel qui
   illumine l'ensemble, une touche de violet. Reprise ici avec le bleu ciel
   en couleur d'accent plutôt qu'en couleur discrète : la « touche plus
   perso » demandée, cohérente avec le bleu déjà déclaré comme couleur
   personnelle dans IDENTITE.md. Codes exacts de la charte, pas
   d'approximation, et aucune couleur inventée à côté :
     #2a2558 bleu très foncé (texte fort)   #047ec2 bleu médian (boutons, liens)
     #1d61ac bleu médian secondaire         #08b9ed bleu ciel (accent, survols)
     #5d256f violet (touche dynamique, rare)
   Le bleu médian secondaire (#1d61ac, --ec-bleu-median-2) sert de couleur
   de survol pour tout bouton plein (--bleu-survol) : un bouton qui
   s'assombrit au survol reprend un bleu déjà dans la charte, jamais une
   teinte assortie à l'œil (`#1638a8` traînait ainsi, non sourcé, avant
   cette mise au point).

   --- Boutons et actions : cinq familles, jamais une sixième inventée ---
   1. `.bouton` (+ `.bouton-secondaire` en complément) — action principale
      d'un écran ou d'un formulaire (Enregistrer, Se connecter, Ajouter,
      Importer). Fond bleu, texte blanc ; `.bouton-secondaire` inverse en
      fond blanc/contour bleu pour une action jumelle moins engageante
      (Annuler). Marche sur `<a>` et sur `<button>` sans distinction.
      `.ligne-formulaire button` et `.bloc-import button` en héritent
      directement (mêmes règles, sélecteur étendu) : un bouton « Ajouter »
      ou « Importer » est de la même famille qu' « Enregistrer », pas un
      cousin qui lui ressemble.
   2. `.lien-bouton` (+ `.lien-bouton-danger` pour une action destructrice)
      — action textuelle en ligne, au milieu d'autre chose : une ligne de
      tableau (Modifier/Supprimer), un profil connecté (Se déconnecter).
      Texte bleu souligné, sans fond ni bordure. Si l'action est un
      `<button>` (donc dans un `<form>`, pour rester sans JavaScript), la
      classe reste la même : `.lien-bouton` n'est pas réservée aux `<a>`.
   3. Élément de menu (`.menu-panneau a`, `.menu-panneau button`) — une
      entrée d'un menu déroulant de la barre de navigation, qu'elle navigue
      (`<a>`) ou déclenche une action (`<button>` dans un `<form>`, ex.
      Changer d'établissement) : bloc pleine largeur, fond clair au survol.
      Les deux partagent une seule règle, pas deux copies. Les titres de
      groupe de la barre elle-même (`.nav-titre`, `.nav-lien`) ne sont pas
      une sixième famille : ce sont des éléments de navigation, pas des
      actions.
   4. `.tuile` (+ `button.tuile` pour une tuile qui déclenche une action
      plutôt qu'un lien) — case de sélection sur le tableau de bord ou le
      portail : grande zone cliquable, icône, libellé centré.
   5. Icône d'action minimale (`.source-puce button`) — un glyphe seul
      (« × » pour retirer une puce), coloré selon son effet, sans fond ni
      libellé. Réservé à un espace trop contraint pour un `.lien-bouton`
      complet.
   Toute nouvelle action à styler rentre dans une de ces cinq familles.
   Si aucune ne convient, c'est que la famille manque à cette liste —
   l'ajouter ici en même temps que la règle CSS, pas seulement dans le CSS.
*/

:root {
    --ec-bleu-tres-fonce: #2a2558;
    --ec-bleu-median: #047ec2;
    --ec-bleu-median-2: #1d61ac;
    --ec-bleu-ciel: #08b9ed;
    --ec-violet: #5d256f;
    /* Mesure dans le trait de cote de la carte du logo (15/09/2026).
       Seul accent chaud de l'identite, absent de la palette jusqu'ici,
       et parfaitement lisible : 6,48:1 sur blanc. */
    --ec-magenta: #aa198e;

    /* Le bleu d'action est le median-2 et non le median : ce dernier
       plafonne a 4,40:1 sur blanc, sous le seuil de 4,5:1 exige pour un
       texte normal, en couleur de texte comme en fond de bouton. */
    --bleu: var(--ec-bleu-median-2);
    --bleu-fonce: var(--ec-bleu-tres-fonce);
    --bleu-ciel: var(--ec-bleu-ciel);
    --violet: var(--ec-violet);
    /* Le survol d'un bouton bleu reprend le second bleu de la charte EC
       (--ec-bleu-median-2), pas une teinte inventée pour l'occasion — voir
       « Charte graphique » ci-dessus pour la règle. */
    --bleu-survol: var(--ec-bleu-tres-fonce);
    --bleu-decor: var(--ec-bleu-median);   /* decor seulement, jamais du texte */
    --magenta: var(--ec-magenta);
    --bleu-clair: #e7f7fd;
    --gris-texte: #1f2430;
    --gris-moyen: #5b6472;
    --gris-bordure: #dbe0e8;       /* filets decoratifs des tableaux */
    /* Contour des champs et des composants : le RGAA demande 3:1, et
       #dbe0e8 plafonne a 1,33:1, invisible pour beaucoup. */
    --gris-contour: #7b8496;
    --fond: #f6f7fb;
    --blanc: #ffffff;
    --rouge: #b3261e;
    --vert: #1b7a3d;

    /* Hauteur de la barre de navigation collante (16/09/2026). Tout ce qui
       colle aussi en haut de l'écran, les en-têtes de tableau notamment, se
       décale de cette hauteur pour ne pas passer dessous. */
    --hauteur-navigation: 2.9rem;
}

/* Une ancre atteinte depuis un lien (le plan comptable par classe, par
   exemple) s'arrête sous la barre collante, et non derrière elle. */
html { scroll-padding-top: calc(var(--hauteur-navigation) + 0.75rem); }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--gris-texte);
    background: var(--fond);
    line-height: 1.5;
}

/* Le filet en dégradé passe sous la barre de navigation depuis le
   16/09/2026 : sous l'en-tête, il aurait séparé celui-ci de sa propre barre.
   Une page sans barre (connexion, portail) garde le filet sous l'en-tête :
   le gabarit lui pose alors la classe `entete-seule`. */
header {
    background: var(--blanc);
}

header.entete-seule {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(
        90deg, var(--ec-bleu-tres-fonce), var(--ec-bleu-median),
        var(--ec-bleu-ciel), var(--ec-violet)
    ) 1;
}

.entete {
    max-width: 960px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.marque {
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    /* Le dégradé bleu → bleu ciel → violet du logo de l'Enseignement
       catholique, repris sur le nom plutôt que sur leur logo : la touche
       personnelle demandée, pas une copie de leur identité visuelle. */
    background: linear-gradient(
        100deg, var(--ec-bleu-tres-fonce) 0%, var(--ec-bleu-median) 45%,
        var(--ec-bleu-ciel) 80%, var(--ec-violet) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: var(--bleu-fonce); /* repli si background-clip: text n'est pas supporté */
    -webkit-text-fill-color: transparent;
}

.entete-droite {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profil-connecte {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--gris-moyen);
}

.profil-nom { font-weight: 500; color: var(--gris-texte); }

.profil-connecte form { margin: 0; }

/* « Se déconnecter » : action textuelle en ligne, donc `.lien-bouton` (voir
   « Charte graphique » en tête de fichier) — pas un style refait pour
   l'occasion. Seul son gabarit de taille de police diffère ici, hérité de
   `.profil-connecte`. */

.contexte {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem 0.75rem;
    color: var(--gris-moyen);
    font-size: 0.9rem;
}

.etiquette {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--bleu-clair);
    color: var(--bleu);
    font-size: 0.8rem;
}

.etiquette-fictif {
    background: #f1f2f4;
    color: var(--gris-moyen);
}

main {
    max-width: 960px;
    margin: 1.5rem auto;
    padding: 0 1.5rem 3rem;
}

.carte {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: 10px;
    padding: 1.75rem 2rem;
}

h1 {
    margin-top: 0;
    font-size: 1.4rem;
}

h2 {
    font-size: 1.1rem;
    margin-top: 2rem;
    border-top: 1px solid var(--gris-bordure);
    padding-top: 1.25rem;
}

h3 {
    font-size: 0.95rem;
    color: var(--gris-moyen);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.5rem 0 0.5rem;
}

.sous-titre {
    color: var(--gris-moyen);
    margin-top: -0.5rem;
}

.aide {
    color: var(--gris-moyen);
    font-size: 0.9rem;
}

/* Formulaire de chargement d'un FEC */

.formulaire-fec {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--bleu-clair);
    border-radius: 8px;
}

.formulaire-fec label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.ligne-formulaire {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ligne-formulaire input, .ligne-formulaire select {
    flex: 1;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    font-size: 0.95rem;
}

.erreur {
    padding: 0.75rem 1rem;
    background: #fdecea;
    color: var(--rouge);
    border-radius: 6px;
}

.message-succes {
    padding: 0.75rem 1rem;
    background: var(--bleu-clair);
    color: var(--bleu-fonce);
    border-radius: 6px;
}

.bloc-import {
    margin-top: 1.2rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    padding: 0 0.9rem;
}

.bloc-import summary {
    padding: 0.7rem 0;
    cursor: pointer;
    color: var(--bleu-fonce);
    font-weight: 500;
}

.bloc-import summary::-webkit-details-marker { color: var(--bleu); }
.bloc-import form { padding-bottom: 0.9rem; }

.bloc-import textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 0.6rem;
}

/* Fiche d'identité de l'exercice */

.fiche-exercice {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 1.5rem 0;
}

.fiche-exercice dt { color: var(--gris-moyen); }
.fiche-exercice dd { margin: 0; }

.liens-etats {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Action principale — voir « Charte graphique » en tête de fichier.
   `.bouton` marche sur <a> comme sur <button> ; `border`/`cursor`/`font`
   sont sans effet sur <a> et corrigent le rendu par défaut de <button>. */
.bouton, .ligne-formulaire button, .bloc-import button {
    padding: 0.6rem 1.2rem;
    background: var(--bleu);
    color: var(--blanc);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}

.bouton:hover, .ligne-formulaire button:hover, .bloc-import button:hover {
    background: var(--bleu-survol);
}

/* Tables d'états financiers */

.etat {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.etat td {
    padding: 0.3rem 0.25rem;
    border-bottom: 1px solid #eef0f4;
}

.etat .libelle { color: var(--gris-texte); }
.etat .libelle.vide { color: var(--gris-moyen); font-style: italic; }

.etat .montant {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 12rem;
}

.etat .niveau-1 .libelle { padding-left: 1.25rem; color: var(--gris-moyen); }
.etat .niveau-2 .libelle { padding-left: 2.25rem; color: var(--gris-moyen); font-size: 0.9em; }

.etat tfoot .total td {
    border-top: 1px solid var(--gris-bordure);
    border-bottom: none;
    font-weight: 600;
}

.etat-final {
    margin-top: 0.75rem;
}

.etat-final .total-final td {
    padding: 0.6rem 0.25rem;
    font-weight: 700;
    font-size: 1.02rem;
    border-top: 2px solid var(--gris-texte);
}

.resultat-intermediaire {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0 0;
    padding: 0.35rem 0.25rem;
    background: #fafbfd;
    border-radius: 4px;
}

.sous-total {
    display: flex;
    justify-content: space-between;
    margin: 0.4rem 0 0;
    padding: 0.3rem 0.25rem;
    border-top: 1px solid var(--gris-bordure);
    font-weight: 600;
}

/* Bilan : deux colonnes */

.colonnes-bilan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.etat-actif th {
    text-align: right;
    font-weight: 500;
    color: var(--gris-moyen);
    font-size: 0.8rem;
    padding-bottom: 0.2rem;
}

.etat-actif th:first-child { text-align: left; }

@media (max-width: 720px) {
    .colonnes-bilan { grid-template-columns: 1fr; }
}

/* Contrôles de cohérence */

.controle {
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 0.92rem;
}

.controle-ok {
    background: #eaf7ee;
    color: var(--vert);
}

.controle-alerte {
    background: #fdecea;
    color: var(--rouge);
}

footer {
    text-align: center;
    color: var(--gris-moyen);
    font-size: 0.85rem;
    padding: 1.5rem;
}

code {
    background: #f1f2f4;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Navigation : lien d'action mis en avant */

nav a.nav-accent {
    color: var(--bleu);
    font-weight: 600;
}

.etiquette-saisie {
    background: #eaf7ee;
    color: var(--vert);
}

/* Page d'accueil : choix de l'exercice */

.choix-exercice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.carte-choix {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    text-decoration: none;
    color: var(--gris-texte);
    background: var(--blanc);
}

.carte-choix:hover { border-color: var(--bleu); }

.carte-choix span { color: var(--gris-moyen); font-size: 0.88rem; }

.carte-choix-active {
    border-color: var(--bleu);
    background: var(--bleu-clair);
}

@media (max-width: 640px) {
    .choix-exercice { grid-template-columns: 1fr; }
}

.bouton-secondaire {
    background: var(--blanc);
    color: var(--bleu);
    border: 1px solid var(--bleu);
}

.bouton-secondaire:hover { background: var(--bleu-clair); }

/* Liste des écritures */

.etat-ecritures th {
    text-align: left;
    font-weight: 500;
    color: var(--gris-moyen);
    font-size: 0.82rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--gris-bordure);
}

.etat-ecritures th.montant, .etat-ecritures td.montant { text-align: right; }
.etat-ecritures td.libelle { max-width: 22rem; }

.ligne-annulee td { color: var(--gris-moyen); text-decoration: line-through; }
.ligne-annulee td.actions { text-decoration: none; }

.etiquette-annulation { background: #fff4e5; color: #8a5300; }
.etiquette-annulee { background: #f1f2f4; color: var(--gris-moyen); }
.etiquette-modifiee { background: var(--bleu-clair); color: var(--bleu); }

td.actions { white-space: nowrap; font-size: 0.88rem; }
td.actions a, td.actions .lien-bouton { margin-right: 0.75rem; }

.action-inline { display: inline; }

.lien-bouton {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--bleu);
    cursor: pointer;
    text-decoration: underline;
}

.lien-bouton-danger { color: var(--rouge); }

/* Formulaire de saisie d'écriture */

.champs-entete {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.champ label {
    font-size: 0.85rem;
    color: var(--gris-moyen);
}

.champ input, .formulaire-lignes input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    font-size: 0.95rem;
}

.champ-libelle {
    margin-bottom: 1.25rem;
}

.champ-libelle input { width: 100%; }

/* Achat fournisseur multi-lignes (11/09/2026) : chaque ligne de charge
   répète .champs-entete/.champ ; le bouton "Retirer" n'a pas de label
   au-dessus de lui, contrairement à ses voisins — on le pousse en bas de
   la ligne pour qu'il reste aligné avec les champs de saisie. */
.champ-retirer-ligne { justify-content: flex-end; }
.ligne-charge { padding-bottom: 0.75rem; border-bottom: 1px solid var(--gris-bordure); }
.ligne-charge:last-child { border-bottom: none; }

/* Fiche fournisseur : le champ SIRET porte un bouton de vérification
   accolé (10/09/2026, neuvième passe). */

.champ-avec-bouton {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.champ-avec-bouton input { flex: 1; }

.statut-verification {
    display: block;
    font-size: 0.82rem;
    margin-top: 0.3rem;
    min-height: 1.1em;
}

.statut-verification.ok { color: var(--vert); }
.statut-verification.ko { color: var(--rouge); }

/* Imputation analytique à la saisie (11/09/2026), voir
   static/analytique-saisie.js — un bloc par compte de charge ou de produit,
   masqué sur un compte de bilan. */

.analytique-bloc {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    background: var(--fond);
}

.analytique-lignes { display: flex; flex-direction: column; gap: 0.4rem; }

.analytique-ligne {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.analytique-ligne select {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 5px;
    font-size: 0.88rem;
}

.analytique-ligne .analytique-taux {
    width: 4.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 5px;
    font-size: 0.88rem;
    text-align: right;
}

.analytique-ajouter-section { margin-top: 0.4rem; font-size: 0.85rem; }

.analytique-statut {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: var(--gris-moyen);
}
.analytique-statut.analytique-ok { color: var(--vert); }
.analytique-statut.analytique-alerte { color: var(--rouge); }

.formulaire-lignes { margin-top: 0.5rem; }
.formulaire-lignes th {
    text-align: left;
    font-weight: 500;
    color: var(--gris-moyen);
    font-size: 0.82rem;
    padding-bottom: 0.3rem;
}
.formulaire-lignes th.montant, .formulaire-lignes td.montant { text-align: right; }
.formulaire-lignes td { padding: 0.25rem; border-bottom: none; }
.formulaire-lignes input { width: 100%; }
.formulaire-lignes td:nth-child(3) input, .formulaire-lignes td:nth-child(4) input { width: 8rem; }

#controle-equilibre { margin-top: 0.75rem; }

/* Saisie guidée (achat, vente, trésorerie) : le sens d'une opération de
   trésorerie, à choisir avant le reste du formulaire. */

.champ-sens {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.champ-sens label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

/* === La barre de navigation (16/09/2026) =================================
   Demandée « comme un site marchand, accessible depuis toutes les fenêtres » :
   les grandes rubriques toujours visibles sous l'en-tête, chacune ouvrant son
   menu au survol, et la barre collée en haut de l'écran au défilement. Elle
   remplace le bouton « ☰ Menu » du 10/09, qui demandait un clic avant de
   montrer où aller. Les rubriques restent peu nombreuses et leurs entrées
   repliées : la sobriété demandée alors est gardée.

   Contrastes mesurés, non estimés : blanc sur #2a2558, 13,96:1 ; blanc sur le
   survol, 9,01:1. Le repère de la rubrique active est **bleu ciel** et non
   magenta, contrairement au reste de la charte : le magenta ne tient que
   2,15:1 sur ce fond, sous le seuil de 3:1 d'un indicateur, là où le bleu
   ciel en tient 6,10. Le repère est doublé d'une graisse, et `aria-current`
   le porte pour les lecteurs d'écran.

   Aucun JavaScript : `:hover` pour la souris, `:focus-within` pour le clavier
   (Tab sur la rubrique ouvre son menu, Tab encore parcourt ses entrées). */

.navigation-principale {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ec-bleu-tres-fonce);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(
        90deg, var(--ec-violet), var(--ec-bleu-median),
        var(--ec-bleu-ciel)
    ) 1;
}

.nav-interieur {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.nav-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    height: var(--hauteur-navigation);
}

.nav-groupe {
    position: relative;
    display: flex;
}

.nav-groupe-a-droite { margin-left: auto; }

.nav-lien, .nav-titre {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.95rem;
    color: var(--blanc);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

/* Le chevron dit qu'un menu s'ouvre, sans rien écrire de plus. */
.nav-titre::after {
    content: "▾";
    font-size: 0.75em;
    opacity: 0.85;
}

.nav-lien:hover,
.nav-groupe:hover > .nav-titre,
.nav-groupe:focus-within > .nav-titre {
    background: rgba(255, 255, 255, 0.14);
}

.nav-actif > .nav-lien,
.nav-actif > .nav-titre {
    font-weight: 700;
    border-bottom-color: var(--ec-bleu-ciel);
}

.nav-lien:focus-visible,
.nav-titre:focus-visible {
    outline: 2px solid var(--ec-bleu-ciel);
    outline-offset: -5px;
}

/* Le menu d'une rubrique. `visibility` plutôt que `display` : un élément
   invisible ne reçoit pas le focus, et la transition retardée à la fermeture
   laisse à la souris le temps de descendre de la rubrique au menu sans que
   celui-ci se referme au passage. L'ouverture, elle, est instantanée : la
   charte proscrit l'animation qui retarde une lecture. */
.menu-panneau {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 31;
    min-width: 15rem;
    padding: 0.4rem 0;
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(42, 37, 88, 0.18);
    visibility: hidden;
    transition: visibility 0s linear 0.18s;
}

.nav-groupe-a-droite > .menu-panneau { left: auto; right: 0; }

.nav-groupe:hover > .menu-panneau,
.nav-groupe:focus-within > .menu-panneau {
    visibility: visible;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .menu-panneau { transition: none; }
}

/* La page en cours, dans un menu : magenta, qui tient 6,48:1 sur ce fond
   blanc, et un filet à gauche pour ne pas s'en remettre à la seule couleur. */
.menu-panneau a[aria-current="page"] {
    color: var(--ec-magenta);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ec-magenta);
}

/* Le bouton de repli n'existe que sur un écran étroit. */
.nav-bascule-case {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nav-bascule-etiquette { display: none; }

@media (max-width: 760px) {
    .nav-bascule-etiquette {
        display: flex;
        align-items: center;
        height: var(--hauteur-navigation);
        color: var(--blanc);
        font-weight: 500;
        cursor: pointer;
        user-select: none;
    }

    .nav-bascule-case:focus-visible + .nav-bascule-etiquette {
        outline: 2px solid var(--ec-bleu-ciel);
        outline-offset: 2px;
    }

    /* Déplié, le menu défile en lui-même : collé en haut de l'écran, il
       rendrait sinon inaccessible tout ce qui dépasse en bas. */
    .nav-liste {
        display: none;
        flex-direction: column;
        height: auto;
        max-height: calc(100vh - var(--hauteur-navigation));
        overflow-y: auto;
        padding-bottom: 0.6rem;
    }

    .nav-bascule-case:checked ~ .nav-liste { display: flex; }

    .nav-groupe { flex-direction: column; }
    .nav-groupe-a-droite { margin-left: 0; }

    .nav-lien, .nav-titre { padding: 0.65rem 0.2rem; }
    .nav-titre { cursor: default; }
    .nav-titre::after { content: none; }

    .menu-panneau {
        position: static;
        visibility: visible;
        border-radius: 8px;
        box-shadow: none;
        border: none;
    }
}

/* Élément de menu — voir « Charte graphique » en tête de fichier.
   Un <a> (navigation) et un <button> dans un <form> (action, ex. « Changer
   d'établissement ») doivent se fondre l'un dans l'autre au même titre :
   une seule règle pour les deux, le <button> n'ajoutant que ce qu'il faut
   pour annuler le rendu par défaut d'un bouton. */
.menu-panneau a, .menu-panneau button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1.1rem;
    color: var(--gris-texte);
    text-decoration: none;
    font-size: 0.92rem;
    font-family: inherit;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-panneau a:hover, .menu-panneau button:hover {
    background: var(--bleu-clair);
    color: var(--bleu);
}

/* Le cyan est a 2,29:1 : illisible pour le lien le plus employe du menu.
   Le magenta de la carte du logo tient 6,48:1 et reste un accent. */
.menu-panneau a.menu-accent { color: var(--ec-magenta); font-weight: 700; }

.menu-panneau form { margin: 0; }

/* Échéancier */

.ligne-echue td { color: var(--rouge); }

.etiquette-echue {
    margin-left: 0.4rem;
    background: #fdecea;
    color: var(--rouge);
}

/* Paramétrage : plan comptable et sections analytiques */

.filtre-parametrage {
    margin: 1rem 0 1.25rem;
}

.filtre-parametrage input {
    width: 100%;
    max-width: 24rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    font-size: 0.95rem;
}

.etat-parametrage th {
    text-align: left;
    font-weight: 500;
    color: var(--gris-moyen);
    font-size: 0.82rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--gris-bordure);
}

.etat-parametrage td { padding: 0.3rem 0.5rem 0.3rem 0; }
.etat-parametrage td.chiffre, .etat-parametrage th.chiffre { text-align: right; }
.etat-parametrage td.actions { white-space: nowrap; font-size: 0.88rem; }

/* Navigation et recherche rapides en tête d'une longue page de paramétrage
   (11/09/2026) : sauter directement à une section, ou à un compte précis,
   sans défiler devant des centaines de lignes. */
.carte-nav-rapide {
    padding: 1.1rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
}

.nav-rapide { display: flex; gap: 1rem; flex-wrap: wrap; }
.nav-rapide a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bleu);
    text-decoration: none;
}
.nav-rapide a:hover { text-decoration: underline; }

.recherche-rapide { position: relative; flex: 1; min-width: 16rem; }
.recherche-rapide input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    font-size: 0.95rem;
}

.recherche-rapide-resultats {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    max-height: 18rem;
    overflow-y: auto;
}

.recherche-rapide-resultats li + li { margin-top: 0.15rem; }
.recherche-rapide-resultats button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 5px;
    background: none;
    font-size: 0.88rem;
    cursor: pointer;
}
.recherche-rapide-resultats button:hover { background: var(--fond); }
.recherche-rapide-vide {
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    color: var(--gris-moyen);
}

@keyframes surbrillance-ligne {
    from { background-color: var(--bleu-clair); }
    to { background-color: transparent; }
}
.ligne-surlignee { animation: surbrillance-ligne 2s ease-out; }
.etat-parametrage td.actions a, .etat-parametrage td.actions .lien-bouton { margin-right: 0.75rem; }
.etat-parametrage td input[type="text"] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
}

.ligne-formulaire-compte input[name="numero"] { flex: 0 0 14rem; }
.ligne-formulaire-compte input[name="libelle"] { flex: 1; }

.cle-bloc {
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    margin-bottom: 0.9rem;
    overflow: hidden;
}

.cle-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--bleu-clair);
    cursor: pointer;
    list-style: none;
}

.cle-entete::-webkit-details-marker { display: none; }
.cle-entete strong { color: var(--bleu-fonce); }

.cle-corps { padding: 0.8rem 0.9rem; }

.source-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0.7rem;
}

.source-puce {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--fond);
    border: 1px solid var(--gris-bordure);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.85rem;
}

.source-puce button {
    border: none;
    background: none;
    color: var(--rouge);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

.version-bloc {
    border-top: 1px solid var(--gris-bordure);
    padding-top: 0.6rem;
    margin-top: 0.6rem;
}

.version-entete {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 0.9rem;
    color: var(--gris-texte);
}

.version-entete .chiffre-total { color: var(--gris-moyen); }
.version-entete .alerte-total { color: var(--rouge); font-weight: 600; }

.ligne-formulaire-etroit input, .ligne-formulaire-etroit select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
}

/* Tableau de bord (accueil, depuis le 10/09/2026, quatrième passe) */

.groupe-tuiles h2 {
    font-size: 0.95rem;
    color: var(--gris-moyen);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.75rem 0 0.75rem;
    border-top: none;
    padding-top: 0;
}

.groupe-tuiles:first-child h2 { margin-top: 0; }

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.85rem;
}

.tuile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.4rem 1rem;
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: 10px;
    text-align: center;
    /* Une tuile est un <a> : sans cette ligne, le navigateur soulignait le
       libellé et tirait un trait sous l'icône (constaté sur capture le
       16/09/2026). Le cadre et le survol disent déjà qu'elle se clique. */
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tuile:hover {
    border-color: var(--bleu);
    box-shadow: 0 2px 8px rgba(4, 126, 194, 0.12);
}

.tuile-accent {
    background: var(--bleu-clair);
    border-color: var(--bleu-ciel);
}

.tuile-icone { font-size: 1.6rem; }

.tuile-libelle {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--gris-texte);
}

/* Variante compacte de la famille 4, pour l'accueil (16/09/2026) : l'icône à
   gauche du libellé, une seule ligne. L'accueil porte une tuile par entrée du
   menu, vingt et une en tout ; au format plein, la page dépassait 1 500 px et
   la charte veut une interface dense. Ce n'est pas une sixième famille de
   bouton : même rôle, même cadre, même survol. */
.tuiles-compactes {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.6rem;
}

.tuiles-compactes .tuile {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    text-align: left;
}

.tuiles-compactes .tuile-icone { font-size: 1.25rem; line-height: 1; }

.tableau-de-bord .groupe-tuiles h2 { margin: 1.25rem 0 0.5rem; }

/* Une tuile qui déclenche une action (POST) plutôt qu'un lien : le
   <form> ne doit pas compter comme une case de la grille, seul le
   <button> — stylé comme .tuile — doit en être une. */
.tuile-forme { display: contents; }

button.tuile {
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* Écran de connexion */

.carte-connexion {
    max-width: 24rem;
    margin: 3rem auto;
}

.formulaire-connexion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}

.formulaire-connexion .champ input {
    width: 100%;
}

/* En tête du tableau de bord depuis le 16/09/2026 : le filet passe donc
   dessous, pour les séparer des tuiles. */
.indicateurs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gris-bordure);
}

.indicateur dt {
    font-size: 0.78rem;
    color: var(--gris-moyen);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.indicateur dd {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 500;
}

.indicateur-ok { color: var(--vert); }
.indicateur-alerte { color: var(--rouge); }

/* --- Les états de détail (15/09/2026) -------------------------------------
   Balance, grand livre, journal et analytique. Volontairement sobres : ces
   pages se lisent en diagonale et s'impriment, deux usages que la couleur
   dessert plus qu'elle ne sert. */

.barre-filtres {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.4rem;
    padding: .7rem .9rem;
    background: var(--fond);
    border-radius: 4px;
}

.barre-filtres label { font-weight: 600; }
.barre-filtres input[type="text"] { min-width: 12rem; }

.etat .compte { font-variant-numeric: tabular-nums; white-space: nowrap; }
.etat .compte a { text-decoration: none; border-bottom: 1px dotted currentColor; }
.etat td.vide, .vide { color: var(--gris-moyen); font-style: italic; }

.etat-balance tfoot td, .etat-journal tfoot td, .etat-analytique tfoot td {
    border-top: 2px solid currentColor;
    padding-top: .4rem;
}

.etat-balance .controle { font-style: italic; text-align: right; }

/* L'en-tête d'écriture du journal : c'est elle qui donne le rythme de la
   lecture, les lignes de mouvement se lisant en retrait dessous. */
.etat-journal .entete-ecriture td { padding-top: .8rem; }
.etat-journal .entete-ecriture { border-top: 1px solid var(--gris-bordure); }

.onglets-journaux {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.4rem;
}

.onglets-journaux a {
    padding: .4rem .8rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    text-decoration: none;
}

.onglets-journaux a.actif { border-color: currentColor; font-weight: 600; }
.onglets-journaux .compteur { opacity: .6; margin-left: .3rem; }

.etat-controle .alerte td { font-weight: 600; }
.chaine-deversement { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.anomalies { margin: .5rem 0 0 1.2rem; }
.anomalies li { margin-bottom: .3rem; }
.note { color: var(--gris-moyen); font-size: .92em; margin-top: .8rem; }

/* --- Les modules de tenue et de patrimoine (15/09/2026) ------------------- */

/* La grille de clôture, reprise de Charlemagne : journaux en lignes, mois en
   colonnes. C'est la forme qui rend la distinction verrou / validation
   évidente, en la montrant case par case. */
.grille-cloture th { text-align: left; white-space: nowrap; }
.grille-cloture .case { vertical-align: top; min-width: 7rem; padding: .5rem; }
.grille-cloture .case.verrouillee { background: var(--fond); }
.grille-cloture .compteur { font-weight: 600; font-variant-numeric: tabular-nums; }
.grille-cloture .etats { display: block; font-size: .82em; opacity: .75; }
.grille-cloture .etats abbr { margin-right: .35rem; border-bottom: 1px dotted; }
.grille-cloture .actions-case { display: flex; flex-direction: column; gap: .2rem; margin-top: .3rem; }
.grille-cloture .actions-case button { font-size: .8em; padding: .15rem .3rem; }

.liste-comptes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.liste-comptes li a {
    display: inline-block;
    padding: .35rem .7rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

/* Une ligne soldée ou pointée s'efface sans disparaître : elle reste lisible
   pour qui vérifie, sans encombrer le regard de qui cherche ce qui reste. */
/* Une ligne soldee se met en retrait par la couleur, jamais par
   l'opacite : `opacity: .55` descend le contraste a 3,2:1 et rend
   illisible ce qu'on voulait seulement attenuer. */
.etat .soldee td { color: var(--gris-moyen); }
.etat .soldee .libelle { font-style: italic; }

/* `div.actions` seulement : la meme classe existe sur dix `td` de
   tableaux, ou un affichage en flex casse l'alignement des colonnes. */
div.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }
.message {
    padding: .6rem .9rem;
    border-left: 3px solid currentColor;
    background: var(--fond);
    margin: 1rem 0;
}

/* === Application de la charte (15/09/2026) ================================
   Trois corrections de composition, chacune répondant à un défaut mesuré.
   Voir la section « Charte graphique et règles d'interface » du CLAUDE.md. */

/* 1. L'en-tête de tableau restait le rendu natif du navigateur sur huit pages
      d'états : centré, sans filet, quand six autres pages avaient un en-tête
      soigné aligné à gauche. Sur la balance, « Compte » était centré et
      « Débit » à droite dans la même ligne. Une seule règle vaut désormais
      pour toutes les pages. */
.etat thead th {
    text-align: left;
    font-weight: 600;
    color: var(--ec-bleu-tres-fonce);
    background: var(--fond);
    border-bottom: 2px solid var(--gris-bordure);
    padding: 0.45rem 0.6rem;
    white-space: nowrap;
}

/* Un en-tête de colonne s'aligne comme sa colonne : une colonne de montants
   dont l'en-tête est à gauche oblige l'œil à deux repères au lieu d'un. */
.etat thead th.montant { text-align: right; }

/* 2. Aucun `position: sticky` n'existait dans la feuille. Passé la quinzième
      ligne d'une balance, le comptable lisait six colonnes de chiffres sans
      savoir laquelle était le solde débiteur. Le fond doit être opaque, sans
      quoi les lignes défilent au travers. */
.etat thead th {
    position: sticky;
    top: var(--hauteur-navigation);
    z-index: 2;
}

/* 3. Le contour des champs de saisie était à 1,33:1, sous le seuil de 3:1 que
      le RGAA demande pour un composant. Les filets décoratifs des tableaux ne
      sont pas concernés et restent légers. */
input[type="text"], input[type="date"], input[type="number"],
input[type="password"], select, textarea {
    border: 1px solid var(--gris-contour);
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
}

input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus,
input[type="password"]:focus, select:focus, textarea:focus {
    outline: 2px solid var(--bleu);
    outline-offset: 1px;
}

/* Le filet du logo, sous le titre de page : le seul endroit du corps de page
   où le dégradé de la marque a le droit d'être. Il rappelle le trait tracé
   sous « UDOGEC du Finistère ». */
.carte > h1 {
    padding-bottom: 0.5rem;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(110deg,
        var(--ec-violet), var(--ec-bleu-tres-fonce) 30%,
        var(--ec-bleu-median-2) 70%, var(--ec-bleu-ciel)) 1;
}

/* === Impression ===========================================================
   Ces états se glissent dans un dossier de révision. Sans cette feuille, ils
   sortaient avec le dégradé de l'en-tête, le bouton Menu, et les en-têtes de
   colonnes uniquement sur la première page. */
@media print {
    header, footer, .navigation-principale, .barre-filtres, .actions, div.actions,
    form, .note, .onglets-journaux { display: none !important; }

    body { background: #fff; color: #000; font-size: 10pt; }
    .carte { box-shadow: none; border: 0; padding: 0; margin: 0; }

    /* Le dégradé disparaît : il ferait varier le contraste d'une ligne à
       l'autre, ce qu'un état comptable ne doit pas faire. */
    .carte > h1 { border-image: none; border-bottom: 1.5pt solid #000; }

    /* Les en-têtes de colonnes se répètent en haut de chaque page. Sans cette
       règle, la deuxième page d'une balance est une colonne de chiffres sans
       titre. */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr, .etat tr { page-break-inside: avoid; }

    .etat thead th { position: static; top: auto; background: #fff; color: #000; }
    .etat .soldee td { color: #444; }
    a { color: #000; text-decoration: none; }
}

/* Lecture d'un code analytique sous le code lui-même, sur l'écran de
   paramétrage (16/09/2026). Les deux teintes sont celles de la charte, et
   passent le seuil RGAA de 4,5:1 exigé pour un texte : --gris-moyen à 5,98:1
   et --rouge à 6,54:1 sur blanc, mesurés. Pas de réduction de taille en
   dessous de 0.8em : un décodage illisible ne décode rien. */
.note-cellule {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.8em;
    line-height: 1.35;
    color: var(--gris-moyen);
}

.alerte-cellule {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.8em;
    line-height: 1.35;
    font-weight: 600;
    color: var(--rouge);
}

/* Paramétrage du dossier et des exercices (16/09/2026). Les champs se rangent
   en grille qui passe sur une colonne quand la place manque : sur un écran
   étroit, trois champs côte à côte deviennent illisibles. Le contour des
   champs reprend --gris-contour, à 3:1 comme l'exige le RGAA pour un
   composant, et non --gris-bordure qui plafonne à 1,33:1. */
.grille-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.9rem;
    margin: 0.6rem 0;
}

.grille-champs .champ input,
.grille-champs .champ select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--gris-contour);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--blanc);
}

.grille-champs .champ input[readonly] {
    background: #f1f2f4;
    color: var(--gris-moyen);
}

.choix-mode {
    border: 1px solid var(--gris-contour);
    border-radius: 8px;
    padding: 0.6rem 0.9rem 0.8rem;
    margin: 0.9rem 0 0.4rem;
}

.choix-mode legend {
    padding: 0 0.3rem;
    font-size: 0.9rem;
    color: var(--gris-texte);
}

.choix-mode label {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.5rem;
    cursor: pointer;
    line-height: 1.4;
}

.choix-mode input { margin-top: 0.2rem; }

/* Double authentification (29/09/2026) : le QR code à scanner et la clé
   à recopier à la main, repris de Vitrail. */
.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { background: #fff; }
code.cle { display: inline-block; margin-top: 0.3rem; font-size: 1.05rem; letter-spacing: 0.08em; user-select: all; }