/* =========================================================================
   Feuille applicative : jetons de conception, châssis (rail + barre
   supérieure), et les motifs partagés par les écrans.

   La recoloration du thème PrimeFaces n'est PAS ici : elle est dans
   theme-immo.css, généré depuis le thème (voir son en-tête). Ici on ne
   traite que ce qui nous appartient — la mise en page, le rythme, et les
   quelques endroits où un composant PrimeFaces doit s'aligner sur nos motifs.

   Règle de spécificité : tout sélecteur qui vise une classe .ui-* du thème
   est préfixé « html body », pour la même raison que dans theme-immo.css
   — l'ordre de chargement des feuilles n'est pas garanti.
   ========================================================================= */

:root {
    /* --- Couleurs ------------------------------------------------------- */
    --ardoise-900: #0F172A;   /* rail, titres */
    --ardoise-800: #1E293B;   /* survol dans le rail */
    --ardoise-700: #334155;   /* texte courant */
    --ardoise-500: #64748B;   /* texte secondaire */
    --ardoise-300: #CBD5E1;   /* bordures de champ */
    --ardoise-200: #E2E8F0;   /* bordures de carte */
    --ardoise-100: #F1F5F9;   /* survol de ligne */

    --action: #1264C8;
    --action-survol: #0F58AD;
    --action-douce: #E8F0FC;  /* fond des états sélectionnés */

    --accent: #F59E0B;        /* alertes, retards, seuils */
    --succes: #059669;
    --danger: #DC2626;
    --info: #0284C7;

    --fond-page: #F6F8FB;
    --fond-carte: #FFFFFF;

    /* --- Rythme --------------------------------------------------------- */
    --pas-1: 4px;
    --pas-2: 8px;
    --pas-3: 12px;
    --pas-4: 16px;
    --pas-5: 24px;
    --pas-6: 32px;

    --rayon: 10px;
    --rayon-petit: 6px;

    /* Ombres discrètes : une application de gestion se lit, elle ne
       s'exhibe. Deux niveaux suffisent — posé (cartes) et flottant
       (dialogues, menus). */
    --ombre-posee: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --ombre-flottante: 0 10px 25px rgba(15, 23, 42, .12), 0 4px 10px rgba(15, 23, 42, .06);

    /* --- Châssis -------------------------------------------------------- */
    --rail-largeur: 248px;
    --rail-largeur-replie: 68px;
    --barre-hauteur: 60px;
}

/* Pile système : aucune police téléchargée, donc aucune requête sortante
   depuis le Tomcat (et aucun binaire dans le dépôt). 15px de base plutôt que
   16 : tout PrimeFaces est dimensionné en rem, l'interface se densifie donc
   d'un bloc, proportionnellement, sans retoucher une seule règle du thème. */
html {
    font-size: 15px;
}

html body {
    margin: 0;
    background: var(--fond-page);
    color: var(--ardoise-700);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   1. Châssis
   ========================================================================= */

/* Rail fixe plutôt qu'en flux : le contenu des pages est réécrit par les
   mises à jour AJAX de JSF, le châssis ne doit jamais être entraîné dans ces
   recalculs. */
.rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rail-largeur);
    background: var(--ardoise-900);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width .18s ease;
    overflow: hidden;
}

.rail-marque {
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    height: var(--barre-hauteur);
    padding: 0 var(--pas-4);
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.rail-logo {
    max-height: 32px;
    max-width: 32px;
    border-radius: var(--rayon-petit);
    flex: 0 0 auto;
}

/* Repli quand aucun logo n'a été téléversé : l'initiale du nom de
   l'entreprise, plutôt qu'une image cassée. */
.rail-monogramme {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--rayon-petit);
    background: var(--action);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Deux lignes au plus, coupées proprement : le nom de l'entreprise vient des
   paramètres et peut être très long ; sur une seule ligne tronquée, il ne
   resterait que « ETS. ADAMOU… ». */
.rail-nom {
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rail-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--pas-3) var(--pas-2);
}

.rail-groupe {
    color: rgba(255, 255, 255, .38);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: var(--pas-4) var(--pas-3) var(--pas-2);
    white-space: nowrap;
}

