/*
 * Suivi des dossiers – réglages propres à l'application, par-dessus le thème NiceAdmin
 * (theme.min.css, qui porte déjà les couleurs et les polices de la charte : voir resources/theme).
 *
 * Toutes les couleurs viennent des variables du thème, redéfinies par la charte :
 *   --accent-color  bleu #013E5E        --heading-color  bleu foncé #063853
 *   --accent-red    rouge #DD204F       --heading-font   Poppins (titres), texte en Manrope
 * Le rouge reste un repère ponctuel : page active, étape en cours, sens du transfert.
 */

/* ---------- Généralités ---------- */

.lien-evitement {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem .75rem;
    color: var(--accent-color);
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.page-title,
.fauth-title {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--heading-color);
}

.page-title {
    font-size: 1.625rem;
    line-height: 1.2;
}

.page-header .breadcrumb {
    margin-bottom: .5rem;
}

.page-subtitle {
    margin: 0;
    color: var(--muted-color);
}

/* Liens du contenu : soulignés finement, le soulignement passe au rouge au survol. */
.main-content a:not([class]) {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.main-content a:not([class]):hover {
    text-decoration-color: var(--accent-red);
}

/* Dans les tableaux, trop de soulignements brouillent la lecture : seulement au survol. */
.main-content .table a:not([class]) {
    text-decoration: none;
}

.main-content .table a:not([class]):hover {
    text-decoration: underline;
    text-decoration-color: var(--accent-red);
}

/* Sens du transfert, d'une commune à l'autre. */
.fleche {
    flex: none;
    color: var(--accent-red);
}

/* Titres de carte précédés d'une icône discrète. */
.card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-title > .bi {
    font-size: 1rem;
    color: var(--muted-color);
}

.card-header .card-title + * {
    margin-inline-start: auto;
}

.badge {
    gap: .3rem;
    font-weight: 500;
}

/* Champ obligatoire : l'astérisque du thème passe du bloc au libellé ; inutile sur les pages
   de connexion, où tout est obligatoire. */
div.required::after {
    content: none;
}

.required > .form-label::after {
    content: ' *';
    color: var(--danger-color);
}

.fauth-form .required > .form-label::after {
    content: none;
}

/* Tri des colonnes : l'en-tête reste dans le style du thème, la flèche dit le sens. */
.lien-tri {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: inherit;
    text-decoration: none;
}

.lien-tri:hover,
.lien-tri.actif {
    color: var(--heading-color);
}

/* ---------- En-tête, menu latéral, compte ---------- */

.header-brand .logo-entete {
    display: block;
    width: auto;
    height: 40px;
}

/*
 * Sections du menu latéral, chacune sa couleur pour les repérer : l'intertitre (texte, pastille et
 * filet), les noms et les icônes de ses entrées, et le survol, l'entrée ouverte et l'entrée en cours (le thème
 * les dessine avec --accent-color, et la barre de l'entrée en cours avec --accent-red). Couleur
 * vive pour les icônes et les pastilles (3:1 au moins sur le blanc), « encre » plus foncée pour le
 * texte (4,5:1 au moins). Le Dashboard global, au-dessus des sections, garde les couleurs du thème.
 */
.sidebar-nav .section-prospects { --couleur-section: #7a5cc4; --couleur-section-encre: #5b3fa0; }
.sidebar-nav .section-licences { --couleur-section: #1b8f61; --couleur-section-encre: #157a52; }
.sidebar-nav .section-affaires { --couleur-section: #2d79b8; --couleur-section-encre: #1f5f96; }
.sidebar-nav .section-outils { --couleur-section: #c96512; --couleur-section-encre: #9a4a06; }
.sidebar-nav .section-administration { --couleur-section: #dd204f; --couleur-section-encre: #b0173d; }

.sidebar-nav .nav-section {
    --accent-color: var(--couleur-section-encre);
    --accent-red: var(--couleur-section);
}

.sidebar-nav .nav-heading.nav-section {
    color: var(--couleur-section-encre);
}

.sidebar-nav .nav-heading.nav-section::before {
    flex: none;
    width: 8px;
    height: 8px;
    content: "";
    background: var(--couleur-section);
    border-radius: 2px;
}

.sidebar-nav .nav-heading.nav-section::after {
    background: color-mix(in srgb, var(--couleur-section), transparent 55%);
}

.sidebar-nav .nav-item.nav-section > .nav-link .nav-icon,
.sidebar-nav .nav-item.nav-section > .nav-link.active .nav-icon {
    color: var(--couleur-section);
}

.sidebar-nav .nav-item.nav-section .nav-submenu .nav-dot {
    color: var(--couleur-section);
}

/* Noms des entrées et des sous-menus dans la couleur (foncée) de leur section. */
.sidebar-nav .nav-item.nav-section > .nav-link,
.sidebar-nav .nav-item.nav-section > .nav-link:hover,
.sidebar-nav .nav-item.nav-section > .nav-link:focus,
.sidebar-nav .nav-item.nav-section > .nav-link.active,
.sidebar-nav .nav-item.nav-section .nav-submenu > li > .nav-link,
.sidebar-nav .nav-item.nav-section .nav-submenu > li > .nav-link:hover,
.sidebar-nav .nav-item.nav-section .nav-submenu > li > .nav-link:focus,
.sidebar-nav .nav-item.nav-section .nav-submenu > li > .nav-link.active {
    color: var(--couleur-section-encre);
}

/* Entrée du menu dont la page est à venir : affichée sans lien, sans effet au survol. */
.sidebar-nav .nav-item > .nav-link.nav-link-a-venir,
.sidebar-nav .nav-item > .nav-link.nav-link-a-venir:hover,
.sidebar-nav .nav-submenu > li > .nav-link.nav-link-a-venir,
.sidebar-nav .nav-submenu > li > .nav-link.nav-link-a-venir:hover {
    cursor: default;
    color: var(--couleur-section-encre, var(--sidebar-color));
    background: transparent;
    border-left-color: transparent;
    opacity: .55;
}

.sidebar-nav .nav-submenu > li > .nav-link.nav-link-a-venir:hover .nav-dot {
    opacity: inherit;
    background: inherit;
}

/* Pastille aux initiales, à la place de la photo du thème. */
.avatar-initiales {
    display: inline-grid;
    flex: none;
    place-items: center;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: .02em;
    background: var(--accent-color);
    border-radius: var(--radius-full);
    user-select: none;
}

.user-avatar.avatar-initiales {
    width: 30px;
    height: 30px;
}

.user-menu-avatar.avatar-initiales {
    width: 36px;
    height: 36px;
    font-size: .8125rem;
}

/* Boutons de déconnexion (formulaires POST) : remis à l'apparence des liens du thème. */
.user-menu-logout,
.mobile-menu-item {
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.mobile-menu-compte {
    cursor: default;
}

/* Raccourcis du compte (calendrier, alertes, tâches) : icônes seules à gauche de la cloche, sur
   écran large ; sur mobile, dans le menu « Mon compte ». */
.header-raccourcis {
    display: none;
    align-items: center;
    gap: 6px;
}

@media (min-width: 768px) {
    .header-raccourcis {
        display: flex;
    }
}

.header-raccourcis .header-action {
    position: relative;
    text-decoration: none;
}

.header-raccourcis .header-action.actif {
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color), transparent 52%);
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.header-badge[hidden],
.user-menu-compte[hidden] {
    display: none;
}

/* Menu du compte : tâches en retard ou du jour, à droite de « Centre des tâches ». */
.user-menu-compte {
    margin-left: auto;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .35rem;
    border-radius: var(--radius-full);
    background: var(--danger-color);
    color: var(--contrast-color);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

/* Menu mobile, sur deux colonnes : la dernière entrée, seule sur sa ligne, en prend la largeur. */
.mobile-header-menu-content > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.mobile-header-menu-content > form .mobile-menu-item {
    width: 100%;
}

/* ---------- Cloche des notifications (en-tête de l'espace cabinet) ---------- */

/* Modèle « notification-dropdown » du thème, à des tailles lisibles. */
.cloche .notification-menu {
    width: min(92vw, 23.5rem);
    padding: 0;
    overflow: hidden;
}

.cloche .notification-header {
    align-items: center;
    padding: .875rem 1rem;
}

.cloche .notification-header h6 {
    font-size: .9375rem;
}

.cloche .notification-header span {
    font-size: .75rem;
}

.cloche .cloche-tout-lire {
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.cloche .notification-list {
    max-height: min(70vh, 26rem);
}

/* Une notification : le lien, et sa croix « Effacer » en haut à droite. */
.cloche .notification-ligne {
    position: relative;
}

.cloche .notification-ligne + .notification-ligne {
    border-top: 1px solid var(--border-color-light);
}

.cloche .notification-item {
    gap: .75rem;
    padding: .75rem 2.75rem .75rem 1rem;
    border-bottom: 0;
    border-radius: 0;
    color: inherit;
}

.cloche .notification-effacer {
    position: absolute;
    top: .5rem;
    right: .5rem;
    margin: 0;
}

.cloche .notification-effacer-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--light-color);
    font-size: .75rem;
}

.cloche .notification-effacer-bouton:hover,
.cloche .notification-effacer-bouton:focus-visible {
    background: color-mix(in srgb, var(--muted-color), transparent 88%);
    color: var(--heading-color);
}

.cloche .notification-effacer-bouton:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.cloche-suite {
    margin: 0;
    padding: .625rem 1rem;
    border-top: 1px solid var(--border-color-light);
    font-size: .75rem;
    color: var(--muted-color);
}

.cloche .notification-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
}

.cloche .notification-icon.danger {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color), transparent 88%);
}

/* Affaire à surveiller (orange) ou à relancer (rouge) : les couleurs du badge « Mise à jour ». */
.cloche .notification-icon.surveiller {
    color: #e07a0b;
    background: #fdecdc;
}

.cloche .notification-icon.relancer {
    color: #d6293e;
    background: #fde6e7;
}

.cloche .notification-item:has(.notification-icon.surveiller) .notification-title {
    color: #8f4306;
}

.cloche .notification-item:has(.notification-icon.relancer) .notification-title {
    color: #a12530;
}

.cloche .notification-icon.neutre {
    color: var(--muted-color);
    background: color-mix(in srgb, var(--muted-color), transparent 88%);
}

.cloche .notification-content {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.cloche .notification-title {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--heading-color);
}

/* Début du texte de la ligne : deux lignes au plus. */
.cloche .notification-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--default-color);
}

.cloche .notification-affaire {
    font-size: .75rem;
    color: var(--muted-color);
}

.cloche .notification-time {
    margin-top: 0;
    font-size: .75rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--light-color);
}

/* Téléphone : le menu sur toute la largeur de l'écran, sous l'en-tête, avec les marges de la page. */
@media (max-width: 767.98px) {
    .cloche .notification-menu.show {
        position: fixed !important;
        inset: calc(var(--header-height, 60px) + .25rem) .75rem auto .75rem !important;
        width: auto;
        transform: none !important;
    }
}

.cloche-vide {
    margin: 0;
    padding: 1.25rem 1rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted-color);
}

/* ---------- Espace client : pas de menu latéral ---------- */

.espace-client .header {
    grid-template-columns: auto auto;
    justify-content: space-between;
}

.espace-client .header-right {
    display: flex;
    align-items: center;
    gap: .875rem;
}

@media (min-width: 1200px) {
    .espace-client .main {
        margin-left: 0;
    }
}

.client-nom {
    font-weight: 500;
    color: var(--heading-color);
}

@media (max-width: 575.98px) {
    .client-nom {
        display: none;
    }

    .espace-client .header-brand .logo-entete {
        height: 34px;
    }
}

.btn-deconnexion {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.colonne-client {
    max-width: 52rem;
    margin: 0 auto;
}

/* ---------- Liste des affaires ---------- */

/* Sur un téléphone, « Nouvelle affaire » passe sous les onglets au lieu de déborder. */
.page-header-actions {
    flex-wrap: wrap;
}

/* Liste « Voir » d'un administrateur (tâches, calendrier, alertes d'un autre membre du cabinet) et
   bandeau de la page d'un autre membre. */
.membre-consulte {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    color: var(--muted-color);
}

.membre-consulte .form-select {
    width: auto;
    min-width: 13rem;
    max-width: 100%;
}

.membre-vu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    padding: .625rem 1rem;
}

.membre-vu .alert-link {
    margin-inline-start: auto;
}

.etats .nombre {
    margin-inline-start: .25rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* Tuiles de statut : le nombre d'affaires à chaque étape, cliquables pour filtrer. */
.tuiles-statuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
    margin-bottom: var(--spacing-lg);
}

.tuile-statut {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .875rem 1rem .8125rem;
    color: var(--default-color);
    text-decoration: none;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
}

/* Repère de couleur du statut, en haut de la tuile. */
.tuile-statut::before {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    content: '';
    background: var(--statut-point);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.tuile-statut:hover {
    color: var(--default-color);
    border-color: var(--statut-point);
}

.tuile-nombre {
    font-family: var(--heading-font);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--heading-color);
    font-variant-numeric: tabular-nums;
}

.tuile-libelle {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    line-height: 1.25;
    color: var(--muted-color);
}

.tuile-statut.choisie {
    background: var(--statut-fond);
    border-color: var(--statut-point);
}

.tuile-statut.choisie .tuile-libelle {
    font-weight: 500;
    color: var(--statut-texte);
}

.tuiles-statuts.avec-choix .tuile-statut:not(.choisie) {
    opacity: .55;
}

.tuiles-statuts.avec-choix .tuile-statut:not(.choisie):hover {
    opacity: 1;
}

.filtre-actif {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-inline-start: .375rem;
    font-size: .875rem;
    font-weight: 400;
}

.filtre-actif a {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--muted-color);
    border-radius: var(--radius-full);
}

.filtre-actif a:hover {
    color: var(--accent-red);
    background: var(--danger-color-light);
}

.filtre-commercial {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .875rem;
}

.filtre-commercial .form-select {
    width: auto;
    min-width: 11rem;
}

.table-affaires > tbody > tr > td {
    padding-top: .8125rem;
    padding-bottom: .8125rem;
}

.table-affaires .numero a {
    font-weight: 700;
    color: var(--accent-color);
    white-space: nowrap;
}

.table-affaires .licence {
    white-space: nowrap;
    color: var(--muted-color);
    font-size: .875rem;
}

.table-affaires .trajet {
    min-width: 9rem;
}

@media (min-width: 768px) {
    .table-affaires .trajet {
        min-width: 15rem;
    }
}

.table-affaires .trajet .fleche {
    margin: 0 .25rem;
}

.table-affaires .partie {
    line-height: 1.35;
}

/* Téléphone : colonnes resserrées pour que le statut tienne sans faire défiler le tableau. */
@media (max-width: 575.98px) {
    .table-affaires > :not(caption) > * > * {
        padding-inline: .5rem;
    }

    .table-affaires > :not(caption) > * > :first-child {
        padding-inline-start: .75rem;
    }

    .table-affaires .statut {
        padding: .2rem .5rem;
        font-size: .75rem;
    }

    .table-affaires .trajet {
        min-width: 7rem;
        font-size: .8125rem;
    }
}

/* Liste vide : icône, titre, conseil. */
.vide {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.vide > .bi {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .75rem;
    font-size: 1.5rem;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: var(--radius-full);
}

.vide-titre {
    margin: 0 0 .25rem;
    font-weight: 700;
    color: var(--heading-color);
}

.vide p:last-child {
    max-width: 30rem;
    margin-inline: auto;
}

/* ---------- Statuts : pastille de couleur et libellé ---------- */

.statut {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .625rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--statut-texte);
    white-space: nowrap;
    background: var(--statut-fond);
    border-radius: var(--radius-full);
}

.statut-point {
    flex: none;
    width: .5rem;
    height: .5rem;
    background: var(--statut-point);
    border-radius: var(--radius-full);
}

