/* ==========================================================================
   CRM KONTABLE - FEUILLE DE STYLE PRINCIPALE
   ==========================================================================
   Habillage inspiré du gabarit Metrica : barre latérale sombre à gauche,
   barre supérieure claire, contenu sur fond gris très pâle et cartes blanches
   à coins arrondis.

   ORGANISATION DU FICHIER
   -----------------------
    1. Variables de thème
    2. Base et utilitaires
    3. Barre latérale (menu)
    4. Barre supérieure (recherche, profil)
    5. Barre d'onglets
    6. Zone de contenu et cartes
    7. Tableaux et listes
    8. Formulaires
    9. Badges de statut, chronologie, notifications
   10. Page de connexion
   11. Adaptation aux petits écrans
   12. Fiche cabinet : barre supérieure, champs modifiables, onglets internes
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DE THEME
   ========================================================================== */

:root {
    /* Couleurs principales */
    --couleur-primaire:            #4a6cf7;
    --couleur-primaire-sombre:     #3855d6;
    --couleur-primaire-pale:       #eef2ff;

    /* Couleurs de la barre latérale */
    --sidebar-fond:                #232c41;
    --sidebar-fond-actif:          #2d3854;
    --sidebar-texte:               #a3aed0;
    --sidebar-texte-actif:         #ffffff;
    --sidebar-section:             #6b7899;
    --sidebar-largeur:             258px;
    --sidebar-largeur-reduite:     72px;

    /* Surfaces */
    --fond-application:            #f4f6fa;
    --fond-carte:                  #ffffff;
    --bordure:                     #e6e9f0;
    --bordure-forte:               #d4d9e4;

    /* Textes */
    --texte-principal:             #2b3445;
    --texte-secondaire:            #7c8698;
    --texte-discret:               #a0a8b8;

    /* Couleurs d'état */
    --couleur-succes:              #2eb872;
    --couleur-danger:              #f04b62;
    --couleur-alerte:              #f7a34a;
    --couleur-info:                #38b8db;

    /* Dimensions */
    --hauteur-topbar:              66px;
    --hauteur-barre-onglets:       44px;
    --rayon-carte:                 10px;
    --rayon-champ:                 7px;

    /* Ombres */
    --ombre-carte:                 0 1px 2px rgba(43, 52, 69, .05), 0 3px 12px rgba(43, 52, 69, .04);
    --ombre-flottante:             0 6px 24px rgba(43, 52, 69, .13);
}

/* ==========================================================================
   2. BASE ET UTILITAIRES
   ========================================================================== */

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--fond-application);
    color: var(--texte-principal);
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    /* Empêche le défilement global : seul le contenu des onglets défile. */
    overflow: hidden;
}

a {
    color: var(--couleur-primaire);
    text-decoration: none;
}

a:hover {
    color: var(--couleur-primaire-sombre);
}

/* Barres de défilement discrètes, cohérentes dans toute l'application. */
.defilement-fin {
    scrollbar-width: thin;
    scrollbar-color: var(--bordure-forte) transparent;
}

.defilement-fin::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.defilement-fin::-webkit-scrollbar-thumb {
    background-color: var(--bordure-forte);
    border-radius: 4px;
}

.defilement-fin::-webkit-scrollbar-track {
    background: transparent;
}

.texte-secondaire {
    color: var(--texte-secondaire);
}

.texte-discret {
    color: var(--texte-discret);
}

.texte-petit {
    font-size: 12.5px;
}

/* ==========================================================================
   3. BARRE LATERALE
   ========================================================================== */

.application-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-largeur);
    background-color: var(--sidebar-fond);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: width .2s ease;
}

.sidebar-marque {
    height: var(--hauteur-topbar);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-marque-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--couleur-primaire), #7b5cf5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.sidebar-marque-texte {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}

.sidebar-navigation {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px 24px;
}

.sidebar-section {
    color: var(--sidebar-section);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: 18px 12px 7px;
    white-space: nowrap;
}