html body .rail-item {
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    padding: 10px var(--pas-3);
    margin-bottom: 2px;
    border-radius: var(--rayon-petit);
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

html body .rail-item:hover {
    background: var(--ardoise-800);
    color: #fff;
    text-decoration: none;
}

/* L'écran courant : fond plein et liseré, pour qu'on sache où l'on est sans
   avoir à relire le titre. */
html body .rail-item.est-actif {
    background: var(--action);
    color: #fff;
    font-weight: 600;
}

.rail-item .pi {
    font-size: 1.05rem;
    width: 20px;
    flex: 0 0 auto;
    text-align: center;
}

.rail-item-libelle {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-separateur {
    height: 1px;
    background: rgba(255, 255, 255, .08);
    margin: var(--pas-3) var(--pas-3);
}

.rail-pied {
    flex: 0 0 auto;
    padding: var(--pas-2);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Signature du concepteur, au bas du rail — donc au bas de la page, à
   gauche, sur tous les écrans. Volontairement en retrait : l'identité que
   l'utilisateur doit reconnaître est celle de son agence, en haut du même
   rail. L'opacité remplace une couleur plus sombre, qui aurait fait mentir
   la planche de marque sur les trois teintes du logo. */
.rail-signature {
    padding: var(--pas-2) var(--pas-3) var(--pas-3);
    opacity: .55;
}

.rail-signature-logo {
    display: block;
    width: 116px;
    max-width: 100%;
    height: auto;
}

html body .rail-bascule {
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    width: 100%;
    padding: 10px var(--pas-3);
    background: none;
    border: 0;
    border-radius: var(--rayon-petit);
    color: rgba(255, 255, 255, .55);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
}

html body .rail-bascule:hover {
    background: var(--ardoise-800);
    color: #fff;
}

/* La classe est posée sur <html> par le script du template AVANT peinture :
   restaurer le repli après coup ferait clignoter le rail à chaque page. */
.rail-replie .rail {
    width: var(--rail-largeur-replie);
}

.rail-replie .zone {
    margin-left: var(--rail-largeur-replie);
}

.rail-replie .rail-nom,
.rail-replie .rail-item-libelle,
.rail-replie .rail-groupe,
.rail-replie .rail-signature,
.rail-replie .rail-bascule span {
    display: none;
}

.rail-replie .rail-item,
.rail-replie .rail-bascule {
    justify-content: center;
}

.rail-replie .rail-marque {
    justify-content: center;
    padding: 0;
}

.rail-replie .rail-bascule .pi {
    transform: rotate(180deg);
}

/* Voile de fermeture du tiroir : masqué ICI et pas seulement dans la règle
   du mode tiroir. Sans cette base, le div reste dans le flux sur grand écran
   — sans hauteur donc invisible, mais présent : une négligence, pas une
   intention. */
.tiroir-voile {
    display: none;
}

.zone {
    margin-left: var(--rail-largeur);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .18s ease;
}

.barre {
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--barre-hauteur);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--pas-4);
    padding: 0 var(--pas-5);
    background: var(--fond-carte);
    border-bottom: 1px solid var(--ardoise-200);
}

.barre-titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ardoise-900);
    margin: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .barre-tiroir {
    display: none;   /* n'apparaît qu'en dessous de 1024px */
    background: none;
    border: 0;
    color: var(--ardoise-700);
    font-size: 1.2rem;
    cursor: pointer;
    padding: var(--pas-2);
}

.barre-compte {
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    flex: 0 0 auto;
}

.compte-pastille {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--action-douce);
    color: var(--action);
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.compte-identite {
    line-height: 1.25;
    text-align: right;
}

.compte-nom {
    display: block;
    font-weight: 600;
    color: var(--ardoise-900);
    font-size: .875rem;
}

.compte-role {
    display: block;
    color: var(--ardoise-500);
    font-size: .75rem;
}

/* Déconnexion : bouton d'un formulaire HTML natif posté vers /logout (voir
   template.xhtml pour le raisonnement), habillé en icône. */
html body .compte-sortie {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--ardoise-200);
    border-radius: var(--rayon-petit);
    color: var(--ardoise-500);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

html body .compte-sortie:hover {
    background: #FEF2F2;
    border-color: #FECACA;
    color: var(--danger);
}

.contenu {
    flex: 1 1 auto;
    padding: var(--pas-5);
    max-width: 1440px;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================================
   2. En-tête d'écran
   ========================================================================= */

.ecran-entete {
    display: flex;
    align-items: flex-start;
    gap: var(--pas-4);
    margin-bottom: var(--pas-5);
}

.ecran-entete h1 {
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--ardoise-900);
    margin: 0;
    letter-spacing: -.01em;
}

.ecran-soustitre {
    display: block;
    margin-top: var(--pas-1);
    color: var(--ardoise-500);
    font-size: .9rem;
}

/* =========================================================================
   3. Cartes et barres de filtres
   ========================================================================= */

/* PAS d'overflow:hidden ici, malgré la tentation : c'était le moyen le plus
   court d'arrondir les coins du contenu, mais PrimeFaces rend les panneaux
   déroulants (selectOneMenu, datePicker, autoComplete) À L'INTÉRIEUR du
   composant, donc à l'intérieur de la carte — vérifié dans le HTML servi.
   Un rognage y est un menu invisible. Les coins sont donc arrondis
   explicitement sur le premier et le dernier bloc de la carte. */
.carte {
    background: var(--fond-carte);
    border: 1px solid var(--ardoise-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-posee);
    margin-bottom: var(--pas-5);
}

.carte > :first-child,
.carte > form > :first-child {
    border-top-left-radius: var(--rayon);
    border-top-right-radius: var(--rayon);
}

.carte > :last-child,
.carte > form > :last-child {
    border-bottom-left-radius: var(--rayon);
    border-bottom-right-radius: var(--rayon);
}