.statut-gris { --statut-texte: #4f5f6c; --statut-point: #8a99a5; --statut-fond: #edf1f4; }
.statut-azur { --statut-texte: #17628f; --statut-point: #2d8fcc; --statut-fond: #e2f0f9; }
.statut-jaune { --statut-texte: #7a5900; --statut-point: #e1a90a; --statut-fond: #fcf3d6; }
.statut-orange { --statut-texte: #974607; --statut-point: #e8740c; --statut-fond: #fdeadb; }
.statut-vert { --statut-texte: #17714b; --statut-point: #1f9d6a; --statut-fond: #ddf3e9; }
.statut-rouge { --statut-texte: #ad153b; --statut-point: #dd204f; --statut-fond: #fbe3e9; }
.statut-bleu { --statut-texte: #013e5e; --statut-point: #013e5e; --statut-fond: #e1ebf1; }
.statut-ardoise { --statut-texte: #2b3640; --statut-point: #2b3640; --statut-fond: #e3e7eb; }
.statut-violet { --statut-texte: #5a3d8a; --statut-point: #7d5bbf; --statut-fond: #eee8f8; }

/* Direct : départ et arrivée dans la même commune. */
.etiquette {
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    font-family: var(--default-font);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
    border-radius: var(--radius-sm);
}

.etiquette-creation {
    color: #7a5900;
    background: #fcf3d6;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #7a5900, transparent 75%);
}

.siret {
    font-size: .8125rem;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
}

.siret a {
    color: var(--default-color);
}

/* Interrupteur « en création », aligné sur le champ SIRET voisin. */
@media (min-width: 576px) {
    .en-creation {
        padding-top: 2.25rem;
    }
}

.etiquette-direct {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 75%);
}

/* ---------- Fiche affaire ---------- */

.fiche-titres {
    min-width: 0;
}

.trajet-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .625rem;
    margin-bottom: .625rem;
}

.trajet-titre .fleche {
    align-self: center;
    font-size: 1.375rem;
}

.trajet-titre .dep {
    font-family: var(--default-font);
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted-color);
}

.trajet-titre .etiquette {
    align-self: center;
}

.fiche-etat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.fiche-numero {
    font-weight: 500;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
}

.fiche-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
    color: var(--muted-color);
}

.fiche-meta .bi {
    margin-inline-end: .375rem;
    color: var(--light-color);
}

.fiche-meta strong {
    font-weight: 500;
    color: var(--default-color);
}

.fiche-meta + .frise-cadre {
    padding-top: 1.25rem;
    margin-top: 1.125rem;
    border-top: 1px solid var(--border-color-light);
}

.colonne-fiche {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Dans une pile de cartes, l'écart vient de la pile, pas de la marge des cartes. */
.colonne-fiche > .card,
.vstack > .card {
    margin-bottom: 0;
}

.card-body .nom {
    margin: 0 0 .125rem;
    font-weight: 700;
    color: var(--heading-color);
}

.coordonnees {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: .25rem .5rem;
    margin: .375rem 0 0;
}

.coordonnees dt {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-weight: 400;
    color: var(--muted-color);
}

.coordonnees dt .bi {
    font-size: .875rem;
}

.coordonnees dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.acces,
.etablissement {
    padding-top: .75rem;
    margin-top: .75rem;
    border-top: 1px solid var(--border-color-light);
}

.acces {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
}

/* Icône en retrait de la première ligne, le texte se renvoie dessous. */
.suivi,
.etat-acces {
    padding-inline-start: 1.25rem;
    margin: 0;
    font-size: .8125rem;
    text-indent: -1.25rem;
}

.suivi > .bi,
.etat-acces > .bi {
    display: inline-block;
    width: 1.25rem;
    text-indent: 0;
}

.suivi-oui {
    color: var(--accent-color);
}

.suivi-non,
.etat-aucun {
    color: var(--muted-color);
}

.etat-actif {
    color: var(--success-color);
}

.etat-codes_envoyes {
    color: var(--info-color);
}

.etat-codes_bloques,
.etat-desactive {
    color: var(--danger-color);
}

/* Menu « Espace client » d'une partie : titres de rubrique et lignes sur une seule ligne. */
.menu-espace-client .dropdown-header {
    font-size: .75rem;
    font-weight: 600;
}

.menu-espace-client .dropdown-item,
.menu-espace-client .dropdown-item-text,
.menu-prefecture .dropdown-item {
    white-space: nowrap;
}

.acces .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.etablissement .text-danger {
    display: flex;
    align-items: baseline;
    gap: .375rem;
}

/* Devis et factures, puis documents de l'acquéreur, dans sa carte (elements devis_factures/liste
   et devis_factures/documents). */
.devis-factures {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color-light);
}

.devis-factures-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .625rem;
}

.liste-documents {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.document-ligne {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .625rem .75rem;
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
}

.document-ligne:target {
    border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

/* Filet rouge dans la bordure, sans décaler le contenu de la ligne. */
.document-ligne.document-retard {
    box-shadow: inset 3px 0 0 var(--danger-color);
}

.document-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.document-infos {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: .125rem;
}

.document-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .5rem;
}

.document-titre {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.document-montant {
    font-size: .875rem;
    color: var(--default-color);
    white-space: nowrap;
}

.document-etat,
.document-relance,
.document-reserve {
    font-size: .8125rem;
    color: var(--muted-color);
}

/* Fichier actuel d'un document, dans sa fenêtre de modification. */
.fichier-actuel {
    margin: 0 0 .75rem;
    overflow-wrap: anywhere;
}

/* Document que l'acquéreur ne voit pas dans son espace. */
.document-reserve {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-weight: 500;
    color: var(--warning-color);
}

.document-etat.etat-reglee {
    color: var(--success-color);
}

.document-etat.etat-a-regler {
    color: var(--warning-color);
}

.document-etat.etat-retard {
    font-weight: 600;
    color: var(--danger-color);
}

/* Relance d'une facture ou de la préfecture : destinataire, pièce jointe ou relances déjà faites,
   puis l'objet et le message. */
.relance-entete {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color), transparent 96%);
    font-size: .875rem;
}

.relance-entete dt {
    font-weight: 400;
    color: var(--muted-color);
}

.relance-entete dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.relance-message {
    font-family: var(--default-font);
    line-height: 1.55;
}

.relance-destinataires {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Relance de la préfecture : la ligne pour les clients, estompée quand la case est décochée. */
.relance-clients {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: .875rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.relance-clients .form-text {
    margin: 0;
}

.relance-clients:has(.form-check-input:not(:checked)) textarea {
    opacity: .5;
}

/* Menu « Espace client » de l'acquéreur : une ligne d'aide sous « Envoyer l'email de fin de dossier ». */
.menu-espace-client .dropdown-item[data-fin-dossier] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}

.menu-espace-client .menu-aide {
    grid-column: 2;
    font-size: .75rem;
    color: var(--muted-color);
}

/* Carte Acquéreur : dossier terminé, l'email de fin de dossier à envoyer avant la clôture. */
.fin-dossier-bandeau {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    align-items: flex-start;
    padding: .75rem .875rem;
    margin: 0 0 1rem;
    background: color-mix(in srgb, var(--success-color), transparent 90%);
    border: 1px solid color-mix(in srgb, var(--success-color), transparent 70%);
    border-radius: 4px;
}

.fin-dossier-bandeau p {
    display: flex;
    gap: .5rem;
    margin: 0;
    font-size: .8125rem;
    color: var(--default-color);
}

.fin-dossier-bandeau p > .bi {
    color: var(--success-color);
}

.etat-fin-dossier {
    color: var(--success-color);
}

/* Fenêtre de l'email de fin de dossier : ce qui est prêt, ce qui manque. */
.fin-dossier-points {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: 0 0 1rem;
    font-size: .875rem;
}

.fin-dossier-points li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
}

.fin-dossier-points .point-ok > .bi {
    color: var(--success-color);
}

.fin-dossier-points .point-attention > .bi {
    color: var(--warning-color);
}

.fin-dossier-points .point-bloquant {
    color: var(--danger-color);
}

.fin-dossier-points .point-info > .bi {
    color: var(--info-color);
}

/* Paramètres : fiche pratique de l'acquéreur. */
.fiche-pratique-actuelle .fichier-actuel {
    margin: 0;
}

.fiche-pratique-absente {
    font-size: .875rem;
    color: var(--warning-color);
}

/* Menu « Actions » de la carte Préfecture : une ligne d'aide sous l'action. */
.menu-prefecture .dropdown-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}

.menu-prefecture .menu-aide {
    grid-column: 2;
    font-size: .75rem;
    color: var(--muted-color);
}

.menu-prefecture .dropdown-item.disabled .menu-aide {
    color: inherit;
}

/* Carte Préfecture : dernière relance, sous les contacts. */
.relance-prefecture-etat {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin: .875rem 0 0;
    font-size: .875rem;
    color: var(--muted-color);
}

.sous-titre-carte {
    margin: 1.25rem 0 .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--heading-color);
}

.adresse-postale {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
}

.contacts-prefecture {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.contacts-prefecture li + li {
    padding-top: .75rem;
    border-top: 1px dashed var(--border-color);
}

/* Observations générales d'une préfecture : texte mis en forme dans l'éditeur. */
.observations-prefecture {
    overflow-wrap: anywhere;
}

.observations-prefecture p {
    margin: 0 0 .5rem;
}

.observations-prefecture > :last-child {
    margin-bottom: 0;
}

/* Cartes des mairies (fiche d'une affaire) : coordonnées de l'annuaire, horaires, source. */
.carte-mairie .adresse-postale + .coordonnees {
    margin-top: .75rem;
}

.horaires-mairie {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: .875rem;
}

.horaires-mairie li + li {
    margin-top: .125rem;
}

.source-mairie {
    margin: 1rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.source-mairie .bi {
    margin-right: .25rem;
}

.refus-licences {
    margin-bottom: 1rem;
}

/* Règlementations › Mairies : arrivée et départ de licences d'une commune. */
.etat-licences {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.etat-licences.etat-acceptee {
    color: #23974f;
}

.etat-licences.etat-refusee {
    color: var(--danger-color, #dd204f);
}

.specificites {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.specificites li {
    display: flex;
    gap: .5rem;
}

.specificites .bi {
    flex: none;
    color: var(--muted-color);
}

.aide {
    text-decoration: underline dotted;
    text-underline-offset: .2em;
    cursor: help;
}

/* ---------- Frise d'avancement ---------- */

/*
 * La frise suit la place dont elle dispose (requête de conteneur) : de haut en bas quand elle est
 * étroite (téléphone, colonne d'une carte), sur une ligne à partir de 760 px de large.
 */
.frise-cadre {
    container: frise / inline-size;
}

.frise {
    --frise-repere: 1.875rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    margin: 0;
    list-style: none;
}

.frise li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-height: var(--frise-repere);
    padding: .3rem 0 .875rem calc(var(--frise-repere) + .75rem);
    font-size: .875rem;
    line-height: 1.35;
}

.frise li:last-child {
    padding-bottom: 0;
}

/* Trait vers l'étape suivante, plein une fois l'étape faite : vertical, d'un repère au suivant. */
.frise li:not(:last-child)::before {
    position: absolute;
    top: calc(var(--frise-repere) / 2);
    left: calc(var(--frise-repere) / 2 - 1px);
    width: 2px;
    height: 100%;
    content: '';
    background: var(--border-color);
}

.frise li.faite:not(:last-child)::before {
    background: var(--accent-color);
}

.frise .repere {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: var(--frise-repere);
    height: var(--frise-repere);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--light-color);
    background: var(--surface-color);
    border: 2px solid var(--border-color-dark);
    border-radius: var(--radius-full);
}

.frise .repere .bi {
    font-size: .9375rem;
    -webkit-text-stroke: .4px currentColor;
}

.frise .libelle {
    font-weight: 500;
    color: var(--muted-color);
}

.frise .date {
    color: var(--muted-color);
}

.frise .faite .repere {
    color: #fff;
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.frise .faite .libelle {
    color: var(--default-color);
}

.frise .en_cours .repere {
    color: #fff;
    background: var(--accent-red);
    border-color: var(--accent-red);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-red), transparent 85%);
}

.frise .en_cours .libelle {
    font-weight: 700;
    color: var(--heading-color);
}

.frise .refusee .repere {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.frise .refusee .libelle {
    font-weight: 700;
    color: var(--accent-red);
}

/*
 * Sur une ligne : première étape au bord gauche, dernière au bord droit, les autres régulièrement
 * entre les deux, libellés centrés sous leur repère. Deux colonnes par intervalle (dix pour six
 * étapes, --frise-colonnes posée par templates/element/frise.php) : une pour chaque étape du bord,
 * deux pour chaque étape du milieu. Chaque trait part du repère de l'étape et rejoint celui de la
 * suivante.
 */
@container frise (min-width: 760px) {
    .frise {
        grid-template-columns: repeat(var(--frise-colonnes, 10), minmax(0, 1fr));
    }

    .frise li,
    .frise li:last-child {
        min-height: 0;
        padding: calc(var(--frise-repere) + .625rem) 0 0;
        font-size: .8125rem;
        /* Sept étapes (direct) : un libellé un peu plus large que sa colonne déborde vers le
           milieu plutôt que de se couper au milieu d'un mot. */
        overflow-wrap: normal;
    }

    .frise li:first-child {
        grid-column: 1;
    }

    .frise li:not(:first-child):not(:last-child) {
        grid-column: span 2;
        align-items: center;
        text-align: center;
    }

    .frise li:last-child {
        grid-column: -2;
        align-items: flex-end;
        text-align: right;
    }

    .frise li:not(:first-child):not(:last-child) .repere {
        left: 50%;
        transform: translateX(-50%);
    }

    .frise li:last-child .repere {
        right: 0;
        left: auto;
    }

    .frise li:not(:last-child)::before {
        top: calc(var(--frise-repere) / 2 - 1px);
        height: 2px;
    }

    .frise li:first-child::before {
        left: calc(var(--frise-repere) / 2);
        width: calc(200% - var(--frise-repere) / 2);
    }

    .frise li:not(:first-child):not(:last-child)::before {
        left: 50%;
        width: 100%;
    }

    .frise li:nth-last-child(2)::before {
        width: calc(100% - var(--frise-repere) / 2);
    }
}

/* ---------- Chronologie ---------- */

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

.chronologie > li {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem var(--spacing-lg);
    border-top: 1px solid var(--border-color-light);
}

.chronologie > li:first-child {
    border-top: 0;
}

/* Connexions des clients (journal de connexion) : plus discrètes que les lignes saisies, et
   masquables par l'interrupteur « Connexions des clients ». */
.chronologie > li.connexion .texte {
    color: var(--muted-color);
    font-size: .875rem;
}

.chronologie.sans-connexions > li.connexion {
    display: none;
}

.chronologie .quand {
    display: flex;
    flex-direction: column;
    font-size: .8125rem;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
}

.chronologie .quand strong {
    font-weight: 500;
    color: var(--default-color);
}

.chronologie .categorie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
}

.chronologie .badge {
    padding: .3em .55em;
    font-size: .8125rem;
}

.chronologie .texte {
    margin-top: .5rem;
    overflow-wrap: anywhere;
}

.chronologie .texte > :last-child {
    margin-bottom: 0;
}

/* Texte mis en forme dans l'éditeur : puces et numéros des listes, que le thème retire à toutes
   les listes (ul, ol sans puce ni retrait). */
.texte ul,
.texte ol {
    padding-left: 1.375rem;
    margin: 0 0 .5rem;
}

.texte ul {
    list-style: disc;
}

.texte ol {
    list-style: decimal;
}

.texte ul ul {
    list-style: circle;
}

.texte li + li {
    margin-top: .125rem;
}

.texte li::marker {
    color: var(--muted-color);
}

.chronologie .signature {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--muted-color);
}

.visibilite-client,
.visibilite-interne {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.visibilite-client {
    font-weight: 500;
    color: var(--accent-color);
}

@media (max-width: 575.98px) {
    .chronologie > li {
        grid-template-columns: minmax(0, 1fr);
        gap: .375rem;
    }

    .chronologie .quand {
        flex-direction: row;
        gap: .5rem;
    }
}

/* Menu « … » d'une ligne (modifier, supprimer), au bout de sa première ligne. */
.chronologie .actions-ligne {
    margin-left: auto;
}

.chronologie .actions-ligne .btn {
    color: var(--muted-color);
}

.chronologie > li:target {
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
}

/* ---------- Fiche d'une affaire : la chronologie, à droite les parties ---------- */

/* Sous 1200 px : la chronologie, puis l'acquéreur, le vendeur et la préfecture. */
.fiche-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
}

.fiche-zone-chronologie {
    min-width: 0;
}

@media (min-width: 1200px) {
    .fiche-colonnes {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
    }
}

@media (min-width: 1400px) {
    .fiche-colonnes {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/*
 * Chronologie, sur le modèle de la page « Search Results » de NiceAdmin Pro (classes srx-* du
 * thème, sous .page-search-results), réglée ici pour la fiche : une carte par ligne, groupées par
 * mois, et au-dessus, sur toute la largeur, les filtres en cases à cocher.
 */
.chronologie-srx[data-chronologie] {
    container-type: inline-size;
}

/* Filtres au-dessus des lignes, repliés : ils se déplient par « Afficher ». */
.chronologie-srx .chronologie-filtres {
    margin-bottom: 1.25rem;
    padding: .875rem 1rem;
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color), transparent 97%);
}

.chronologie-srx .chronologie-filtres-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.chronologie-srx .chronologie-filtres-titre {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--heading-color);
}

.chronologie-srx .chronologie-filtres-contenu {
    padding-top: .875rem;
}

.chronologie-srx .chronologie-filtres-effacer {
    width: 100%;
}

.chronologie-srx .chronologie-filtres-bascule[aria-expanded="true"] .si-replie,
.chronologie-srx .chronologie-filtres-bascule:not([aria-expanded="true"]) .si-deplie {
    display: none;
}

/* Carte assez large : les groupes de filtres (nature, administrations, auteurs) côte à côte. */
@container (min-width: 44rem) {
    .chronologie-srx .chronologie-filtres-contenu {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
        gap: 0 1.5rem;
        align-items: start;
    }

    .chronologie-srx .chronologie-filtres-effacer {
        grid-column: 1 / -1;
        justify-self: start;
        width: auto;
    }
}

.chronologie-srx .chronologie-entete {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .875rem;
}

/* Onglets à gauche, même quand ils tiennent sur la même ligne que l'ordre et l'ajout (la règle
   .card-title + * des en-têtes de carte les pousserait à droite). */
.chronologie-srx .chronologie-entete > .srx-results-head {
    margin-inline-start: 0;
}

/* Ordre de la chronologie, puis « Nouvelle information », à droite des onglets. */
.chronologie-srx .chronologie-commandes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 767px) {
    .chronologie-srx .chronologie-commandes .srx-sort {
        flex: 1 1 12rem;
    }
}

/* Pied de la liste : nombre de lignes affichées et rappel des filtres. */
.chronologie-srx .chronologie-pied {
    margin-top: 1rem;
}

.chronologie-srx .chronologie-pied .filtres-actifs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .8125rem;
    color: var(--heading-color);
}

.chronologie-srx .filtres-actifs[hidden],
.chronologie-srx .chronologie-mois[hidden],
.chronologie-srx .chronologie-ligne[hidden] {
    display: none !important;
}

.chronologie-srx .chronologie-mois + .chronologie-mois {
    margin-top: 1.25rem;
}

/* Une ligne : pastille de sa nature, contenu, menu « … ». */
.chronologie-srx .chronologie-ligne {
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem 1rem;
}

.chronologie-srx .chronologie-ligne:target {
    border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
}

.chronologie-srx .srx-result-body h3 {
    gap: .375rem .5rem;
    font-weight: 600;
    line-height: 1.4;
}

.chronologie-srx .srx-result-body h3 a {
    color: var(--accent-color);
}

/* Sur une carte étroite, un état au nom long passe à la ligne au lieu de déborder. */
.chronologie-srx .srx-result-body h3 .statut {
    white-space: normal;
}

/* Ligne ajoutée par un collègue depuis la dernière visite du commercial (sa notification). */
.chronologie-srx .chronologie-ligne-nouvelle {
    border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.chronologie-srx .chronologie-nouveau {
    padding: .125rem .5rem;
    border-radius: var(--radius-full);
    font-family: var(--default-font);
    font-size: .75rem;
    font-weight: 600;
    color: var(--contrast-color);
    background: var(--accent-color);
}

.chronologie-srx .statut-avant {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--muted-color);
}

.chronologie-srx .srx-result-body > p {
    margin-top: .375rem;
}

.chronologie-srx .srx-result-body .texte {
    margin-top: .375rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--default-color);
    overflow-wrap: anywhere;
}

.chronologie-srx .srx-result-body .texte p {
    margin: 0 0 .375rem;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.chronologie-srx .srx-result-body .texte > :last-child {
    margin-bottom: 0;
}

/* Date, auteur et visibilité, nettement séparés du détail au-dessus. */
.chronologie-srx .srx-result-meta {
    margin-top: .875rem;
}

.chronologie-srx .srx-result-meta .visibilite-client {
    font-weight: 600;
    color: var(--accent-color);
}

.chronologie-srx .actions-ligne {
    flex-shrink: 0;
    margin-left: auto;
}

.chronologie-srx .actions-ligne .btn {
    color: var(--muted-color);
}

/* Pastilles des natures : sur chaque ligne et dans les cases des filtres. */
.chronologie-srx .srx-result-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

.chronologie-srx .srx-result-icon.info {
    color: var(--info-color);
    background: color-mix(in srgb, var(--info-color), transparent 86%);
}

.chronologie-srx .srx-result-icon.warning {
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color), transparent 86%);
}

.chronologie-srx .srx-result-icon.neutre {
    color: var(--muted-color);
    background: color-mix(in srgb, var(--muted-color), transparent 88%);
}

.pastille-filtre {
    display: inline-block;
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}

.pastille-filtre.pastille-etat {
    background: var(--accent-color);
}

.pastille-filtre.pastille-information {
    background: var(--muted-color);
}

.pastille-filtre.pastille-contact {
    background: var(--success-color);
}

.pastille-filtre.pastille-administration {
    background: var(--warning-color);
}

.pastille-filtre.pastille-connexion {
    background: var(--info-color);
}

/* Filtres : titre de chaque groupe, avec « Toutes » et « Aucune ». */
.page-search-results.chronologie-srx .srx-filter-titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    min-height: 1.125rem; /* même hauteur avec ou sans « Toutes » et « Aucune » */
}

.chronologie-srx .filtre-tout-rien {
    display: inline-flex;
    gap: .75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.chronologie-srx .filtre-tout-rien .btn {
    font-size: .75rem;
}

.chronologie-srx .srx-check-list label {
    font-size: .8125rem;
}

.chronologie-srx .srx-check-list label.filtre-vide {
    opacity: .6;
}

.chronologie-srx .srx-check-list label.filtre-inactif {
    opacity: .45;
}

/* À l'impression : les lignes affichées (filtres compris), sans les commandes. */
@media print {
    .chronologie-srx .srx-results-card {
        border: 0;
        box-shadow: none;
    }
}

.changement-fige {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-height: calc(1.5em + .75rem + 2px);
}

/* Changement d'état modifié : l'état d'avant, puis le nouvel état, à corriger dans la liste. */
.changement-etat {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.changement-etat > .statut,
.changement-etat > .bi {
    flex: none;
}

.changement-etat > .form-select,
.changement-etat > .choices {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/*
 * Éditeur de texte (Quill, habillé par le thème) : hauteur réduite, bordure d'erreur, et
 * libellés de la bulle de lien en français (le thème « snow » les écrit en CSS, en anglais).
 */
.editeur .ql-toolbar.ql-snow {
    padding: .375rem .5rem;
}

.editeur .ql-editor {
    min-height: 8rem;
    max-height: 22rem;
    overflow-y: auto;
    font-size: .9375rem;
    line-height: 1.55;
}

.editeur.is-invalid .ql-toolbar.ql-snow,
.editeur.is-invalid .ql-container.ql-snow {
    border-color: var(--danger-color);
}

.editeur .ql-container.ql-snow:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 .2rem .4rem -.2rem color-mix(in srgb, var(--accent-color), transparent 70%);
}

.editeur .ql-snow .ql-tooltip {
    z-index: 5;
}

.editeur .ql-snow .ql-tooltip::before {
    content: "Lien :";
}

.editeur .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "Adresse du lien :";
}

.editeur .ql-snow .ql-tooltip a.ql-action::after {
    content: "Modifier";
}

.editeur .ql-snow .ql-tooltip a.ql-remove::before {
    content: "Retirer";
}

.editeur .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: "Enregistrer";
}

