/* =================================================================
   CSS custom du projet CRM Bard Consulting.

   Regle projet : tout CSS specifique va ICI, jamais dans les fichiers de vues.
   Charge apres theme.css, donc peut le surcharger.
   Toute couleur / fonte passe par un token de tokens.css.
   ================================================================= */

/* -----------------------------------------------------------------
   1 · ECRANS D'AUTHENTIFICATION
   Seul endroit de l'application ou le centrage est justifie : il n'y a
   qu'une chose a faire sur ces pages.
   ----------------------------------------------------------------- */

.auth-body {
    background: var(--color-paper-2);
    min-height: 100dvh;
}

.auth-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-sm);
    gap: var(--space-sm);
}

.auth-card {
    width: min(420px, 100%);
    background: var(--color-surface);
    border: var(--rule-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.auth-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: var(--rule-hairline);
}

.auth-card__brand {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    line-height: 1.15;
    margin: 0;
}

.auth-card__sub {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--color-ink-4);
    margin: 0;
    line-height: 1.4;
}

.auth-intro { margin-bottom: var(--space-md); }

.auth-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    color: var(--color-ink);
    margin: 0 0 var(--space-3xs);
    overflow-wrap: anywhere;
}

.auth-lede {
    font-size: var(--text-sm);
    color: var(--color-ink-3);
    line-height: var(--leading-snug);
    margin: 0;
}

.auth-link {
    font-size: var(--text-xs);
    color: var(--color-accent-strong);
    white-space: nowrap;
}
.auth-link:hover { color: var(--color-accent-hover); }

.auth-back {
    margin: var(--space-md) 0 0;
    padding-top: var(--space-sm);
    border-top: var(--rule-hairline);
    text-align: center;
}

.auth-foot {
    font-size: var(--text-xs);
    color: var(--color-ink-4);
    text-align: center;
    margin: 0;
    max-width: 420px;
}

/* Bouton d'affichage du mot de passe, dans le champ */
.input-affix__action {
    position: absolute;
    right: var(--space-3xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-ink-4);
    font-size: 0.9rem;
    transition: color var(--dur-short) var(--ease-out),
                background-color var(--dur-short) var(--ease-out);
}
.input-affix__action:hover {
    color: var(--color-ink-2);
    background: var(--color-surface-hover);
}
.input-affix .form-control { padding-right: 2.4rem; }

/* -----------------------------------------------------------------
   2 · MESSAGES FLASH
   Le theme n'en avait pas : la maquette n'avait pas de cycle serveur.
   ----------------------------------------------------------------- */

.message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.message::before {
    font-family: "bootstrap-icons";
    font-size: 1rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.message.success {
    background: var(--color-ok-soft);
    border-color: color-mix(in oklab, var(--color-ok) 30%, transparent);
    color: var(--color-ok);
}
.message.success::before { content: "\f26b"; }

.message.error {
    background: var(--color-danger-soft);
    border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);
    color: var(--color-danger);
}
.message.error::before { content: "\f33a"; }

.message.warning {
    background: var(--color-warn-soft);
    border-color: color-mix(in oklab, var(--color-warn) 30%, transparent);
    color: var(--color-warn);
}
.message.warning::before { content: "\f33b"; }

.message.info {
    background: var(--color-accent-soft);
    border-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
    color: var(--color-accent-strong);
}
.message.info::before { content: "\f431"; }

/* -----------------------------------------------------------------
   3 · ERREURS DE VALIDATION CAKEPHP
   ----------------------------------------------------------------- */

.error-message {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: var(--space-3xs);
    min-height: 1.15rem;
}

.form-control.form-error,
.form-select.form-error { border-color: var(--color-danger); }

/* Champ en erreur : bordure rouge franche, quel que soit le type de controle. */
.form-control.is-invalid,
.form-select.is-invalid,
textarea.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-danger) 35%, transparent);
}

/* Recapitulatif des erreurs, en tete de formulaire. */
.form-erreurs { align-items: flex-start; }
.form-erreurs__titre {
    margin: 0 0 var(--space-3xs);
    font-weight: 600;
}
.form-erreurs__liste {
    margin: 0;
    padding-left: 1.1rem;
}
.form-erreurs__liste li { margin-bottom: var(--space-3xs); }
.form-erreurs__lien {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.form-erreurs__lien:hover { text-decoration: none; }

/* Etape de l'assistant portant au moins une erreur. */
.nav-pills .nav-link.has-error {
    border-color: color-mix(in oklab, var(--color-danger) 45%, transparent);
    color: var(--color-danger);
}
.nav-pills .nav-link.has-error.active {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}
.nav-pills .nav-link.has-error .bi { font-size: 0.85em; }

/* -----------------------------------------------------------------
   4 · MON COMPTE
   ----------------------------------------------------------------- */

.account-name {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    margin: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.account-role {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--color-ink-4);
    margin: 0;
}

.min-w-0 { min-width: 0; }

.meta-list { margin: 0; }
.meta-list dt { margin-bottom: 2px; }
.meta-list dd {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-ink);
}
.meta-list dd:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   5 · DIVERS
   ----------------------------------------------------------------- */

/* Le postLink de CakePHP genere un formulaire cache : il ne doit pas
   creer d'espace dans le menu deroulant. */
.dropdown-menu form { margin: 0; }
.dropdown-menu form .dropdown-item { width: 100%; text-align: left; }

/* -----------------------------------------------------------------
   6 · ELEMENTS DU SOCLE UI (LOT 4)
   ----------------------------------------------------------------- */

/* --- Bandeau d'indicateurs : nombre de colonnes pilote par l'element --- */
.kpi-bar { grid-template-columns: repeat(var(--kpi-colonnes, 4), minmax(0, 1fr)); }

.kpi--cliquable {
    color: inherit;
    text-decoration: none;
    transition: background-color var(--dur-short) var(--ease-out);
}
.kpi--cliquable:hover { background: var(--color-surface-hover); color: inherit; text-decoration: none; }

