/* Charte graphique Axtead (axtead.fr), point 1 : police Montserrat déjà
   utilisée pour les PDF (static/fonts/), chargée aussi pour l'interface web.
   Repli sur une police système si les fichiers venaient à manquer. */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.62d08c41cefb.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-SemiBold.d3dc7334efe2.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Bold.5ce2f7a911f9.ttf") format("truetype");
    font-weight: 700;
}

body {
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
    background-color: #f8f9fa;
}

/* Charte graphique Axtead, point 1 (retour définitif à l'option A après essai
   de l'option sable) : bandeau de navigation marine, texte/liens blancs —
   remplace le bg-dark générique de Bootstrap. */
.navbar.bg-marine {
    background-color: #28385F;
    /* Point 7 (bandeau retour option A/réordonnancement...) : le logo passe à
       4rem — davantage de padding vertical pour qu'il respire dans le
       bandeau sans être rogné, tout en gardant les liens/texte centrés
       verticalement (le flex layout par défaut de .navbar s'en charge). */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Point 2 (Encaissements/Bandeau/Clients/Dossiers) : le conteneur revient à
   .container (voir _navbar.html), pour aligner le bandeau sur la largeur du
   contenu des pages — Bootstrap centre déjà verticalement par défaut,
   explicité ici pour que logo/liens/avatar/boutons restent bien sur la
   même ligne médiane malgré le logo agrandi. */
.navbar > .container {
    align-items: center;
}

.navbar .nav-link {
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    padding: 0.5rem 0.35rem;
}

/* Point 2 (Encaissements/Bandeau/Clients/Dossiers) : Bootstrap définit
   `.navbar-expand-lg .navbar-nav .nav-link { padding-left/right }` avec la
   même spécificité (3 classes) que notre règle ci-dessus — sans ce
   sélecteur dédié, le padding resserré ne s'appliquait qu'à "Admin Django"
   (hors de .navbar-nav) et pas aux 8 liens du menu, empêchant le bandeau de
   tenir dans la largeur de .container (1320px max, palier xxl). */
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.35rem;
    padding-left: 0.35rem;
}

/* Point 1 (synthèse en cours) : liens principaux en gras — .navbar-nav
   .nav-link (pas .navbar .nav-link) pour ne pas s'appliquer à "Admin
   Django", qui est désormais hors du <ul class="navbar-nav">. */
.navbar-nav .nav-link {
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    border-bottom-color: #C5B18F;
}

.navbar-brand, .navbar-text {
    color: #ffffff !important;
}

.navbar .navbar-text,
.navbar .btn-reglages-pilule,
.navbar .btn-outline-light {
    white-space: nowrap;
}

.badge-role-sable {
    background-color: #C5B18F;
    color: #28385F;
}

.btn-reglages-pilule {
    background-color: #C5B18F;
    color: #28385F;
    border-radius: 20px;
    font-weight: 600;
    border: none;
    padding: 0.375rem 1rem;
}

.btn-reglages-pilule:hover {
    background-color: #b8a37d;
    color: #28385F;
}

/* Point 5 (bandeau/encaissements/saisie/cartes/dossiers...) : bandeau
   sable/texte marine généralisé à toutes les cartes. */
.card > .card-header {
    background-color: #E1D2B9;
    color: #28385F;
    font-weight: 600;
    border-bottom: none;
    text-align: center;
}

/* Point 2 (synthèse en cours) : pour les en-têtes combinant titre + bouton/
   lien (Calendrier, Notifications, To-do), text-align seul ne suffit pas
   puisque le titre n'est pas seul dans le conteneur — grille à 3 colonnes
   pour centrer le titre sans déplacer les éléments latéraux. */