.sidebar-lien {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: 7px;
    color: var(--sidebar-texte);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-lien:hover {
    background-color: rgba(255, 255, 255, .05);
    color: var(--sidebar-texte-actif);
}

.sidebar-lien.est-actif {
    background-color: var(--couleur-primaire);
    color: #fff;
    box-shadow: 0 4px 12px rgba(74, 108, 247, .32);
}

.sidebar-lien i {
    font-size: 18px;
    flex-shrink: 0;
}

/* Groupe dépliant */
.sidebar-groupe-bascule {
    justify-content: space-between;
}

.sidebar-groupe-bascule .chevron-groupe {
    font-size: 14px;
    transition: transform .18s ease;
}

.sidebar-groupe-bascule[aria-expanded="true"] .chevron-groupe {
    transform: rotate(90deg);
}

.sidebar-groupe-contenu {
    padding-left: 30px;
    overflow: hidden;
}

.sidebar-groupe-contenu .sidebar-lien {
    font-size: 13px;
    padding: 7px 12px;
}

/* Mode réduit : seules les icônes restent visibles. */
body.sidebar-reduite .application-sidebar {
    width: var(--sidebar-largeur-reduite);
}

body.sidebar-reduite .sidebar-marque-texte,
body.sidebar-reduite .sidebar-section,
body.sidebar-reduite .sidebar-lien span,
body.sidebar-reduite .chevron-groupe {
    display: none;
}

body.sidebar-reduite .sidebar-lien {
    justify-content: center;
}

body.sidebar-reduite .sidebar-groupe-contenu {
    display: none !important;
}

body.sidebar-reduite .application-entete,
body.sidebar-reduite .application-contenu {
    margin-left: var(--sidebar-largeur-reduite);
}

/* ==========================================================================
   4. BARRE SUPERIEURE
   ========================================================================== */

.application-entete {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--sidebar-largeur);
    height: var(--hauteur-topbar);
    background-color: var(--fond-carte);
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    z-index: 1020;
    transition: left .2s ease;
}

.bouton-icone {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--texte-secondaire);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.bouton-icone:hover {
    background-color: var(--fond-application);
    color: var(--texte-principal);
}

/* Recherche globale */
.recherche-globale {
    position: relative;
    flex: 1;
    max-width: 420px;
}

.recherche-globale i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texte-discret);
    font-size: 17px;
    pointer-events: none;
}

.recherche-globale input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background-color: var(--fond-application);
    font-size: 13.5px;
    color: var(--texte-principal);
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.recherche-globale input:focus {
    border-color: var(--couleur-primaire);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .1);
}

.recherche-globale input::placeholder {
    color: var(--texte-discret);
}

/* Panneau de résultats de la recherche globale */
.recherche-resultats {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 380px;
    overflow-y: auto;
    background-color: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-flottante);
    padding: 6px;
    display: none;
    z-index: 1040;
}

.recherche-resultats.est-visible {
    display: block;
}

.recherche-resultat {
    display: flex;
    flex-direction: column;
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
}

.recherche-resultat:hover {
    background-color: var(--couleur-primaire-pale);
}

.recherche-resultat-titre {
    font-weight: 600;
    font-size: 13.5px;
}

.recherche-resultat-detail {
    color: var(--texte-secondaire);
    font-size: 12px;
}

/* Zone profil */
.entete-profil {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 5px;
    border: none;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
}

.entete-profil:hover {
    background-color: var(--fond-application);
}

.pastille-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--couleur-primaire), #7b5cf5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.entete-profil-nom {
    text-align: left;
    line-height: 1.25;
}

.entete-profil-nom strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
}

.entete-profil-nom small {
    color: var(--texte-secondaire);
    font-size: 11.5px;
}

/* Pastille de comptage sur l'icône de notifications */
.pastille-comptage {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: var(--couleur-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   5. BARRE D'ONGLETS
   ========================================================================== */

.application-contenu {
    margin-left: var(--sidebar-largeur);
    padding-top: var(--hauteur-topbar);
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

.barre-onglets {
    height: var(--hauteur-barre-onglets);
    background-color: var(--fond-application);
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    /* Masque la barre de défilement horizontale, la molette suffit. */
    scrollbar-width: none;
}

.barre-onglets::-webkit-scrollbar {
    display: none;
}

/* Onglets en pastilles arrondies posées sur la barre, à la façon d'un
   navigateur : l'onglet actif remonte sur le fond des panneaux et s'y
   raccorde, les autres restent en retrait. */
.onglet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: calc(var(--hauteur-barre-onglets) - 7px);
    padding: 0 12px;
    min-width: 122px;
    max-width: 240px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    color: var(--texte-secondaire);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    position: relative;
    flex-shrink: 0;
    transition: background-color .14s ease, color .14s ease;
}

.onglet:hover {
    background-color: rgba(255, 255, 255, .65);
    color: var(--texte-principal);
}

.onglet.est-actif {
    background-color: var(--fond-carte);
    border-color: var(--bordure);
    color: var(--couleur-primaire);
    font-weight: 600;
    box-shadow: 0 -2px 6px rgba(43, 52, 69, .05);
}

/* Liseré coloré en tête de l'onglet actif */
.onglet.est-actif::before {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--couleur-primaire);
}

/* Raccord entre l'onglet actif et la zone de contenu, qui masque la bordure
   inférieure de la barre sur la largeur de l'onglet. */
.onglet.est-actif::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: var(--fond-carte);
}