.kpi__label i { font-size: 0.8rem; color: var(--color-ink-4); }
.kpi__foot--detail { gap: var(--space-2xs); }

/* --- Badge de statut sans pastille --- */
.badge-status--sans-pastille::before { display: none; }

/* --- Pastille : point de couleur des vues matricielles --- */
.pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-round);
    background: var(--color-neutral-soft);
    color: var(--color-ink-3);
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none;
}
.pastille--sm { width: 12px; height: 12px; font-size: 0.5rem; }
.pastille--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.pastille--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.pastille--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.pastille--accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
a.pastille:hover { outline: 2px solid var(--color-rule-2); outline-offset: 1px; }

/* --- Bandeau d'alertes : declinaisons de ton --- */
.alert-strip--warn {
    background: var(--color-warn-soft);
    border-color: color-mix(in oklab, var(--color-warn) 30%, transparent);
}
.alert-strip--warn .alert-strip__icon,
.alert-strip--warn .alert-strip__count { color: var(--color-warn); }
.alert-strip--warn .alert-strip__item:hover { color: var(--color-warn); }

.alert-strip--accent {
    background: var(--color-accent-soft);
    border-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
}
.alert-strip--accent .alert-strip__icon,
.alert-strip--accent .alert-strip__count { color: var(--color-accent-strong); }
.alert-strip--accent .alert-strip__item:hover { color: var(--color-accent-strong); }

.alert-strip__titre { font-weight: 500; color: var(--color-ink); font-size: var(--text-sm); }
a.alert-strip__item { color: var(--color-ink-2); text-decoration: none; }

/* --- Tri des colonnes --- */
.table-tri {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.table-tri:hover { color: var(--color-ink); text-decoration: none; }
.table-tri i { font-size: 0.65rem; }
.table-tri--asc, .table-tri--desc { color: var(--color-accent-strong); }
.table-tri--verrouille { cursor: default; opacity: 0.6; }

/* --- Pagination --- */
.pagination-compteur {
    font-size: var(--text-xs);
    color: var(--color-ink-3);
    font-variant-numeric: tabular-nums;
}

.pagination-app {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-app__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-2xs);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background-color var(--dur-short) var(--ease-out),
                border-color var(--dur-short) var(--ease-out);
}
a.pagination-app__lien:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-rule);
    color: var(--color-ink);
    text-decoration: none;
}
.pagination-app__item--actif .pagination-app__lien {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-weight: 500;
}
.pagination-app__item--inactif .pagination-app__lien,
.pagination-app__item--ellipsis .pagination-app__lien {
    opacity: 0.35;
    pointer-events: none;
}

/* --- Etat vide d'un tableau --- */
.table-empty p { margin: 0 0 var(--space-3xs); }
.table-empty p:last-of-type { margin-bottom: var(--space-sm); }

/* --- Bandeau d'echeances de la topbar --- */
.echeance-bandeau {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 3px var(--space-2xs);
    border: var(--rule-hairline);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--text-xs);
    color: var(--color-ink-3);
    white-space: nowrap;
    text-decoration: none;
}
.echeance-bandeau:hover {
    border-color: var(--color-rule-2);
    color: var(--color-ink);
    text-decoration: none;
}
.echeance-bandeau__count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-ink);
}
.echeance-bandeau--alerte {
    background: var(--color-danger-soft);
    border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);
    color: var(--color-danger);
}
.echeance-bandeau--alerte .echeance-bandeau__count { color: var(--color-danger); }

@media (max-width: 991.98px) {
    .echeance-bandeau__texte { display: none; }
}

/* --- Palette de commandes : groupes de resultats --- */
.cmdk__row-meta {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
    white-space: nowrap;
}

/* =====================================================================
   BLOC 9 — Notifications : cloche, panneau, centre, grille de preferences.
   Ajoute a la SUITE du fichier, sans toucher aux sections precedentes.
   ===================================================================== */

/* --- Cloche de la topbar ---
   L'element est rendu par le layout puis DEPLACE dans la topbar par
   notifications.js : `templates/element/topbar.php` appartient au socle UI et
   n'est pas modifiable par ce module. Tant qu'il n'est pas dans la barre, il
   reste masque — pas de bouton egare sous la topbar au premier rendu. */
.notif-cloche { display: none; }
.topbar .notif-cloche { display: inline-flex; }

.notif-cloche__badge.is-vide { display: none; }

.notif-panneau {
    width: min(380px, calc(100vw - 2rem));
    padding: 0;
}

.notif-panneau__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
    border-bottom: var(--rule-hairline);
}

.notif-panneau__titre {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
}

.notif-panneau__corps {
    max-height: 60vh;
    overflow-y: auto;
}

.notif-panneau__vide {
    margin: 0;
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-ink-4);
}

.notif-panneau__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-sm);
    border-top: var(--rule-hairline);
}

.notif-panneau__lien {
    font-size: var(--text-sm);
    text-decoration: none;
}

/* --- Ligne de notification, dans le panneau et dans la liste --- */
.notif-ligne {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    width: 100%;
    padding: var(--space-2xs) var(--space-sm);
    border: 0;
    border-bottom: var(--rule-hairline);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.notif-ligne:last-child { border-bottom: 0; }
.notif-ligne:hover { background: var(--color-surface-hover); }

.notif-ligne--non-lue { background: var(--color-accent-soft); }
.notif-ligne--non-lue:hover { background: var(--color-accent-soft-2); }

.notif-ligne__icone {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-paper-3);
    color: var(--color-ink-3);
    font-size: 0.8125rem;
}
.notif-ligne__icone--accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.notif-ligne__icone--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.notif-ligne__icone--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.notif-ligne__icone--danger { background: var(--color-danger-soft); color: var(--color-danger); }