/* ---------- Espace client ---------- */

.dossier.cloture .card-body,
.dossier.cloture .dossier-nouvelles {
    opacity: .85;
}

.dossier-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.dossier .trajet {
    margin: .5rem 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

.dossier .trajet a {
    color: var(--heading-color);
    text-decoration: none;
}

.dossier .trajet .fleche {
    margin: 0 .125rem;
}

.dossier .trajet a:hover {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Établissements de départ et d'arrivée, côte à côte dès qu'il y a la place. */
.dossier-etablissements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .5rem 1.5rem;
    margin: -.5rem 0 1.25rem;
}

.dossier-etablissements dt {
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted-color);
}

.dossier-etablissements dd {
    margin: 0;
}

.dossier-etablissements .enseigne-commune {
    display: flex;
    flex-direction: column;
}

.dossier-etablissements .enseigne {
    font-weight: 600;
    color: var(--heading-color);
}

.dossier-etablissements .commune {
    font-size: .875rem;
    color: var(--muted-color);
}

/* Dernières nouvelles : la chronologie du dossier, en aperçu. */
.dossier-nouvelles {
    padding: 0 var(--spacing-lg) .75rem;
    border-top: 1px solid var(--border-color-light);
}

.dossier-nouvelles .sous-titre-carte {
    margin-top: 1rem;
}

.chronologie-apercu > li {
    padding-left: 0;
    padding-right: 0;
}

/* Personne à contacter au cabinet : nom, puis boutons pour écrire ou appeler. */
.interlocuteur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
}

.interlocuteur-qui {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.interlocuteur-qui > div {
    display: flex;
    flex-direction: column;
}

.interlocuteur .avatar-initiales {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .875rem;
}

.interlocuteur-role {
    font-size: .75rem;
    color: var(--muted-color);
}

.interlocuteur .nom {
    margin: 0;
    font-weight: 600;
    color: var(--heading-color);
}

.contacts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.contacts .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.interlocuteur-compact .avatar-initiales {
    width: 2.125rem;
    height: 2.125rem;
    font-size: .75rem;
}

@media (max-width: 575.98px) {
    .interlocuteur .contacts,
    .interlocuteur .contacts li {
        width: 100%;
    }

    .interlocuteur .contacts .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Connexion et première connexion ---------- */

/* Plaques de licence IV en fond (photo fournie par le cabinet), voilées du bleu de la charte. */
body.connexion .fauth {
    background:
        linear-gradient(160deg, rgb(1 62 94 / .55), rgb(6 56 83 / .78)),
        var(--accent-color) url('../img/connexion-plaques.jpg') center / cover no-repeat;
}

body.connexion .fauth-main {
    max-width: 28.5rem;
}

body.connexion .fauth-card {
    border: 0;
    border-top: 4px solid var(--accent-red);
    box-shadow: 0 1.5rem 3.5rem rgb(0 20 35 / .38);
}

.connexion-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 1.125rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color-light);
}

.connexion-logo .logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 64px;
}

.fauth-title {
    font-size: 1.75rem;
}

.connexion-pied {
    margin: 1.25rem 0 0;
    font-size: .8125rem;
    color: rgb(255 255 255 / .88);
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / .4);
}

.fauth-form .btn-primary {
    margin-top: .25rem;
}

.fauth-form .input-group .btn {
    display: inline-flex;
    align-items: center;
}

.etapes-connexion {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: 0;
    margin: 0 0 .875rem;
    font-size: .8125rem;
    color: var(--muted-color);
    list-style: none;
}

.etapes-connexion li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.etape-rang {
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--light-color);
    border: 1.5px solid var(--border-color-dark);
    border-radius: var(--radius-full);
}

.etapes-connexion .actif {
    font-weight: 700;
    color: var(--heading-color);
}

.etapes-connexion .actif .etape-rang {
    color: #fff;
    background: var(--accent-red);
    border-color: var(--accent-red);
}

.etapes-connexion .fait .etape-rang {
    color: #fff;
    background: var(--accent-color);
    border-color: var(--accent-color);
}

#mot-de-passe-temporaire {
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

#code {
    max-width: 11rem;
    font-size: 1.125rem;
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
}

#code::placeholder {
    font-size: .875rem;
    letter-spacing: 0;
}

/* Jauge de robustesse : quatre segments, couleur selon le niveau atteint. */
.jauge {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
    margin-top: .625rem;
}

.jauge-segment {
    height: .3125rem;
    background: var(--border-color);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base);
}

.jauge[data-niveau='faible'] .rempli { background: var(--danger-color); }
.jauge[data-niveau='moyen'] .rempli { background: var(--warning-color); }
.jauge[data-niveau='robuste'] .rempli { background: var(--success-color); }
.jauge[data-niveau='tres_robuste'] .rempli { background: var(--accent-color); }

.jauge-texte {
    margin: .375rem 0 0;
    font-size: .78rem;
    color: var(--muted-color);
}

.jauge-texte[data-niveau='faible'] { color: var(--danger-color); font-weight: 500; }
.jauge-texte[data-niveau='moyen'] { color: color-mix(in srgb, var(--warning-color), black 25%); font-weight: 500; }
.jauge-texte[data-niveau='robuste'] { color: var(--success-color); font-weight: 500; }
.jauge-texte[data-niveau='tres_robuste'] { color: var(--accent-color); font-weight: 700; }

.robustesse-criteres {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .625rem .75rem;
    margin: .625rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
    list-style: none;
    background: var(--background-color);
    border-radius: var(--radius-md);
}

.robustesse-criteres li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
}

.robustesse-criteres .marque {
    flex: none;
    width: .875rem;
    text-align: center;
}

.robustesse-criteres .marque::before {
    content: '○';
}

.robustesse-criteres li.ok {
    color: var(--default-color);
}

.robustesse-criteres li.ok .marque::before {
    content: '✓';
    font-weight: 700;
    color: var(--success-color);
}

.robustesse-criteres li.manque .marque::before {
    content: '✕';
    color: var(--danger-color);
}

#confirmation-etat.text-success,
#confirmation-etat.text-danger {
    font-weight: 500;
}

/* ---------- Création d'une affaire ---------- */

@media (min-width: 1200px) {
    .carte-affaire {
        position: sticky;
        top: calc(var(--header-height) + 1.25rem);
    }
}

.nouvelle-affaire .card {
    margin-bottom: 0;
}

.nouvelle-affaire .form-label .fw-normal {
    font-weight: 400;
}

.choix-mode .btn {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .choix-mode {
        width: 100%;
    }

    .choix-mode .btn {
        flex: 1;
    }
}

.section-partie {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

/* Filet entre deux sections affichées (les sections masquées ne comptent pas). */
.section-partie:not([hidden]) ~ .section-partie:not([hidden]):not(.suivi-partie) {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color-light);
}

.suivi-partie {
    margin-top: 1.25rem;
}

legend.sous-titre-carte {
    margin-top: 0;
}

/* Recherche d'un client existant. */
.champ-recherche {
    position: relative;
}

.champ-recherche > .bi {
    position: absolute;
    top: 50%;
    left: .75rem;
    color: var(--muted-color);
    pointer-events: none;
    transform: translateY(-50%);
}

.champ-recherche .form-control {
    padding-left: 2.25rem;
}

.resultats-clients {
    display: flex;
    flex-direction: column;
    max-height: 18rem;
    margin-top: .5rem;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.resultat-client {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .625rem .875rem;
    font: inherit;
    color: var(--default-color);
    text-align: left;
    background: var(--surface-color);
    border: 0;
    border-top: 1px solid var(--border-color-light);
}

.resultat-client:first-child {
    border-top: 0;
}

.resultat-client:hover,
.resultat-client:focus-visible {
    background: color-mix(in srgb, var(--accent-color), transparent 93%);
    outline: none;
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.resultat-client strong {
    color: var(--heading-color);
}

.resultat-client span {
    font-size: .8125rem;
    color: var(--muted-color);
}

.resultats-vide {
    padding: .75rem .875rem;
    margin: 0;
    font-size: .875rem;
    color: var(--muted-color);
}

.client-choisi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
    border-left: 3px solid var(--accent-color);
    border-radius: var(--radius-md);
}

.client-choisi-texte {
    display: flex;
    flex-direction: column;
}

.client-choisi-texte strong {
    color: var(--heading-color);
}

.client-choisi-texte span {
    font-size: .8125rem;
    color: var(--muted-color);
}

.actions-formulaire {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.actions-formulaire .btn {
    display: inline-flex;
    align-items: center;
}

.card-footer .actions-formulaire .btn-primary {
    flex: 1;
    justify-content: center;
}

/*
 * Listes avec recherche (Choices.js, habillées par le thème) : erreur de saisie, petite taille,
 * liste au-dessus des cartes voisines.
 */
.choices.is-invalid .choices__inner {
    border-color: var(--danger-color);
}

.choices.is-invalid.is-focused .choices__inner {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--danger-color), transparent 75%);
}

.choices-sm .choices__inner {
    min-height: calc(1.9rem + 2px);
    padding: .3rem .5rem .15rem;
    font-size: .875rem;
}

.choices-sm .choices__list--single {
    padding: .1rem 1rem .1rem .1rem;
}

.choices .choices__list--dropdown,
.choices .choices__list[aria-expanded] {
    z-index: 1060;
}

/*
 * Liste ouverte : les blocs qui coupent leur contenu (cartes du thème en overflow: hidden, pour
 * leurs coins arrondis) la laissent dépasser le temps qu'elle est ouverte ; et le bloc positionné
 * qui la contient (carte, carte collante) passe devant ses voisins, sinon la carte suivante la
 * recouvre. app.js pose .liste-ouverte-dedans et .liste-ouverte-devant (tous navigateurs) ;
 * :has() en renfort.
 */
.liste-ouverte-dedans,
.card:has(.choices.is-open),
.card-body:has(.choices.is-open),
.table-responsive:has(.choices.is-open),
.collapse.show:has(.choices.is-open) {
    overflow: visible !important;
}

.liste-ouverte-devant,
.card:has(.choices.is-open) {
    z-index: 1070 !important;
}

.purge-connexions-ligne .choices {
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 26rem;
}

/* Calendrier : le champ affiché garde la forme des champs du thème. */
.flatpickr-input[readonly]:not(:disabled) {
    background-color: var(--surface-color);
}

/* Complétion en ligne (nom et adresse d'un établissement) : liste sous le champ, par-dessus l'aide. */
.autocompletion {
    position: relative;
}

.autocompletion-liste {
    position: absolute;
    right: calc(var(--bs-gutter-x) * .5);
    left: calc(var(--bs-gutter-x) * .5);
    z-index: 1060;
    max-height: 23rem;
    margin-top: .25rem;
    overflow-y: auto;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 .75rem 1.5rem color-mix(in srgb, var(--accent-color), transparent 85%);
}

.autocompletion-option {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    padding: .55rem .875rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color-light);
}

.autocompletion-option strong {
    font-size: .875rem;
    color: var(--heading-color);
}

.autocompletion-option span {
    font-size: .8125rem;
    color: var(--default-color);
}

.autocompletion-option small {
    font-size: .75rem;
    color: var(--muted-color);
}

.autocompletion-option:hover,
.autocompletion-option[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent-color), transparent 93%);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.autocompletion-message {
    padding: .65rem .875rem;
    font-size: .8125rem;
    color: var(--muted-color);
}

.autocompletion-source {
    padding: .4rem .875rem;
    font-size: .6875rem;
    color: var(--muted-color);
    background: var(--background-color);
}

/* ---------- Module Utilisateurs ---------- */

/* Pastilles aux initiales, aux tailles des photos du thème. */
.users-avatar.avatar-initiales {
    width: 38px;
    height: 38px;
    font-size: .75rem;
}

.page-users .users-lab-recent-item .recent-avatar {
    display: inline-grid;
    width: 32px;
    height: 32px;
    margin: 0;
    font-size: .6875rem;
    font-weight: 700;
    color: #fff;
}

.uv-hero-avatar.avatar-initiales {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
    border: 2px solid var(--card-bg);
}

.page-users-edit .ue-avatar-preview.avatar-initiales {
    display: inline-grid;
    flex: none;
    width: 48px;
    height: 48px;
    font-size: .9375rem;
}

.uv-hero-status.statut-acces-actif { background: var(--success-color); }
.uv-hero-status.statut-acces-codes_envoyes,
.uv-hero-status.statut-acces-codes_bloques { background: var(--warning-color); }
.uv-hero-status.statut-acces-aucun { background: var(--light-color); }
.uv-hero-status.statut-acces-desactive { background: var(--danger-color); }

.uv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/*
 * Rôles : une couleur par étiquette, reprise par les barres de « Répartition » (la légende).
 * Le cabinet garde les couleurs de la charte (rouge, bleu) ; les clients ont des couleurs à eux :
 * orange pour le vendeur (il cède), sarcelle pour l'acquéreur (il reçoit), violet pour qui est
 * les deux, gris en pointillés pour un client sans affaire. Encre sur fond : contraste ≥ 5:1.
 */
:root {
    --role-admin: #dd204f;
    --role-admin-encre: #b0173d;
    --role-admin-fond: #fbe3e9;
    --role-commercial: #013e5e;
    --role-commercial-encre: #013e5e;
    --role-commercial-fond: #dde9f0;
    --role-vendeur: #e07a1f;
    --role-vendeur-encre: #9a4a06;
    --role-vendeur-fond: #fdebd9;
    --role-acquereur: #14907f;
    --role-acquereur-encre: #0d6b62;
    --role-acquereur-fond: #d8f1ed;
    --role-vendeur-acquereur: #7a5cc4;
    --role-vendeur-acquereur-encre: #5b3fa0;
    --role-vendeur-acquereur-fond: #ebe5f8;
    --role-sans-affaire: #9aa6b0;
    --role-sans-affaire-encre: #56636e;
    --role-sans-affaire-fond: #eef1f4;
}

.role-compte {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--role-encre);
    background: var(--role-fond);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
}

.role-compte .bi {
    font-size: .75rem;
}

.role-admin { --role-encre: var(--role-admin-encre); --role-fond: var(--role-admin-fond); }
.role-commercial { --role-encre: var(--role-commercial-encre); --role-fond: var(--role-commercial-fond); }
.role-vendeur { --role-encre: var(--role-vendeur-encre); --role-fond: var(--role-vendeur-fond); }
.role-acquereur { --role-encre: var(--role-acquereur-encre); --role-fond: var(--role-acquereur-fond); }
.role-vendeur-acquereur { --role-encre: var(--role-vendeur-acquereur-encre); --role-fond: var(--role-vendeur-acquereur-fond); }

.role-sans-affaire {
    --role-encre: var(--role-sans-affaire-encre);
    --role-fond: var(--role-sans-affaire-fond);
    border: 1px dashed color-mix(in srgb, var(--role-sans-affaire), transparent 30%);
}

/* État de l'accès en ligne. */
.etat-compte {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.etat-compte-point {
    width: .4375rem;
    height: .4375rem;
    background: currentColor;
    border-radius: var(--radius-full);
}

.etat-compte-actif { color: var(--success-color); }
.etat-compte-codes_envoyes,
.etat-compte-codes_bloques { color: color-mix(in srgb, var(--warning-color), black 20%); }
.etat-compte-aucun { color: var(--muted-color); }
.etat-compte-desactive { color: var(--danger-color); }

.uv-hero-tags .etat-compte {
    padding: .2rem .6rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
}

/* Liste : cartes de chiffres et derniers comptes, cliquables. */
a.users-lab-kpi,
a.users-lab-recent-item {
    color: inherit;
    text-decoration: none;
}

a.users-lab-kpi:hover {
    border-color: var(--accent-color);
}

a.users-lab-recent-item:hover strong {
    color: var(--accent-color);
}

.page-users .users-filter-tabs {
    flex-wrap: wrap;
}

.page-users .users-filter-tab {
    text-decoration: none;
}

.page-users .users-filter-tab:hover {
    color: var(--heading-color);
}

.page-users .users-toolbar-btn .bi {
    margin-right: .125rem;
}

.progress-bar.repartition-vendeurs { background: var(--role-vendeur); }
.progress-bar.repartition-acquereurs { background: var(--role-acquereur); }
.progress-bar.repartition-sans_affaire { background: var(--role-sans-affaire); }
.progress-bar.repartition-commerciaux { background: var(--role-commercial); }
.progress-bar.repartition-administrateurs { background: var(--role-admin); }

/* Dernières connexions : nom, puis étiquette de rôle et moment, puis appareil. */
.page-users .connexion-recente {
    align-items: flex-start;
}

.page-users .connexion-recente .recent-avatar {
    margin-top: 2px;
}

.connexion-recente-texte {
    flex: 1;
    min-width: 0;
}

/* Étiquette de rôle à gauche, temps écoulé calé à droite de l'encart, sur la même ligne. */
.connexion-recente-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
}

.page-users .users-lab-recent-item .role-compte {
    display: inline-flex;
    min-width: 0;
    margin: 0;
    padding: .1rem .5rem;
    overflow: hidden;
    font-size: .6875rem;
    color: var(--role-encre);
    text-overflow: ellipsis;
}

.page-users .users-lab-recent-item .role-compte .bi {
    flex: none;
    font-size: .6875rem;
}

/* Dans un encart étroit, un libellé trop long (« Vendeur et acquéreur ») se coupe : la couleur reste. */
.page-users .users-lab-recent-item .role-libelle {
    display: inline;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: inherit;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-users .users-lab-recent-item .connexion-recente-quand {
    display: inline;
    flex: none;
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--default-color);
    text-align: right;
    white-space: nowrap;
}

.page-users .users-lab-recent-item .connexion-recente-appareil {
    margin-top: .15rem;
}

.form-text .role-compte {
    padding: 0 .45rem;
    font-size: inherit;
}

/* Répartition : la pastille de couleur devant chaque rôle fait la légende des étiquettes. */
.users-lab-role-head .role-pastille {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .45rem;
    vertical-align: .08em;
    border-radius: var(--radius-full);
}

.role-pastille-vendeurs { background: var(--role-vendeur); }
.role-pastille-acquereurs { background: var(--role-acquereur); }
.role-pastille-sans_affaire { background: var(--role-sans-affaire); }
.role-pastille-commerciaux { background: var(--role-commercial); }
.role-pastille-administrateurs { background: var(--role-admin); }

/* Gestion des licences › Contacts : un onglet par liste (vendeurs, bailleurs, autres contacts). */
.onglets-contacts {
    gap: .25rem;
}

.onglets-contacts .nav-link {
    padding: .5rem .875rem;
    font-weight: 600;
    color: var(--muted-color);
}

.onglets-contacts .nav-link.active,
.onglets-contacts .nav-link:hover {
    color: var(--accent-color);
}

/* Fiche : carte « Activité » à deux onglets, fil d'activité et historique de connexion. */
#activite {
    scroll-margin-top: 5.5rem;
}

#activite .tab-pane:focus:not(:focus-visible) {
    outline: 0;
}

.onglets-activite {
    gap: .25rem;
    border-bottom: 0;
}

.onglets-activite .nav-link {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted-color);
    background: none;
}

.onglets-activite .compteur {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    margin-left: .35rem;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--muted-color);
    background: var(--background-color);
    border-radius: var(--radius-full);
}

.onglets-activite .nav-link.active .compteur {
    color: #fff;
    background: var(--accent-color);
}

.historique-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
}

.historique-chiffres > div {
    padding: .75rem .875rem;
    background: var(--background-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
}

.historique-chiffres strong {
    display: block;
    font-family: var(--heading-font);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--heading-color);
}

.historique-chiffres span {
    display: block;
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--muted-color);
}