.onglet i.onglet-icone {
    font-size: 16px;
    flex-shrink: 0;
}

.onglet-titre {
    overflow: hidden;
    text-overflow: ellipsis;
}

.onglet-fermeture {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--texte-discret);
    flex-shrink: 0;
    transition: background-color .12s ease, color .12s ease;
}

.onglet-fermeture:hover {
    background-color: var(--couleur-danger);
    color: #fff;
}

/* ==========================================================================
   6. ZONE DE CONTENU ET CARTES
   ========================================================================== */

.zone-panneaux {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.panneau-onglet {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 22px 24px 40px;
    /* Les panneaux inactifs restent dans le DOM : le passage d'un onglet à
       l'autre est donc instantané, sans nouvel appel au serveur. */
    display: none;
}

.panneau-onglet.est-actif {
    display: block;
}

.entete-vue {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.entete-vue h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 3px;
}

.entete-vue p {
    margin: 0;
    color: var(--texte-secondaire);
    font-size: 13px;
}

.carte {
    background-color: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-carte);
    margin-bottom: 20px;
}

.carte-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--bordure);
}

.carte-entete h2,
.carte-entete h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.carte-corps {
    padding: 18px;
}

.carte-corps-compact {
    padding: 12px 18px;
}

/* Tuile d'indicateur du tableau de bord */
.tuile-indicateur {
    background-color: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-carte);
    padding: 18px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.tuile-indicateur-icone {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.tuile-indicateur-valeur {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
}

.tuile-indicateur-libelle {
    color: var(--texte-secondaire);
    font-size: 12.5px;
}

/* Déclinaisons de couleur des tuiles */
.teinte-primaire { background-color: var(--couleur-primaire-pale); color: var(--couleur-primaire); }
.teinte-succes   { background-color: #e6f7ef;                     color: var(--couleur-succes); }
.teinte-danger   { background-color: #fdecef;                     color: var(--couleur-danger); }
.teinte-alerte   { background-color: #fef4e8;                     color: var(--couleur-alerte); }
.teinte-info     { background-color: #e7f6fb;                     color: var(--couleur-info); }
.teinte-neutre   { background-color: #eef0f5;                     color: var(--texte-secondaire); }

/* ==========================================================================
   7. TABLEAUX ET LISTES
   ========================================================================== */

.tableau-crm {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.tableau-crm thead th {
    background-color: #fafbfd;
    border-bottom: 1px solid var(--bordure);
    color: var(--texte-secondaire);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 11px 14px;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.tableau-crm tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}

.tableau-crm tbody tr:hover {
    background-color: #fafbfd;
}

.tableau-crm tbody tr.est-selectionnee {
    background-color: var(--couleur-primaire-pale);
}

/* Une ligne cliquable ouvre la fiche dans un nouvel onglet. */
.ligne-cliquable {
    cursor: pointer;
}

.enveloppe-tableau {
    overflow-x: auto;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}

.cellule-principale {
    font-weight: 600;
    color: var(--texte-principal);
}

/* Pagination */
.barre-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 18px;
    border-top: 1px solid var(--bordure);
    flex-wrap: wrap;
}

.pagination-information {
    color: var(--texte-secondaire);
    font-size: 12.5px;
}

/* Etat vide */
.etat-vide {
    text-align: center;
    padding: 48px 20px;
    color: var(--texte-secondaire);
}

.etat-vide i {
    font-size: 44px;
    color: var(--bordure-forte);
    display: block;
    margin-bottom: 12px;
}

.etat-vide-titre {
    font-weight: 600;
    color: var(--texte-principal);
    margin-bottom: 4px;
}

/* Indicateur de chargement */
.zone-chargement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 20px;
    color: var(--texte-secondaire);
    font-size: 13.5px;
}

/* ==========================================================================
   8. FORMULAIRES
   ========================================================================== */

.form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texte-secondaire);
    margin-bottom: 5px;
}

.form-control,
.form-select {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ);
    font-size: 13.5px;
    padding: 8px 12px;
    color: var(--texte-principal);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .1);
}

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

.message-erreur-champ {
    color: var(--couleur-danger);
    font-size: 12px;
    margin-top: 4px;
}

.btn {
    border-radius: var(--rayon-champ);
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.btn-primary {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--couleur-primaire-sombre);
    border-color: var(--couleur-primaire-sombre);
}

.btn-clair {
    background-color: var(--fond-application);
    border: 1px solid var(--bordure);
    color: var(--texte-principal);
}

.btn-clair:hover {
    background-color: #eceff5;
    color: var(--texte-principal);
}

/* Bloc de filtres repliable */
.bloc-filtres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 13px;
}