.notif-ligne__corps {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.notif-ligne__titre {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.35;
}

.notif-ligne__message {
    font-size: var(--text-xs);
    color: var(--color-ink-3);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notif-ligne__meta {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
}

/* --- Centre de notifications : la ligne non lue se distingue du reste --- */
.table-app tr.ligne-non-lue td { background: var(--color-accent-soft); }
.table-app tr.ligne-non-lue .cell-primary { font-weight: 600; }

/* --- Grille de preferences --- */
.notif-grille__type { text-align: left; font-weight: 500; }
.notif-grille__canal { white-space: nowrap; }

.notif-grille__inerte {
    margin-left: var(--space-3xs);
    font-size: var(--text-2xs);
    text-transform: none;
}

.notif-grille__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-3);
    max-width: 52ch;
}

/* -----------------------------------------------------------------
   BLOC 12 · ADMINISTRATION RESTANTE
   Sommaire /admin, saisonnalite des objectifs, diff du journal d'audit.
   ----------------------------------------------------------------- */

/* --- Tuiles du sommaire d'administration --- */
.admin-tuile {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.admin-tuile:hover,
.admin-tuile:focus-visible {
    background: var(--color-surface-hover);
    color: inherit;
    text-decoration: none;
}

.admin-tuile__titre {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0 0 var(--space-3xs);
    font-weight: 500;
    color: var(--color-ink);
}

.admin-tuile__titre i { color: var(--color-accent-strong); }

.admin-tuile__texte {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

.admin-tuile__compteur {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    align-items: baseline;
}

/* --- Saisonnalite : douze coefficients sur une grille --- */
.coef-grille {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-xs);
}

.coef-grille__champ .form-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-4);
}

.somme-coefficients {
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

.somme-coefficients--ok .num { color: var(--color-ok); }
.somme-coefficients--ko .num { color: var(--color-danger); }

@media (max-width: 991.98px) {
    .coef-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .coef-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Journal d'audit : diff avant / apres --- */
.audit-detail-row > td { border-top: 0; }

.audit-diff {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    background: var(--color-paper-2);
}

.audit-diff__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.audit-diff__table th,
.audit-diff__table td {
    padding: var(--space-3xs) var(--space-2xs);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--rule-hairline);
    word-break: break-word;
}

.audit-diff__table thead th {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-4);
    font-weight: 500;
}

.audit-diff__avant { color: var(--color-ink-3); text-decoration: line-through; }
.audit-diff__apres { color: var(--color-ink); }

.audit-diff__ligne--ajout .audit-diff__avant { text-decoration: none; }
.audit-diff__ligne--retrait .audit-diff__apres { color: var(--color-ink-4); }

.audit-table td .icon-btn[aria-expanded="true"] i { transform: rotate(180deg); }

/* =====================================================================
   BLOC 7 — HABILITATIONS
   ===================================================================== */

/* --- Tableau croise dossiers x types --- */

/* La matrice deborde en largeur des qu'il y a plus de six organismes : le
   defilement horizontal est confine au tableau, la page ne bouge pas. */
.matrice-wrap {
    max-height: 70vh;
    overflow: auto;
}

.matrice {
    border-collapse: separate;
    border-spacing: 0;
}

/* Premiere colonne figee : sur 112 lignes, perdre le nom du client en
   defilant rend le tableau illisible. */
.matrice__entete-ligne {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 240px;
    background: var(--color-surface);
    text-align: left;
    font-weight: 400;
}

.matrice thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-surface);
}

.matrice thead .matrice__entete-ligne {
    z-index: 4;
}

/* En-tetes de colonnes a la verticale : sept libelles d'organisme cote a cote
   feraient sinon un tableau trois fois trop large. */
.matrice__entete-colonne {
    width: 44px;
    height: 150px;
    padding: 0;
    vertical-align: bottom;
}

.matrice__entete-texte {
    display: block;
    width: 44px;
    transform-origin: bottom left;
    transform: translateX(30px) rotate(-60deg);
    white-space: nowrap;
    font-size: var(--text-xs);
    text-align: left;
}

.matrice__cellule {
    width: 44px;
    padding: var(--space-2xs);
    text-align: center;
}

.matrice-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-ink-3);
}

.matrice-legende__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

/* --- Ligne d'echeance depassee --- */
.ligne-alerte td {
    background: var(--color-danger-soft);
}

/* `.ligne-inactive` est utilisee par le module dore (Collaborateurs) et par le
   BLOC 1 sans avoir jamais ete definie. Definition posee ici faute de mieux —
   sa place est dans le socle UI (voir DEMANDES.md, BLOC 7). */
.ligne-inactive td {
    opacity: 0.55;
}

/* =====================================================================
   BLOC 5 — demandes de facturation
   ===================================================================== */

/* Bouton-icone de validation, dans la file de la Direction. `icon-btn` est
   defini par le theme ; seule la teinte d'accord manquait. */
.icon-btn--ok { color: var(--color-ok); }
.icon-btn--ok:hover { border-color: var(--color-ok); color: var(--color-ok); }

/* Ecran de reconciliation : une demande validee non facturee, avec son
   formulaire de rattachement. Ce n'est pas une ligne de tableau — le
   formulaire ne tiendrait pas dans une cellule. */
.reconciliation-item {
    padding: var(--space-sm) 0;
    border-bottom: var(--rule-hairline);
}

.reconciliation-item:last-child { border-bottom: 0; }

.reconciliation-item__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

/* --- BLOC 4 pilotage ------------------------------------------------------

   Trois composants seulement. Tout le reste reutilise le socle : `kpi-bar`,
   `table-app`, `meter`, `badge-status`, `chart__*`. Un ecran de pilotage qui
   invente ses propres cartouches finit par se distinguer visuellement du
   reste de l'application sans raison.
-------------------------------------------------------------------------- */

/* Selecteur de perimetre — Bard Consulting / Bard Invest / consolide.
   Un segmented control, pas des onglets : ce n'est pas une navigation entre
   sous-pages, c'est le meme ecran vu sous trois perimetres. */