.historique-appareils {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.historique-appareils li {
    display: inline-flex;
    align-items: center;
    padding: .25rem .375rem .25rem .75rem;
    font-size: .8125rem;
    color: var(--default-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
}

.historique-appareils .compteur {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    margin-left: .4rem;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: var(--radius-full);
}

/* Une date par jour : les connexions suivantes du même jour n'ont pas de filet au-dessus. */
.page-users-view .historique-table tbody td {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.page-users-view .historique-table tr.meme-jour td {
    border-top: 0;
}

.page-users-view .historique-table tbody tr:has(+ .meme-jour) td {
    border-bottom-color: transparent;
}

.historique-jour {
    font-weight: 600;
    color: var(--heading-color);
}

.page-users-view .historique-table .historique-heure {
    font-variant-numeric: tabular-nums;
}

.page-users-view .historique-table .historique-appareil {
    color: var(--muted-color);
}

.historique-table tbody.collapsing {
    transition: none;
}

/* Purge de l'historique, en pied d'onglet, séparée par un filet. */
.purge-connexions {
    padding-top: 1rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color-light);
}

.purge-connexions-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .375rem;
}

.purge-connexions-ligne .form-select {
    width: auto;
    min-width: 0;
    max-width: 100%;
}

/* Fiche : affaires d'un compte, enseigne puis commune de départ et d'arrivée. */
.enseigne-commune {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    white-space: normal;
}

.enseigne-commune .enseigne {
    font-weight: 600;
    color: var(--heading-color);
}

.enseigne-commune .commune {
    font-size: .75rem;
    color: var(--muted-color);
}

.enseigne-absente {
    color: var(--muted-color);
    font-style: italic;
}

.table-affaires-compte .etiquette-direct {
    margin-top: .25rem;
}

/* Fiche : titres de cartes avec un compteur. */
.card-title .compteur {
    display: inline-grid;
    place-items: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 .375rem;
    margin-left: .25rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted-color);
    background: var(--background-color);
    border-radius: var(--radius-full);
}

.page-users-view .card-title,
.page-users-edit .card-title,
.page-users .card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

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

.liste-etablissements li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .5rem 1rem;
    align-items: center;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--border-color-light);
}

.etablissement-texte {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    font-size: .875rem;
}

.etablissement-texte strong {
    color: var(--heading-color);
}

.etablissement-texte span {
    color: var(--muted-color);
}

.etablissement-texte .etiquette-creation {
    margin-left: .25rem;
    color: #7a5900;
    vertical-align: .1em;
}

.etablissement-texte .text-danger {
    color: var(--danger-color) !important;
}

.etablissement-usage {
    font-size: .8125rem;
    color: var(--muted-color);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .liste-etablissements li {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ajout-etablissement {
    background: color-mix(in srgb, var(--accent-color), transparent 96%);
    border-bottom: 1px solid var(--border-color-light);
}

.table-affaires-compte .numero a {
    font-weight: 700;
    white-space: nowrap;
}

.table-affaires-compte tr.cloturee td {
    opacity: .65;
}

.page-users-view .coordonnees {
    font-size: .875rem;
}

/* Édition d'un compte et d'un établissement. */
.page-users-edit .ue-toggle-label {
    margin: 0;
}

.colonne-formulaire {
    max-width: 52rem;
}

/* Champ en erreur (formulaires construits par FormHelper : la classe est sur le conteneur). */
div.is-invalid > .form-control,
div.is-invalid > .form-select {
    border-color: var(--danger-color);
}

.aide-etablissement {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .375rem;
    margin-top: .375rem;
}

.aide-etablissement .btn-link {
    font-size: inherit;
}

/* ---------- Pages d'erreur ---------- */

.na-error-shell {
    width: min(42rem, 100%);
}

.na-error-layout {
    grid-template-columns: minmax(0, 1fr);
}

.na-error-logo img {
    display: block;
    width: auto;
    height: 44px;
}

.na-error-code {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--accent-color);
}

/* ---------- Impression ---------- */

@media print {
    .frise li:not(:last-child)::before,
    .statut,
    .statut-point {
        print-color-adjust: exact;
    }

    .main {
        margin: 0 !important;
    }
}

/* Filtre « Commercial » de la liste des affaires, habillé par Choices.js. */
.filtre-commercial .choices {
    min-width: 12rem;
    margin: 0;
}

/* Fenêtre de confirmation du thème : pastille d'icône rouge (suppression) ou bleue (envoi). */
.fenetre-confirmation-icone {
    width: 64px;
    height: 64px;
}

.fenetre-confirmation-icone.ton-danger {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color), transparent 88%);
}

.fenetre-confirmation-icone.ton-primaire {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 88%);
}

.fenetre-confirmation .modal-body .h5 {
    font-family: var(--heading-font);
    color: var(--heading-color);
}

/*
 * Messages flash : alertes du thème qui se ferment seules au bout de 3 secondes. Dans l'espace
 * cabinet et l'espace client, elles flottent en haut à droite, sous l'en-tête, pour que leur
 * disparition ne fasse pas sauter la page. Le filet du bas montre le temps restant ; il s'arrête
 * sous la souris ou au clavier.
 */
.alertes-flash {
    position: fixed;
    top: calc(var(--header-height, 64px) + 1rem);
    right: 1rem;
    z-index: 1085;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(26rem, calc(100vw - 2rem));
    pointer-events: none;
}

.alertes-flash:empty {
    display: none;
}

.alertes-flash .alert {
    margin: 0;
    pointer-events: auto;
    box-shadow: 0 .75rem 1.5rem color-mix(in srgb, var(--accent-color), transparent 82%);
}

.alerte-flash {
    position: relative;
    overflow: hidden;
}

.alerte-flash-delai {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    opacity: .35;
    transform-origin: left center;
    animation: alerte-flash-delai 3s linear forwards;
}

.alerte-flash:hover .alerte-flash-delai,
.alerte-flash:focus-within .alerte-flash-delai {
    animation-play-state: paused;
}

@keyframes alerte-flash-delai {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .alerte-flash-delai {
        opacity: 0;
    }
}

/* Bouton de fermeture du thème : une croix d'icône, de la couleur du message. */
.alerte-flash .btn-close {
    display: inline-grid;
    place-items: center;
    width: auto;
    height: auto;
    color: inherit;
}

/* ---------- Tableau de bord (cartes et graphiques du thème, pages/_dashboard.scss) ---------- */

.tdb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.tableau-de-bord .nd-topbar {
    align-items: center;
}

/*
 * Bandeau des dashboards (templates/element/tableau_de_bord/bandeau.php) : période et affaires
 * prises en compte. Chaque groupe a son titre au-dessus ; chaque choix, son nom et, en petit, ses
 * dates. Le choix en cours est plein, à la couleur de la charte. Sur grand écran, le bandeau reste
 * en haut de la fenêtre (ombre quand il flotte : .tdb-bandeau-colle, webroot/js/tableau-de-bord.js).
 * Aligné sur les cartes (gouttière des rangées g-3).
 */
.nd-dashboard .card.tdb-bandeau {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap: .75rem 1.5rem;
    padding: .75rem 1rem;
    margin: 0 .5rem;
    overflow: visible;
    transition: box-shadow var(--transition-base);
}

.tdb-bandeau-groupe {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.tdb-bandeau-titre {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--heading-color);
}

.tdb-bandeau-titre .bi {
    color: var(--muted-color);
}

.tdb-options {
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: .375rem;
}

.tdb-option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .125rem;
    min-height: 3rem;
    padding: .375rem .75rem;
    line-height: 1.2;
    color: var(--heading-color);
    text-decoration: none;
    border-inline-end: 1px solid var(--border-color);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tdb-option:last-child {
    border-inline-end: 0;
}

.tdb-option-nom {
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}

.tdb-option-detail {
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted-color);
}

.tdb-option:hover {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 93%);
}

.tdb-option.active,
.tdb-option.active:hover {
    color: #fff;
    background: var(--accent-color);
}

.tdb-option.active .tdb-option-detail {
    color: rgb(255 255 255 / .82);
}

.tdb-option:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--surface-color);
}

/* Sous le bandeau : la phrase sur la période, et « Tout réduire », « Tout déployer ». */
.tdb-bandeau-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin: .5rem .5rem 1rem;
}