.carte-titre {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    padding: var(--pas-4) var(--pas-5);
    border-bottom: 1px solid var(--ardoise-200);
    font-weight: 600;
    color: var(--ardoise-900);
}

.carte-corps {
    padding: var(--pas-5);
}

/* La p:toolbar de filtres est soudée au tableau qui la suit : dans le même
   cadre, ils se lisent comme un seul objet — le tableau et ce qui le filtre.
   Sans ça la barre flottait au-dessus, détachée de ce sur quoi elle agit. */
html body .carte .ui-toolbar {
    background: #FCFDFE;
    border: 0;
    border-bottom: 1px solid var(--ardoise-200);
    border-radius: 0;
    padding: var(--pas-3) var(--pas-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    align-items: center;
}

html body .carte .ui-toolbar-group-left,
html body .carte .ui-toolbar-group-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
}

html body .carte .ui-toolbar-group-right {
    margin-left: auto;
}

/* Champ de recherche : une largeur confortable, mais qui cède sur petit
   écran plutôt que de déborder. */
html body .champ-recherche {
    width: 320px;
    max-width: 100%;
}

/* Sous-bloc apparaissant dans un champ (le lot à désigner depuis le
   dialogue d'une demande d'intervention) : détaché de ce qui le précède. */
.sous-bloc {
    margin-top: var(--pas-2);
}

/* Le calendrier occupe toute la carte, sans bordure propre. */
html body .carte .ui-schedule {
    padding: var(--pas-4);
}

/* =========================================================================
   4. Tableaux
   ========================================================================= */

/* CORRECTIF DE FOND, et non cosmétique.
   PrimeFaces pose table-layout:fixed sur .ui-datatable table, et le thème
   box-sizing:content-box sur les th : une colonne consomme alors sa width
   PLUS 32px de padding, la somme dépasse 100%, et les colonnes sans width
   déclarée sont écrasées à zéro — c'est ce qui rendait autrefois la colonne
   « Client » invisible, et ce qui a imposé de calculer à la main un budget de
   largeurs page par page sous une contrainte de 1200px.
   Avec border-box et un dimensionnement automatique, le navigateur répartit
   selon le contenu : plus de budget à tenir, plus de colonne perdue, et les
   tableaux acceptent n'importe quelle largeur de conteneur — ce qui rend le
   rail latéral et l'affichage sur tablette possibles. */
html body .ui-datatable table {
    table-layout: auto;
}

html body .ui-datatable thead th,
html body .ui-datatable tbody td,
html body .ui-datatable tfoot td {
    box-sizing: border-box;
}

/* Défilement horizontal de secours, sur TOUS les tableaux et pas seulement
   sur ceux qui sont dans une carte : ceux des dialogues (lignes de devis, de
   facture, de commande, réception, pièces posées) sont les plus étroitement
   logés. Sans cette règle, une fenêtre plus étroite que le tableau coupe les
   dernières colonnes sans aucun moyen d'y accéder. La restreindre à .carte
   était une erreur de portée de ma part. */
html body .ui-datatable-tablewrapper {
    overflow-x: auto;
}

html body .ui-datatable thead th {
    background: #FAFBFD;
    border-bottom: 1px solid var(--ardoise-200);
    color: var(--ardoise-500);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: var(--pas-3) var(--pas-4);
    white-space: nowrap;
}

html body .ui-datatable tbody td {
    padding: var(--pas-3) var(--pas-4);
    border-bottom: 1px solid #EEF2F7;
    vertical-align: middle;
}

html body .ui-datatable tbody tr:last-child td {
    border-bottom: 0;
}

html body .ui-datatable tbody tr.ui-widget-content:hover {
    background: var(--ardoise-100);
}

html body .col-statut {
    white-space: nowrap;
}

html body .col-actions {
    text-align: right;
    white-space: nowrap;
}

html body .col-actions .ui-button {
    margin-left: var(--pas-1);
}

/* Colonne de texte long : on borne et on coupe proprement plutôt que de
   laisser une description pousser toutes les autres colonnes hors du cadre. */
html body .col-texte {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contenu d'une ligne dépliée : en retrait et sur un fond légèrement creusé,
   pour qu'on voie qu'il appartient à la ligne du dessus. */
html body .bloc-deplie {
    padding: var(--pas-3) var(--pas-5);
    background: #FAFBFD;
}

html body .ui-datatable .ui-paginator {
    background: #FCFDFE;
    border: 0;
    border-top: 1px solid var(--ardoise-200);
    padding: var(--pas-3) var(--pas-4);
}

/* Message de liste vide : une icône et une phrase, centrées, plutôt qu'un
   fragment de texte collé à gauche dans une cellule. */
.vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pas-2);
    padding: var(--pas-6) var(--pas-4);
    color: var(--ardoise-500);
}

.vide .pi {
    font-size: 1.8rem;
    color: var(--ardoise-300);
}

/* =========================================================================
   5. Statuts
   ========================================================================= */

/* Pastilles à fond doux plutôt que blocs pleins : sur une colonne entière,
   les aplats saturés du thème écrasent la lecture du reste de la ligne. */