.perimetre {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.perimetre__label { color: var(--color-ink-4); }

.perimetre__groupe {
    display: inline-flex;
    border: var(--rule-hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
}

.perimetre__variante {
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink-3);
    text-decoration: none;
    border-right: var(--rule-hairline);
    transition: background var(--dur-short) var(--ease-out),
                color var(--dur-short) var(--ease-out);
}

.perimetre__variante:last-child { border-right: 0; }

.perimetre__variante:hover {
    background: var(--color-surface-hover);
    color: var(--color-ink);
}

.perimetre__variante.is-active {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.perimetre__note { font-size: var(--text-sm); }

/* Cartouches de repartition d'un portefeuille — cliquables, filtrent par URL.
   Le filet de couleur est en HAUT et non a gauche : la bordure laterale epaisse
   est un motif date, et le socle l'evite deja partout ailleurs. */
.repartition {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.repartition__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: var(--rule-hairline);
    border-top: 2px solid var(--color-rule-2);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-short) var(--ease-out),
                border-color var(--dur-short) var(--ease-out);
}

.repartition__item:hover { background: var(--color-surface-hover); }

.repartition__item.is-active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
}

.repartition__item--ok { border-top-color: var(--color-ok); }
.repartition__item--warn { border-top-color: var(--color-warn); }
.repartition__item--danger { border-top-color: var(--color-danger); }
.repartition__item--neutre { border-top-color: var(--color-rule-2); }

.repartition__label {
    color: var(--color-ink-4);
    font-size: var(--text-2xs);
}

.repartition__nombre {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.1;
}

.repartition__montant {
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

/* « est. » — marque un montant ESTIME depuis le forfait, pas un realise.
   Melanger les deux sans le dire serait malhonnete. */
.repartition__estime {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
    font-style: italic;
}

/* Classement des collaborateurs — vue cabinet. */
.classement { list-style: none; margin: 0; padding: 0; }

.classement__ligne {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-bottom: var(--rule-hairline);
}

.classement__ligne:last-child { border-bottom: 0; }

.classement__rang {
    width: 1.5rem;
    color: var(--color-ink-4);
    font-size: var(--text-sm);
    text-align: right;
}

.classement__corps { flex: 1; min-width: 0; }

.classement__nom {
    display: block;
    font-size: var(--text-sm);
    margin-bottom: var(--space-3xs);
}

.classement__valeur { font-size: var(--text-sm); white-space: nowrap; }

/* Graphique de CA rendu par pilotage-graphiques.js. */
.graphique { min-height: 240px; }

.graphique__attente,
.graphique__note {
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

.graphique__donnees { margin-top: var(--space-md); }

.graphique__donnees > summary {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-ink-3);
    margin-bottom: var(--space-xs);
}

/* Ligne critique : creance de plus de 90 jours, dossier non facture depuis
   plus de 60 jours. Fond teinte plutot que texte rouge : la couleur seule ne
   suffit pas, mais un texte rouge sur toute une ligne devient illisible. */
.table-app tr.is-critique > td,
.table-app tr.is-critique > th {
    background: var(--color-danger-soft);
}

/* En-tete d'un portefeuille : photo + identite. */
.portefeuille__identite {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.portefeuille__identite h1 { margin: 0; }

/* Grilles de panneaux des ecrans d'analyse. */
.grid-deux,
.grid-trois {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.grid-deux { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-trois { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Erreurs de saisie des lignes de demande. `Form->error()` ne sait pas rendre
   un tableau d'erreurs imbriquees : la vue les aplatit et les rend ici. */
.ticket-lignes-erreurs {
    margin: 0;
    padding-left: var(--space-sm);
    color: var(--color-danger);
    font-size: var(--text-sm);
}

/* --- BLOC 13 mon equipe ---------------------------------------------------
   Ecrans du chef de mission : jauge de charge, navigation de semaine,
   formulaire de reassignation. Le CONTRAT interdit tout attribut `style`
   dans une vue : la largeur de la jauge passe donc par une classe de
   palier de 5 %, generee ici une fois pour toutes.                          */

.equipe-jauge {
    display: inline-block;
    width: 96px;
    height: 6px;
    vertical-align: middle;
    border-radius: var(--radius-xs);
    background: var(--color-neutral-soft);
    overflow: hidden;
}

.equipe-jauge__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-xs);
    background: var(--color-accent);
}

.equipe-jauge__fill--warn { background: var(--color-warn); }
.equipe-jauge__fill--danger { background: var(--color-danger); }

.equipe-jauge__valeur {
    margin-left: var(--space-2xs);
    font-size: var(--text-sm);
}

/* Paliers de largeur. `--max` couvre tout ce qui depasse 100 % : une barre qui
   deborderait silencieusement ne signalerait pas la surcharge. */
.equipe-jauge__fill--0 { width: 0%; }
.equipe-jauge__fill--5 { width: 5%; }
.equipe-jauge__fill--10 { width: 10%; }
.equipe-jauge__fill--15 { width: 15%; }
.equipe-jauge__fill--20 { width: 20%; }
.equipe-jauge__fill--25 { width: 25%; }
.equipe-jauge__fill--30 { width: 30%; }
.equipe-jauge__fill--35 { width: 35%; }
.equipe-jauge__fill--40 { width: 40%; }
.equipe-jauge__fill--45 { width: 45%; }
.equipe-jauge__fill--50 { width: 50%; }
.equipe-jauge__fill--55 { width: 55%; }
.equipe-jauge__fill--60 { width: 60%; }
.equipe-jauge__fill--65 { width: 65%; }
.equipe-jauge__fill--70 { width: 70%; }
.equipe-jauge__fill--75 { width: 75%; }
.equipe-jauge__fill--80 { width: 80%; }
.equipe-jauge__fill--85 { width: 85%; }
.equipe-jauge__fill--90 { width: 90%; }
.equipe-jauge__fill--95 { width: 95%; }
.equipe-jauge__fill--max { width: 100%; }

/* Ligne de collaborateur en surcharge : teinte de fond, pas de bordure
   laterale epaisse — motif date, et le tableau en compte deja assez. */
.ligne-surcharge td { background: var(--color-danger-soft); }

/* Navigation d'une semaine a l'autre, dans l'en-tete de page. */
.equipe-semaine {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

.equipe-semaine__libelle {
    padding: 0 var(--space-xs);
    white-space: nowrap;
}

/* Formulaire de reassignation : une ligne sur grand ecran, empile sur mobile. */
.equipe-reassignation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm);
    align-items: end;
}

.equipe-reassignation .input { margin-bottom: 0; }

.equipe-note { margin: var(--space-sm) var(--space-md); }

/* -----------------------------------------------------------------
   BLOC 8 cockpit — cockpit collaborateur, taches, agenda
   -----------------------------------------------------------------
   Aucun `<style>` ni attribut `style` dans les vues du bloc : tout le
   CSS custom vit ici, en fin de fichier, comme l'exige le CONTRAT §7.
   Les valeurs viennent des tokens du theme (`webroot/theme/css/tokens.css`) :
   ne jamais coder une couleur en dur, elle ne suivrait pas le theme sombre.
   ----------------------------------------------------------------- */

/* --- Liste d'agenda : creneau a gauche, contenu a droite --- */
.agenda-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.agenda-liste__item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-2xs);
    border-bottom: var(--rule-hairline);
    /* Filet de couleur du TYPE d'evenement, en bordure gauche fine : la
       couleur seule ne porte pas l'information, le badge la redit en toutes
       lettres juste a cote. */
    border-left: 2px solid var(--color-rule-2);
}