.tdb-bandeau-note {
    display: flex;
    flex: 1 1 22rem;
    gap: .5rem;
    align-items: baseline;
    margin: 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.tdb-bandeau-note .bi {
    color: var(--accent-color);
}

.tdb-cartes-boutons {
    display: flex;
    gap: .25rem;
}

.tdb-cartes-boutons[hidden] {
    display: none;
}

.tdb-cartes-bouton {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--accent-color);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.tdb-cartes-bouton:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.tdb-cartes-bouton:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

/* Le défilement de la page ne doit pas s'arrêter au contenu (overflow-x: hidden du thème) : le
   bandeau reste alors visible. « clip » rogne sans créer de zone qui défile. */
@media (min-width: 992px) {
    body:has(.tableau-de-bord),
    .main:has(.tableau-de-bord),
    .main-content:has(.tableau-de-bord),
    .nd-dashboard.tableau-de-bord {
        overflow-x: clip;
        overflow-y: visible;
    }

    .nd-dashboard .card.tdb-bandeau {
        position: sticky;
        top: var(--header-height);
        z-index: 20;
    }

    /* Quand il flotte : accroché sous l'en-tête. */
    .nd-dashboard .card.tdb-bandeau.tdb-bandeau-colle {
        border-top-color: transparent;
        border-radius: 0 0 .5rem .5rem;
        box-shadow: var(--shadow-xl);
    }

    /* Une carte atteinte par un lien (#alertes) s'arrête sous le bandeau. */
    .tableau-de-bord .card[data-carte] {
        scroll-margin-top: calc(var(--header-height) + 7rem);
    }
}

/* Repère juste au-dessus du bandeau : quand il passe sous l'en-tête, le bandeau flotte. */
.tdb-bandeau-repere {
    height: 1px;
    margin-bottom: -1px;
}

/* Petit écran : chaque groupe sur toute la largeur, ses choix de même largeur. */
@media (max-width: 767.98px) {
    .tdb-bandeau-groupe,
    .tdb-options {
        width: 100%;
    }

    .tdb-options {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .tdb-option {
        padding: .375rem .5rem;
    }

    .tdb-option-nom {
        white-space: normal;
    }
}

/*
 * Cartes des dashboards qu'on réduit à leur en-tête et qu'on redéploie (data-carte) : le titre
 * devient un bouton, précédé d'un chevron (webroot/js/tableau-de-bord.js) ; l'état est gardé dans
 * le navigateur.
 */
.tdb-repliable > .card-header {
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.tdb-replier {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .125rem .375rem .125rem .125rem;
    margin: -.125rem 0 -.125rem -.375rem;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.tdb-chevron {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: .8125rem;
    color: var(--muted-color);
    transition: transform var(--transition-fast);
}

.tdb-replier:hover,
.tdb-replier:hover .tdb-chevron {
    color: var(--accent-color);
}

.tdb-replier:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.tdb-reduite .tdb-chevron {
    transform: rotate(-90deg);
}

.card.tdb-reduite {
    height: auto !important;
}

.card.tdb-reduite > :not(.card-header),
.card.tdb-reduite > .card-header > :not(.card-title) {
    display: none !important;
}

.nd-dashboard .card.tdb-reduite > .card-header {
    border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tdb-chevron,
    .nd-dashboard .card.tdb-bandeau {
        transition: none;
    }
}

/* Export d'un graphique : « PNG » et « PDF » à droite de l'en-tête de sa carte
   (webroot/js/tableau-de-bord.js) ; message en cas d'échec. */
.tdb-export {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.tdb-export-bouton {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 1.75rem;
    padding: 0 .5rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted-color);
    cursor: pointer;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.tdb-export-bouton:hover {
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
}

.tdb-export-bouton:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.tdb-export-bouton[aria-busy="true"] {
    cursor: progress;
    opacity: .6;
}

.tdb-export-message:empty {
    display: none;
}

.tdb-export-message {
    flex-basis: 100%;
    font-size: .75rem;
    color: var(--danger-color, #e74c63);
    text-align: end;
}

/* Alertes et chronologies : hauteur limitée, la liste défile ; l'intertitre (priorité, jour) reste
   en haut de la liste. */
.tdb-defilant {
    max-height: 30rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.page-activity .tdb-defilant .al-stream-day {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Tuile des alertes urgentes (rouge), verte quand il n'y en a pas. */
.tdb-kpi-alertes {
    --couleur-alertes: var(--danger-color, #e74c63);
    --encre-alertes: var(--role-admin-encre, #b0173d);
    background: color-mix(in srgb, var(--couleur-alertes), transparent 93%);
}

.tdb-kpi-alertes.tdb-kpi-calme {
    --couleur-alertes: var(--success-color, #21a66c);
    --encre-alertes: #157a52;
}

.tdb-kpi-alertes::after {
    background: color-mix(in srgb, var(--couleur-alertes), transparent 95%);
}

.tdb-kpi-alertes .nd-kpi-icon {
    color: var(--encre-alertes);
    background: color-mix(in srgb, var(--couleur-alertes), transparent 84%);
}

.tdb-kpi-alertes .nd-kpi-value {
    color: var(--encre-alertes);
}

.nd-period-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.nd-kpi-rail .nd-kpi-card {
    height: 100%;
}

a.tdb-kpi {
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-fast);
}

a.tdb-kpi:hover,
a.tdb-kpi:focus-visible {
    border-color: var(--accent-color);
}

.nd-kpi-trend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    font-weight: 600;
}

.nd-kpi-trend:not(.up):not(.down) {
    font-weight: 500;
}

/* Étapes en cours : chaque ligne mène à la liste filtrée. */
.tdb-etapes {
    margin-top: .75rem;
}

.tdb-etapes a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 6px 8px;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--border-color-light);
}

.tdb-etapes a:hover,
.tdb-etapes a:focus-visible {
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.tdb-etapes strong {
    font-size: .875rem;
    color: var(--heading-color);
}

/* À surveiller : deux listes côte à côte dès qu'il y a la place. */
/* Dashboard global : soldes des envois (SMS d'OVH, emails de Brevo), aux couleurs des badges
   « Mise à jour » pour le niveau (suffisant, bas, épuisé). */
.soldes-envois .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.solde {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.solde + .solde {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color-light);
}

.solde-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
}

.solde.niveau-bas .solde-icone {
    background: #fdecdc;
    color: #e07a0b;
}

.solde.niveau-epuise .solde-icone {
    background: #fde6e7;
    color: #d6293e;
}

.solde-corps {
    min-width: 0;
}

.solde-titre {
    margin: 0 0 .25rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--heading-color);
}

.solde-valeur {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    margin: 0 0 .125rem;
}

.solde-valeur strong {
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--heading-color);
    font-variant-numeric: tabular-nums;
}

.solde-offre {
    font-size: .8125rem;
    color: var(--muted-color);
}

.solde-etiquette {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .0625rem .4375rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
}

.solde-etiquette.niveau-bon {
    background: #e3f4e9;
    color: #1d6a3e;
}

.solde-etiquette.niveau-bas {
    background: #fdecdc;
    color: #8f4306;
}

.solde-etiquette.niveau-epuise {
    background: #fde6e7;
    color: #a12530;
}

.solde-detail,
.solde-releve {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

.solde-erreur {
    color: #a12530;
}

.solde-releve {
    margin-top: auto;
    font-size: .75rem;
}

/* Cartes du Dashboard Affaires sur le modèle de « Recent Activity Timeline » du thème (page
   « Activity » : .al-card, .al-stream-day, .al-stream-item, .al-dot) : alertes et points urgents
   (un bandeau par priorité), chronologies (un bandeau par jour). Ici, les lignes sont des liens
   rangés dans des listes ; les filtres sont dans l'en-tête (webroot/js/tableau-de-bord.js). */
.tdb-stream .card-header {
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.tdb-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.tdb-filtres[hidden] {
    display: none;
}

/* Boutons plus serrés que ceux du thème : ceux des chronologies tiennent sur deux lignes dans la
   colonne étroite de la carte. */
.tdb-filtres .btn-sm {
    padding: .25rem .625rem;
}

.tdb-filtre-nombre {
    margin-left: .125rem;
    font-weight: 700;
}

.tdb-stream h3.al-stream-day {
    margin: 0;
    font-family: inherit;
    line-height: inherit;
}

.tdb-stream-nombre {
    letter-spacing: 0;
}

.tdb-stream-liste {
    padding: 0;
    margin: 0;
    list-style: none;
}

.tdb-stream-liste > li {
    border-bottom: 1px solid var(--border-color-light);
}

.page-activity .tdb-stream .al-stream-item {
    border-bottom: 0;
    color: var(--default-color);
    text-decoration: none;
}

.page-activity .tdb-stream .al-stream-item * {
    text-decoration: none;
}

.tdb-stream a.al-stream-item:hover,
.tdb-stream a.al-stream-item:focus-visible {
    background: color-mix(in srgb, var(--background-color), var(--surface-color) 35%);
}

.tdb-stream a.al-stream-item:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.page-activity .tdb-stream a.al-stream-item:hover strong,
.page-activity .tdb-stream a.al-stream-item:focus-visible strong {
    text-decoration: underline;
}

.tdb-stream-corps {
    min-width: 0;
}

.page-activity .tdb-stream .al-stream-item .tdb-stream-affaire {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .625rem;
    margin-top: 2px;
}

.page-activity .tdb-stream .al-stream-item .tdb-alerte-numero,
.page-activity .tdb-stream .al-stream-item .tdb-chrono-affaire {
    font-size: .75rem;
    font-weight: 700;
    color: var(--heading-color);
}

/* Le texte d'une ligne de chronologie : sur deux lignes au plus. */
.page-activity .tdb-stream .al-stream-item .tdb-chrono-texte {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.tdb-stream .al-dot.info {
    background: var(--info-color);
}

.tdb-stream .al-dot.neutre {
    background: var(--muted-color);
}

.tdb-stream-pied {
    display: block;
    padding: 10px 14px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--accent-color);
    cursor: pointer;
}

.tdb-stream .tdb-stream-pied:hover,
.tdb-stream .tdb-stream-pied:focus-visible {
    text-decoration: underline;
}

.tdb-stream .tdb-stream-pied {
    text-decoration: none;
}

/* Pas de trait sous la dernière ligne des alertes : le bord de la carte suffit. */
.tdb-alertes .tdb-stream-groupe:last-child > .tdb-stream-liste:last-child > li:last-child {
    border-bottom: 0;
}

.tdb-stream-vide {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: 1rem 14px;
    margin: 0;
    color: var(--muted-color);
}

.tdb-stream-vide .bi {
    color: #23974f;
}

.tdb-trajet {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tdb-trajet .fleche {
    margin: 0 .125rem;
}

.nd-recent-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading-color);
}

.nd-recent-item a {
    color: var(--heading-color);
}

.tdb-graphique {
    min-height: 260px;
}

/* Carte des départements (ECharts) et classement à côté. */
.tdb-carte {
    width: 100%;
    height: 560px;
}

.tdb-carte-indisponible {
    display: grid;
    place-items: center;
    height: 8rem;
    color: var(--muted-color);
}

.tdb-source {
    margin: .5rem 0 0;
    font-size: .75rem;
    color: var(--muted-color);
}

.tdb-annees {
    max-width: 100%;
    overflow-x: auto;
}

.tdb-annees .nd-period-btn {
    flex: none;
}

.tdb-classement {
    display: grid;
    gap: .75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 575.98px) {
    .tdb-carte {
        height: 330px;
    }
}

.tdb-resume-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tdb-resume-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Délai d'obtention de l'autorisation de transfert : carte des chiffres clés (violet) et détail. */
.tdb-kpi-delai {
    --couleur-delai: var(--role-vendeur-acquereur, #7a5cc4);
    background: color-mix(in srgb, var(--couleur-delai), transparent 92%);
}

.tdb-kpi-delai::after {
    background: color-mix(in srgb, var(--couleur-delai), transparent 94%);
}

.tdb-kpi-delai .nd-kpi-icon {
    color: var(--role-vendeur-acquereur-encre, #5b3fa0);
    background: color-mix(in srgb, var(--couleur-delai), transparent 82%);
}

.tdb-explication {
    margin: 0 0 1rem;
    font-size: .875rem;
    color: var(--muted-color);
}

.tdb-delais-prefectures th[scope="row"] {
    font-weight: 500;
}

.tdb-delais-ecart {
    display: block;
    font-size: .75rem;
    color: var(--muted-color);
}

/* Délai par préfecture : classement, colonnes triables, barre du délai moyen (violet du délai). */
.tdb-tableau-defilant {
    max-height: 34rem;
    overflow-y: auto;
}

.tdb-tableau-defilant thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-color, #fff);
    box-shadow: inset 0 -1px 0 var(--border-color, #e3e8ec);
}

.tdb-tri {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
}

.tdb-tri::after {
    content: "";
    width: .5rem;
    height: .5rem;
    opacity: .35;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 40%, 0 40%, 50% 0, 0 60%, 100% 60%, 50% 100%, 0 60%);
}

[aria-sort="ascending"] > .tdb-tri::after {
    opacity: 1;
    clip-path: polygon(50% 10%, 100% 70%, 0 70%);
}

[aria-sort="descending"] > .tdb-tri::after {
    opacity: 1;
    clip-path: polygon(0 30%, 100% 30%, 50% 90%);
}

.tdb-tri:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.tdb-col-delai {
    min-width: 11rem;
}

.tdb-delai {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tdb-delai strong {
    flex: none;
    min-width: 4.75rem;
    font-weight: 600;
}

.tdb-barre {
    position: relative;
    flex: 1 1 auto;
    min-width: 4rem;
    height: .375rem;
    background: color-mix(in srgb, var(--role-vendeur-acquereur, #7a5cc4), transparent 88%);
    border-radius: 1rem;
}

.tdb-barre > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--role-vendeur-acquereur, #7a5cc4);
    border-radius: 1rem;
}

/* Délai moyen de toutes les préfectures de la période. */
.tdb-barre > i {
    position: absolute;
    top: -.25rem;
    bottom: -.25rem;
    width: 2px;
    margin-left: -1px;
    background: var(--heading-color, #012970);
    border-radius: 1px;
}

.tdb-rang {
    width: 3.5rem;
    font-weight: 600;
    color: var(--heading-color);
}

.tdb-sans-accord th,
.tdb-sans-accord td {
    color: var(--muted-color);
}

/* Préfectures : taux de refus ; issue des dossiers : la période d'avant sous chaque chiffre. */
.tdb-taux,
.tdb-avant {
    font-size: .75rem;
    font-weight: 400;
    color: var(--muted-color);
}

.tdb-avant {
    display: block;
    margin-top: .125rem;
    line-height: 1.3;
}

/* Règlements attendus : les prochains dossiers. */
.tdb-attendus {
    display: grid;
    gap: .375rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tdb-attendus li {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto auto;
    gap: .75rem;
    align-items: center;
    padding: .375rem 0;
    font-size: .875rem;
    border-bottom: 1px solid var(--border-color, #e3e8ec);
}

.tdb-attendus time,
.tdb-attendu-montant {
    color: var(--muted-color);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .tdb-attendus li {
        grid-template-columns: 1fr auto;
        gap: .25rem .75rem;
    }

    .tdb-attendus time {
        grid-row: 1;
        grid-column: 2;
        text-align: right;
    }

    .tdb-attendu-montant {
        text-align: right;
    }
}

/* Flux géographiques : barre bleue, flux qui restent dans leur département en retrait. */
.tdb-flux-fleche {
    width: 1.5rem;
    color: var(--muted-color);
}

.tdb-barre-flux {
    background: color-mix(in srgb, var(--accent-color), transparent 88%);
}

.tdb-barre-flux > span {
    background: var(--accent-color);
}

.tdb-flux-interne td {
    color: var(--muted-color);
}

/* Téléphone : le délai sans sa barre, pour que le tableau tienne dans la largeur. */
@media (max-width: 575.98px) {
    .tdb-col-delai {
        min-width: 0;
    }

    .tdb-delai strong {
        min-width: 0;
    }

    .tdb-barre {
        display: none;
    }

    .tdb-rang {
        width: 2rem;
    }

    .tdb-tri {
        white-space: normal;
    }
}

@media (max-width: 575.98px) {
    .tdb-resume-4,
    .nd-chart-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Rubrique Outils ---------- */

/* Numéro de département, en pastille (préfectures, limitrophes). */
.pastille-departement {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .375rem;
    font-family: var(--heading-font);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: var(--radius-md);
}

a.pastille-departement:hover,
a.pastille-departement:focus-visible {
    color: #fff;
    background: var(--accent-color);
}

.pastille-departement.pastille-choisie {
    color: #fff;
    background: var(--accent-red);
}

/* ---------- Administration › Préfectures, par département ---------- */

/*
 * Départements à gauche, département choisi à droite. Sous 992 px : la liste seule, puis le
 * département avec un sélecteur pour en changer.
 */
.annuaire-prefectures {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.annuaire-departements {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
}

.annuaire-departements .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
}

.annuaire-departements .card-header > * {
    margin: 0;
}

.filtres-departements .btn {
    flex: 1 1 0;
}

.filtres-departements .nombre {
    margin-inline-start: .25rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

.liste-departements {
    flex: 1 1 auto;
    min-height: 0;
    padding: .375rem;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.departement-lien {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4375rem .625rem;
    color: var(--default-color);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.departement-lien:hover {
    background: var(--background-color);
}

.departement-lien:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.departement-lien[aria-current="page"] {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    box-shadow: inset 3px 0 0 var(--accent-red);
}

.departement-lien[aria-current="page"] .pastille-departement {
    color: #fff;
    background: var(--accent-color);
}

.liste-departements .pastille-departement {
    flex: none;
}

.departement-texte {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.departement-nom {
    overflow: hidden;
    font-weight: 600;
    line-height: 1.3;
    color: var(--heading-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.departement-composition {
    font-size: .75rem;
    color: var(--muted-color);
}

.point-a-completer {
    flex: none;
    width: .5rem;
    height: .5rem;
    background: var(--warning-color);
    border-radius: var(--radius-full);
}

/* Formulaire de la préfecture, sur la carte Préfecture de la fiche d'un transfert. */
.formulaire-affaire {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .625rem;
    align-items: center;
    padding: .625rem .75rem;
    background: var(--background-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
}

.formulaire-affaire > .bi {
    font-size: 1.25rem;
    color: var(--accent-color);
}

.formulaire-affaire a:not(.btn) {
    font-weight: 600;
}

.formulaire-affaire .formulaire-aide {
    display: block;
    font-size: .8125rem;
    color: var(--muted-color);
}

/* « Notice à remplir » cochée sans formulaire déposé. */
.notice-sans-formulaire {
    color: var(--warning-color);
}

/* Département qui a un formulaire de demande de transfert. */
.icone-formulaire {
    flex: none;
    font-size: .875rem;
    color: var(--muted-color);
}

.formulaire-prefecture .fichier-actuel {
    overflow-wrap: anywhere;
}

.liste-departements-vide {
    padding: 1rem 1.25rem;
    margin: 0;
    font-size: .875rem;
}

.annuaire-detail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.annuaire-detail > .card {
    margin: 0;
}

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

.pastille-departement.pastille-grande {
    min-width: 3.25rem;
    height: 3.25rem;
    font-size: 1.125rem;
    color: #fff;
    background: var(--heading-color);
}

.entete-departement-texte {
    flex: 1 1 12rem;
    min-width: 0;
}

.entete-departement-numero {
    font-weight: 400;
    color: var(--muted-color);
}

.entete-departement h2 {
    margin: 0;
    font-size: 1.5rem;
}

.entete-departement p {
    margin: .125rem 0 0;
    color: var(--muted-color);
}

.carte-prefecture .card-header {
    align-items: flex-start;
    gap: 1rem;
}

.genre-prefecture {
    margin: 0 0 .125rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--accent-red);
}

.sous-prefecture .genre-prefecture {
    color: var(--muted-color);
}

.manque-prefecture {
    display: flex;
    align-items: center;
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: #a14a00;
}

.affaires-prefecture {
    font-size: .8125rem;
    color: var(--muted-color);
    background: transparent;
}

.zone-suppression {
    margin-top: 1.5rem;
}

.zone-suppression .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.zone-suppression-texte {
    flex: 1 1 22rem;
}

/* Choix de la préfecture qui reçoit les affaires, à côté du bouton. */
.formulaire-suppression {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
}

.formulaire-suppression .form-select {
    max-width: 22rem;
}

@media (min-width: 992px) {
    .annuaire-prefectures {
        grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    }

    .annuaire-departements {
        position: sticky;
        top: calc(var(--header-height) + 1.25rem);
        max-height: calc(100vh - var(--header-height) - 2.5rem);
    }

    .changer-departement {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .annuaire-prefectures.avec-departement .annuaire-departements,
    .annuaire-prefectures:not(.avec-departement) .annuaire-detail {
        display: none;
    }
}

/* ---------- Outils › Enregistrement (même mise en page que les préfectures) ---------- */

/* Service d'une commune : la recherche, puis une ligne par commune (ou arrondissement). */
.recherche-commune-enregistrement {
    margin-bottom: 1.25rem;
}

.recherche-commune-formulaire {
    max-width: 40rem;
}

.recherche-commune-formulaire .form-label {
    font-weight: 600;
    color: var(--heading-color);
}

.resultats-commune {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
}

.resultats-commune > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    padding: .625rem .875rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
}

.resultat-commune-nom {
    flex: 0 0 14rem;
    font-weight: 600;
}

.resultat-commune-service {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.resultats-commune-vide {
    margin: 1rem 0 0;
    color: var(--muted-color);
}

.source-enregistrement {
    display: block;
    font-size: .8125rem;
}

/* Carte d'un service : « Copier l'adresse » à droite du titre. */
.carte-enregistrement .card-header {
    justify-content: space-between;
}

.carte-enregistrement .card-header .btn {
    flex: none;
}

/* L'adresse à coller dans un courrier, telle qu'elle sera copiée. */
.adresse-courrier {
    padding: .625rem .875rem;
    margin: 0;
    background: var(--background-color);
    border-left: 3px solid var(--accent-color);
    border-radius: var(--radius-sm);
}

.competence-enregistrement {
    margin: 0;
    font-size: .875rem;
}

/* Adresse corrigée par le cabinet : la mention, puis le formulaire replié. */
.adresse-corrigee {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.corriger-adresse {
    margin-top: .625rem;
    font-size: .875rem;
}

.corriger-adresse > summary {
    width: fit-content;
    color: var(--accent-color);
    cursor: pointer;
}

.informations-enregistrement {
    font-size: .875rem;
    color: var(--muted-color);
}

.informations-enregistrement p {
    margin: 0 0 .375rem;
}

.informations-enregistrement p:last-child {
    margin-bottom: 0;
}

.resultat-commune-incertain {
    flex-basis: 100%;
    font-size: .8125rem;
    color: #a14a00;
}

/* ---------- Outils › Arrêtés (même mise en page que les préfectures) ---------- */

/* HOF, ZP : en vigueur (plein) ou manquant (contour pointillé). */
.pastille-nature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: .125rem .375rem;
    font-family: var(--heading-font);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--muted-color);
    white-space: nowrap;
    border: 1px dashed color-mix(in srgb, var(--muted-color), transparent 45%);
    border-radius: var(--radius-sm);
}

.pastille-nature.presente {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 88%);
    border-color: transparent;
}

.pastilles-natures {
    display: flex;
    flex: none;
    gap: .25rem;
}

.pastilles-natures .pastille-nature {
    min-width: 2.125rem;
    padding-inline: .25rem;
    font-size: .625rem;
}

.departement-lien[aria-current="page"] .pastille-nature:not(.presente) {
    background: var(--surface-color);
}

.carte-arretes .card-title {
    gap: .625rem;
}

.liste-arretes > .arrete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--border-color-light);
}

.liste-arretes > .arrete:first-child {
    border-top: 0;
}

.arrete-texte {
    flex: 1 1 14rem;
    min-width: 0;
}

.arrete-portee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 600;
    color: var(--heading-color);
}

.arrete-ancien .arrete-portee {
    font-weight: 500;
    color: var(--default-color);
}

.arrete-references {
    margin: .125rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.arrete-aussi {
    display: inline-block;
    padding: 0 .4375rem;
    margin-inline-start: .375rem;
    font-size: .75rem;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    border-radius: var(--radius-full);
}

.arrete-actions {
    display: flex;
    flex: none;
    gap: .375rem;
}

.arretes-vide {
    color: var(--muted-color);
}

.arretes-manque {
    display: flex;
    align-items: center;
    padding: .625rem 1.25rem;
    margin: 0;
    font-size: .8125rem;
    color: #a14a00;
    background: color-mix(in srgb, var(--warning-color), transparent 90%);
}

.bouton-anciens {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    font: inherit;
    color: var(--heading-color);
    text-align: start;
    text-decoration: none;
}

.bouton-anciens:hover,
.bouton-anciens:focus {
    color: var(--accent-color);
    text-decoration: none;
}

.carte-anciens .card-title {
    flex: 1 1 auto;
}

.bouton-anciens .chevron {
    margin-inline-start: auto;
    transition: transform var(--transition-fast);
}

.bouton-anciens:not(.collapsed) .chevron {
    transform: rotate(180deg);
}

.carte-anciens .liste-arretes {
    border-top: 1px solid var(--border-color-light);
}

.carte-voies-sous-titre {
    margin: .125rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.recherche-voies {
    max-width: 16rem;
}

.groupes-voies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.5rem 2rem;
    align-items: start;
}

.groupe-voies-titre {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
}

.groupe-voies-arrete {
    margin: .125rem 0 .5rem;
    font-size: .75rem;
    color: var(--muted-color);
}

.groupe-voies li {
    padding: .375rem 0;
    border-top: 1px solid var(--border-color-light);
}

.voie-nom {
    font-weight: 500;
    color: var(--heading-color);
}

.voie-portion {
    display: block;
    font-size: .8125rem;
    color: var(--muted-color);
}

.voies-vide {
    grid-column: 1 / -1;
}

.choix-natures {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
}

.choix-natures .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.import-resume {
    margin: 1rem 0 0;
    font-size: .875rem;
}

.regles-import ul {
    padding-inline-start: 1.125rem;
    list-style: disc;
}

.regles-import li {
    margin-bottom: .375rem;
}

.regles-import code {
    overflow-wrap: anywhere;
}

.import-progression {
    display: block;
    width: 100%;
    height: .5rem;
    accent-color: var(--accent-color);
}

.import-bilan {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
}

.tableau-import .import-chemin {
    max-width: 24rem;
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.import-message,
.import-lien {
    font-size: .8125rem;
}

.import-lien {
    white-space: nowrap;
}

.tableau-import tr[data-statut="erreur"] .import-message {
    color: var(--danger-color);
}

.tableau-import tr[data-statut="ignore"],
.tableau-import tr[data-statut="deja"] {
    color: var(--muted-color);
}

/* Fenêtre de modification d'une préfecture : des sections titrées plutôt que des cartes. */
.titre-section-fenetre {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .875rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border-color-light);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--heading-color);
}

.titre-section-fenetre .bi {
    color: var(--muted-color);
}

#modification-prefecture .modal-header {
    align-items: flex-start;
}

/* Contacts d'une préfecture : une ligne par contact, grisée quand elle est retirée, avec une
   poignée pour changer l'ordre (glisser-déposer, ou flèches haut et bas). */
.ligne-contact {
    display: flex;
    gap: .375rem;
    align-items: flex-start;
    padding: .875rem 1rem .75rem;
    background: var(--background-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
}

.contenu-contact {
    flex: 1 1 auto;
    min-width: 0;
}

.poignee-contact {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 2rem;
    margin: 1.625rem 0 0 -.5rem;
    padding: 0;
    color: var(--muted-color);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    cursor: grab;
    touch-action: none;
}

.poignee-contact:hover {
    color: var(--heading-color);
    background: var(--border-color-light);
}

.poignee-contact:focus-visible {
    color: var(--heading-color);
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.ligne-contact-choisie .poignee-contact {
    cursor: grabbing;
}

.ligne-contact-fantome {
    background: var(--surface-color);
    border-style: dashed;
    border-color: var(--accent-color);
}

.ligne-contact-fantome > * {
    visibility: hidden;
}

.ligne-contact.retiree {
    opacity: .55;
}

.ligne-contact.retiree input:not([data-retirer-contact]) {
    text-decoration: line-through;
}

.retirer-contact {
    margin: .5rem 0 0;
    font-size: .8125rem;
}

/* Outils réglementaires. */
.outil-recherche .input-group {
    flex-wrap: nowrap;
}

.outil-recherche .autocompletion-liste {
    top: 100%;
    right: 0;
    left: 0;
}

.outil-propositions {
    margin-top: 1.25rem;
}

.outil-propositions li + li {
    margin-top: .25rem;
}

.resultat-limitrophes {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color-light);
}

/* Le quota : le chiffre que l'on vient chercher. */
.quota-chiffre {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .25rem 0 1.25rem;
}

.quota-chiffre strong {
    font-family: var(--heading-font);
    font-size: 3.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
}

.quota-chiffre span {
    max-width: 19rem;
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--default-color);
}

.quota-calcul {
    margin: 0 0 1rem;
    font-size: .875rem;
}

.quota-calcul > div {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) 1fr;
    gap: .25rem 1rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--border-color-light);
}

.quota-calcul dt {
    font-weight: 400;
    color: var(--muted-color);
}

.quota-calcul dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.quota-calcul .quota-calcul-total {
    border-bottom-style: solid;
}

.quota-calcul .quota-calcul-total dt {
    font-weight: 600;
    color: var(--heading-color);
}

@media (max-width: 575.98px) {
    .quota-calcul > div {
        grid-template-columns: 1fr;
    }
}

.resultat-limitrophes-titre {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .75rem;
}

.carte-limitrophes {
    width: 100%;
    height: 17rem;
    margin-bottom: .75rem;
}

.liste-limitrophes {
    display: grid;
    gap: .625rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.liste-limitrophes li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

/* ---------- Recette : pastille fixe (templates/element/bandeau_recette.php) ---------- */

.bandeau-recette {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 2000;
    max-width: min(440px, calc(100vw - 24px));
    padding: 8px 12px;
    border: 1px solid #e5c76b;
    border-radius: var(--radius-md, .25rem);
    background: #fcf3d6;
    color: #5c4300;
    font-size: .8125rem;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgb(1 41 112 / .12);
    pointer-events: none;
}

/* ---------- Badge « Mise à jour » (seuils réglés dans Administration › Paramètres) ---------- */

.maj {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-full);
}

.maj-icone {
    flex: none;
    font-size: .8125rem;
    line-height: 1;
}

.maj-recente {
    color: #1d6a3e;
    background: #e3f4e9;
}

.maj-recente .maj-icone {
    color: #23974f;
}

.maj-avertissement {
    color: #8f4306;
    background: #fdecdc;
}

.maj-avertissement .maj-icone {
    color: #e07a0b;
}

.maj-alerte {
    color: #a12530;
    background: #fde6e7;
}

.maj-alerte .maj-icone {
    color: #d6293e;
}

.maj-hors-suivi {
    color: var(--muted-color);
    background: #f0f2f6;
}

.table-affaires .mise-a-jour {
    white-space: nowrap;
}

/* Sous md, la colonne est masquée : le badge passe sous le statut, un peu plus compact. */
.table-affaires .maj-mobile .maj {
    gap: .25rem;
    padding: .1875rem .5rem;
    font-size: .75rem;
}

.table-affaires .maj-mobile {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: max-content;
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--muted-color);
}

.fiche-meta .maj {
    margin-left: .25rem;
}

.fiche-meta .maj .bi {
    margin: 0;
}

/* ---------- Gestion des affaires › Paramètres ---------- */

.parametre-nombre {
    max-width: 14rem;
}

/* ---------- Recherche du haut : suggestions pendant la frappe et page des résultats ---------- */

.recherche-suggestions {
    position: absolute;
    top: calc(100% + .375rem);
    right: 0;
    left: 0;
    z-index: 1050;
    max-height: min(72vh, 36rem);
    overflow-y: auto;
    text-align: start;
    background: var(--surface-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    container-type: inline-size;
}

.recherche-suggestions[hidden] {
    display: none;
}

.suggestions-groupes {
    display: grid;
}

.suggestions-groupe {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .5rem;
}

.suggestions-groupe + .suggestions-groupe {
    border-top: 1px solid var(--border-color-light);
}

/* Assez large : les affaires d'un côté, les clients de l'autre. */
@container (min-width: 34rem) {
    .suggestions-groupes {
        grid-template-columns: 1fr 1fr;
    }

    .suggestions-groupe + .suggestions-groupe {
        border-top: 0;
        border-left: 1px solid var(--border-color-light);
    }
}

.suggestions-titre {
    margin: .25rem .625rem .375rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--heading-color);
}

.nombre-resultats {
    margin-inline-start: .25rem;
    font-weight: 500;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
}

.suggestions-vide {
    margin: 0 .625rem .5rem;
    font-size: .8125rem;
    color: var(--muted-color);
}

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

.resultat {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .5rem .625rem;
    font-size: .8125rem;
    color: var(--default-color);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.resultat:hover,
.resultat:focus-visible {
    color: var(--default-color);
    background: var(--background-color);
    outline: none;
    box-shadow: inset 3px 0 0 var(--accent-red);
}

.resultat-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.resultat-titre {
    font-weight: 700;
    color: var(--heading-color);
}

.resultat .statut {
    padding: .125rem .5rem;
    font-size: .6875rem;
}

.resultat-trajet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .25rem;
    min-width: 0;
}

.resultat-trajet .fleche {
    color: var(--accent-red);
}

.resultat-coordonnees {
    gap: 0 .75rem;
}

.resultat-coordonnees > span {
    white-space: nowrap;
}

.resultat-detail {
    font-size: .75rem;
    color: var(--muted-color);
}

.suggestions-voir-tout {
    display: block;
    padding: .5rem .625rem .25rem;
    margin-top: auto;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.suggestions-voir-tout:hover,
.suggestions-voir-tout:focus-visible {
    background: var(--background-color);
    outline: none;
    box-shadow: inset 3px 0 0 var(--accent-red);
}

.suggestions-voir-tout .nombre-resultats {
    margin-inline-start: 0;
}

.suggestions-tout {
    display: block;
    padding: .625rem 1.125rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    border-top: 1px solid var(--border-color-light);
}

.suggestions-tout:hover,
.suggestions-tout:focus-visible {
    background: var(--background-color);
    outline: none;
}

.resultats-recherche .liste-resultats {
    padding: .375rem;
}

.resultats-recherche .liste-resultats li + li {
    border-top: 1px solid var(--border-color-light);
}

.resultats-recherche .resultat {
    padding: .75rem .875rem;
    font-size: .875rem;
}

/* ---------- Connexion : code de double authentification ---------- */

.fauth-card-head.text-center .fauth-subtitle {
    margin-inline: auto;
}

.destination-code {
    font-weight: 700;
    color: var(--heading-color);
    white-space: nowrap;
}

.code-precision {
    padding: .5rem .75rem;
    font-size: .8125rem;
}

.fauth-form fieldset.fauth-field {
    min-width: 0;
    padding: 0;
    margin: 0 0 1.25rem;
    border: 0;
}

.fauth-otp-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.code-renvoi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .25rem .875rem;
    padding-top: 1rem;
    margin-top: 1rem;
    font-size: .8125rem;
    border-top: 1px solid var(--border-color-light);
}

.code-renvoi-titre {
    width: 100%;
    margin: 0;
    color: var(--muted-color);
    text-align: center;
}

.code-renvoi .btn-link {
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.code-renvoi .btn-link:disabled {
    color: var(--muted-color);
    text-decoration: none;
    opacity: 1;
}

/* Calendrier dans une fenêtre (flatpickr « static ») : son cadre prend la place du champ dans le
   groupe, à côté de l'icône. */
.input-group > .flatpickr-wrapper {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group > .flatpickr-wrapper > .form-control {
    width: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------- Résultats de la recherche (classes srx-* du thème, page « Search Results ») ---------- */

.page-search-results .srx-result-item[hidden],
.page-search-results [data-groupe][hidden] {
    display: none !important;
}

/* Titre d'un résultat : un h3 (plan de la page) habillé comme le h6 du modèle. */
.page-search-results .srx-result-body h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .9375rem;
    color: var(--heading-color);
}

.page-search-results .srx-result-body h3 a {
    color: var(--heading-color);
    text-decoration: none;
}

.page-search-results .srx-result-body h3 a:hover,
.page-search-results .srx-result-body h3 a:focus-visible {
    color: var(--accent-color);
}

.page-search-results .srx-result-body p {
    font-size: .8125rem;
}

.page-search-results .srx-result-body p .fleche {
    margin: 0 .25rem;
}

/* Détails d'un résultat : chacun d'un bloc, pour que le surlignage (<mark>) ne l'écarte pas. */
.page-search-results .srx-result-meta > span {
    display: inline-block;
    font-size: .75rem;
}

.page-search-results .srx-result-meta > span > .bi {
    margin-right: 4px;
}

.page-search-results .srx-result-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.page-search-results .srx-initiales {
    font-size: .8125rem;
    font-weight: 700;
}

.page-search-results .srx-groupe + .srx-groupe {
    margin-top: 1.25rem;
}

.page-search-results .srx-groupe-suite {
    margin: .5rem 0 0;
}

.page-search-results .srx-aucun {
    margin: 0;
}

/* Titres des blocs de filtres : comme les libellés du modèle (« Source Type »). */
.page-search-results .srx-filter-titre {
    display: block;
    margin-bottom: 6px;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-color);
}

.page-search-results .srx-tab {
    font-size: .8125rem;
    font-weight: 400;
}

.page-search-results .srx-sort {
    height: 2.25rem;
    font-size: .8125rem;
}

.page-search-results .srx-command-input {
    font-size: 1rem;
}

.page-search-results .srx-count {
    font-size: .8125rem;
}

.page-search-results .srx-pagination .page-link {
    min-width: 2rem;
}

/* ------------------------------------------------------------------
   Administration › Rôles : droits d'un rôle sur un module (quatre cases),
   tableau des droits, formulaire d'un rôle.
   ------------------------------------------------------------------ */
.droits-role {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

/* Une case : Consulter, Créer, Modifier, Supprimer ; en couleur quand elle est cochée. */
.droit-case {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 3px;
    font-size: .6875rem;
    color: #b9c4cc;
    background: #f1f4f6;
}

.droit-case.coche {
    color: var(--role-commercial-encre);
    background: var(--role-commercial-fond);
}

.droits-tous .droit-case.coche {
    color: var(--role-admin-encre);
    background: var(--role-admin-fond);
}

.droits-interdits {
    gap: .375rem;
    font-size: .8125rem;
    color: var(--light-color);
}

.droit-legende {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--heading-color);
}

.matrice-droits th[scope="col"] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted-color);
    white-space: nowrap;
}

.matrice-droits tbody th {
    font-weight: 600;
    min-width: 12rem;
}

.matrice-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    color: var(--heading-color);
}

.etiquette-role {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .0625rem .4375rem;
    border-radius: var(--radius-full);
    background: var(--role-admin-fond);
    color: var(--role-admin-encre);
    font-size: .6875rem;
    font-weight: 600;
}

.etiquette-mon-role {
    background: var(--role-commercial-fond);
    color: var(--role-commercial-encre);
}

.matrice-perimetre {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .125rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--muted-color);
}

.matrice-actions {
    display: inline-flex;
    gap: .375rem;
    white-space: nowrap;
}

.legende-niveaux,
.legende-modules {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .625rem 1.25rem;
    margin: 0 0 1rem;
}

.legende-niveaux dd,
.legende-modules dd {
    margin: 0;
    color: var(--muted-color);
    font-size: .875rem;
}

.legende-modules dt {
    font-weight: 600;
    color: var(--heading-color);
    font-size: .875rem;
}

.droits-aide {
    margin: 0;
    padding: .75rem 1.25rem 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.droits-modules .droit-module {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
    gap: .75rem 2rem;
    align-items: start;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color-light);
}

.droits-modules .droit-module:first-child {
    border-top: 0;
}

.droit-module-nom {
    margin: 0 0 .125rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--heading-color);
}

.droit-module-contenu {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

/* Droits d'un module : « Accès interdit », puis les quatre cases, en boutons à bascule. */
.choix-droits {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    width: 100%;
}

.choix-droits .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    white-space: nowrap;
}

.choix-cases {
    display: flex;
    flex: 1;
    min-width: 0;
}

.choix-cases .btn {
    flex: 1;
}

.choix-droits .btn-check:disabled + .btn {
    border-style: dashed;
}

.droit-module-erreur {
    margin: .375rem 0 0;
    font-size: .8125rem;
    color: var(--bs-form-invalid-color, #dc3545);
}

.droit-module.is-invalid .choix-droits .btn {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.perimetre-affaires {
    margin: .75rem 0 0;
    padding: 0;
    border: 0;
    font-size: .875rem;
}

/* Écran moyen : les cases sous le nom du module. */
@media (max-width: 1199.98px) {
    .droits-modules .droit-module {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {

    .choix-droits .choix-interdit {
        flex: 1 0 100%;
    }

    .choix-cases {
        flex-basis: 100%;
    }

    .choix-cases .btn {
        min-width: 0;
        padding-left: .25rem;
        padding-right: .25rem;
        font-size: .75rem;
    }

    /* Téléphone : les libellés seuls. */
    .choix-cases .btn .bi {
        display: none;
    }

    .legende-niveaux {
        grid-template-columns: minmax(0, 1fr);
        gap: .25rem;
    }

    .legende-niveaux dd {
        margin-bottom: .5rem;
    }
}

/* Paramètres en lecture seule : les champs dans un fieldset désactivé. */
.parametres-champs {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Paramètres des affaires : le suivi par état à gauche (60 %), devis et factures et la fiche
   pratique à droite ; l'un sous l'autre sur un écran plus étroit. */
.parametres-colonnes {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.parametres-colonne-principale,
.parametres-colonne-laterale {
    min-width: 0;
}

.parametres-colonne-laterale {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1200px) {
    .parametres-colonnes {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    /* Tableau des délais plus serré dans ses 60 % : en-têtes sur deux lignes, champs plus étroits. */
    .parametres-colonne-principale .delais-etats th,
    .parametres-colonne-principale .delais-etats td {
        padding-left: .625rem;
        padding-right: .625rem;
    }

    .parametres-colonne-principale .delais-etats th:first-child,
    .parametres-colonne-principale .delais-etats td:first-child {
        padding-left: 1rem;
    }

    .parametres-colonne-principale .delais-etats th:last-child,
    .parametres-colonne-principale .delais-etats td:last-child {
        padding-right: 1rem;
    }

    .parametres-colonne-principale .delais-etats th[scope="col"] {
        white-space: normal;
    }

    .parametres-colonne-principale .delai-etat {
        width: 6.5rem;
    }

    /* Aperçu de la colonne « Mise à jour » : badges plus petits, sur une ligne s'il y a la place. */
    .parametres-colonne-principale .delais-badges {
        gap: .25rem;
    }

    .parametres-colonne-principale .delais-badges .maj {
        gap: .25rem;
        padding: .1875rem .4375rem;
        font-size: .75rem;
    }

    .parametres-colonne-principale .delais-badges .maj-icone {
        font-size: .75rem;
    }
}

@media (min-width: 1400px) {
    .parametres-colonne-principale .delais-badges {
        flex-wrap: nowrap;
    }
}

/* Délais par état du dossier (paramètres). */
.delais-etats th[scope="col"] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted-color);
    white-space: nowrap;
}

.delais-etats tbody th {
    font-weight: 400;
    white-space: nowrap;
}

/* État propre aux transferts ou aux directs. */
.delais-etats .etat-type {
    display: block;
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--muted-color);
}

/* En-tête de ligne : même filet que les cellules (le thème le fonce pour les th). */
.delais-etats tbody th,
.matrice-droits tbody th {
    border-bottom-color: rgb(234 240 243);
}

.delai-etat {
    width: 8.5rem;
}

@media (max-width: 575.98px) {
    .delai-etat {
        width: 4.75rem;
    }

    .delais-etats th,
    .delais-etats td {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .delais-etats th[scope="col"] {
        white-space: normal;
    }
}

.delais-appliques {
    white-space: nowrap;
}

.delais-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.delais-source {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--muted-color);
}

/* ---------- Courriers suivis par La Poste (chronologie et fenêtre du suivi) ---------- */

.courriers-suivis {
    display: grid;
    gap: .5rem;
    margin-top: .625rem;
    container-type: inline-size;
}

.courrier-suivi {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .625rem .75rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
}

.courrier-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1rem;
    color: var(--statut-texte);
    background: var(--statut-fond);
    border-radius: var(--radius-full);
}

.courrier-icone-grande {
    flex: none;
    width: 3rem;
    height: 3rem;
    font-size: 1.375rem;
}

.courrier-titre {
    display: flex;
    flex-wrap: wrap;
    gap: .125rem .5rem;
    align-items: baseline;
}

.courrier-nature {
    font-size: .875rem;
    font-weight: 600;
    color: var(--heading-color);
}

.courrier-numero {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    letter-spacing: .02em;
    color: var(--muted-color);
    white-space: nowrap;
}

.courrier-statut {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    align-items: center;
    margin-top: .25rem;
}

.courrier-statut .statut {
    font-size: .75rem;
    white-space: normal;
    border-radius: var(--radius-md);
}

.courrier-detail {
    font-size: .8125rem;
    color: var(--default-color);
    overflow-wrap: anywhere;
}

.courrier-erreur {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--muted-color);
}

.courrier-bouton {
    white-space: nowrap;
}

/* Ligne de chronologie étroite (colonne de la fiche, téléphone) : le bouton passe sous le statut. */
@container (max-width: 34rem) {
    .courrier-suivi {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .courrier-bouton {
        grid-column: 2;
        justify-self: start;
    }
}

/* Très étroite (téléphone) : sans l'icône, le statut prend toute la largeur. */
@container (max-width: 20rem) {
    .courrier-suivi {
        grid-template-columns: minmax(0, 1fr);
    }

    .courrier-icone {
        display: none;
    }

    .courrier-bouton {
        grid-column: 1;
    }
}

/* Formulaire de la chronologie : numéros de suivi des courriers du nouvel état. */
.suivis-courriers {
    padding: .875rem 1rem 1rem;
    background: var(--background-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
}

.suivis-courriers .suivis-titre {
    float: none;
    width: auto;
    margin: 0 0 .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--heading-color);
}

.suivis-courriers .suivis-titre .bi {
    margin-right: .375rem;
    color: var(--accent-color);
}

.numero-suivi {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .03em;
}

/* Fenêtre du suivi : dernier statut, étapes de La Poste, historique. */
.suivi-entete {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.suivi-dernier {
    margin: .5rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
}

.suivi-numero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .125rem .75rem;
    margin: .625rem 0 0;
    font-size: .8125rem;
}

.suivi-numero dt {
    font-weight: 400;
    color: var(--muted-color);
}

.suivi-numero dd {
    margin: 0;
}

.suivi-numero .courrier-numero {
    font-size: .875rem;
    color: var(--heading-color);
}

.suivi-etapes {
    --suivi-fait: var(--success-color);
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0 0 1.5rem;
    list-style: none;
    counter-reset: etape;
}

.suivi-etapes li {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    padding: 0 .25rem;
    text-align: center;
}

/* Trait entre deux étapes, coloré jusqu'à la dernière faite. */
.suivi-etapes li + li::before {
    position: absolute;
    top: .75rem;
    right: 50%;
    left: -50%;
    height: 2px;
    content: "";
    background: var(--border-color);
}

.suivi-etapes li.faite + li.faite::before {
    background: var(--suivi-fait);
}

.suivi-etape-point {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: .875rem;
    color: #fff;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
}

.suivi-etapes li.faite .suivi-etape-point {
    background: var(--suivi-fait);
    border-color: var(--suivi-fait);
}

.suivi-etapes li.actuelle .suivi-etape-point {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--suivi-fait), transparent 75%);
}

.suivi-etape-libelle {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

.suivi-etapes li.actuelle .suivi-etape-libelle {
    font-weight: 600;
    color: var(--heading-color);
}

@media (max-width: 575.98px) {
    .suivi-etapes {
        flex-direction: column;
        gap: .625rem;
    }

    .suivi-etapes li {
        flex-direction: row;
        padding: 0;
        text-align: left;
    }

    .suivi-etapes li + li::before {
        top: -.625rem;
        right: auto;
        left: .6875rem;
        width: 2px;
        height: .625rem;
    }
}

.suivi-sous-titre {
    margin: 0 0 .75rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--heading-color);
}

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

.suivi-evenements li {
    position: relative;
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: 0 0 .875rem 1.25rem;
    font-size: .875rem;
}

/* Fil de l'historique, avec un point par événement. */
.suivi-evenements li::before {
    position: absolute;
    top: .375rem;
    left: 0;
    width: .5rem;
    height: .5rem;
    content: "";
    background: var(--border-color);
    border-radius: var(--radius-full);
}

.suivi-evenements li:not(:last-child)::after {
    position: absolute;
    top: 1rem;
    bottom: 0;
    left: .1875rem;
    width: 2px;
    content: "";
    background: var(--border-color-light);
}

.suivi-evenements li.dernier::before {
    background: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.suivi-evenements li.dernier.etat-distribue::before {
    background: var(--success-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-color), transparent 80%);
}

.suivi-evenements time {
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
}

.suivi-evenements time span {
    display: block;
    font-size: .75rem;
}

.suivi-evenements li.dernier .suivi-evenement-libelle {
    font-weight: 600;
    color: var(--heading-color);
}

.suivi-pied {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.suivi-verification {
    margin-right: auto;
    font-size: .75rem;
    color: var(--muted-color);
}

/* Espace client : dernier statut des courriers d'une étape. */
.courriers-client {
    padding: 0;
    margin: .375rem 0 0;
    list-style: none;
    font-size: .875rem;
}

.courriers-client li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin-top: .25rem;
}

.courriers-client .bi {
    color: var(--accent-color);
}

.courriers-client .courrier-client-etat {
    color: var(--muted-color);
}

/* ---------- Mon calendrier (modèle « Calendar » de NiceAdmin Pro, classes calendar-*) ---------- */

/* Boutons à la place des div du modèle : sans leur fond ni leur bordure, mais sans l'emporter
   sur les états du thème (aujourd'hui, survol) : :where() ne compte pas dans la priorité. */
:where(.calendrier) button.mini-calendar-day,
:where(.calendrier) button.more-events,
:where(.calendrier) button.event-category-item {
    padding: 0;
    font: inherit;
    text-align: inherit;
    background: none;
    border: 0;
}

:where(.calendrier) button.mini-calendar-day {
    width: 100%;
}

:where(.calendrier) button.more-events {
    display: block;
    width: 100%;
    padding: .125rem .5rem;
    font-size: .75rem;
    text-align: left;
}

.calendrier .calendar-event {
    display: block;
    width: 100%;
    font: inherit;
    font-size: .75rem;
    text-align: left;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

:where(.calendrier) button.event-category-item {
    display: flex;
    width: 100%;
    padding: .625rem 1rem;
}

.calendrier .event-category-item[aria-pressed="false"] {
    opacity: .45;
}

.calendrier .event-category-item[aria-pressed="false"] .event-category-name {
    text-decoration: line-through;
}

.calendrier .categorie-primary { background: var(--accent-color); }
.calendrier .categorie-success { background: var(--success-color); }
.calendrier .categorie-warning { background: var(--warning-color); }
.calendrier .categorie-danger { background: var(--danger-color); }
.calendrier .categorie-info { background: var(--info-color); }

.calendrier a.upcoming-event-item {
    color: inherit;
    text-decoration: none;
}

.calendrier .upcoming-event-date,
.calendrier .upcoming-event-details,
.calendrier .upcoming-event-day,
.calendrier .upcoming-event-month,
.calendrier .upcoming-event-title,
.calendrier .upcoming-event-time {
    display: block;
}

.calendrier .upcoming-event-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Jours passés : un peu en retrait. */
.calendrier .calendar-day.passe:not(.today) .day-number {
    color: var(--muted-color);
}

/* Vue « Liste » : les échéances du mois, une par ligne. */
.calendrier-liste {
    display: grid;
}

.calendrier-liste-item {
    display: grid;
    grid-template-columns: 6.5rem 11rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .625rem .25rem;
    color: var(--default-color);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color-light);
}

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

.calendrier-liste-item:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.calendrier-liste-item.passe {
    opacity: .6;
}

.calendrier-liste-date {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--heading-color);
    font-variant-numeric: tabular-nums;
}

.calendrier-liste-affaire {
    font-size: .875rem;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .calendrier-liste-item {
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }

    .calendrier-liste-affaire {
        grid-column: 1 / -1;
    }
}

/* Fenêtre du détail d'un jour. */
.echeance-detail + .echeance-detail {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color-light);
}

.echeance-detail-entete {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
}

.echeance-detail-entete .calendar-event {
    display: inline-block;
    width: auto;
    font-weight: 600;
}

.echeance-detail-categorie {
    font-size: .75rem;
    color: var(--muted-color);
}

.echeance-detail-affaire {
    margin: 0 0 .25rem;
    color: var(--heading-color);
}

.echeance-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.echeance-detail-texte {
    margin: 0 0 .75rem;
    font-size: .875rem;
    color: var(--default-color);
}

/* ---------- Centre des alertes (modèle « Notifications » de NiceAdmin Pro, classes np-*) ---------- */

.centre-alertes .np-dot.danger {
    background: var(--danger-color);
}

.centre-alertes .np-kpi-urgent strong {
    color: var(--danger-color);
}

.centre-alertes .breadcrumb {
    font-size: .8125rem;
}

.centre-alertes .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

:where(.centre-alertes) button.settings-nav-item {
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
}

/* Petit écran : les filtres en une ligne qui défile (thème), chacun à sa largeur. */
@media (max-width: 991px) {
    :where(.centre-alertes) button.settings-nav-item {
        width: auto;
    }
}

.centre-alertes .settings-nav-item .settings-nav-text {
    flex: 1;
}

.centre-alertes-compte {
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted-color);
    background: color-mix(in srgb, var(--default-color), transparent 92%);
    border-radius: var(--radius-full);
}

.centre-alertes a.np-stream-item {
    color: inherit;
    text-decoration: none;
}

.centre-alertes a.np-stream-item:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
}

.centre-alertes a.np-stream-item:hover strong {
    color: var(--accent-color);
}

.centre-alertes .np-stream-item[hidden] {
    display: none;
}

.centre-alertes .np-texte,
.centre-alertes .np-affaire {
    display: block;
    margin-top: 1px;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

.centre-alertes .np-affaire {
    color: var(--default-color);
}

.centre-alertes .np-vide {
    margin: 0;
    padding: 1rem 14px;
    font-size: .8125rem;
    color: var(--muted-color);
}

.centre-alertes .np-stream {
    max-height: 36rem;
    overflow-y: auto;
}

/* Tableau « À venir » : échéance, alerte, affaire ; de la plus proche à la plus lointaine. */
.centre-alertes .a-venir-defilement {
    max-height: 36rem;
    overflow-y: auto;
}

.centre-alertes .a-venir thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-color);
    background: var(--surface-color);
    white-space: nowrap;
}

.centre-alertes .a-venir td {
    padding-top: .625rem;
    padding-bottom: .625rem;
    font-size: .8125rem;
    vertical-align: top;
}

.centre-alertes .a-venir-date {
    width: 1%;
    white-space: nowrap;
}

.centre-alertes .a-venir-date strong,
.centre-alertes .a-venir-date span {
    display: block;
}

.centre-alertes .a-venir-date span {
    font-size: .74rem;
    color: var(--muted-color);
}

.centre-alertes .a-venir-alerte {
    display: flex;
    gap: .5rem;
}

.centre-alertes .a-venir-alerte .np-dot {
    flex: none;
    margin-top: .35rem;
}

.centre-alertes .a-venir-titre {
    font-weight: 600;
    color: var(--heading-color);
    text-decoration: none;
}

.centre-alertes .a-venir-affaire {
    min-width: 9rem;
}

.centre-alertes .a-venir-affaire a {
    color: var(--accent-color);
    text-decoration: none;
}

.centre-alertes .a-venir a:hover {
    text-decoration: underline;
}

/* Tâche : « Modifier » et « Supprimer » sous son texte. */
.centre-alertes .a-venir-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .375rem;
}

.centre-alertes .a-venir-action {
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

/* Téléphone : chaque échéance sur plusieurs lignes (date et affaire, puis l'alerte). */
@media (max-width: 575.98px) {
    .centre-alertes .a-venir thead {
        display: none;
    }

    .centre-alertes .a-venir tr {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        padding: .625rem 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .centre-alertes .a-venir tr[hidden] {
        display: none;
    }

    .centre-alertes .a-venir td {
        padding: 0;
        border: 0;
    }

    .centre-alertes .a-venir td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: .5rem;
    }

    .centre-alertes .a-venir-affaire {
        min-width: 0;
        text-align: right;
    }
}

/* Cloche : liens vers le centre des alertes et le calendrier, en pied. */
.cloche-pied {
    display: flex;
}

.cloche-pied a {
    flex: 1;
}

.cloche-pied a + a {
    border-left: 1px solid var(--border-color-light);
}

/* Notifications push sur cet appareil (élément push/reglage : Mon compte, Mes dossiers). */
.carte-push .card-title {
    display: flex;
    align-items: center;
}

.push-explication {
    margin: 0 0 .75rem;
    font-size: .875rem;
    color: var(--muted-color);
}

.push-etat-texte {
    display: flex;
    gap: .25rem;
    align-items: baseline;
    margin: 0 0 .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--heading-color);
}

.push-etat-texte[hidden] {
    display: none;
}

.push-etat-actif {
    color: var(--success-color);
}

.push-etat-bloque,
.push-etat-erreur {
    color: var(--danger-color);
}

.push-etat-ios,
.push-etat-non-supporte,
.push-etat-non-securise {
    font-weight: 400;
    color: var(--default-color);
}

.push-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.push-message {
    margin: .75rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

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

.push-appareils li {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-top: 1px solid var(--border-color-light);
}

.push-appareil {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.push-appareil strong {
    font-weight: 600;
    color: var(--default-color);
}

/* ---------- Centre des tâches (modèle « Todo » de NiceAdmin Pro, classes todo-*) ---------- */

.todo-container {
    display: flex;
    height: calc(100vh - var(--header-height) - 9.5rem);
    min-height: 34rem;
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius-lg);
}

.todo-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 260px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
}

.todo-sidebar-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.todo-nav {
    padding: .75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.todo-nav-list,
.todo-projects-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.todo-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1.25rem;
    font-size: .875rem;
    color: var(--default-color);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
}

.todo-nav-item > .bi {
    width: 20px;
    font-size: 1.125rem;
    color: var(--muted-color);
    text-align: center;
}

.todo-nav-libelle,
.todo-project-libelle {
    flex: 1;
}

.todo-nav-item:hover {
    color: var(--default-color);
    background: var(--background-color);
}

.todo-nav-item.active {
    font-weight: 600;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    border-left-color: var(--accent-color);
}

.todo-nav-item.active > .bi {
    color: var(--accent-color);
}

.todo-nav-count {
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
    background: var(--background-color);
    border-radius: 10px;
}

/* « En retard » : son compteur en rouge quand il y en a. */
.todo-nav-item.alerte .todo-nav-count {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

.todo-projects {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.todo-projects:last-child {
    border-bottom: 0;
}

.todo-projects-header {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--heading-color);
}

.todo-project-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .4375rem .5rem;
    margin: 0 -.5rem;
    font-size: .8125rem;
    color: var(--default-color);
    text-decoration: none;
    border-radius: var(--bs-border-radius);
}

.todo-project-item:hover {
    color: var(--default-color);
    background: var(--background-color);
}

.todo-project-item.active {
    font-weight: 600;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.todo-project-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Couleurs de ce que concerne une tâche, et des priorités. */
.concerne-affaire { --couleur-concerne: var(--accent-color); }
.concerne-client { --couleur-concerne: var(--info-color); }
.concerne-licence { --couleur-concerne: var(--success-color); }
.concerne-generale { --couleur-concerne: var(--muted-color); }
.todo-project-dot[class*="concerne-"] { background: var(--couleur-concerne); }
.priorite-haute { background: var(--danger-color); }
.priorite-normale { background: var(--warning-color); }
.priorite-basse { background: var(--success-color); }

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

.todo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.todo-header-title {
    min-width: 0;
}

.todo-header-title h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--heading-color);
}

.todo-header-count {
    font-size: .8125rem;
    color: var(--muted-color);
}

.todo-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.todo-header-actions[hidden] {
    display: none;
}

.todo-search {
    position: relative;
    width: 220px;
}

.todo-search .form-control {
    padding-left: 2.25rem;
    font-size: .875rem;
    background: var(--background-color);
    border-color: transparent;
}

.todo-search .form-control:focus {
    background: var(--surface-color);
    border-color: var(--border-color);
}

.todo-search-icon {
    position: absolute;
    top: 50%;
    left: .75rem;
    font-size: .875rem;
    color: var(--muted-color);
    transform: translateY(-50%);
}

.todo-filter-btn {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
    color: var(--muted-color);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius);
}