html body .ui-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.5;
    background: var(--ardoise-100);
    color: var(--ardoise-700);
}

html body .ui-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

html body .ui-tag.ui-tag-info {
    background: #E8F0FC;
    color: #0F55AA;
}

html body .ui-tag.ui-tag-success {
    background: #E7F6EF;
    color: #047857;
}

html body .ui-tag.ui-tag-warning {
    background: #FEF3E2;
    color: #B45309;
}

html body .ui-tag.ui-tag-danger {
    background: #FEECEC;
    color: #B91C1C;
}

html body .ui-tag .ui-tag-icon {
    display: none;   /* le point coloré tient déjà ce rôle */
}

/* =========================================================================
   6. Boutons
   ========================================================================= */

html body .ui-button {
    border-radius: var(--rayon-petit);
    font-weight: 600;
    font-size: .875rem;
    box-shadow: none;
}

html body .ui-button .ui-button-text {
    padding: .55rem .9rem;
}

/* Boutons d'action dans les tableaux : ronds, sans texte, alignés. */
html body .bouton-rond {
    border-radius: 50%;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
}

html body .bouton-rond .ui-button-icon-left {
    margin: 0;
}

/* Bouton discret : pour les actions secondaires d'une ligne (voir, PDF),
   qui ne doivent pas rivaliser avec l'action principale de l'écran. */
html body .ui-button.ui-button-flat,
html body .bouton-discret {
    background: transparent;
    border-color: transparent;
    color: var(--ardoise-500);
}

html body .bouton-discret:hover {
    background: var(--ardoise-100);
    border-color: transparent;
    color: var(--ardoise-900);
}

/* =========================================================================
   7. Formulaires et dialogues
   ========================================================================= */

/* La structure p:panelGrid des formulaires est conservée (elle est vérifiée
   par la recette) ; on n'en retouche que le rythme et l'alignement. */
html body .ui-panelgrid.ui-panelgrid-blank .ui-grid-row {
    align-items: center;
    margin-bottom: var(--pas-3);
}

html body .ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-cell {
    padding: 0 var(--pas-2);
}

html body .ui-panelgrid .ui-outputlabel {
    color: var(--ardoise-500);
    font-size: .82rem;
    font-weight: 600;
}

/* Les champs occupent leur cellule : des largeurs hétérogènes dans une même
   colonne, c'est ce qui donne le plus vite l'impression d'un formulaire
   bricolé. */
html body .ui-panelgrid .ui-inputfield,
html body .ui-panelgrid .ui-selectonemenu,
html body .ui-panelgrid .ui-inputnumber,
html body .ui-panelgrid .ui-calendar,
html body .ui-panelgrid .ui-autocomplete {
    width: 100%;
}

html body .ui-inputfield,
html body .ui-selectonemenu {
    border-radius: var(--rayon-petit);
    border-color: var(--ardoise-300);
}

html body .ui-dialog {
    border: 0;
    border-radius: var(--rayon);
    box-shadow: var(--ombre-flottante);
    overflow: hidden;
}

html body .ui-dialog .ui-dialog-titlebar {
    background: var(--fond-carte);
    border: 0;
    border-bottom: 1px solid var(--ardoise-200);
    padding: var(--pas-4) var(--pas-5);
    color: var(--ardoise-900);
    font-weight: 650;
    border-radius: 0;
}

html body .ui-dialog .ui-dialog-content {
    padding: var(--pas-5);
    background: var(--fond-carte);
}

html body .ui-dialog .ui-dialog-footer {
    background: #FCFDFE;
    border-top: 1px solid var(--ardoise-200);
    padding: var(--pas-3) var(--pas-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--pas-2);
}

html body .ui-growl {
    box-shadow: var(--ombre-flottante);
}

html body .ui-dialog .ui-messages,
html body .ui-dialog .ui-message {
    margin-top: var(--pas-4);
}

/* =========================================================================
   7 bis. Documents à lignes (devis, factures, commandes)
   ========================================================================= */

/* Le tableau des lignes est le cœur du dialogue : il se détache du bloc
   d'en-tête au lieu d'y être collé. */
.bloc-lignes {
    margin-top: var(--pas-5);
}

.barre-lignes {
    margin-top: var(--pas-3);
}

html body .champ-large {
    width: 100%;
}

/* Totaux : alignés à droite, en chiffres tabulaires, le TTC détaché. Une
   pile de <div> alignés à droite ne suffisait pas — les montants ne se
   superposaient pas d'une ligne à l'autre. */
.totaux {
    margin-top: var(--pas-5);
    margin-left: auto;
    width: 280px;
    max-width: 100%;
}

.totaux > div {
    display: flex;
    justify-content: space-between;
    gap: var(--pas-4);
    padding: 6px 0;
    font-variant-numeric: tabular-nums;
}

.totaux > div > span {
    color: var(--ardoise-500);
}