/* ==========================================================================
   9. BADGES DE STATUT, CHRONOLOGIE, NOTIFICATIONS
   ========================================================================== */

.badge-statut {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* Les classes de couleur proviennent de la colonne status.color_class,
   elles suivent donc la nomenclature Bootstrap. */
.badge-statut.couleur-primary   { background-color: var(--couleur-primaire-pale); color: var(--couleur-primaire); }
.badge-statut.couleur-success   { background-color: #e6f7ef; color: #1f8f56; }
.badge-statut.couleur-danger    { background-color: #fdecef; color: #cf3348; }
.badge-statut.couleur-warning   { background-color: #fef4e8; color: #b87526; }
.badge-statut.couleur-info      { background-color: #e7f6fb; color: #1f8ba8; }
.badge-statut.couleur-secondary { background-color: #eef0f5; color: #66708a; }
.badge-statut.couleur-dark      { background-color: #e2e5ec; color: #3a4256; }

/* Indicateur booléen vert (DSN OK, Net-Entreprise OK) */
.indicateur-validation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--bordure);
    background-color: var(--fond-application);
    color: var(--texte-secondaire);
    cursor: pointer;
}

.indicateur-validation.est-valide {
    background-color: #e6f7ef;
    border-color: #b5e5cd;
    color: #1f8f56;
}

/* Chronologie de la fiche */
.chronologie {
    position: relative;
    padding-left: 30px;
}

.chronologie::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--bordure);
}

.chronologie-evenement {
    position: relative;
    padding-bottom: 18px;
}

.chronologie-puce {
    position: absolute;
    left: -30px;
    top: 1px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background-color: var(--fond-carte);
    border: 2px solid var(--bordure);
}

.chronologie-titre {
    font-size: 13.5px;
    font-weight: 500;
}

.chronologie-meta {
    color: var(--texte-discret);
    font-size: 11.5px;
}

.chronologie-valeurs {
    margin-top: 5px;
    font-size: 12.5px;
    background-color: var(--fond-application);
    border-radius: 6px;
    padding: 6px 10px;
}

.valeur-precedente {
    color: var(--couleur-danger);
    text-decoration: line-through;
}

.valeur-nouvelle {
    color: var(--couleur-succes);
    font-weight: 600;
}

/* Note horodatée */
.bloc-note {
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background-color: #fcfdff;
}

.bloc-note-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.bloc-note-auteur {
    font-weight: 600;
    font-size: 12.5px;
}

.bloc-note-contenu {
    font-size: 13.5px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Notifications éphémères */
.zone-notifications {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
}

.notification {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 9px;
    background-color: var(--fond-carte);
    border-left: 4px solid var(--couleur-primaire);
    box-shadow: var(--ombre-flottante);
    font-size: 13.5px;
    animation: apparition-notification .22s ease;
}

.notification.type-succes { border-left-color: var(--couleur-succes); }
.notification.type-erreur { border-left-color: var(--couleur-danger); }
.notification.type-alerte { border-left-color: var(--couleur-alerte); }

.notification i {
    font-size: 19px;
    flex-shrink: 0;
}

.notification.type-succes i { color: var(--couleur-succes); }
.notification.type-erreur i { color: var(--couleur-danger); }
.notification.type-alerte i { color: var(--couleur-alerte); }
.notification.type-information i { color: var(--couleur-primaire); }

@keyframes apparition-notification {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Fenêtres modales */
.modal-content {
    border: none;
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-flottante);
}

.modal-header {
    border-bottom: 1px solid var(--bordure);
    padding: 15px 20px;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--bordure);
    padding: 13px 20px;
}

/* ==========================================================================
   10. PAGE DE CONNEXION
   ========================================================================== */

body.page-connexion {
    overflow: auto;
    background: linear-gradient(135deg, #232c41 0%, #3b4668 55%, #4a6cf7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.carte-connexion {
    width: 100%;
    max-width: 415px;
    background-color: var(--fond-carte);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(19, 24, 38, .3);
    padding: 34px;
}

.connexion-marque {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-bottom: 22px;
}

.connexion-marque .sidebar-marque-logo {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.connexion-marque span {
    font-size: 20px;
    font-weight: 600;
    color: var(--texte-principal);
}

.connexion-titre {
    text-align: center;
    margin-bottom: 24px;
}

.connexion-titre h1 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.connexion-titre p {
    color: var(--texte-secondaire);
    font-size: 13px;
    margin: 0;
}

/* ==========================================================================
   11. ADAPTATION AUX PETITS ECRANS
   ========================================================================== */

@media (max-width: 991.98px) {
    .application-sidebar {
        transform: translateX(-100%);
        transition: transform .22s ease;
    }

    body.sidebar-ouverte .application-sidebar {
        transform: translateX(0);
        box-shadow: var(--ombre-flottante);
    }

    .application-entete,
    .application-contenu {
        left: 0;
        margin-left: 0;
    }

    .recherche-globale {
        max-width: none;
    }

    .entete-profil-nom {
        display: none;
    }

    .panneau-onglet {
        padding: 16px 14px 32px;
    }

    /* Voile affiché derrière la barre latérale ouverte */
    .voile-sidebar {
        position: fixed;
        inset: 0;
        background-color: rgba(19, 24, 38, .45);
        z-index: 1025;
        display: none;
    }

    body.sidebar-ouverte .voile-sidebar {
        display: block;
    }
}

@media (min-width: 992px) {
    .voile-sidebar {
        display: none !important;
    }

    .bouton-menu-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   12. FICHE CABINET : BARRE SUPERIEURE, CHAMPS MODIFIABLES, ONGLETS INTERNES
   ==========================================================================
   La fiche est composée de fragments rendus par PHP (views/clients/fragments)
   et rafraîchis un par un. Les classes ci-dessous décrivent leur habillage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 Barre supérieure de la fiche
   Regroupe ce que l'on consulte le plus : identité, suivi, statuts. Elle reste
   en tête de la fiche, au-dessus des deux colonnes.
   -------------------------------------------------------------------------- */

.fiche-topbar {
    background-color: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-carte);
    padding: 16px 18px;
    margin-bottom: 18px;
}

.fiche-topbar-principale {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fiche-topbar-identite {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

/* Monogramme : deux lettres de la raison sociale, pour repérer la fiche
   d'un coup d'œil quand plusieurs onglets sont ouverts. */
.fiche-topbar-monogramme {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--couleur-primaire-pale);
    color: var(--couleur-primaire);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
}

.fiche-topbar-titre {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 2px;
    line-height: 1.25;
}

.fiche-topbar-sous-titre {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--texte-secondaire);
    font-size: 12.5px;
}

.fiche-topbar-sous-titre i {
    margin-right: 3px;
}

.fiche-topbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Pastilles de suivi : conseiller, commercial, origine, dates. */
.fiche-topbar-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--bordure);
}

.fiche-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 8px;
    background-color: var(--fond-application);
    font-size: 12px;
    white-space: nowrap;
}

.fiche-pastille i {
    color: var(--texte-discret);
    font-size: 14px;
}

.fiche-pastille-libelle {
    color: var(--texte-secondaire);
}

.fiche-pastille-valeur {
    font-weight: 600;
    color: var(--texte-principal);
}

/* Statuts : une colonne par catégorie, alignées sur toute la largeur. */
.fiche-topbar-statuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--bordure);
}