.todo-filter-btn:hover {
    color: var(--default-color);
    background: var(--background-color);
}

.todo-view-toggle {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius);
}

.todo-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--muted-color);
    background: var(--surface-color);
    border: 0;
}

.todo-view-btn + .todo-view-btn {
    border-left: 1px solid var(--border-color);
}

.todo-view-btn:hover {
    color: var(--default-color);
    background: var(--background-color);
}

.todo-view-btn.active {
    color: var(--contrast-color);
    background: var(--accent-color);
}

.todo-list {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.todo-section {
    margin-bottom: 1rem;
}

.todo-section-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.25rem;
    background: var(--surface-color);
}

.todo-section-header h3,
.todo-board-entete h3 {
    flex: 1;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--heading-color);
}

.section-retard .todo-section-header h3,
.colonne-retard .todo-board-entete h3 {
    color: var(--danger-color);
}

.todo-section-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--muted-color);
    background: none;
    border: 0;
    border-radius: var(--bs-border-radius);
}

.todo-section-toggle:hover {
    color: var(--default-color);
    background: var(--background-color);
}

.todo-section-toggle .bi {
    transition: transform var(--transition-fast);
}

.todo-section.repliee .todo-section-toggle .bi {
    transform: rotate(-90deg);
}

.todo-section-count {
    padding: .125rem .5rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
    background: var(--background-color);
    border-radius: 10px;
}