.totaux .totaux-final {
    margin-top: var(--pas-2);
    padding-top: var(--pas-3);
    border-top: 1px solid var(--ardoise-200);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ardoise-900);
}

.totaux .totaux-final > span {
    color: var(--ardoise-900);
}

/* Lien vers le PDF : aligné avec les boutons ronds de la colonne Actions,
   et de la couleur d'un PDF. */
html body .lien-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-left: var(--pas-1);
    border-radius: 50%;
    color: #B91C1C;
    text-decoration: none;
    vertical-align: middle;
}

html body .lien-pdf:hover {
    background: #FEECEC;
}

html body .lien-pdf .pi {
    font-size: 1.1rem;
}

/* =========================================================================
   8. Planning
   ========================================================================= */

/* =========================================================================
   9. Fiches (bail, demande d'intervention)
   ========================================================================= */

html body .ui-card {
    border: 1px solid var(--ardoise-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-posee);
    margin-bottom: var(--pas-4);
}

html body .ui-card .ui-card-body {
    padding: var(--pas-5);
}

html body .ui-card .ui-card-title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--ardoise-900);
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    flex-wrap: wrap;
}

html body .ui-card .ui-card-subtitle {
    color: var(--ardoise-500);
    font-size: .875rem;
    margin-top: var(--pas-1);
}

html body .ui-card .ui-card-footer {
    padding-top: var(--pas-4);
    margin-top: var(--pas-4);
    border-top: 1px solid var(--ardoise-200);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
}

.fiche-libelle {
    color: var(--ardoise-500);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fiche-absent {
    color: var(--ardoise-500);
    font-style: italic;
}

/* Information manquante qui, elle, appelle une action — une intervention sans
   prestataire n'est pas une donnée absente, c'est un problème à traiter. */
html body .texte-alerte {
    color: #B91C1C;
    font-weight: 600;
}

/* Bloc d'avertissement pleine largeur : ressource introuvable, action
   impossible. Une carte plutôt qu'un fond jaune brut. */
.avertissement {
    display: flex;
    align-items: flex-start;
    gap: var(--pas-3);
    padding: var(--pas-4) var(--pas-5);
    background: #FEF9EC;
    border: 1px solid #FDE9B8;
    border-radius: var(--rayon);
    color: #92400E;
}

.avertissement .pi {
    font-size: 1.2rem;
    margin-top: 2px;
}

.fiche-compte-rendu {
    margin-top: var(--pas-3);
    padding: var(--pas-3);
    background: var(--ardoise-100);
    border-radius: var(--rayon-petit);
    color: var(--ardoise-700);
    font-size: .9rem;
}

/* Rappel du contexte en tête de dialogue (« quel bail, quelle période »),
   avant les champs de saisie. */
.rappel-contexte {
    margin-bottom: var(--pas-4);
    padding-bottom: var(--pas-3);
    border-bottom: 1px solid var(--ardoise-200);
}

/* =========================================================================
   10. Tableau de bord
   ========================================================================= */

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--pas-4);
    margin-bottom: var(--pas-5);
}

html body .tuile {
    display: block;
    background: var(--fond-carte);
    border: 1px solid var(--ardoise-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-posee);
    padding: var(--pas-4) var(--pas-5);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}

html body a.tuile:hover {
    border-color: var(--action);
    box-shadow: var(--ombre-flottante);
    transform: translateY(-1px);
    text-decoration: none;
}

.tuile-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pas-2);
    color: var(--ardoise-500);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tuile-icone {
    width: 30px;
    height: 30px;
    border-radius: var(--rayon-petit);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--action-douce);
    color: var(--action);
    font-size: .95rem;
}

.tuile-valeur {
    display: block;
    margin-top: var(--pas-3);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ardoise-900);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tuile-detail {
    display: block;
    margin-top: var(--pas-1);
    color: var(--ardoise-500);
    font-size: .82rem;
}

/* Une tuile qui appelle une action (retard, seuil franchi) porte sa couleur
   sur l'icône et le chiffre, pas sur tout le cadre : lisible sans crier. */
.tuile-alerte .tuile-icone { background: #FEF3E2; color: #B45309; }
.tuile-alerte .tuile-valeur { color: #B45309; }

/* Deux colonnes sur large écran pour les listes du tableau de bord. */
.colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--pas-5);
    align-items: start;
}

/* =========================================================================
   11. Connexion
   ========================================================================= */

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

/* Panneau de marque : c'est le premier écran de l'application, il porte
   l'identité. Il disparaît sous 900px, où l'espace doit aller au formulaire. */
