/* 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;
}

/* Onglets avec picto au-dessus du libellé (retour utilisateur juillet 2026,
   option A retenue parmi 2 propositions soumises) — un seul <ul> pour tout
   le monde, chaque <li> gardant sa propre condition de droits d'accès (les
   onglets réservés associés/propriétaire ne sont plus regroupés en fin de
   liste). `flex-wrap: nowrap` : sur une largeur de bureau normale les 11
   onglets tiennent sur une seule ligne (déjà le cas avant, en texte seul) ;
   en dessous du palier lg, tout le menu est de toute façon masqué derrière
   le bouton navbar-toggler. */
.navbar-nav-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 0.15rem;
}

.nav-link-icon {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

/* Retour utilisateur (juillet 2026) : "augmente un peu la taille des pictos
   et des noms d'onglets, de l'ordre de 30%" — seule la taille du picto et du
   libellé grossit (1.05rem -> 1.37rem, 0.66rem -> 0.86rem) ; l'écart entre
   les onglets (column-gap sur .navbar-nav-icons, ci-dessus) et le reste de la
   présentation ne changent pas. */
.nav-link-icon i {
    font-size: 1.37rem;
    line-height: 1;
}

.nav-link-icon span {
    font-size: 0.86rem;
    line-height: 1;
}

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

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

/* Identité utilisateur : nom puis grade EN DESSOUS (retour utilisateur
   juillet 2026 — auparavant le badge de grade était accolé au nom sur la
   même ligne). Le badge reste affiché pour tout le monde via
   user.role_display (associé, collaborateur, propriétaire...), seule sa
   position change. */
.identite-utilisateur {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.nom-utilisateur {
    font-size: 0.85rem;
}

.badge-role-sable {
    background-color: #C5B18F;
    color: #28385F;
    margin-top: 0.15rem;
    align-self: flex-start;
}

.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;
}

/* Retour utilisateur (juillet 2026) : "le bouton déconnexion pourrait être
   revu sans que ce soit écrit... un bouton comme éteindre sur une télé" —
   remplace le bouton texte "Déconnexion" par un simple picto rond (bi-power),
   même gabarit que .avatar-circle/.avatar-photo pour rester aligné avec le
   reste du bloc identité. Le libellé "Déconnexion" reste présent en
   title/aria-label (accessibilité), simplement plus affiché à l'écran. */
.btn-deconnexion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: transparent;
    color: #ffffff;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-deconnexion:hover,
.btn-deconnexion:focus {
    background-color: #C5B18F;
    border-color: #C5B18F;
    color: #28385F;
}

/* Retour utilisateur (juillet 2026) : "réduire encore un peu et mettre un
   picto" — variante compacte du bouton Réglages, picto + libellé plus petit,
   utilisée uniquement dans le bandeau (voir _navbar.html). */
.btn-reglages-compact {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
}

/* 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;
}

/* Affinage congés en demi-journée : distinguer visuellement une pose
   matin/après-midi (bordure pointillée) d'une journée entière (bordure
   normale, ou aucune) — voir templates/conges/conges.html. */
.avatar-demi-journee {
    border: 2px dashed #6c757d;
}

.badge-demi-journee {
    border: 1px dashed #495057;
}

/* 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;
}

/* Colonne "Facturé (réel)" scindée en 2 sous-colonnes Heures/Montant
   (juillet 2026, retour utilisateur) — largeurs comparables à .col-bd pour
   les heures (nombre court) et un peu plus larges pour le montant
   (formaté avec espaces de milliers). */
.col-traite-heures {
    min-width: 4rem;
    white-space: nowrap;
}

.col-traite-montant {
    min-width: 7rem;
    white-space: nowrap;
}

/* Écran de connexion / code de double authentification (juillet 2026,
   retour utilisateur) — voir templates/base_connexion.html. Reprend les
   teintes déjà utilisées ailleurs dans l'application (bandeau marine de la
   navbar, accents sable des badges) plutôt que d'introduire une nouvelle
   palette. */
.page-connexion {
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
    background-color: #f8f9fa;
}

.connexion-split {
    min-height: 100vh;
    display: flex;
}

.connexion-panneau-marine {
    flex: 1 1 42%;
    background: linear-gradient(160deg, #28385F 0%, #1b2745 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.connexion-marine-contenu {
    max-width: 26rem;
    text-align: center;
}

.connexion-logo {
    max-height: 4.5rem;
    max-width: 100%;
    border-radius: 0.5rem;
}

.connexion-citation {
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #E1D2B9;
    margin-bottom: 0.5rem;
}

.connexion-citation-auteur {
    color: #C5B18F;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.connexion-panneau-formulaire {
    flex: 1 1 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.connexion-carte {
    width: 100%;
    max-width: 24rem;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(40, 56, 95, 0.1);
    padding: 2.5rem;
}

@media (max-width: 767px) {
    .connexion-split {
        flex-direction: column;
    }
    .connexion-panneau-marine {
        flex: 0 0 auto;
        padding: 2rem;
    }
    .connexion-citation {
        font-size: 1rem;
    }
}

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

.btn-marine:hover,
.btn-marine:focus {
    background-color: #1b2745;
    border-color: #1b2745;
    color: #fff;
}

.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;
}

/* Cartes "Seuils et excédent" / "Rémunération atteinte à ce jour" du
   Pilotage financier (juillet 2026, à la demande de l'utilisateur : "je
   voudrais pouvoir cliquer sur les titres... et accéder au calcul") —
   toute la carte est un lien vers detail_calcul.html ; léger effet visuel
   au survol pour signaler que c'est cliquable. */
.pilotage-carte-cliquable {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pilotage-carte-cliquable:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Formulaire "Ajouter une entrée" de Saisie de temps (juillet 2026, retour
   utilisateur) : depuis que le menu Collaborateur est passé à col-md-1 (pour
   que Durée tienne sur la même ligne, voir templates/temps/timer.html), les
   libellés ("Collaborateur", "Type de prestation"...) à taille normale se
   chevauchaient visuellement dans des colonnes aussi étroites — police et
   espacement réduits ici, scopé à #form-saisie uniquement (n'affecte aucun
   autre formulaire de l'application). */
#form-saisie .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

#form-saisie .form-select,
#form-saisie .form-control {
    font-size: 0.85rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Pilotage financier, boîte "Seuils et excédent" (juillet 2026, retour
   utilisateur) : réserve la même hauteur au libellé des 4 sous-colonnes
   (une seule ou deux lignes selon la longueur du texte) pour que les
   montants en dessous démarrent tous à la même hauteur, quelle que soit
   la colonne. */
.seuils-excedent-label {
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Saisie de temps mobile (juillet 2026, retour utilisateur : "le seul
   intérêt pour moi de l'application sur téléphone, c'est de pouvoir rentrer
   du temps... que ce soit sympa, simple") — écran unique ouvert depuis une
   icône d'écran d'accueil iPhone (voir SaisieMobileView), sans la navbar :
   carte centrée, largeur plafonnée pour rester confortable même sur un
   iPhone en mode paysage, champs et bouton agrandis pour une saisie au
   pouce plutôt qu'au clavier/souris. */
.saisie-mobile {
    max-width: 26rem;
}

.saisie-mobile-entete {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}

/* Retour utilisateur (août 2026) : le titre doit être centré, pas collé à
   gauche — le bouton de déconnexion sort donc du flux normal (absolu, à
   droite) pour ne pas décaler le centrage du titre. */
.saisie-mobile-entete form {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.saisie-mobile-titre {
    font-size: 1.3rem;
    font-weight: 700;
    color: #28385F;
}

.saisie-mobile-carte {
    border: none;
    border-radius: 1rem;
}

.saisie-mobile .form-label {
    font-weight: 600;
    color: #28385F;
    margin-bottom: 0.3rem;
}

.saisie-mobile .form-control,
.saisie-mobile .form-select {
    font-size: 1.05rem;
    padding: 0.55rem 0.75rem;
}

.saisie-mobile .btn-marine {
    border-radius: 0.6rem;
    padding: 0.7rem;
    font-weight: 600;
}

/* Écran mobile "Ma to-do" (templates/todo/todo_mobile.html, août 2026) :
   mêmes conventions de nommage que .saisie-mobile* ci-dessus — un onglet
   swipeable par NatureTache (+ un dernier onglet catch-all "Sans nature"),
   liste plate par onglet, ligne = badge date (ou espace vide) + texte
   (appui long -> édition) + rond (tap -> fait/à faire, glisser -> réordonner). */
.todo-mobile {
    max-width: 26rem;
}

.todo-mobile-entete {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}

/* Même retour utilisateur que .saisie-mobile-entete ci-dessus : titre
   centré, bouton de déconnexion sorti du flux (absolu, à droite). */
.todo-mobile-entete form {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.todo-mobile-titre {
    font-size: 1.3rem;
    font-weight: 700;
    color: #28385F;
}

.todo-mobile-carte {
    border: none;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.todo-mobile-points {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 10px;
}

.todo-mobile-point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #dee2e6;
}

.todo-mobile-point-actif {
    background-color: #28385F;
}

.todo-mobile-scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.todo-mobile-scroller::-webkit-scrollbar {
    display: none;
}

.todo-mobile-page {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 0 0.25rem 0.5rem;
    box-sizing: border-box;
}

.todo-mobile-page-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.todo-mobile-page-titre {
    font-weight: 600;
    color: #28385F;
}

.todo-mobile-page-compte {
    font-size: 0.8rem;
    color: #6c757d;
}

.todo-mobile-ajout {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.todo-mobile-ajout input {
    flex: 1;
    background-color: #fff;
}

.todo-mobile-ligne {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.1rem;
    border-top: 1px solid #eef0f3;
}

.todo-mobile-date,
.todo-mobile-date-vide {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.todo-mobile-date {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background-color: #fff;
}

.todo-mobile-date-jour {
    /* Légèrement agrandi (retour utilisateur août 2026), sans toucher à
       .todo-mobile-date (28x28px, largeur/hauteur fixes) : le texte reste
       centré dans la même boîte, donc la hauteur de la ligne ne bouge pas. */
    font-size: 0.78rem;
    font-weight: 600;
    color: #28385F;
}

.todo-mobile-date-mois {
    font-size: 0.66rem;
    color: #6c757d;
}

/* Corps de la ligne (date + texte), séparé du rond de droite (fait/glisser)
   pour pouvoir y loger le nom du client sans jamais empiéter sur ce
   contrôle. `position:relative` + label enfant en `position:absolute` :
   le label sort du flux normal du texte de la tâche. `padding-bottom`
   réserve systématiquement la place du badge client (retour utilisateur
   août 2026 : d'abord réservée seulement en cas de chevauchement sur 2
   lignes, puis demande explicite de la rendre permanente pour que toutes
   les lignes soient cohérentes, avec ou sans texte long) — la ligne est
   donc légèrement plus haute qu'avant, uniformément, pour toutes les
   tâches. */
.todo-mobile-corps {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    padding-bottom: 16px;
}

.todo-mobile-texte {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Nom du client (pas du dossier), en petit badge en bas à droite de la
   ligne — demande explicite (août 2026) de reprendre la charte graphique
   du cabinet Axtead plutôt qu'un gris neutre générique : or adouci
   #6d614f (version foncée, lisible, de l'or #C6B190 de la charte) sur
   fond blanc calcaire #EDF0F2, les deux couleurs officielles déjà
   utilisées dans templates/propales/pdf_propale.html (extraites du
   modèle PowerPoint du cabinet). Largeur limitée à 40% de la ligne
   (calibrée après retour utilisateur : "augmente-le de vingt pour cent
   max"). */
.todo-mobile-client {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 40%;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.4;
    color: #6d614f;
    background-color: #edf0f2;
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.todo-mobile-texte-fait {
    text-decoration: line-through;
    color: #6c757d;
}

/* Rond + poignée de réordonnancement (retour utilisateur août 2026 : le
   double usage tap/glisser du rond seul n'était "pas évident" au toucher).
   Regroupés dans un petit conteneur flex à part, avec un gap réduit
   (0.2rem) entre les deux : le gap ligne->conteneur (0.6rem, inchangé)
   reste identique à avant, donc le rond ne se décale que du strict
   minimum nécessaire pour laisser la place à la poignée à sa droite. */
.todo-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.todo-mobile-form-rond {
    margin: 0;
    flex-shrink: 0;
    line-height: 0;
}

.todo-mobile-rond {
    font-size: 1.3rem;
    color: #6c757d;
    touch-action: none;
    cursor: pointer;
}

.bi-check-circle-fill.todo-mobile-rond {
    color: #2e7d32;
}

.todo-mobile-poignee {
    font-size: 1.05rem;
    line-height: 0;
    color: #adb5bd;
    touch-action: none;
    cursor: grab;
}

.todo-mobile-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    z-index: 2;
}

.todo-mobile-fleche-gauche {
    left: 2px;
}

.todo-mobile-fleche-droite {
    right: 2px;
}

/* Carte "Accès mobile" de Réglages (core/reglages.html) : QR code généré
   côté client (voir qrcode.min.js, CDN jsdelivr) à partir de l'URL absolue
   de temps:saisie_mobile — à scanner avec l'appareil photo de l'iPhone pour
   ouvrir directement le lien dans Safari, sans le retaper à la main. */
.qr-acces-mobile {
    display: inline-flex;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

.lien-acces-mobile {
    font-size: 0.85rem;
    word-break: break-all;
}

/* Colonne "Détails" de "Dernières entrées" (templates/temps/timer.html) :
   petite boîte-icône (retour utilisateur : "un truc de dialogue, sans rien
   d'écrit dedans") affichée uniquement quand l'entrée a une note/narratif —
   au survol, la boîte se met en surbrillance et le texte complet apparaît
   dans l'infobulle native du navigateur (attribut title, même mécanisme que
   la colonne Note de la fiche dossier). N'affiche rien si l'entrée n'a pas
   de note, comme la colonne commentaire WIP de l'Accueil. */
.detail-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.35rem;
    color: #6c757d;
    cursor: help;
}

.detail-icone:hover {
    background-color: #fff3cd;
    border-color: #ffe69c;
    color: #28385F;
}