.agenda-liste__item:last-child { border-bottom: 0; }

.agenda-liste__item--accent { border-left-color: var(--color-accent); }
.agenda-liste__item--ok { border-left-color: var(--color-ok); }
.agenda-liste__item--warn { border-left-color: var(--color-warn); }
.agenda-liste__item--danger { border-left-color: var(--color-danger); }

.agenda-liste__creneau {
    display: flex;
    flex-direction: column;
    min-width: 6.5rem;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

.agenda-liste__jour {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
}

.agenda-liste__corps { min-width: 0; flex: 1; }

.agenda-liste__titre {
    margin: 0;
    font-weight: 500;
}

.agenda-liste__meta {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
}

/* --- Liste de taches du cockpit : validation en un clic a gauche --- */
.taches-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.taches-liste__item {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-2xs) 0;
    border-bottom: var(--rule-hairline);
}

.taches-liste__item:last-child { border-bottom: 0; }

/* Fond teinte plutot que texte rouge : un texte rouge sur toute une ligne
   devient illisible, et la couleur seule ne suffit pas — l'echeance est aussi
   ecrite en toutes lettres juste a droite. */
.taches-liste__item--retard { background: var(--color-danger-soft); }

.taches-liste__valider { flex: 0 0 auto; }

.taches-liste__corps { flex: 1; min-width: 0; }

.taches-liste__titre { margin: 0; font-weight: 500; }

.taches-liste__meta {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
}

.taches-liste__echeance {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    white-space: nowrap;
}

/* --- Grille « Ma semaine » : sept colonnes, une par jour --- */
.semaine-grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    gap: var(--space-2xs);
    overflow-x: auto;
}

.semaine-jour {
    border: var(--rule-hairline);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    transition: background var(--dur-short) var(--ease-out),
                box-shadow var(--dur-short) var(--ease-out);
}

.semaine-jour--aujourdhui { box-shadow: inset 0 0 0 2px var(--color-accent-soft-2); }

/* Cible de depot survolee : le retour visuel est indispensable, sinon le
   geste se termine au hasard. */
.semaine-jour.est-survole { background: var(--color-accent-soft); }

.semaine-jour__tete {
    padding: var(--space-2xs);
    border-bottom: var(--rule-hairline);
}

.semaine-jour__corps {
    padding: var(--space-3xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    flex: 1;
}

.semaine-jour__vide {
    margin: auto;
    font-size: var(--text-xs);
}

.semaine-vivier {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    max-height: 420px;
    overflow-y: auto;
}

.semaine-bloc {
    border-radius: var(--radius-xs);
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--text-xs);
    background: var(--color-paper-2);
    border-left: 3px solid var(--color-rule-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.semaine-bloc--accent { border-left-color: var(--color-accent); }
.semaine-bloc--ok { border-left-color: var(--color-ok); }
.semaine-bloc--warn { border-left-color: var(--color-warn); }
.semaine-bloc--danger { border-left-color: var(--color-danger); }

.semaine-bloc--tache {
    background: var(--color-surface);
    border: var(--rule-hairline);
    border-left: 3px solid var(--color-accent-soft-2);
    cursor: grab;
}

.semaine-bloc.est-saisi { opacity: 0.45; cursor: grabbing; }

.semaine-bloc__creneau {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
}

.semaine-bloc__titre { font-weight: 500; }

.semaine-bloc__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    color: var(--color-ink-3);
    font-size: var(--text-2xs);
}

/* --- Kanban : une colonne par statut --- */
.kanban {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-sm);
    align-items: start;
}

.kanban__colonne {
    border: var(--rule-hairline);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    transition: background var(--dur-short) var(--ease-out);
}

.kanban__colonne.est-survole { background: var(--color-accent-soft); }

.kanban__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: var(--rule-hairline);
}

.kanban__compteur {
    font-size: var(--text-xs);
    color: var(--color-ink-3);
}

.kanban__corps {
    padding: var(--space-2xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
}

.kanban__carte {
    background: var(--color-surface);
    border: var(--rule-hairline);
    border-radius: var(--radius-sm);
    padding: var(--space-2xs);
    cursor: grab;
    box-shadow: var(--shadow-lift);
}

.kanban__carte--retard { border-left: 3px solid var(--color-danger); }

.kanban__carte.est-saisi { opacity: 0.45; cursor: grabbing; }

.kanban__titre { margin: 0 0 var(--space-3xs); font-weight: 500; font-size: var(--text-sm); }

.kanban__meta,
.kanban__pied {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-2xs);
    color: var(--color-ink-3);
}