.connexion-marque {
    flex: 1 1 45%;
    background: linear-gradient(160deg, var(--ardoise-900) 0%, #143257 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--pas-6) 8%;
}

/* Taille fluide et non fixe : le nom vient des paramètres, et il peut être
   très long (« AGENCE IMMOBILIERE DU FLEUVE — GESTION LOCATIVE ET TRANSACTION »).
   À 2rem fixes, un nom pareil débordait du panneau. */
.connexion-marque h1 {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 650;
    margin: var(--pas-5) 0 var(--pas-3);
    letter-spacing: -.02em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.connexion-marque p {
    color: rgba(255, 255, 255, .65);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 32ch;
}

.connexion-logo {
    max-height: 56px;
    max-width: 180px;
}

/* Même monogramme que dans le rail, à l'échelle du panneau de marque. */
.connexion-monogramme {
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
}

.connexion-panneau {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pas-6) var(--pas-5);
}

.connexion-boite {
    width: 100%;
    max-width: 380px;
}

.connexion-boite h2 {
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--ardoise-900);
    margin: 0 0 var(--pas-2);
}

.connexion-intro {
    color: var(--ardoise-500);
    font-size: .9rem;
    margin: 0 0 var(--pas-5);
}

/* Signature du concepteur, sous le formulaire. Le filet la sépare de ce qui
   se clique : ce n'est ni une action ni un lien, et rien au-dessus ne doit
   sembler en dépendre. Le logo est ici dans sa version FOND CLAIR — le
   panneau de droite est blanc, celui de gauche est presque noir et porte la
   variante inverse dans le rail de l'application. */
.signature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pas-2);
    margin-top: var(--pas-6);
    padding-top: var(--pas-4);
    border-top: 1px solid var(--ardoise-200);
}

.signature-mention {
    color: var(--ardoise-500);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.signature-logo {
    width: 132px;
    max-width: 100%;
    height: auto;
}

.champ {
    margin-bottom: var(--pas-4);
}

.champ label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: .82rem;
    color: var(--ardoise-700);
}

.champ input {
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .75rem;
    border: 1px solid var(--ardoise-300);
    border-radius: var(--rayon-petit);
    font-size: .95rem;
    font-family: inherit;
    color: var(--ardoise-900);
    transition: border-color .15s, box-shadow .15s;
}

.champ input:focus {
    outline: 0;
    border-color: var(--action);
    box-shadow: 0 0 0 3px var(--action-douce);
}

html body .bouton-pleine-largeur {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    background: var(--action);
    color: #fff;
    border: 0;
    border-radius: var(--rayon-petit);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .15s;
}

html body .bouton-pleine-largeur:hover {
    background: var(--action-survol);
}

.connexion-erreur {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    padding: var(--pas-3);
    margin-bottom: var(--pas-4);
    background: #FEECEC;
    border: 1px solid #FECACA;
    border-radius: var(--rayon-petit);
    color: #B91C1C;
    font-size: .875rem;
}

/* =========================================================================
   12. Paramètres — bloc logo
   ========================================================================= */

.logo-bloc {
    display: flex;
    align-items: center;
    gap: var(--pas-5);
    flex-wrap: wrap;
}

.logo-apercu {
    max-height: 100px;
    max-width: 220px;
    border: 1px solid var(--ardoise-200);
    border-radius: var(--rayon-petit);
    padding: var(--pas-2);
}

.logo-absent {
    width: 220px;
    height: 100px;
    border: 1px dashed var(--ardoise-300);
    border-radius: var(--rayon-petit);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ardoise-500);
    font-size: .875rem;
}

.aide {
    color: var(--ardoise-500);
    font-size: .8rem;
    margin-top: 6px;
}

/* Bouton d'un formulaire HTML natif (le téléversement du logo passe hors du
   cycle JSF) : habillé comme un p:commandButton, sans en être un. */
html body .bouton-televerser {
    margin-left: var(--pas-2);
    padding: .55rem 1rem;
    background: var(--action);
    color: #fff;
    border: 0;
    border-radius: var(--rayon-petit);
    font: inherit;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
}

html body .bouton-televerser:hover {
    background: var(--action-survol);
}

/* p:panel : mêmes surfaces que les cartes, pour que l'écran Paramètres ne
   détonne pas au milieu des autres. */
html body .ui-panel {
    border: 1px solid var(--ardoise-200);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-posee);
    margin-bottom: var(--pas-5);
}

html body .ui-panel .ui-panel-titlebar {
    background: var(--fond-carte);
    border: 0;
    border-bottom: 1px solid var(--ardoise-200);
    border-radius: var(--rayon) var(--rayon) 0 0;
    padding: var(--pas-4) var(--pas-5);
    color: var(--ardoise-900);
    font-weight: 600;
}

html body .ui-panel .ui-panel-content {
    padding: var(--pas-5);
}

/* =========================================================================
   13. Utilitaires
   ========================================================================= */

.pile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
}
.texte-discret { color: var(--ardoise-500); }
.texte-fort    { font-weight: 650; color: var(--ardoise-900); }
.montant       { font-variant-numeric: tabular-nums; font-weight: 650; }

/* =========================================================================
   14. Adaptation aux petits écrans
   ========================================================================= */

@media (max-width: 1280px) {
    .contenu {
        padding: var(--pas-4);
    }
}

/* Tablette : le rail devient un tiroir, ouvert depuis la barre supérieure.
   Un agent consulte son portefeuille en visite — l'espace doit aller au
   contenu. */