.fiche-topbar-statuts .mb-3 {
    margin-bottom: 0 !important;
}

.fiche-topbar-statuts .form-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--texte-discret);
    font-weight: 600;
    margin-bottom: 4px;
}

/* Champs réclamés par certains statuts : commentaire, rappel, concurrent. */
.fiche-topbar-complements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: end;
}

.fiche-topbar-complements:not(:empty) > *:not(.d-none) {
    margin-top: 12px;
}

.fiche-topbar-complements [data-action="valider-statut"] {
    grid-column: 1 / -1;
    justify-self: start;
}

.fiche-topbar-indicateurs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--bordure);
}

/* --------------------------------------------------------------------------
   12.2 Champs modifiables sur place
   Le champ ne se distingue pas d'un texte tant qu'on ne le survole pas : la
   fiche reste lisible, et devient modifiable sans changer d'écran.
   -------------------------------------------------------------------------- */

.liste-champs-fiche {
    padding-top: 6px;
    padding-bottom: 6px;
}

.champ-fiche {
    padding: 7px 0;
    border-bottom: 1px solid var(--bordure);
}

.champ-fiche:last-child {
    border-bottom: none;
}

.champ-fiche-libelle {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--texte-secondaire);
    font-size: 11.5px;
    margin-bottom: 2px;
}