.kanban__pied { margin-top: var(--space-3xs); justify-content: space-between; }

.kanban__vide {
    margin: auto;
    font-size: var(--text-xs);
}

/* --- Planning et calendrier : grille mensuelle de sept colonnes --- */
.planning-grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--color-rule);
    border: var(--rule-hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.planning-grille__entete {
    background: var(--color-paper-2);
    padding: var(--space-3xs) var(--space-2xs);
    text-align: center;
}

.planning-jour {
    background: var(--color-surface);
    min-height: 96px;
    padding: var(--space-3xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Les jours de debordement restent visibles mais en retrait : les masquer
   casserait l'alignement des colonnes sur les jours de la semaine. */
.planning-jour--hors-mois { background: var(--color-paper-2); opacity: 0.55; }

.planning-jour--aujourdhui { box-shadow: inset 0 0 0 2px var(--color-accent-soft-2); }

.planning-jour__numero {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
}

.planning-tache {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-2xs);
    padding: 1px var(--space-3xs);
    border-radius: var(--radius-xs);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    text-decoration: none;
}

.planning-tache:hover { background: var(--color-surface-hover); }

.planning-tache--retard { background: var(--color-danger-soft); }

.planning-tache__titre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-tache__pastille {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: var(--color-rule-2);
}

.planning-tache__pastille--accent { background: var(--color-accent); }
.planning-tache__pastille--ok { background: var(--color-ok); }
.planning-tache__pastille--warn { background: var(--color-warn); }
.planning-tache__pastille--danger { background: var(--color-danger); }

/* --- Aide en pied de titre de panneau --- */
.panel__aide {
    margin: 0;
    font-size: var(--text-xs);
}

/* --- Barre d'actions de formulaire du bloc --- */
.form-tache .form-actions,
.form-evenement .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2xs);
}

/* =====================================================================
   BLOC 10 — IMPORTS ET REPRISE DE DONNEES

   Trois besoins seulement : la liste des colonnes attendues sur l'ecran de
   depot, le bloc de correction qui s'ouvre sous une ligne en anomalie, et
   l'etiquette « obligatoire ». Tout le reste reutilise le socle UI.
   ===================================================================== */

.liste-colonnes {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.liste-colonnes li {
    border-bottom: 1px solid var(--bordure, rgba(128, 128, 128, .18));
    padding: .4rem 0;
}

.liste-colonnes li:last-child {
    border-bottom: 0;
}

.liste-colonnes code {
    font-weight: 600;
}

.tag--requis {
    background: var(--warn-fond, rgba(217, 119, 6, .12));
    color: var(--warn, #b45309);
    margin-left: .35rem;
}

.import-colonnes__vide {
    color: var(--texte-faible, #6b7280);
    margin: 0;
}

/* Le formulaire de correction est une ligne de tableau depliee : le fond
   legerement teinte evite de le confondre avec la ligne au-dessus, que le
   comptable est justement en train de comparer. */
.ligne-correction > td {
    background: var(--fond-subtil, rgba(128, 128, 128, .05));
}

.form-correction .action-bar {
    margin-bottom: 0;
}

/* =====================================================================
   BLOC 14 — DIRECTION

   Quatre composants, et rien de plus. Tout le reste reutilise le socle :
   `kpi-bar`, `alert-strip`, `table-app`, `panel`, `chart__*`, `equipe-jauge`.
   Un ecran de direction qui inventerait ses propres cartouches finirait par
   se distinguer visuellement du reste de l'application sans raison.
   ===================================================================== */

/* ---------- Grille d'alertes ----------
   Des tuiles compactes, pas des cartes a icone : la grille de 3-4 tuiles
   iconographiees est le motif le plus reconnaissable des maquettes generees,
   et le socle l'evite deja partout ailleurs. */
.alertes-direction {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-xs);
}

.alerte-tuile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-hairline);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-short) var(--ease-out),
                background var(--dur-short) var(--ease-out);
}

a.alerte-tuile:hover { background: var(--color-surface-hover); }

.alerte-tuile__nombre {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.1;
}

.alerte-tuile__libelle { font-size: var(--text-sm); }
.alerte-tuile__meta { font-size: var(--text-xs); }

/* Un compteur en alerte se signale par sa VALEUR, pas par un fond rouge :
   six tuiles rouges cote a cote ne hierarchisent plus rien. Seul le chiffre
   prend la couleur d'alerte, et le bandeau `alert-strip` au-dessus porte
   l'urgence. */
.alerte-tuile--danger { border-color: var(--color-danger); }
.alerte-tuile--danger .alerte-tuile__nombre { color: var(--color-danger); }
.alerte-tuile--ok .alerte-tuile__nombre { color: var(--color-ink-4); }

/* Source indisponible : le tiret doit se lire « je ne sais pas », pas
   « zero ». Le pointille dit que la tuile n'est pas cliquable. */
.alerte-tuile--indisponible {
    border-style: dashed;
    cursor: not-allowed;
}

.alerte-tuile--indisponible .alerte-tuile__nombre { color: var(--color-ink-4); }

.direction-audit {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ---------- Matriciel chef x collaborateurs ---------- */
.matriciel-groupe { border-bottom: var(--rule-hairline); }
.matriciel-groupe:last-child { border-bottom: 0; }

.matriciel-groupe__tete {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    list-style: none;
}

.matriciel-groupe__tete::-webkit-details-marker { display: none; }

/* Le chevron est dessine ici plutot que laisse au marqueur natif, dont le
   rendu differe d'un navigateur a l'autre. */
.matriciel-groupe__tete::before {
    content: "\203A";
    display: inline-block;
    width: 1ch;
    color: var(--color-ink-4);
    transition: transform var(--dur-short) var(--ease-out);
}

.matriciel-groupe[open] > .matriciel-groupe__tete::before { transform: rotate(90deg); }
.matriciel-groupe__tete:hover { background: var(--color-surface-hover); }

.matriciel-groupe__chef { font-weight: 600; }
.matriciel-groupe__equipe { font-size: var(--text-sm); }

.matriciel-groupe__chiffres {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    margin-left: auto;
    font-size: var(--text-sm);
}

/* La ligne d'ecart n'est pas une anomalie a corriger : c'est le CA qu'aucun
   chef ne porte. Elle est mise en evidence pour qu'on ne la lise pas comme un
   arrondi, sans etre traitee comme une erreur. */
.matriciel-reconciliation__ecart td,
.matriciel-reconciliation__ecart th { background: var(--color-warn-soft); }
.matriciel-reconciliation__total { font-weight: 600; }

/* ---------- Widgets ---------- */
.direction-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.repartition {
    list-style: none;
    margin: 0;
    padding: 0;
}

.repartition__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs) 0;
    border-bottom: var(--rule-hairline);
}