@media (max-width: 1024px) {
    .rail {
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: var(--rail-largeur);
        box-shadow: var(--ombre-flottante);
    }

    .tiroir-ouvert .rail {
        transform: translateX(0);
    }

    .zone,
    .rail-replie .zone {
        margin-left: 0;
    }

    html body .barre-tiroir {
        display: block;
    }

    .rail-pied {
        display: none;   /* le repli n'a plus de sens quand le rail est un tiroir */
    }

    /* Voile de fermeture : un clic à côté du tiroir le referme. */
    .tiroir-voile {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .4);
        z-index: 999;
    }

    .tiroir-ouvert .tiroir-voile {
        display: block;
    }

    /* Le rail replié n'existe pas en mode tiroir : on rétablit les libellés,
       sinon un repli mémorisé sur poste fixe donnerait un tiroir muet. */
    .rail-replie .rail-nom,
    .rail-replie .rail-item-libelle,
    .rail-replie .rail-groupe {
        display: revert;
    }

    .rail-replie .rail-item {
        justify-content: flex-start;
    }

    .rail-replie .rail-marque {
        justify-content: flex-start;
        padding: 0 var(--pas-4);
    }
}

@media (max-width: 768px) {
    .contenu {
        padding: var(--pas-3);
    }

    .barre {
        padding: 0 var(--pas-3);
        gap: var(--pas-2);
    }

    /* Sur un téléphone, le nom et le rôle prennent la place du titre ; la
       pastille suffit à identifier le compte. */
    .compte-identite {
        display: none;
    }

    .ecran-entete {
        flex-direction: column;
        gap: var(--pas-2);
        margin-bottom: var(--pas-4);
    }

    .ecran-entete h1 {
        font-size: 1.25rem;
    }

    /* Les grilles de formulaire passent en libellé au-dessus du champ : à
       cette largeur, une colonne de libellés mange la moitié de l'écran.
       Fait en CSS seul, sans toucher au markup des pages. */
    html body .ui-panelgrid.ui-panelgrid-blank .ui-grid-row {
        display: block;
        margin-bottom: var(--pas-4);
    }

    html body .ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-cell {
        display: block;
        width: 100%;
        padding: 0;
    }

    html body .ui-panelgrid.ui-panelgrid-blank .ui-outputlabel {
        display: block;
        margin-bottom: 6px;
    }

    /* Dialogues en plein écran : une fenêtre modale de 480px centrée sur un
       téléphone laisse des marges inutilisables. */
    html body .ui-dialog {
        width: 100vw !important;
        max-width: 100vw;
        height: 100vh !important;
        max-height: 100vh;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0;
    }

    html body .ui-dialog .ui-dialog-content {
        max-height: calc(100vh - 130px);
    }

    /* Cibles tactiles : 44px est le minimum confortable au doigt. */
    html body .ui-button {
        min-height: 44px;
    }

    html body .bouton-rond {
        width: 44px;
        height: 44px;
    }

    .connexion-marque {
        display: none;
    }

    .col-texte {
        max-width: 200px;
    }
}

/* ============================================================
   Bandeau de licence
   ============================================================
   Affiché en tête de la zone de contenu, au-dessus du titre
   d'écran : c'est la première chose lue, et il n'est là que
   lorsqu'il y a quelque chose à faire — préavis, évaluation, ou
   passage en consultation seule.

   Deux tons seulement, et pas de rouge vif pour le préavis : une
   application qui crie pendant les trente derniers jours d'un
   contrat est une application qu'on apprend à ne plus regarder.
   ============================================================ */

.bandeau-licence {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    line-height: 1.35;
}