.champ-fiche-libelle i {
    color: var(--texte-discret);
    font-size: 14px;
}

.champ-fiche-controle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.champ-fiche-lecture {
    font-size: 13.5px;
    padding: 5px 0;
}

/* Saisie « invisible » : bordure transparente au repos, dessinée au survol,
   franche au focus. */
.saisie-fiche {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--rayon-champ);
    background-color: transparent;
    padding: 5px 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--texte-principal);
    transition: border-color .12s ease, background-color .12s ease;
}

.saisie-fiche:hover:not(:focus) {
    border-color: var(--bordure);
    background-color: var(--fond-application);
}

.saisie-fiche:focus {
    outline: none;
    border-color: var(--couleur-primaire);
    background-color: var(--fond-carte);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}

.saisie-fiche-zone {
    resize: vertical;
    line-height: 1.5;
}

/* Une liste déroulante garde sa flèche : sans elle, rien n'indiquerait
   qu'elle se déplie. */
select.saisie-fiche {
    cursor: pointer;
    border-color: var(--bordure);
    background-color: var(--fond-carte);
}

/* Coche de confirmation, visible une seconde et demie après l'enregistrement. */
.champ-fiche-temoin {
    color: var(--couleur-succes);
    font-size: 15px;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity .16s ease;
}

.champ-fiche.est-enregistre .champ-fiche-temoin {
    opacity: 1;
}

.champ-fiche-erreur {
    color: var(--couleur-danger);
    font-size: 11.5px;
    min-height: 0;
}

.champ-fiche.est-en-erreur .saisie-fiche {
    border-color: var(--couleur-danger);
    background-color: #fdf3f5;
}

.champ-fiche.est-en-erreur .champ-fiche-erreur {
    margin-top: 3px;
}

/* --------------------------------------------------------------------------
   12.3 Onglets internes de la fiche
   -------------------------------------------------------------------------- */

.onglets-fiche {
    display: flex;
    gap: 2px;
    border: none;
    padding: 6px 8px 0;
    width: 100%;
    flex-wrap: wrap;
}

.onglets-fiche .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 9px 9px 0 0;
    padding: 9px 14px;
    color: var(--texte-secondaire);
    font-size: 13px;
    font-weight: 500;
    background-color: transparent;
    position: relative;
    transition: background-color .13s ease, color .13s ease;
}

.onglets-fiche .nav-link i {
    font-size: 16px;
    color: var(--texte-discret);
    transition: color .13s ease;
}

.onglets-fiche .nav-link:hover {
    background-color: var(--fond-application);
    color: var(--texte-principal);
}

.onglets-fiche .nav-link.active {
    background-color: var(--couleur-primaire-pale);
    color: var(--couleur-primaire);
    font-weight: 600;
}

.onglets-fiche .nav-link.active i {
    color: var(--couleur-primaire);
}

/* Trait sous l'onglet actif, qui le raccorde au contenu. */
.onglets-fiche .nav-link.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--couleur-primaire);
}

/* Compteur d'éléments, alimenté par l'attribut data-compteur du fragment. */
.onglets-fiche-compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background-color: var(--fond-application);
    color: var(--texte-secondaire);
    font-size: 11px;
    font-weight: 600;
}

.onglets-fiche .nav-link.active .onglets-fiche-compteur {
    background-color: var(--couleur-primaire);
    color: #fff;
}