.todo-section-content {
    padding: .25rem 0;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
}

.todo-item[hidden] {
    display: none;
}

.todo-item:hover {
    background: var(--background-color);
}

.todo-item.completed .todo-item-title {
    color: var(--muted-color);
    text-decoration: line-through;
}

.todo-item.completed .todo-item-content {
    opacity: .7;
}

/* Case « faite » : un rond, coché d'une coche blanche sur la couleur du thème. */
.todo-item-check {
    padding-top: .125rem;
    margin: 0;
}

.todo-coche {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--border-color-dark);
    border-radius: 50%;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.todo-coche:hover {
    border-color: var(--accent-color);
}

.todo-coche:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.todo-coche[aria-checked="true"] {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.todo-coche[aria-checked="true"]::after {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 5px;
    height: 9px;
    content: "";
    border: solid var(--contrast-color);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.todo-item-content {
    flex: 1;
    min-width: 0;
}

.todo-item-title {
    margin: 0 0 .375rem;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--default-color);
    overflow-wrap: anywhere;
}

/* Détails : deux lignes au plus dans la liste. */
.todo-item-details {
    display: -webkit-box;
    margin: -.125rem 0 .5rem;
    overflow: hidden;
    font-size: .8125rem;
    color: var(--muted-color);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.todo-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.todo-item-project {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--couleur-concerne);
    text-decoration: none;
    background: color-mix(in srgb, var(--couleur-concerne), transparent 88%);
    border-radius: 4px;
}

a.todo-item-project:hover {
    color: var(--couleur-concerne);
    text-decoration: underline;
}

.todo-item-due,
.todo-item-completed-date,
.todo-item-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: var(--muted-color);
}

.todo-item-due[hidden],
.todo-item-completed-date[hidden] {
    display: none;
}

.todo-item-due.en-retard {
    font-weight: 600;
    color: var(--danger-color);
}

.todo-item-tag {
    padding: .125rem .375rem;
    background: var(--background-color);
    border-radius: 4px;
}

.todo-item-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
}

.todo-item-priority {
    padding: .125rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    border-radius: 4px;
}

.todo-item-priority.haute {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

.todo-item-priority.normale {
    color: #9a6700;
    background: var(--warning-color-light);
}

.todo-item-priority.basse {
    color: #1c7c4f;
    background: var(--success-color-light);
}

.todo-item-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--muted-color);
    background: none;
    border: 0;
    border-radius: var(--bs-border-radius);
}

.todo-item-more:hover,
.todo-item-more[aria-expanded="true"] {
    color: var(--default-color);
    background: var(--surface-color);
}

.todo-vide {
    padding: 3rem 1.5rem;
    color: var(--muted-color);
    text-align: center;
}

.todo-vide > .bi {
    font-size: 2rem;
    color: var(--border-color-dark);
}

.todo-vide-titre {
    margin: .5rem 0 0;
    font-weight: 600;
    color: var(--heading-color);
}

.todo-vide-filtres {
    margin: .25rem 0 0;
    font-size: .875rem;
}

/* Colonnes : en retard, à faire, faites ; une carte par tâche, sa priorité en bordure. */
.todo-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 1rem;
    align-items: start;
    padding: 0 1.25rem;
}

.todo-board[hidden] {
    display: none;
}

.todo-board-colonne {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: .75rem;
    background: var(--background-color);
    border-radius: var(--bs-border-radius-lg);
}

.todo-board-entete {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .25rem;
}

.todo-board-cartes {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.todo-board-vide {
    padding: .5rem .25rem;
    margin: 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.todo-board-vide[hidden] {
    display: none;
}

.board-view .todo-item {
    position: relative;
    flex-wrap: wrap;
    padding: .875rem 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--warning-color);
    border-radius: var(--bs-border-radius-lg);
}

.board-view .todo-item[data-priorite="1"] {
    border-left-color: var(--danger-color);
}

.board-view .todo-item[data-priorite="3"] {
    border-left-color: var(--success-color);
}

.board-view .todo-item:hover {
    box-shadow: var(--shadow-md);
}

.board-view .todo-item-actions {
    justify-content: space-between;
    width: 100%;
    padding-top: .5rem;
    border-top: 1px solid var(--border-color-light);
}

.todo-sidebar-toggle,
.todo-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--muted-color);
    border: 0;
}

.todo-sidebar-toggle {
    flex-shrink: 0;
    font-size: 1.125rem;
    background: var(--background-color);
    border-radius: 50%;
}

.todo-sidebar-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
    background: color-mix(in srgb, var(--default-color), transparent 95%);
    border-radius: var(--bs-border-radius);
}

.todo-sidebar-overlay {
    display: none;
}

/* Formulaire d'une tâche : « Concerne », et les affaires et clients proposés pendant la frappe. */
.choix-fiche {
    position: relative;
}

.fiche-choisie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    background: var(--background-color);
    border-radius: var(--bs-border-radius);
}

.fiche-choisie[hidden],
.recherche-fiche[hidden] {
    display: none;
}

.fiche-choisie-texte {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    min-width: 0;
}

.resultats-fiche {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 5;
    max-height: 16rem;
    padding: .25rem;
    margin: .25rem 0 0;
    overflow-y: auto;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--shadow-md);
}

.resultat-fiche {
    display: flex;
    flex-direction: column;
    padding: .375rem .625rem;
    font-size: .875rem;
    cursor: pointer;
    border-radius: var(--bs-border-radius);
}

.resultat-fiche:hover,
.resultat-fiche:focus {
    background: var(--background-color);
    outline: none;
}

.resultat-fiche .text-secondary {
    font-size: .8125rem;
}

.resultat-fiche-vide {
    padding: .5rem .625rem;
    font-size: .875rem;
    color: var(--muted-color);
}

.tache-fiche-fixe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}

/* Réponses d'une tâche confiée, dans la liste du centre : la dernière, et le lien vers toutes. */
.todo-item-reponse {
    display: flex;
    gap: .375rem;
    align-items: baseline;
    margin: -.125rem 0 .5rem;
    padding: .25rem .5rem;
    font-size: .8125rem;
    color: var(--muted-color);
    background: var(--background-color);
    border-left: 2px solid var(--border-color-dark);
    border-radius: 0 4px 4px 0;
    overflow-wrap: anywhere;
}

.todo-item-reponse strong {
    color: var(--default-color);
}

.todo-item-reponse.nouvelle {
    border-left-color: var(--accent-color);
}

.todo-item-reponses {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
}

.todo-item-reponses:hover {
    text-decoration: underline;
}

.todo-item-nouvelles {
    margin-left: .25rem;
    padding: .0625rem .375rem;
    font-size: .6875rem;
    color: var(--contrast-color);
    background: var(--accent-color);
    border-radius: var(--radius-full);
}

/* Une tâche et ses réponses (fenêtre ou page). */
.tache-detail-resume {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.tache-detail-texte {
    margin: 0 0 .375rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
    overflow-wrap: anywhere;
}

.tache-detail-details {
    margin: 0 0 .625rem;
    font-size: .875rem;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

.tache-detail-personnes {
    margin: .625rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.tache-reponses-titre {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--heading-color);
}

.tache-reponses-vide {
    margin: 0 0 1rem;
    font-size: .875rem;
    color: var(--muted-color);
}

.tache-reponses-liste {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    max-height: 22rem;
    padding: 0;
    margin: 0 0 1rem;
    overflow-y: auto;
    list-style: none;
}

/* Les siennes à droite, celles de l'autre à gauche, comme une conversation. */
.tache-reponse {
    max-width: 85%;
    padding: .5rem .75rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.tache-reponse.mienne {
    align-self: flex-end;
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 75%);
}

.tache-reponse.nouvelle {
    border-left: 3px solid var(--accent-color);
}

.tache-reponse-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0 0 .25rem;
    font-size: .8125rem;
}

.tache-reponse-date {
    color: var(--muted-color);
}

.tache-reponse-texte {
    margin: 0;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

/* « Supprimer » : la corbeille en haut à droite de la réponse ; la confirmation se déplie dessous. */
.tache-reponse {
    position: relative;
}

.tache-reponse.supprimable .tache-reponse-entete {
    padding-right: 1.75rem;
}

.tache-reponse-supprimer > summary {
    position: absolute;
    top: .375rem;
    right: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--muted-color);
    list-style: none;
    cursor: pointer;
    border-radius: var(--bs-border-radius);
}

.tache-reponse-supprimer > summary::-webkit-details-marker {
    display: none;
}

.tache-reponse-supprimer > summary:hover,
.tache-reponse-supprimer[open] > summary {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

.tache-reponse-supprimer > summary:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.tache-reponse-confirmer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .5rem;
    margin-top: .5rem;
    font-size: .8125rem;
    border-top: 1px solid var(--border-color);
}

.tache-repondre {
    padding-top: .25rem;
}

@media (max-width: 1279.98px) {
    .todo-sidebar-toggle {
        display: flex;
    }

    .todo-sidebar-close {
        display: flex;
    }

    .todo-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1040;
        display: block;
        pointer-events: none;
        background: color-mix(in srgb, var(--default-color), transparent 50%);
        opacity: 0;
        transition: opacity .3s ease;
    }

    .todo-sidebar-overlay.show {
        pointer-events: auto;
        opacity: 1;
    }

    .todo-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: 280px;
        max-width: 90vw;
        height: 100dvh;
        padding-top: 3.5rem;
        visibility: hidden;
        background: var(--surface-color);
        transform: translateX(-100%);
        transition: transform .3s ease, visibility 0s .3s;
    }

    .todo-sidebar.show {
        visibility: visible;
        box-shadow: 4px 0 16px rgb(0 0 0 / 15%);
        transform: translateX(0);
        transition: transform .3s ease;
    }

    body.todo-sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 991.98px) {
    .todo-board {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .todo-container {
        height: auto;
        min-height: calc(100vh - 12rem);
    }

    .todo-header {
        flex-wrap: wrap;
        padding: 1rem;
    }

    .todo-header-title {
        flex: 1;
    }

    .todo-header-actions {
        width: 100%;
        gap: .5rem;
    }

    .todo-search {
        flex: 1;
        width: auto;
    }

    .todo-filter-btn span {
        display: none;
    }

    .todo-filter-btn,
    .todo-view-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .todo-item {
        flex-wrap: wrap;
        padding: .875rem 1rem;
    }

    .todo-item-actions {
        justify-content: flex-end;
        width: 100%;
        margin-top: -.25rem;
    }

    .todo-coche {
        width: 24px;
        height: 24px;
    }

    .todo-item-more {
        width: 44px;
        height: 44px;
    }
}

/* Liste des clients : cases à cocher pour en supprimer plusieurs (webroot/js/clients-lot.js), et la
   page qui récapitule avant la suppression. */
.lot-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: .875rem;
    color: var(--muted-color);
}