.bandeau-licence .pi {
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.bandeau-licence span {
    flex: 1 1 auto;
}

.bandeau-licence.est-preavis {
    background: #fff8e6;
    border-color: #f0d089;
    color: #7a5300;
}

.bandeau-licence.est-expiree {
    background: #fdecea;
    border-color: #f0a9a2;
    color: #8c1c13;
}

.bandeau-licence-action {
    flex: 0 0 auto;
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
    white-space: nowrap;
}

/* L'état dans l'écran Licence : même code couleur que le bandeau,
   pour qu'on n'ait pas à relire le texte pour savoir où on en est. */
.licence-etat-valide {
    font-weight: 600;
    color: #1f7a3d;
}

.licence-etat-expiree {
    font-weight: 600;
    color: #8c1c13;
}

@media (max-width: 700px) {
    .bandeau-licence {
        flex-wrap: wrap;
    }
}

/* ============================================================
   Le bandeau du quittancement — et pourquoi il ressemble à celui
   de la licence.

   Les deux disent la même chose : « quelque chose n'a pas été fait,
   et l'application continue de fonctionner sans ». Une licence
   expirée et un quittancement oublié partagent ce trait — rien ne
   casse, mais on perd de l'argent en silence. Leur donner la même
   forme, c'est faire que la seconde alerte soit lue avec le même
   réflexe que la première.

   Le rouge est réservé au retard AVÉRÉ : le bandeau n'apparaît qu'à
   partir du jour réglé dans les paramètres. Le 1er du mois à 8 h,
   « 0 / 312 émises » en rouge serait un reproche adressé à
   quelqu'un qui n'a pas encore eu le temps d'ouvrir l'écran.
   ============================================================ */

.bandeau-alerte {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.35;
    background: #fdecea;
    border: 1px solid #f0a9a2;
    color: #8c1c13;
}

.bandeau-alerte .pi {
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.bandeau-alerte span {
    flex: 1 1 auto;
}

.bandeau-action {
    flex: 0 0 auto;
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
    white-space: nowrap;
}

/* ============================================================
   Les panneaux de l'accueil.

   L'accueil ORIENTE : chaque panneau montre au plus cinq lignes et
   pointe vers l'écran qui les porte toutes. Une liste complète ici
   ferait doublon avec cet écran-là, et les deux divergeraient à la
   première évolution de filtre.
   ============================================================ */

.panneau-accueil {
    margin-top: var(--pas-5, 24px);
}

.panneau-accueil .ui-panel-content {
    padding: 0;
}

.lien-voir-tout {
    display: inline-block;
    margin: var(--pas-3) var(--pas-3) var(--pas-2);
    font-weight: 600;
    color: var(--action);
    text-decoration: none;
}

.lien-voir-tout:hover {
    color: var(--action-survol);
    text-decoration: underline;
}

/* ============================================================
   L'écran de quittancement.

   La ligne écartée est grisée et non masquée : ce qui n'est PAS
   émis doit se voir autant que ce qui l'est. Une liste qui ne
   montrerait que les retenues laisserait croire que les autres
   n'existent pas, alors qu'ils ont un motif — et parfois un motif
   qu'il faut corriger.
   ============================================================ */

.resume-apercu {
    margin: var(--pas-3) 0;
    padding: 0.6rem 0.9rem;
    border-radius: var(--rayon-petit);
    background: var(--action-douce);
    font-size: 0.94rem;
}

.ligne-ecartee {
    opacity: 0.55;
}

.motif-exclusion {
    font-style: italic;
    font-size: 0.88rem;
}

.etiquette-barre {
    margin-right: 0.5rem;
    font-weight: 600;
}

.aide-ecran {
    margin-top: var(--pas-4, 16px);
    padding: var(--pas-3) 1rem;
    border-left: 3px solid var(--action);
    background: #fafbfc;
    font-size: 0.92rem;
    line-height: 1.5;
}

.aide-ecran p {
    margin: 0 0 0.6rem;
}

.aide-ecran p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Liens vers une fiche, dans une cellule de tableau
   ==========================================================================
   Le thème PrimeFaces ne style aucun <a> nu : sans cette règle, la référence
   d'un bail dans la liste s'affiche exactement comme le texte de la colonne
   d'à côté, et rien ne dit qu'elle est cliquable. Le soulignement n'apparaît
   qu'au survol — dans un tableau dense, souligner toute une colonne ferait
   du bruit.
   ========================================================================== */
html body .lien-fiche {
    color: var(--action, #1264C8);
    text-decoration: none;
    font-weight: 600;
}

html body .lien-fiche:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Pièces jointes et photos d'état des lieux
   ------------------------------------------------------------------ */

/* Le formulaire de dépôt : natif, donc sans le style des composants
   PrimeFaces. Ces quelques règles le remettent d'aplomb à côté d'eux. */
.depot-piece {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.depot-piece input[type="file"] {
    font-size: .85rem;
}

/* Une ligne de photos par constat. Le libellé au-dessus, les vignettes en
   file : c'est la forme qui se relit vite quand on compare deux états des
   lieux poste à poste. */
.photo-constat {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bordure, #e5e7eb);
}

.photo-constat:last-child {
    border-bottom: none;
}

.photo-constat .etiquette {
    min-width: 14rem;
}

/* Taille fixe, et object-fit: cover : les photos d'un logement arrivent en
   portrait et en paysage mêlés, et une file de vignettes de hauteurs
   différentes est illisible. */
.vignette-constat {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--bordure, #e5e7eb);
}

/* ------------------------------------------------------------------
   Le solde de tout compte
   ------------------------------------------------------------------ */

/* La conclusion du décompte, détachée de la grille des montants : c'est la
   seule ligne que le locataire lit en entier, et elle doit se trouver sans
   être cherchée. Encadrée plutôt qu'en gros : le chiffre n'a pas besoin
   d'être crié, il a besoin d'être isolé. */
.conclusion-solde {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--accent, #2563eb);
    background: var(--fond-doux, #f8fafc);
    font-size: 1.05rem;
}

/* Ce qui peut porter une retenue se distingue de ce qui ne le peut pas.
   L'usure normale et l'absence de constat d'entrée sont des verdicts
   ORDINAIRES, pas des échecs : les teinter en rouge ferait lire une
   anomalie là où le calcul protège le locataire. */
.verdict-impute {
    color: var(--danger, #b91c1c);
    font-weight: 600;
}

.verdict-neutre {
    color: var(--texte-doux, #64748b);
}