/*
 * Charte Dopping — #003366 (bleu), #7F8FA6 (gris-bleu), #FFFFFF (blanc).
 * Surcharge des variables CSS de l'administration Django. Le sélecteur groupé impose
 * la charte quel que soit le thème choisi (clair, sombre ou automatique).
 * Les nuances utilisées sont des transparences des trois couleurs, pas d'autres teintes.
 */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --primary: #003366;
  --secondary: #003366;
  --accent: #ffffff;
  --primary-fg: #ffffff;

  --body-fg: #003366;
  --body-bg: #ffffff;
  --body-quiet-color: #7f8fa6;
  --body-loud-color: #003366;

  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: #003366;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #003366;
  --breadcrumbs-link-fg: #003366;
  --breadcrumbs-bg: rgba(127, 143, 166, 0.18);

  --link-fg: #003366;
  --link-hover-color: #7f8fa6;
  --link-selected-fg: #003366;

  --hairline-color: rgba(127, 143, 166, 0.28);
  --border-color: rgba(127, 143, 166, 0.5);

  /* Rouge conservé pour les erreurs, comme pour les suppressions. */
  --error-fg: #ba2121;
  --message-success-bg: rgba(127, 143, 166, 0.18);
  --message-warning-bg: rgba(127, 143, 166, 0.28);
  --message-error-bg: #ffefef;

  --darkened-bg: rgba(127, 143, 166, 0.12);
  --selected-bg: rgba(127, 143, 166, 0.22);
  --selected-row: rgba(127, 143, 166, 0.3);

  --button-fg: #ffffff;
  --button-bg: #003366;
  --button-hover-bg: #7f8fa6;
  --default-button-bg: #003366;
  --default-button-hover-bg: #7f8fa6;
  --close-button-bg: #7f8fa6;
  --close-button-hover-bg: #003366;
  /* Seule entorse à la charte, volontaire : les actions destructrices restent rouges. */
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #7f8fa6;
  --object-tools-hover-bg: #003366;

  --link-selected-bg: rgba(127, 143, 166, 0.22);
  --selected-bg-alt: rgba(127, 143, 166, 0.12);
}

/* Logo dans l'en-tête de l'administration. */
#site-name a { display: inline-flex; align-items: center; gap: 10px; }
.logo-entete { height: 30px; width: 30px; border-radius: 6px; }
.marque { font-weight: 700; letter-spacing: .02em; }