.repartition__item:last-child { border-bottom: 0; }
.repartition__item--reste { font-style: italic; }
.repartition__nom { min-width: 0; font-size: var(--text-sm); }
.repartition__montant { white-space: nowrap; }

.occupation-total { margin: 0 0 var(--space-xs); }

.occupation-total .num {
    font-size: var(--text-xl);
    font-weight: 600;
}

/* ---------- Graphique 24 mois ---------- */

/* Bascule facture / encaisse. Un segmented control, pas des onglets : ce
   n'est pas une navigation, c'est la meme serie vue sous deux bases. */
.direction-bascule {
    display: inline-flex;
    gap: 0;
}

.direction-bascule .btn { border-radius: 0; }
.direction-bascule .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.direction-bascule .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.direction-bascule .btn.is-active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Courbes cumulees. `--n1` est pointillee et grisee : c'est une reference,
   pas une seconde mesure a comparer trait pour trait. */
.chart__cumul {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.75;
}

.chart__cumul--n1 {
    stroke: var(--color-ink-4);
    stroke-width: 1.25;
    stroke-dasharray: 3 3;
}

.graphique__donnees { margin-top: var(--space-sm); }
.graphique__donnees summary { cursor: pointer; font-size: var(--text-sm); }

/* Petit ecran : les tableaux longs du matriciel defilent DANS leur enveloppe
   (`table-wrap` du socle), jamais en poussant la page. Les chiffres du
   sommaire de groupe repassent sous le nom du chef plutot que de le tronquer. */
@media (max-width: 640px) {
    .matriciel-groupe__chiffres {
        margin-left: 0;
        width: 100%;
    }

    .repartition__item {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* =====================================================================
   TACHES — BASCULE DE VUES, APERCU, SELECTEUR DE STATUT
   ===================================================================== */

/* ---------- Bascule de vues (liste / kanban / planning) ----------
   Un segmented control, sur le meme principe que `.direction-bascule` : les
   trois vues montrent le meme jeu de taches, ce ne sont pas trois pages. La
   vue courante se lit sur le bouton, pas seulement dans le fil d'Ariane. */
.vues-bascule {
    display: inline-flex;
    isolation: isolate;
}

.vues-bascule .btn { border-radius: 0; }
.vues-bascule .btn + .btn { margin-left: -1px; }
.vues-bascule .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.vues-bascule .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Le bouton actif passe devant ses voisins : sans ce `z-index`, la bordure
   partagee du voisin recouvre la sienne et l'etat actif se lit mal. */
.vues-bascule .btn.is-active {
    z-index: 1;
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

@media (max-width: 640px) {
    .vues-bascule__libelle { display: none; }
}

/* ---------- Planning : habillage de FullCalendar ----------
   FullCalendar arrive avec sa propre identite visuelle — bleu, boutons
   Bootstrap 4, bordures grises. On la remplace par les tokens du theme plutot
   que d'accepter un troisieme vocabulaire visuel dans le meme module.
   L'essentiel passe par les variables `--fc-*` que la bibliotheque expose ;
   on ne surcharge ses selecteurs que la ou elle n'offre pas de variable. */
.planning-calendrier {
    --fc-border-color: var(--color-rule);
    --fc-page-bg-color: var(--color-surface);
    --fc-neutral-bg-color: var(--color-paper-2);
    --fc-today-bg-color: var(--color-accent-soft);
    --fc-event-bg-color: transparent;
    --fc-event-border-color: transparent;
    --fc-event-text-color: var(--color-ink);
    --fc-list-event-hover-bg-color: var(--color-surface-hover);
    --fc-small-font-size: var(--text-xs);
    font-family: var(--font-body);
}

.planning-calendrier .fc {
    font-size: var(--text-sm);
}

/* En-tetes de colonnes : le meme mono capitalise que `.label-mono`, employe
   par toutes les autres grilles du CRM. */
.planning-calendrier .fc-col-header-cell-cushion {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--color-ink-4);
    font-weight: 400;
    padding: var(--space-2xs) var(--space-3xs);
    text-decoration: none;
}

.planning-calendrier .fc-toolbar-title {
    font-size: var(--text-lg);
    font-weight: 600;
    text-transform: capitalize;
}

.planning-calendrier .fc-daygrid-day-number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-ink-3);
    text-decoration: none;
    padding: var(--space-3xs) var(--space-2xs);
}

.planning-calendrier .fc-day-today .fc-daygrid-day-number {
    color: var(--color-accent);
    font-weight: 600;
}

.planning-calendrier .fc-day-other .fc-daygrid-day-number { color: var(--color-ink-4); }

/* ---- Boutons de la barre : ceux du theme, pas ceux de FullCalendar ---- */
.planning-calendrier .fc .fc-button {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    color: var(--color-ink-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-3xs) var(--space-xs);
    box-shadow: none;
    text-transform: none;
}
.planning-calendrier .fc .fc-button:hover {
    background: var(--color-surface-hover);
    color: var(--color-ink);
}
.planning-calendrier .fc .fc-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    box-shadow: none;
}
.planning-calendrier .fc .fc-button:disabled { opacity: 0.4; }