/* Un compteur à zéro n'apprend rien : il disparaît. */
.onglets-fiche-compteur.est-vide {
    display: none;
}

/* --------------------------------------------------------------------------
   12.4 Notes, sous les deux colonnes
   -------------------------------------------------------------------------- */

.formulaire-note {
    background-color: var(--fond-application);
    border: 1px solid var(--bordure);
    border-radius: 9px;
    padding: 12px;
    margin-bottom: 16px;
}

.liste-notes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    align-items: start;
}

.liste-notes .bloc-note {
    margin-bottom: 0;
}

.liste-notes .etat-vide {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   12.5 Planificateur de rendez-vous
   Trois colonnes : le rendez-vous, le calendrier du mois, les horaires du
   jour retenu. On ne saisit plus une date à la main, on choisit un créneau
   effectivement libre.
   -------------------------------------------------------------------------- */

.rdv-planificateur {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(290px, 1.15fr) minmax(180px, .8fr);
    gap: 0;
    min-height: 430px;
}

.rdv-colonne {
    padding: 4px 18px;
}

.rdv-colonne-calendrier,
.rdv-colonne-creneaux {
    border-left: 1px solid var(--bordure);
}

.rdv-titre-colonne {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--texte-discret);
    margin-bottom: 12px;
}

.rdv-colonne .form-label {
    font-size: 12px;
    color: var(--texte-secondaire);
    margin-bottom: 4px;
}

/* Rappel du créneau retenu */
.rdv-recapitulatif {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px dashed var(--bordure-forte);
    background-color: var(--fond-application);
    color: var(--texte-secondaire);
    font-size: 13px;
}

.rdv-recapitulatif i {
    font-size: 17px;
}

.rdv-recapitulatif.est-complet {
    border-style: solid;
    border-color: #b5e5cd;
    background-color: #e6f7ef;
    color: #1f8f56;
    font-weight: 600;
}

.rdv-lien-horaire-libre {
    margin-top: 10px;
    border: none;
    background: none;
    padding: 0;
    color: var(--couleur-primaire);
    font-size: 12px;
    cursor: pointer;
}

.rdv-lien-horaire-libre:hover {
    text-decoration: underline;
}

/* Calendrier */
.rdv-calendrier-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.rdv-calendrier-mois {
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.rdv-calendrier-jours,
.rdv-calendrier-grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.rdv-calendrier-jours {
    margin-bottom: 4px;
}

.rdv-calendrier-jours span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--texte-discret);
}

.rdv-jour {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--texte-discret);
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.rdv-jour.est-vide {
    visibility: hidden;
}

/* Une journée ouverte se voit : fond coloré et chiffre en gras. */
.rdv-jour.est-disponible {
    background-color: var(--couleur-primaire-pale);
    color: var(--couleur-primaire);
    font-weight: 600;
    cursor: pointer;
}

.rdv-jour.est-disponible:hover {
    background-color: #dde4ff;
}

.rdv-jour.est-indisponible {
    cursor: default;
}

.rdv-jour.est-choisi {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #fff;
    font-weight: 700;
}

/* Créneaux horaires */
.rdv-liste-creneaux {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.rdv-creneau {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 10px;
    border: 1px solid var(--couleur-primaire);
    border-radius: var(--rayon-champ);
    background-color: var(--fond-carte);
    color: var(--couleur-primaire);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.rdv-creneau:hover {
    background-color: var(--couleur-primaire-pale);
}

.rdv-creneau.est-choisi {
    background-color: var(--couleur-primaire);
    color: #fff;
}

.rdv-creneau-heure {
    font-size: 14px;
    font-weight: 600;
}

.rdv-creneau-commercial {
    font-size: 11px;
    opacity: .8;
}

/* --------------------------------------------------------------------------
   12.6 Adaptation aux écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .rdv-planificateur {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .rdv-colonne-calendrier,
    .rdv-colonne-creneaux {
        border-left: none;
        border-top: 1px solid var(--bordure);
        padding-top: 16px;
        margin-top: 16px;
    }

    .rdv-liste-creneaux {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }

    .rdv-creneau {
        flex: 0 0 auto;
        min-width: 92px;
    }
}

@media (max-width: 575px) {
    .fiche-topbar-actions {
        width: 100%;
    }

    .fiche-topbar-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .onglets-fiche .nav-link span:not(.onglets-fiche-compteur) {
        display: none;
    }
}