.card-header.card-header-centre {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.card-header.card-header-centre > :first-child { justify-self: start; }
.card-header.card-header-centre > :last-child { justify-self: end; }

/* Boutons mois/année précédent-suivant : remplace le gris Bootstrap
   générique par une teinte marine cohérente avec la charte. */
.btn-outline-marine {
    border-color: #28385F;
    color: #28385F;
}

.btn-outline-marine:hover {
    background-color: #28385F;
    color: #fff;
}

.badge-etat-a_traiter {
    background-color: #fd7e14;
}

.badge-etat-traite {
    background-color: #198754;
}

.badge-etat-non_facturable {
    background-color: #6c757d;
}

.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #0d6efd;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Photo de profil (point 13) : même gabarit que .avatar-circle, pour
   remplacer la pastille d'initiales sans changer la mise en page environnante. */
.avatar-photo {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* Variante compacte : cartouches du calendrier accueil (2 lignes photo+heures).
   Agrandie (affinage 2, point 2) pour que la photo reste identifiable dans
   une case de calendrier élargie en conséquence (voir accueil.html). */
.avatar-photo-sm {
    width: 1.75rem;
    height: 1.75rem;
}

/* Code couleur des heures dans les calendriers (accueil, congés) :
   < 5h orange, 5-7h jaune, > 7h vert (bg-success). */
.heures-faible {
    background-color: #fd7e14;
    color: #fff;
}

.heures-moyenne {
    background-color: #ffc107;
    color: #212529;
}

.heures-bonne {
    background-color: #198754;
    color: #fff;
}

.cartouche-collaborateur {
    display: inline-block;
    position: relative;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
}

/* Point 4 (charte graphique/BD Office/Saisie/tooltip...) : remplace le
   title= natif (police non stylée, une seule ligne) par un petit popover en
   colonne, une ligne par client — voir templates/core/accueil.html. */
.popover-heures {
    display: none;
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 0.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    padding: 0.4rem 0.6rem;
    text-align: left;
    color: #28385F;
    font-size: 0.85rem;
    font-weight: 400;
    white-space: nowrap;
}

.cartouche-collaborateur:hover .popover-heures {
    display: block;
}

.popover-heures .ligne-detail {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.popover-heures .ligne-detail:not(:last-child) {
    margin-bottom: 0.15rem;
}

/* Point 8 (Synthèse financière - diagnostic Top 15/période/repli/Hors CA) :
   le calendrier Collaborateur (accueil, colonne col-lg-7) est plus étroit que
   celui de l'Admin/Propriétaire — un popover centré (left: 50% + translateX)
   déborde et se fait tronquer par le overflow-x: auto de .table-responsive
   sur les colonnes de bord (Lundi/Vendredi). Ancre ces popovers au bord
   intérieur plutôt qu'au centre pour ces deux colonnes uniquement. */
.calendrier-etroit td:first-child .popover-heures {
    left: 0;
    transform: none;
}

.calendrier-etroit td:last-child .popover-heures {
    left: auto;
    right: 0;
    transform: none;
}

/* Met en avant le "Traité" sur la page d'accueil (section 4) : c'est la
   donnée qui compte réellement (facturé réel), à distinguer visuellement de
   l'"À traiter" (encore provisoire). */
.montant-traite-emphase {
    font-weight: 700;
    font-size: 1.05em;
    color: #198754;
}

/* Sélecteur "Responsables" compact (affinage 2, point 8) : replié par défaut
   sur une seule ligne (résumé des initiales), un clic déplie la liste à
   cocher ; voir templates/todo/_responsables_compact.html. */
.responsables-compact {
    display: inline-block;
    min-width: 6rem;
    max-width: 12rem;
    position: relative;
}

.responsables-compact > summary {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
    background-color: #fff;
}

.responsables-compact > summary::-webkit-details-marker {
    display: none;
}

.responsables-compact > summary::after {
    content: "▾";
    float: right;
    color: #6c757d;
}

.responsables-compact-form {
    position: relative;
    z-index: 5;
}

.responsables-compact-liste {
    position: absolute;
    z-index: 20;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.5rem;
    margin-top: 0.15rem;
    /* Affinage 3, point 2 : au moins 3x plus de lignes visibles sans scroll
       interne qu'avant (12rem) — 40rem couvre largement un effectif de
       cabinet courant sans nécessiter de défilement. */
    max-height: 40rem;
    overflow-y: auto;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

/* Tableau "Mes tâches" / carte Étapes du dossier (affinage 3, points 2 et 4) :
   largeurs proportionnelles fixes pour que Narratif occupe au moins un quart
   de la table et que les menus déroulés (nature, responsables, dossier)
   aient assez de place. */
.table-mes-taches, .table-etapes-dossier {
    table-layout: fixed;
}

/* Rééquilibrage des tableaux de la synthèse financière (affinage 2, point 14) :
   Engagé/Traité/BD occupent une largeur comparable — les 5 sous-colonnes BD
   sont resserrées (en-tête 2 lignes, code court) pour ne pas reprendre la
   largeur gagnée sur les deux autres familles. */
.col-engage, .col-traite {
    min-width: 11rem;
}

.col-bd {
    min-width: 2.75rem;
    max-width: 3.5rem;
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
}

.col-bd-entete {
    line-height: 1.2;
}

/* Poignée de glisser-déposer (affinage To-do, point 2) — remplace les
   boutons monter/descendre sur le tableau "Mes tâches". */
.poignee-glisser {
    cursor: grab;
    color: #6c757d;
    padding: 0 0.25rem;
}

.groupe-nature-sortable .sortable-ghost {
    opacity: 0.4;
}

/* Espace réservé en bas des cartes Étapes/Tâches/Mes tâches (affinage To-do,
   point 5) pour que les menus déroulants ouverts sur la dernière ligne du
   tableau ne soient pas tronqués faute de place en dessous. */
.carte-espace-menus-deroulants {
    min-height: 8rem;
}

/* Index alphabétique A→Z (Point 3, Hors CA/Frais/Counsel/Associé en charge) :
   colonne fixe sur le côté des listes clients/dossiers — voir
   static/index_alpha.js. Grisé/désactivé si aucune ligne ne correspond. */
.index-alpha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    font-size: 0.75rem;
    padding-right: 0.5rem;
}

.index-alpha a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
    padding: 0 0.15rem;
}

.index-alpha a.disabled {
    color: #ced4da;
    pointer-events: none;
}

/* Tableau Facturation de l'accueil (correctif post-migration) : 13 colonnes
   serrées + montants pouvant dépasser 100 000 € — police réduite et pas de
   retour à la ligne intempestif du symbole "€". */
.tableau-facturation td, .tableau-facturation th {
    font-size: 0.8rem;
    white-space: nowrap;
}

.ligne-surlignee {
    transition: background-color 0.3s ease;
    background-color: #fff3cd !important;
}