.lot-barre.active {
    background: var(--bs-danger-bg-subtle, #fbeaea);
    color: var(--bs-danger-text-emphasis, #842029);
}

.lot-case {
    width: 2.5rem;
    padding-inline-end: 0 !important;
}

.lot-case .form-check-input {
    margin: 0;
    cursor: pointer;
}

.suppression-lot-ligne {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.suppression-lot-ligne .avatar-initiales {
    width: 34px;
    height: 34px;
    font-size: .6875rem;
}

.suppression-lot-email {
    display: block;
    font-size: .8125rem;
    color: var(--muted-color);
}

.suppression-lot-detail {
    margin: .25rem 0 0;
    font-size: .875rem;
}

/* ---------- Gestion des licences : vendeurs et bailleurs ---------- */

/* Liste : téléphone et email l'un sous l'autre ; dernier contact avec l'icône de son moyen. */
.coordonnees-liste span {
    display: flex;
    align-items: center;
    gap: .35rem;
    max-width: 16rem;
}

.dernier-contact {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.a-recontacter {
    display: inline-block;
    margin-top: .2rem;
}

/* Fiche : vendeur en orange, bailleur en vert d'eau (les couleurs des rôles de clients). */
.uv-pill.pill-rubrique {
    text-decoration: none;
}

.uv-pill.pill-vendeur {
    color: var(--role-vendeur-encre);
    background: var(--role-vendeur-fond);
    border-color: transparent;
}

.uv-pill.pill-bailleur {
    color: var(--role-acquereur-encre);
    background: var(--role-acquereur-fond);
    border-color: transparent;
}

.uv-pill.pill-recontacter {
    color: #8a5a00;
    background: #fff4d6;
    border-color: transparent;
}

.canal-prefere {
    margin: .875rem 0 0;
    font-size: .875rem;
    color: var(--muted-color);
}

/* Journal des communications : une ligne par échange, l'icône de son moyen sur un fil. */
.nouvelle-communication {
    background: var(--bs-tertiary-bg, #f6f8fa);
    border-bottom: 1px solid var(--border-color);
}

.sens-communication {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

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

.journal-communication {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: .875rem;
    padding-bottom: 1.25rem;
}

.journal-communication:not(:last-child)::before {
    position: absolute;
    top: 2.5rem;
    bottom: .25rem;
    left: calc(1.125rem - 1px);
    width: 2px;
    content: "";
    background: var(--border-color);
}

.journal-communication:last-child {
    padding-bottom: 0;
}

.journal-icone {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    color: var(--accent-color);
    background: var(--role-commercial-fond);
    border-radius: 50%;
}

.journal-icone.canal-message,
.journal-icone.canal-sms,
.journal-icone.canal-whatsapp {
    color: var(--role-acquereur-encre);
    background: var(--role-acquereur-fond);
}

.journal-icone.canal-email,
.journal-icone.canal-courrier {
    color: var(--role-vendeur-acquereur-encre);
    background: var(--role-vendeur-acquereur-fond);
}

.journal-icone.canal-rendez_vous {
    color: var(--role-vendeur-encre);
    background: var(--role-vendeur-fond);
}

.journal-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
}

.journal-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .625rem;
    margin: 0;
}

.journal-sens {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .8125rem;
    color: var(--muted-color);
}

.journal-actions {
    display: flex;
    gap: .875rem;
    font-size: .8125rem;
}

.journal-quand {
    margin: .125rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.journal-texte {
    margin-top: .5rem;
    overflow-wrap: anywhere;
}

.journal-texte > :last-child,
.observations-proprietaire > :last-child {
    margin-bottom: 0;
}

.doublon-proprietaire {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.doublon-proprietaire .alert-link {
    margin-inline-start: auto;
}

/* Complétion en ligne : « Recherche en ligne… » pendant l'attente, avec un petit indicateur. */
.autocompletion-attente::before {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    margin-right: .5rem;
    vertical-align: -.125rem;
    content: "";
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: autocompletion-tourne .8s linear infinite;
}

@keyframes autocompletion-tourne {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .autocompletion-attente::before {
        animation: none;
    }
}

/* ---------- Gestion des licences : licences ---------- */

/*
 * Couleurs du graphique des prix (licences.js) : le propriétaire en orange, les acquéreurs en
 * vert d'eau, le cabinet en bleu. Trio vérifié pour les daltonismes (écarts et contraste).
 */
:root {
    --prix-demande: #c96512;
    --prix-offre: #14907f;
    --prix-cabinet: #2a78d6;
}

/* Catégorie (« IV », « III ») : pastille de la licence, dans la liste et en tête de fiche. */
.licence-categorie {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--heading-font);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: var(--radius-sm);
}

.uv-hero-avatar.licence-categorie-grande {
    font-size: 1.375rem;
}

.licence-ligne {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.licences-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    padding: 0 1rem .75rem;
    border-bottom: 1px solid var(--border-color);
}

.licences-filtres .users-toolbar-btn.filtre-actif {
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
}

.licences-filtres-retirer {
    margin-inline-start: .25rem;
    font-size: .8125rem;
}

.licence-titulaire {
    font-weight: 600;
    color: var(--default-color);
}

/* Prix dans la liste : montant, petite courbe en paliers, évolution. */
.licence-prix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    white-space: nowrap;
}

.licence-prix + .licence-prix {
    margin-top: .25rem;
}

.licence-prix-montant {
    font-weight: 600;
    color: var(--default-color);
    font-variant-numeric: tabular-nums;
}

.licence-prix-montant small {
    font-weight: 400;
    color: var(--muted-color);
}

.courbe-prix path {
    fill: none;
    stroke: var(--prix-demande);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.courbe-prix circle {
    fill: var(--prix-demande);
}

.variation-prix {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.variation-baisse {
    color: #9a4a06;
}

.variation-hausse {
    color: #0d6b62;
}

.licence-negociation {
    display: inline-block;
    margin-top: .2rem;
    font-size: .8125rem;
    color: var(--muted-color);
}

.table-licences .licence-prix {
    flex-wrap: nowrap;
}

.licence-situation {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.licence-bientot {
    color: #8a5a00;
}

.licence-derniere {
    font-size: .8125rem;
    color: var(--muted-color);
}

.table-licences tr.licence-perimee .users-user-name {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
}

/* Disponibilité : icône et libellé, teintés selon l'état. */
.licence-dispo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius-full);
}

.dispo-disponible { color: #0d6b62; background: #d8f1ed; }
.dispo-reservee { color: #8a5a00; background: #fff4d6; }
.dispo-conclue { color: #013e5e; background: #e1ebf1; }
.dispo-retiree { color: #4a5563; background: #eceff2; }

.uv-pill.licence-dispo {
    border-color: transparent;
}

.uv-pill.pill-perimee {
    color: #ad153b;
    background: #fbe3e9;
    border-color: transparent;
}

/* Fiche : chiffres de la négociation, graphique, historique. */
.licence-objet + .licence-objet {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.licence-objet-titre,
.licence-historique-titre {
    margin: 0 0 .75rem;
    font-family: var(--heading-font);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--heading-color);
}

.licence-historique-titre {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.licence-chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: 1rem;
}

.licence-chiffre {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 7rem;
}

.licence-chiffre > span {
    font-size: .8125rem;
    color: var(--muted-color);
}

.licence-chiffre > strong {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--default-color);
}

.licence-chiffre-principal > strong {
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--heading-color);
}

.licence-chiffre > small {
    font-size: .8125rem;
    color: var(--muted-color);
}

.licence-negociation-grande {
    letter-spacing: .08em;
}

.graphique-prix {
    position: relative;
    height: 300px;
    /* Rien du graphique ne déborde ni ne capte de clic hors de son cadre (Safari). */
    overflow: hidden;
    contain: layout paint;
}

/* Défilement sans animation vers une ancre (#prix après avoir noté un prix…) : le thème l'anime,
   et Safari, si la page change pendant l'animation (graphique dessiné), montre les liens à un
   endroit mais les rend cliquables plus bas. Bootstrap le déclare sur :root, le thème sur html. */
:root,
html {
    scroll-behavior: auto;
}

/* Tous les graphiques ApexCharts : le bloc HTML (foreignObject) qu'ils ajoutent au SVG ne porte
   que leur feuille de style ; Safari le place mal, et il captait des clics hors du graphique. */
.apexcharts-canvas foreignObject {
    pointer-events: none;
}

.licence-sans-prix {
    margin: 0;
}

.infobulle-prix {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
    color: var(--muted-color);
}

.infobulle-prix strong {
    font-size: .9375rem;
    color: var(--default-color);
}

.table-historique-prix .montant {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nature-prix {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.nature-prix .bi {
    color: var(--muted-color);
}

/* Offre faite : la réponse du propriétaire, ou les deux boutons pour la noter. */
.issue-prix {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.reponses-prix {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .35rem;
    margin: .15rem 0;
    vertical-align: middle;
}

.reponses-prix .btn {
    font-size: .8125rem;
}

.historique-precision {
    min-width: 10rem;
    font-size: .875rem;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

/* Contacts de la licence : le vendeur ou le bailleur d'abord. */
.contacts-licence {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.contact-licence {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: .875rem;
    align-items: start;
}

.contact-licence .avatar-initiales {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .75rem;
}

.contact-licence-nom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0;
    font-weight: 600;
}

.contact-licence-detail,
.contact-licence-coordonnees {
    margin: .125rem 0 0;
    font-size: .875rem;
    color: var(--muted-color);
}

.contact-licence-detail:empty {
    display: none;
}

.contact-licence-coordonnees {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
}

.etiquette-titulaire {
    color: var(--role-vendeur-encre);
    background: var(--role-vendeur-fond);
}

.etiquette-titulaire.etiquette-bailleur {
    color: var(--role-acquereur-encre);
    background: var(--role-acquereur-fond);
}

.etiquette-contact {
    color: var(--muted-color);
    background: var(--bs-tertiary-bg, #f6f8fa);
}

/* Fiche d'une licence : une carte atteinte par son ancre (#echanges…) n'est pas sous l'en-tête. */
.page-licence .uv-panel[id] {
    scroll-margin-top: 5.5rem;
}

/* Lien « SMS » à côté du mobile d'un client, d'un vendeur ou d'un bailleur (ouvre Messages). */
.lien-sms {
    display: inline-grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    margin-left: .375rem;
    font-size: .875rem;
    line-height: 1;
    color: var(--accent-color);
    vertical-align: middle;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: 50%;
    text-decoration: none;
}

.lien-sms:hover,
.lien-sms:focus-visible {
    color: var(--contrast-color);
    background: var(--accent-color);
}

.telephone-sms {
    display: inline-flex;
    align-items: center;
}

/* Visionneuse des documents (façon lightbox) : fond sombre, le document au centre, l'en-tête
   fixe au-dessus du contenu qui défile ; flèches sur les côtés dans une liste de documents. */
.fenetre-apercu {
    --apercu-fond: #0e1726;
    --apercu-surface: #172235;
    --apercu-texte: #e9eef6;
    --apercu-discret: #9fb0c8;
}

/* Son fond, plus sombre que celui des autres fenêtres (classe posée par app.js) ; ouverte depuis
   une autre fenêtre (documents d'une licence), elle passe au-dessus de celle-ci et de son fond. */
.modal-backdrop.fond-visionneuse {
    z-index: 1060;
    background-color: rgb(8 13 22 / .86);
}

#fenetre-apercu {
    z-index: 1065;
}

/* Large, de toute la hauteur de l'écran : une page A4 ou Letter y tient à 100 % (816 pixels, plus
   les marges et la barre de défilement). */
.fenetre-apercu .modal-dialog {
    max-width: min(96vw, 55rem);
    height: calc(100% - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.fenetre-apercu .modal-content {
    height: 100%;
    color: var(--apercu-texte);
    background: var(--apercu-fond);
    border: 0;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .45);
}

.fenetre-apercu .modal-header {
    gap: .5rem;
    padding: .75rem 1rem .75rem 1.25rem;
    border-bottom: 1px solid rgb(255 255 255 / .08);
}

.fenetre-apercu-entete {
    min-width: 0;
    margin-right: auto;
}

.fenetre-apercu .modal-title {
    margin: 0;
    overflow: hidden;
    font-size: 1.0625rem;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fenetre-apercu-legende {
    margin: .125rem 0 0;
    overflow: hidden;
    font-size: .8125rem;
    color: var(--apercu-discret);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fenetre-apercu-compteur {
    padding: .125rem .5rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--apercu-discret);
    white-space: nowrap;
}

.fenetre-apercu-action {
    color: var(--apercu-texte);
    background: rgb(255 255 255 / .06);
    border: 1px solid rgb(255 255 255 / .16);
}

.fenetre-apercu-action:hover,
.fenetre-apercu-action:focus-visible {
    color: #fff;
    background: rgb(255 255 255 / .14);
    border-color: rgb(255 255 255 / .3);
}

.fenetre-apercu-fermer {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: .25rem;
    font-size: 1.125rem;
    color: var(--apercu-texte);
    background: none;
    border: 0;
    border-radius: 50%;
}

.fenetre-apercu-fermer:hover,
.fenetre-apercu-fermer:focus-visible {
    color: #fff;
    background: rgb(255 255 255 / .12);
}

.fenetre-apercu :focus-visible {
    outline: 2px solid #8fb4ff;
    outline-offset: 2px;
}

.fenetre-apercu-corps {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: auto;
    background: var(--apercu-fond);
}

/* PDF illisible par pdf.js (protégé…) : le lecteur du navigateur occupe tout le corps (il a son
   propre défilement). */
.fenetre-apercu-corps.apercu-pdf {
    overflow: hidden;
}

.fenetre-apercu-cadre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--apercu-surface);
}

/* PDF dessiné par pdf.js (app.js) : les pages l'une sous l'autre ; plus larges que la fenêtre
   (zoom), elle défile dans les deux sens. Marges : 1rem (MARGE_APERCU dans app.js). */
.fenetre-apercu-pdf {
    display: flex;
    width: max-content;
    min-width: 100%;
    padding: 1rem;
}

.fenetre-apercu-pages {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
}

.fenetre-apercu-page {
    flex: none;
    overflow: hidden;
    background: #fff;
    border-radius: .125rem;
    box-shadow: 0 .5rem 2rem rgb(0 0 0 / .5);
}

.fenetre-apercu-page canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.fenetre-apercu-chargement {
    margin: 0;
    padding: 3rem 1rem;
    color: var(--apercu-discret);
    text-align: center;
}

/* Photo ou scan : centrée tant qu'elle tient, sinon la fenêtre défile dans les deux sens. */
.fenetre-apercu-image {
    display: flex;
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    padding: 1rem;
}

.fenetre-apercu-image img {
    flex: none;
    max-width: none;
    height: auto;
    margin: auto;
    border-radius: .25rem;
    box-shadow: 0 .5rem 2rem rgb(0 0 0 / .5);
}

/* Zoom d'un PDF ou d'une image : −, échelle, +, à la largeur, page entière. */
.fenetre-apercu-zoom {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    padding: .125rem;
    background: rgb(255 255 255 / .06);
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: var(--radius-sm);
}

.fenetre-apercu-zoom button {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 1.75rem;
    color: var(--apercu-texte);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
}

.fenetre-apercu-zoom button:hover,
.fenetre-apercu-zoom button:focus-visible {
    color: #fff;
    background: rgb(255 255 255 / .14);
}

.fenetre-apercu-zoom .fenetre-apercu-echelle {
    width: auto;
    min-width: 3.25rem;
    padding: 0 .25rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--apercu-discret);
}

/* Documents de la licence : une ligne par document, son type en lien (il s'ouvre), le fichier
   et qui l'a joint dessous. */
.documents-licence {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.document-licence {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    gap: .625rem;
    align-items: start;
}

.document-licence-icone {
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--accent-color);
}

.document-licence-texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.document-licence-texte a {
    font-weight: 600;
}

.document-licence-detail {
    font-size: .8125rem;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

.document-licence-action {
    padding: .125rem .25rem;
    color: var(--muted-color);
}

.document-licence-action:hover,
.document-licence-action:focus-visible {
    color: var(--accent-color);
}

/* Fenêtres « Modifier » des encarts de la fiche. */
.fenetre-licence-intertitre {
    margin: 1.5rem 0 .75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
}

.fenetre-licence-intertitre .compteur {
    display: inline-grid;
    place-items: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 .375rem;
    margin-left: .375rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted-color);
    background: var(--background-color);
    border-radius: var(--radius-full);
}

.documents-modifiables {
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--border-color);
}

/* Un document : le fichier, son type (modifiable), la suppression. */
.document-modifiable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: .75rem 1.25rem;
    align-items: start;
    padding: .875rem 0;
    border-bottom: 1px solid var(--border-color);
}

.document-modifiable-fichier {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: .625rem;
    padding-top: 1.75rem;
}

.document-modifiable-type {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .5rem .75rem;
    align-items: end;
}

.document-modifiable-type > .btn,
.document-modifiable-type > .alert {
    grid-column: 1 / -1;
    justify-self: start;
}

.document-modifiable-suppression {
    padding-top: 1.75rem;
}

@media (max-width: 767.98px) {
    .document-modifiable {
        grid-template-columns: minmax(0, 1fr);
    }

    .document-modifiable-fichier,
    .document-modifiable-suppression {
        padding-top: 0;
    }
}

/* Formulaire : situation en trois cartes à cocher. */
.situations-licence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .5rem;
}

.situation-choix {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: .5rem;
    padding: .625rem .75rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.situation-choix .bi {
    grid-row: span 2;
    color: var(--muted-color);
}

.situation-choix span {
    font-size: .8125rem;
    color: var(--muted-color);
}

.btn-check:checked + .situation-choix {
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.btn-check:checked + .situation-choix .bi {
    color: var(--accent-color);
}

.btn-check:focus-visible + .situation-choix {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Fiche d'un vendeur ou d'un bailleur : ses licences. */
.licences-fiche {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.licence-fiche {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: .875rem;
    align-items: center;
    padding: .75rem 0;
}

.licence-fiche + .licence-fiche {
    border-top: 1px solid var(--border-color);
}

.licence-fiche-titre {
    margin: 0;
    font-weight: 600;
}

.licence-fiche-detail {
    margin: .1rem 0 0;
    font-size: .8125rem;
    color: var(--muted-color);
}

.licence-fiche-prix {
    text-align: end;
}

/* Nouvelle licence : son vendeur ou son bailleur, nouvelle fiche ou fiche du carnet. */
.titulaire-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.titulaire-modes .btn {
    white-space: nowrap;
}

/* Liste des licences : les chiffres du portefeuille sur une ligne, au-dessus de la liste. */
@media (min-width: 768px) {
    .page-licences .licences-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .page-licences .licences-kpis {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}