/* L'echelle courante se lit sur le bouton enfonce — meme traitement que
   `.vues-bascule .is-active`, pour que les deux bascules de l'ecran se
   ressemblent. */
.planning-calendrier .fc .fc-button-active,
.planning-calendrier .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

.planning-calendrier .fc .fc-toolbar { gap: var(--space-xs); flex-wrap: wrap; }

/* ---- Une echeance dans la grille ---- */
.planning-calendrier .fc-daygrid-event,
.planning-calendrier .fc-list-event {
    cursor: pointer;
}

.planning-calendrier .fc-daygrid-event {
    border-radius: var(--radius-sm);
    padding: 1px var(--space-3xs);
    margin-top: 1px;
    background: var(--color-paper-2);
}
.planning-calendrier .fc-daygrid-event:hover { background: var(--color-surface-hover); }

/* Le retard se signale par un fond teinte, jamais par la seule couleur du
   texte : une echeance depassee doit se voir en balayant le mois. */
.planning-calendrier .fc-tache--retard.fc-daygrid-event { background: var(--color-danger-soft); }
.planning-calendrier .fc-tache--retard .fc-tache__titre { color: var(--color-danger); }

.fc-tache {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    min-width: 0;
    width: 100%;
}

.fc-tache__titre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-tache__dossier { margin-left: auto; padding-left: var(--space-xs); }

.planning-calendrier .fc-daygrid-more-link {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
}

/* ---- Vue jour : une liste, pas une grille horaire ----
   Une echeance est une date sans heure ; la colonne d'heures de FullCalendar
   n'aurait rien a y afficher. */
.planning-calendrier .fc-list { border-color: var(--color-rule); }
.planning-calendrier .fc-list-day-cushion { background: var(--color-paper-2); }
.planning-calendrier .fc-list-day-text,
.planning-calendrier .fc-list-day-side-text {
    text-decoration: none;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}
.planning-calendrier .fc-list-event-time,
.planning-calendrier .fc-list-event-dot { display: none; }
.planning-calendrier .fc-list-empty { background: transparent; color: var(--color-ink-4); }

/* ---------- Selecteur de statut de la liste ---------- */
.statut-declencheur {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
}
.statut-declencheur:hover .statut-declencheur__chevron { opacity: 1; }
.statut-declencheur.est-en-cours { opacity: 0.5; pointer-events: none; }

/* Le chevron ne se montre qu'au survol : affiche en permanence sur chaque
   ligne, il ferait une colonne de fleches plus visible que les statuts. */
.statut-declencheur__chevron {
    font-size: var(--text-2xs);
    color: var(--color-ink-4);
    opacity: 0;
    transition: opacity var(--dur-short) var(--ease-out);
}

.statut-popover {
    position: absolute;
    z-index: var(--z-modal);
    min-width: 190px;
    padding: var(--space-3xs);
    background: var(--color-surface);
    border: var(--rule-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

.statut-popover__option {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    width: 100%;
    padding: var(--space-3xs) var(--space-2xs);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.statut-popover__option:hover { background: var(--color-surface-hover); }

.statut-popover__coche {
    margin-left: auto;
    color: var(--color-accent);
    visibility: hidden;
}
.statut-popover__option.est-choisi .statut-popover__coche { visibility: visible; }

/* ---------- Fenetre d'apercu d'une tache ---------- */
.apercu {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    padding: clamp(2rem, 8vh, 6rem) var(--space-sm) var(--space-sm);
    justify-content: center;
    align-items: flex-start;
}
.apercu.est-ouvert { display: flex; }

.apercu__fond {
    position: fixed;
    inset: 0;
    background: oklch(24% 0.02 258 / 0.4);
    border: 0;
    padding: 0;
}
[data-bs-theme="dark"] .apercu__fond { background: oklch(8% 0.01 260 / 0.62); }

.apercu__panneau {
    position: relative;
    width: min(560px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: var(--rule-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
    animation: apercu-in var(--dur-mid) var(--ease-out);
}
@keyframes apercu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.apercu__tete {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-bottom: var(--rule-hairline);
}
.apercu__titre-bloc { flex: 1; min-width: 0; }
.apercu__titre {
    margin: var(--space-3xs) 0 0;
    font-size: var(--text-lg);
    line-height: 1.3;
}
.apercu__sous-titre {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

.apercu__corps {
    padding: var(--space-sm);
    overflow-y: auto;
}

/* Deux colonnes de faits : un apercu se PARCOURT du regard, une liste
   verticale de huit lignes se lit — ce n'est pas le meme geste. */
.apercu__faits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-xs);
    margin: 0;
}
.apercu__fait dt {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--color-ink-4);
    font-weight: 400;
}
.apercu__fait dd {
    margin: var(--space-3xs) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    flex-wrap: wrap;
}

.apercu__description {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: var(--rule-hairline);
}
.apercu__description p:last-child { margin: 0; font-size: var(--text-sm); }

.apercu__note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.apercu__chargement { padding: var(--space-lg); text-align: center; }

.apercu__pied {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    border-top: var(--rule-hairline);
    background: var(--color-paper-2);
}
.apercu__pied-espace { flex: 1; }
.apercu__pied form { margin: 0; }

/* Le defilement de la page est bloque tant que l'apercu est ouvert : sans
   cela, la molette fait defiler la liste DERRIERE la fenetre. */
body.a-fenetre-ouverte { overflow: hidden; }

/* ---------- Oeil d'apercu des cartes kanban ---------- */
.icon-btn--xs { --icon-btn-size: 26px; font-size: var(--text-xs); }

.kanban__titre {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3xs);
}
.kanban__titre a { flex: 1; min-width: 0; }

/* L'oeil n'apparait qu'au survol de la carte : quatre colonnes de cartes
   portant chacune une icone permanente auraient bruite le tableau. */
.kanban__oeil { opacity: 0; flex: 0 0 auto; }
.kanban__carte:hover .kanban__oeil,
.kanban__oeil:focus-visible { opacity: 1; }