/* Éléments dont la couleur est écrite en dur dans la feuille de style de Django. */
#header { border-bottom: 3px solid #7f8fa6; }
#user-tools a { border-bottom-color: rgba(255, 255, 255, 0.45); }
#user-tools a:focus, #user-tools a:hover { border-bottom-color: #ffffff; color: #ffffff; }
div.breadcrumbs a:focus, div.breadcrumbs a:hover { color: #7f8fa6; }

.module h2, .module caption, .inline-group h2 { background: #003366; color: #ffffff; }
.module h3 { color: #003366; }
a.section:link, a.section:visited { color: #ffffff; }

.selector-chosen h2, .selector-available h2 { background: #7f8fa6; color: #ffffff; }
.selector-chosen h2 { background: #003366; }

/* Suppression : rouge conservé pour signaler l'action destructrice. */
.submit-row a.deletelink { background: #ba2121; color: #ffffff; }
.submit-row a.deletelink:hover, .submit-row a.deletelink:focus { background: #a41515; }
.delete-confirmation form input[type="submit"] { background: #ba2121; color: #ffffff; }
.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover { background: #a41515; }
.delete-confirmation form .cancel-link { background: #7f8fa6; color: #ffffff; }

ul.messagelist li { color: #003366; }
ul.messagelist li.warning { color: #003366; font-weight: 600; }
/* Erreurs : rouge, pour rester visibles au premier coup d'œil. */
ul.messagelist li.error { background: #ffefef; color: #ba2121; font-weight: 600; }
.errornote, ul.errorlist li { background: #ffefef; color: #ba2121; border: 1px solid #ba2121; }
.errornote { font-weight: 600; }
.form-row.errors { border-left: 3px solid #ba2121; }
.form-row.errors label, td.errors, th.errors { color: #ba2121; }

.object-tools li.rang-fiche { color: #7f8fa6; font-size: 15px; font-weight: 600;
                              padding: 0 6px; line-height: 26px;
                              text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------ jeu d'icônes
   Dessins au trait déposés une fois par page (voir admin/core/icones.html) et repris
   par <use>. La couleur suit le texte, l'épaisseur du trait est la même partout. */
svg.jeu-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.icone { width: 22px; height: 22px; fill: none; stroke: currentColor;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
            vertical-align: -5px; }

/* La barre garde la place que lui donne l'administration — au-dessus du filet bleu — mais
   ses éléments se centrent les uns par rapport aux autres : pastilles, zone de recherche
   et compteur partagent le même axe. */
.object-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.object-tools li { float: none; margin: 0; display: flex; align-items: center; }

/* Outils de la barre : pastilles bleues, icône blanche — jeu n° 5. */
.object-tools a.icone-outil { display: inline-flex; align-items: center;
                              justify-content: center; width: 34px; height: 34px;
                              padding: 0; border-radius: 9px; background: #003366;
                              color: #ffffff; box-shadow: none; border: 0; }
.object-tools a.icone-outil:focus, .object-tools a.icone-outil:hover {
                              background: #7f8fa6; color: #ffffff; }
.object-tools a.icone-outil svg.icone { width: 20px; height: 20px; vertical-align: 0; }

/* Pastilles à libellé : casse normale, même hauteur que les icônes, l'icône devant.
   Django écrit ses boutons en petites capitales et colle un « + » au bout : on rétablit
   une écriture ordinaire, pour que « Historique » ne jure pas à côté de « Matériel ». */
.object-tools a { text-transform: none; letter-spacing: 0; font-size: 12px;
                  font-weight: 600; font-family: inherit; }
.object-tools a.bouton-ajout, .object-tools a.addlink {
    display: inline-flex; align-items: center; gap: 6px; background: #003366;
    padding: 5px 12px; line-height: 20px; border-radius: 4px; }
.object-tools a.bouton-ajout:hover, .object-tools a.addlink:hover,
.object-tools a.bouton-ajout:focus, .object-tools a.addlink:focus { background: #7f8fa6; }
.object-tools a.bouton-ajout svg.icone { width: 16px; height: 16px; }

/* Les libellés des listes suivent la même pastille que ceux des fiches. */
.object-tools a.bouton-ajout svg.icone { width: 16px; height: 16px; }

/* Recherche depuis une fiche : zone de saisie et loupe dans la barre d'outils. */
/* Recherche : la loupe est une pastille comme les autres, la zone de saisie a la même
   hauteur et les mêmes angles ; l'ensemble s'aligne sur la ligne des icônes. */
.object-tools li.recherche-fiche { padding: 0; display: flex; align-items: center; }
.recherche-fiche form { display: flex; align-items: stretch; gap: 0; height: 34px; }
.recherche-fiche input[type="search"] { box-sizing: border-box; width: 11rem;
                                        padding: 0 10px; font-size: 12px;
                                        font-family: inherit; color: #003366;
                                        border: 1px solid #7f8fa6; border-right: none;
                                        border-radius: 9px 0 0 9px; }
.recherche-fiche button { display: inline-flex; align-items: center; justify-content: center;
                          width: 34px; padding: 0; background: #003366; color: #ffffff;
                          border: none; cursor: pointer; border-radius: 0 9px 9px 0; }
.recherche-fiche button svg.icone { width: 20px; height: 20px; vertical-align: 0; }
.recherche-fiche button:hover, .recherche-fiche button:focus { background: #7f8fa6; }

/* N° de ligne : présent en champ caché pour l'enregistrement, sans colonne visible. */
.inline-group th.column-il_id_p, .inline-group td.field-il_id_p,
.inline-group th.column-ofl_id_p, .inline-group td.field-ofl_id_p { display: none; }

/* Fournisseur et référence dans la grille d'une offre : moitié de la largeur que
   l'administration donne d'office (20 em à un champ texte, autant à une liste). Ces
   deux colonnes accompagnent la désignation, elles ne doivent pas la rétrécir. */
.inline-group td.field-ofl_fournisseur select,
.inline-group td.field-ofl_ref_four input {
  width: 10em; min-width: 7em; box-sizing: border-box;
}
.inline-group td.field-ofl_fournisseur, .inline-group td.field-ofl_ref_four { width: 1%; }

/* Largeurs des colonnes de saisie d'une ligne d'offre, réduites à la demande. Base :
   8 em pour un champ de montant (input.champ-montant), 20 em pour une zone de texte.
      quantité      −60 % puis ×2    → 6,4 em
      taux de marge −60 % puis ×2    → 6,4 em
      prix d'achat  −40 % puis ×1,5  → 7,2 em
      désignation   −20 % puis ×1,4  → 22,4 em
   Le pas de « min-width » est retiré : il reprenait le dessus sur ces largeurs. */
.inline-group td.field-ofl_quant input,
.inline-group td.field-ofl_tx_marge input {
  width: 6.4em; min-width: 0; box-sizing: border-box;
}
.inline-group td.field-ofl_px_achat_u_htva input {
  width: 7.2em; min-width: 0; box-sizing: border-box;
}
.inline-group td.field-ofl_descript_imp textarea {
  width: 22.4em; min-width: 0; box-sizing: border-box;
}
.inline-group td.field-ofl_quant, .inline-group td.field-ofl_tx_marge,
.inline-group td.field-ofl_px_achat_u_htva { width: 1%; }

/* Facturation des services : n° de facture absent de la base signalé en gris. */
span.facture-absente { color: #7f8fa6; }
span.oui-facture { color: #003366; font-weight: 700; }
th.column-col_facture, td.field-col_facture { text-align: center; }
span.non-facture { color: #7f8fa6; }

/* Sous-modules du menu : lignes de facture sous les factures, lignes d'offre sous les offres. */
tr.sous-module th { padding-left: 18px; }
tr.sous-module th a { color: #7f8fa6; font-size: 0.95em; }
tr.sous-module th a:hover { color: #003366; }

/* --- Menu « Paramètres » repliable ---------------------------------------------
   Le chevron du titre replie tout le bloc, celui d'une rubrique replie la sienne. Il
   pointe vers le bas quand le contenu est masqué, vers le haut quand il est ouvert —
   c'est le sens de lecture d'un dépliant. */
.module.parametres caption { display: flex; align-items: center; justify-content: space-between; }
button.chevron-menu {
  background: none; border: 0; cursor: pointer; padding: 0 2px; margin: 0;
  color: inherit; display: inline-flex; align-items: center;
}
button.titre-rubrique {
  background: none; border: 0; cursor: pointer; padding: 0; margin: 0; width: 100%;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
}
button.chevron-menu .icone, button.titre-rubrique .icone {
  width: 14px; height: 14px; stroke-width: 2.4; transition: transform .15s;
}
/* Ouvert : le chevron regarde vers le haut. Replié : vers le bas. */
.module.parametres:not(.replie) > table > caption .icone,
.rubrique:not(.replie) .titre-rubrique .icone { transform: rotate(180deg); }
.rubrique.replie tr:not(.rubrique-menu) { display: none; }
.module.parametres.replie tbody.rubrique { display: none; }

/* --- Totaux sous une liste -----------------------------------------------------
   Une barre sous le tableau, pas une ligne de pied : elle reste lisible même quand la
   table déborde en largeur et qu'on l'a fait défiler. */
.totaux-liste {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
  margin: 10px 0 4px; padding: 9px 14px; border-radius: 5px;
  border: 1px solid rgba(127, 143, 166, .45); background: rgba(127, 143, 166, .09);
  font-size: 0.88rem; color: #003366;
}
.totaux-liste b { font-weight: 600; color: #7f8fa6; font-size: 0.78rem;
                  text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.totaux-liste span { font-variant-numeric: tabular-nums; }
.totaux-liste .compte { font-weight: 700; }
/* Le total TVAC : celui qu'on cherche des yeux en arrivant. */
.totaux-liste .fort { font-weight: 700; font-size: 1.02rem; }
.totaux-liste .fort b { color: #003366; }
.totaux-liste .portee { flex-basis: 100%; color: #7f8fa6; font-size: 0.76rem;
                        text-transform: none; letter-spacing: 0; }

/* --- Bandeau d'un exemplaire qui n'est pas la production -------------------------
   Rayé plutôt que coloré : le rouge est réservé aux suppressions et aux erreurs, et
   ce bandeau n'annonce pas un incident — seulement qu'on n'est pas au bon endroit. */
.bandeau-copie {
  position: sticky; top: 0; z-index: 999; text-align: center;
  padding: 6px 12px; font-size: 0.82rem; font-weight: 600; color: #003366;
  background: repeating-linear-gradient(45deg, rgba(127,143,166,.20) 0 12px,
                                               rgba(127,143,166,.34) 12px 24px);
  border-bottom: 2px solid #003366;
}

/* --- Échéances des tâches à faire ------------------------------------------------
   Le retard se voit sans couleur nouvelle : le rouge de la charte est celui des
   erreurs, et une échéance dépassée en est une. */
.tache-retard { color: #BA2121; }
.tache-aujourdhui { color: #003366; }

/* Rubriques du bloc Paramètres : « Tables » et « Réglages ». */
tr.rubrique-menu th {
  padding: 8px 8px 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f8fa6;
  background: transparent;
  border-bottom: 1px solid rgba(127, 143, 166, 0.35);
}
tr.rubrique-menu + tr th { padding-top: 6px; }

/* Icônes de navigation liste <-> fiche. */
a.icone-fiche { font-size: 16px; text-decoration: none; color: #003366; padding: 0 4px; }
a.icone-fiche:hover { color: #7f8fa6; }
th.column-col_ouvrir_fiche, td.field-col_ouvrir_fiche { text-align: center; width: 3em; }

/* Montants d'une ligne de facture affichés en lecture seule : cadrés comme les saisies. */
.field-il_subtot .readonly, .field-il_tva .readonly, .field-il_marge .readonly,
td.field-il_subtot, td.field-il_tva, td.field-il_marge { text-align: right; }

/* Colonnes de montants et de quantités des listes : cadrées à droite, en-têtes compris.
   Vaut pour factures, offres, lignes, notes de crédit et services. */
#result_list td.field-col_htva, #result_list td.field-col_total,
#result_list td.field-col_marge, #result_list td.field-col_marge_totale,
#result_list td.field-col_pu, #result_list td.field-col_quant,
#result_list td.field-col_montant, #result_list td.field-col_pv,
#result_list td.field-col_paye,
#result_list td.field-col_prix_achat, #result_list td.field-col_prix_vente,
#result_list th.column-col_prix_achat, #result_list th.column-col_prix_vente,
#result_list th.column-col_htva, #result_list th.column-col_total,
#result_list th.column-col_paye,
#result_list th.column-col_marge, #result_list th.column-col_marge_totale,
#result_list th.column-col_pu, #result_list th.column-col_quant,
#result_list th.column-col_montant, #result_list th.column-col_pv { text-align: right; }
#result_list th.column-col_htva a, #result_list th.column-col_total a,
#result_list th.column-col_paye a,
#result_list th.column-col_marge a, #result_list th.column-col_pu a,
#result_list th.column-col_quant a, #result_list th.column-col_montant a,
#result_list th.column-col_pv a, #result_list th.column-col_prix_achat a,
#result_list th.column-col_prix_vente a { display: block; text-align: right; }

/* --- Saisie en liste (administrateurs) ------------------------------------------
   Les cases de saisie occupent la largeur de leur colonne — celle que règle la souris —
   au lieu des 20 em que l'administration donne d'office à un champ texte : sans cela
   huit colonnes modifiables débordent de l'écran. Elles restent discrètes tant qu'on
   n'y écrit pas, pour que la liste se lise encore comme une liste. */
#result_list td input[type="text"], #result_list td input[type="email"],
#result_list td input[type="number"], #result_list td input[type="url"],
#result_list td select {
  width: 100%; min-width: 4em; box-sizing: border-box; padding: 2px 5px;
  font-size: 0.92em; border: 1px solid rgba(127, 143, 166, .45); border-radius: 3px;
  background: rgba(255, 255, 255, .65);
}
#result_list td input.champ-montant { width: 100%; text-align: right; }
#result_list td input:focus, #result_list td select:focus {
  border-color: #003366; background: #ffffff; outline: 1px solid rgba(0, 51, 102, .25);
}
#result_list td input[type="checkbox"] { transform: scale(1.15); }
/* Ce qui a été touché mais pas encore enregistré. */
#result_list tr.ligne-modifiee > th, #result_list tr.ligne-modifiee > td {
  background: rgba(0, 51, 102, .05);
}
#result_list tr.ligne-modifiee > *:first-child { box-shadow: inset 3px 0 0 #003366; }
/* Le bandeau d'enregistrement de l'administration, à la charte. */
.changelist-form-container .submit-row, #changelist-form .submit-row { border-top: 2px solid #003366; }

/* --- Interventions facturées, sur la fiche facture ------------------------------
   Un seul lien, vers la liste des interventions de la facture. */
a.lien-liste { font-weight: 600; }

/* --- Calendrier des champs de date -----------------------------------------------
   Django ne distingue le jour courant que par un gras, ce qui ne se voit pas dans une
   grille de trente et un nombres. On l'encadre au bleu de la charte. Le jour choisi,
   lui, reste en fond plein : les deux ne doivent pas se confondre — l'un dit « nous
   sommes ici », l'autre « vous avez retenu ceci ».

   `forms.css` importe `widgets.css` et se charge APRÈS notre feuille : à égalité de
   précision, l'administration l'emporterait. D'où le `body` de tête — il ajoute un
   élément au sélecteur, ce qui suffit, et il correspond où que le calendrier soit
   inséré dans la page (il est accroché près du champ, pas dans un bloc `.module`). */
body .calendar td.today a {
  font-weight: 700;
  color: #003366;
  box-shadow: inset 0 0 0 2px #003366;
  border-radius: 3px;
}
body .calendar td.today a:hover {
  background: rgba(0, 51, 102, .12);
  color: #003366;
}
/* Aujourd'hui *et* jour retenu : le fond plein l'emporte, le cadre se voit encore. */
body .calendar td.today.selected a {
  background: #003366;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/* --- Trucs et astuces ------------------------------------------------------------
   Une commande se lit caractère par caractère : les espaces et les tirets comptent.
   Chasse fixe, donc, et un bouton qui la copie — on vient chercher une ligne à coller,
   pas à relire. */
textarea.champ-commande, code.commande {
  font-family: Consolas, "DejaVu Sans Mono", monospace;
  font-size: .88rem;
}
textarea.champ-commande {
  background: rgba(127, 143, 166, .10);
  border: 1px solid rgba(127, 143, 166, .5);
  border-radius: 4px;
  width: 100%; box-sizing: border-box;
}
code.commande {
  background: rgba(127, 143, 166, .14); padding: 1px 6px; border-radius: 3px;
  color: #003366; white-space: nowrap;
}
button.copier-commande {
  margin-left: 6px; font-size: .72rem; padding: 0 6px; cursor: pointer;
  border: 1px solid #003366; border-radius: 3px; background: #fff; color: #003366;
}
button.copier-commande:hover { background: #003366; color: #fff; }
button.copier-commande.copie { background: #003366; color: #fff; }
/* Une astuce qui demande une précaution le dit dans la liste, avant qu'on l'ouvre. */
.pastille-precaution {
  font-size: .72rem; padding: 1px 7px; border-radius: 9px; margin-left: 6px;
  border: 1px solid #BA2121; color: #BA2121; white-space: nowrap;
}

/* Montants : alignés à droite, symbole € accolé. */
input.champ-montant { text-align: right; width: 8em; }
.unite-euro { margin-left: 6px; color: #003366; font-weight: 600; }

/* Tableau de bord et écrans de connexion : mêmes fonds que le reste. */
body.login #header { background: #003366; }
.paginator a.showall, .paginator a:link, .paginator a:visited { background: #7f8fa6; color: #ffffff; }
.paginator a:focus, .paginator a:hover { background: #003366; }
.paginator .this-page { background: #003366; color: #ffffff; padding: 2px 6px; border-radius: 4px; }

/* ------------------------------------------------------------------------------
   Téléphone : l'administration Django est déjà adaptable, on corrige ce qui gêne
   vraiment sur petit écran — tableaux trop larges, barre d'outils tassée, cibles
   tactiles trop petites.
   ------------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Listes et tableaux de lignes : défilement horizontal plutôt que texte écrasé. */
  #changelist .results, .inline-group .tabular, .results { overflow-x: auto; }
  #result_list, .inline-group .tabular table { min-width: 560px; }

  /* Barre d'outils : les boutons passent à la ligne et deviennent cliquables au doigt. */
  .object-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
  .object-tools li { margin: 0; }
  .object-tools a { padding: 9px 12px; font-size: 12px; }
  .object-tools a.icone-outil { width: 40px; height: 40px; border-radius: 10px; }
  .object-tools a.icone-outil svg.icone { width: 22px; height: 22px; }
  .recherche-fiche form { height: 40px; }
  .recherche-fiche button { width: 40px; border-radius: 0 10px 10px 0; }
  .recherche-fiche input[type="search"] { width: 8rem; border-radius: 10px 0 0 10px; }
  .object-tools li.rang-fiche { line-height: 34px; }

  /* En-tête : logo et titre compacts, outils utilisateur sur une ligne lisible. */
  #site-name a { gap: 8px; font-size: 15px; }
  .logo-entete { height: 26px; width: 26px; }
  #user-tools { padding: 6px 0 0; font-size: 12px; }

  /* Formulaires : champs pleine largeur, hauteur de frappe confortable. */
  .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="url"],
  .form-row input[type="password"], .form-row textarea, .form-row select {
    max-width: 100%; font-size: 16px;      /* 16px : évite le zoom automatique sur iOS */
  }
  input.champ-montant { width: 7em; font-size: 16px; }
  .submit-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .submit-row input, .submit-row a { width: auto; }

  /* Filtres de liste : repliés sous les résultats plutôt qu'en colonne étroite. */
  #changelist-filter { width: 100%; margin: 12px 0 0; position: static; }
}

/* Aide au code postal : suggestions du répertoire belge sur le code et sur la ville. */
input.saisie-code-postal { max-width: 7rem; }

/* Bouton d'ouverture de l'adresse dans Google Maps, et mentions grises qui l'entourent. */
a.bouton-carte { display: inline-block; padding: .25rem .8rem; text-decoration: none; }
.aide-champ { color: var(--body-quiet-color, #7F8FA6); }

/* Sous-tableau des contacts : les colonnes se partagent toute la largeur disponible,
   chacune occupant une part proportionnée à ce qu'elle contient. */
#contacts-group table { width: 100%; table-layout: fixed; }
#contacts-group input.champ-contact, #contacts-group input.champ-contact-large,
#contacts-group select[name$="-civilite"] { width: 100%; box-sizing: border-box; }
#contacts-group th.column-civilite { width: 11%; }
#contacts-group th.column-nom, #contacts-group th.column-prenom { width: 14%; }
#contacts-group th.column-fonction { width: 17%; }
#contacts-group th.column-mobile { width: 13%; text-align: right; }
#contacts-group input[name$="-mobile"] { text-align: right; }
#contacts-group th.column-email { width: 21%; }
#contacts-group th.column-principal, #contacts-group th.column-actif { width: 5%; }

/* Matériel et services rattachés : deux colonnes côte à côte sous les contacts. */
.tableaux-lies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.tableaux-lies .tableau-lie { min-width: 0; margin: 0; }
/* Sept lignes visibles, le reste atteint au curseur, en-tête figé pendant le défilement. */
.tableau-lie .cadre-defilant { max-height: calc(7 * 28px + 34px); overflow: auto; }
.tableau-lie table { width: 100%; }
.tableau-lie thead th { position: sticky; top: 0; z-index: 1;
                        background: var(--darkened-bg, #f0f2f5); }
.tableau-lie td, .tableau-lie th { padding: 5px 8px; white-space: nowrap; }
.tableau-lie-reste { padding: 8px 12px; margin: 0; }
@media (max-width: 1100px) {                 /* écran étroit : les tableaux se superposent */
  .tableaux-lies { grid-template-columns: 1fr; }
}

/* Jour et mois d'échéance : deux chiffres, champ à la mesure. */
input.champ-deux-chiffres { width: 3.5em; text-align: center; }

/* Listes complètes : la page ne s'allonge pas, le tableau défile sous son en-tête. */
#changelist .results { max-height: calc(100vh - 22rem); overflow: auto; }
#changelist #result_list thead th { position: sticky; top: 0; z-index: 2;
                                    background: var(--darkened-bg, #f0f2f5); }
@media (max-width: 767px) {
  #changelist .results { max-height: calc(100vh - 16rem); }
}

/* Liste du matériel : le client tient en peu de place, le fournisseur en demande plus. */
body.model-materiel #result_list th.column-client,
body.model-materiel #result_list td.field-client { width: 11%; white-space: normal; }
body.model-materiel #result_list th.column-col_fournisseur,
body.model-materiel #result_list td.field-col_fournisseur { width: 20%; white-space: nowrap; }

/* Poignée de largeur des colonnes : un trait clair au bord droit de chaque en-tête,
   visible en permanence pour qu'on sache où saisir. */
#result_list thead th { position: relative; }
/* Séparateur de colonnes. Uni tant que le script ne tourne pas ; doublé d'un liseré
   dès qu'il a pris la main, ce qui distingue d'un coup d'œil les deux situations. */
#result_list thead th { border-right: 2px solid rgba(255, 255, 255, .45); }
#result_list thead th:last-child { border-right: none; }
#result_list.colonnes-reglables thead th { border-right: 3px double rgba(255, 255, 255, .9); }
#result_list.colonnes-reglables thead th:last-child { border-right: none; }
body.colonne-en-cours, body.colonne-en-cours * { cursor: col-resize !important;
                                                 user-select: none; }


/* Recherche globale : une barre dans l'en-tête, la même en tête de la page de résultats. */
.recherche-globale { display: flex; align-items: stretch; height: 32px; }
.recherche-globale.entete { float: right; margin: 10px 20px 0 0; }
.recherche-globale input[type="search"] { box-sizing: border-box; width: 15rem;
    padding: 0 10px; font-size: 12.5px; font-family: inherit; color: #003366;
    border: 1px solid #7f8fa6; border-right: none; border-radius: 9px 0 0 9px; }
.recherche-globale button { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; padding: 0; background: #003366; color: #ffffff; border: none;
    cursor: pointer; border-radius: 0 9px 9px 0; }
.recherche-globale button:hover, .recherche-globale button:focus { background: #7f8fa6; }
.recherche-globale button svg.icone { width: 18px; height: 18px; }

/* Résultats : un bloc par module, le code en tête de ligne. */
.resultats-recherche fieldset.module { margin-bottom: 14px; }
.resultats-recherche table { width: 100%; }
.resultats-recherche td { padding: 5px 10px; vertical-align: top; }
.resultats-recherche td.code { width: 12em; font-weight: 600; white-space: nowrap; }
.resultats-recherche td.detail { color: #7f8fa6; width: 30%; }

@media (max-width: 767px) {
  .recherche-globale.entete { float: none; margin: 8px 0 0; }
  .recherche-globale input[type="search"] { width: 100%; }
}

/* Recherche globale : où en est la facturation d'un matériel, d'une fiche, d'un service. */
.resultats-recherche td.etat { text-align: right; white-space: nowrap; width: 1%; }
span.badge-facturation {
  font-size: 0.76rem; padding: 1px 8px; border-radius: 9px;
  border: 1px solid currentColor; white-space: nowrap;
}
span.badge-facturation.facture { color: #003366; }
span.badge-facturation.a_facturer { color: #7f8fa6; background: rgba(127, 143, 166, 0.12); }

/* Tableau des contacts : lien « personne déjà connue », dans le bandeau du sous-tableau. */
h2.inline-heading a.lien-rattacher {
  float: right; font-size: 0.78rem; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: #ffffff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9px; padding: 1px 10px;
}
h2.inline-heading a.lien-rattacher:hover { background: #ffffff; color: #003366; }
p.aussi-chez { margin: 2px 0 0; font-size: 0.72rem; color: #7f8fa6; font-style: italic; }

/* Recherche globale : les sociétés d'un contact, chacune cliquable. */
a.societe-liee {
  display: inline-block; font-size: 0.82rem; padding: 1px 8px; margin: 1px 2px 1px 0;
  border: 1px solid rgba(127, 143, 166, 0.6); border-radius: 9px;
  color: #003366; text-decoration: none; white-space: nowrap;
}
a.societe-liee:hover { background: #003366; color: #ffffff; border-color: #003366; }
/* La société où la personne est contact principal se distingue sans couleur nouvelle. */
a.societe-liee.principale { font-weight: 700; border-color: #003366; }

/* Colonnes à coche : l'icône se centre sous son en-tête, comme dans un relevé. */
#result_list th.column-col_envoyee, #result_list td.field-col_envoyee,
#result_list th.column-col_en_cours, #result_list td.field-col_en_cours,
#result_list th.column-col_facturee, #result_list td.field-col_facturee,
#result_list th.column-statut, #result_list td.field-statut { text-align: center; }
#result_list th.column-col_envoyee a, #result_list th.column-statut a,
#result_list th.column-col_en_cours a, #result_list th.column-col_facturee a {
  display: block; text-align: center;
}

/* Code de type d'une ligne de facture : court, centré, en lettres capitales. */
#result_list th.column-col_type, #result_list td.field-col_type { text-align: center; }
#result_list th.column-col_type a { display: block; text-align: center; }
#result_list td.field-col_type { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Type dans le tableau des lignes d'une facture : colonne étroite, le code suffit. */
select.champ-type-ligne { width: 6.5em; font-family: inherit; }
.inline-group td.field-il_type, .inline-group th.column-il_type { width: 1%; white-space: nowrap; }

/* Désignation d'une ligne de facture : une seule ligne, mais large. */
input.champ-designation { width: 100%; min-width: 22em; font-family: inherit; }
.inline-group td.field-il_descrip_imp { width: 40%; }

/* Boutons posés dans un bloc de fiche : mêmes pastilles que la barre d'outils. */
.boutons-fiche { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
a.bouton-fiche {
  display: inline-flex; align-items: center; gap: 6px; background: #003366;
  color: #ffffff; padding: 5px 12px; line-height: 20px; border-radius: 4px;
  font-size: 12px; font-weight: 600; text-decoration: none;
}
a.bouton-fiche:hover, a.bouton-fiche:focus { background: #7f8fa6; color: #ffffff; }
a.bouton-fiche svg.icone { width: 16px; height: 16px; }


/* Titres des sous-tableaux : écriture ordinaire, comme les autres blocs de la fiche.
   L'administration les met en capitales, ce qui fait crier « LIGNES DE FACTURE » au
   milieu d'un écran par ailleurs sobre. */
.inline-group h2, .inline-group .inline-heading { text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------ blocs en colonnes
   L'administration donne 160 px d'étiquette au premier champ d'une ligne et colle les
   suivantes contre leur champ : deux lignes de trois champs ne démarrent jamais au même
   endroit, et le bloc paraît de guingois.

   Ici, chaque champ devient une colonne de **largeur fixe**, étiquette au-dessus. Fixe
   et non proportionnelle : à 1/4 de la largeur d'un écran large, une case à cocher ou
   une date occupent une cellule démesurée. Toutes les lignes partagent la même grille,
   donc une ligne de trois champs laisse la quatrième colonne vide au lieu de s'étaler. */
fieldset.bloc-colonnes .form-row { padding: 6px 14px; }
fieldset.bloc-colonnes .form-row > .form-multiline {
  display: grid; grid-template-columns: repeat(4, 15.5em);
  gap: 6px 22px; align-items: start; justify-content: start;
}
fieldset.bloc-colonnes .form-row > .form-multiline > div { min-width: 0; }

/* Étiquette au-dessus, champ en dessous, sur toute la largeur de la colonne. */
fieldset.bloc-colonnes .fieldBox,
fieldset.bloc-colonnes .form-row > div > .flex-container {
  display: block; width: 100%; float: none; margin: 0; padding: 0;
}
fieldset.bloc-colonnes .form-row label,
fieldset.bloc-colonnes .form-row label.inline {
  display: block; float: none; width: auto; text-align: left; padding: 0 0 2px;
  font-size: 0.75rem; font-weight: 600; color: #003366; line-height: 1.25;
}

/* Même hauteur pour tout ce qui suit l'étiquette : saisi ou calculé, la ligne du bas
   des cellules doit être la même. */
fieldset.bloc-colonnes .form-row input[type="text"],
fieldset.bloc-colonnes .form-row input[type="date"],
fieldset.bloc-colonnes .form-row input[type="number"],
fieldset.bloc-colonnes .form-row select {
  width: 100%; box-sizing: border-box; height: 30px; margin: 0;
}
fieldset.bloc-colonnes .form-row .readonly {
  display: flex; align-items: center; height: 30px; margin: 0; padding: 0;
}
fieldset.bloc-colonnes .form-row p { margin: 0; }

/* Date de paiement : le champ, puis « Aujourd'hui » et le calendrier à sa suite, sur la
   même ligne. Sous eux la cellule garderait sa hauteur mais pas celle de ses voisines,
   et tout le bloc redeviendrait bancal.

   L'enveloppe s'appelle « p.date » pour un champ de date, « p.datetime » pour une date
   et heure ; les deux raccourcis sont posés par le JavaScript de l'administration après
   le chargement, dans un « span.datetimeshortcuts » glissé juste après le champ. */
fieldset.bloc-colonnes .form-row p.date,
fieldset.bloc-colonnes .form-row p.datetime {
  display: flex; align-items: center; gap: 8px; margin: 0; height: 30px;
  white-space: nowrap;
}
/* L'administration donne 2 px à droite et 4 px sous un champ de date (.vDateField),
   qu'une liste déroulante n'a pas : centré dans sa cellule, le champ remontait de 2 px
   et l'écart sous son étiquette paraissait plus grand que celui du voisin. */
fieldset.bloc-colonnes .form-row p.date input.vDateField,
fieldset.bloc-colonnes .form-row p.datetime input.vDateField {
  width: 7.5em; min-width: 0; flex: none; margin: 0; height: 30px;
}
fieldset.bloc-colonnes .form-row .datetimeshortcuts {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem;
  margin: 0; white-space: nowrap;
}
fieldset.bloc-colonnes .form-row .datetimeshortcuts a { text-decoration: none; }
/* Une case à cocher garde sa taille, centrée sur la même hauteur que les autres. */
fieldset.bloc-colonnes .form-row input[type="checkbox"] {
  width: auto; height: 30px; vertical-align: middle;
}

@media (max-width: 1100px) {
  fieldset.bloc-colonnes .form-row > .form-multiline {
    grid-template-columns: repeat(2, 15.5em);
  }
}
@media (max-width: 620px) {
  fieldset.bloc-colonnes .form-row > .form-multiline { grid-template-columns: 1fr; }
}
}

/* Trop-perçu : de l'argent dû au client, pas une facture en ordre. */
span.trop-percu { color: #ba2121; font-weight: 600; }