/* ============================================================
   JERE360 — AJUSTEMENTS SUR DASHLITE

   PRINCIPE : suivre le gabarit à la lettre. Sa palette, ses
   polices, ses formes, ses tailles. On ne change QUE la couleur
   principale — le violet #854fff devient le marine JERE360 — et
   l'on raccorde les classes des écrans existants aux siennes.

   On ne modifie jamais dashlite.css : une mise à jour du gabarit
   l'écraserait, et tout serait à refaire.
   ============================================================ */

:root {
  /* La palette du gabarit, conservée telle quelle */
  --dl-success:   #1ee0ac;
  --dl-info:      #09c2de;
  --dl-warning:   #f4bd0e;
  --dl-danger:    #e85347;
  --dl-gray:      #8091a7;
  --dl-light:     #e5e9f2;
  --dl-secondary: #364a63;
  --dl-texte:     #526484;
  --dl-bord:      #dbdfea;

  /* Notre couleur principale, à la place du violet */
  --jere-marine:  #1B3A6B;
  --jere-bleu:    #2F6FB5;
  --jere-orange:  #F28C28;
}

/* ============================================================
   LA COULEUR PRINCIPALE
   ============================================================ */
.btn-primary, .bg-primary, .badge.bg-primary,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--jere-marine) !important;
  border-color: var(--jere-marine) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #24508F !important;
  border-color: #24508F !important;
}
.text-primary, .link-primary, a.link { color: var(--jere-bleu) !important; }
.btn-outline-primary { color: var(--jere-marine); border-color: var(--jere-marine); }
.btn-outline-primary:hover {
  background-color: var(--jere-marine); border-color: var(--jere-marine); color: #fff;
}
.btn-dim.btn-primary {
  background-color: rgba(27, 58, 107, .12) !important;
  border-color: transparent !important;
  color: var(--jere-marine) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--jere-orange);
  box-shadow: 0 0 0 3px rgba(242, 140, 40, .14);
}

/* ============================================================
   LA BARRE LATÉRALE

   Le gabarit l'emploie CLAIRE (« is-light »). On la garde ainsi :
   c'est ce qui donne au tableau de bord sa légèreté. Notre marine
   n'apparaît que sur l'écran actif et les accents.
   ============================================================ */
.nk-sidebar.is-light .nk-menu-item.active > .nk-menu-link,
.nk-sidebar.is-light .nk-menu-item.current-page > .nk-menu-link {
  color: var(--jere-marine);
  background: rgba(27, 58, 107, .07);
  box-shadow: inset 3px 0 0 var(--jere-orange);
}
.nk-sidebar.is-light .nk-menu-sub .nk-menu-item.active > .nk-menu-link {
  color: var(--jere-marine);
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}
.nk-sidebar.is-light .nk-menu-link:hover { color: var(--jere-marine); }

/* Le logo : il porte le symbole ET la signature. */
.nk-sidebar-brand { padding: 1.1rem 0; width: 100%; }
.nk-sidebar .logo-img { max-height: 72px !important; width: auto; max-width: 92%; }

/* ============================================================
   RACCORDS AVEC LES ÉCRANS EXISTANTS
   ============================================================ */
.custom-card, .carte {
  background: #fff;
  border: 1px solid var(--dl-light);
  border-radius: 4px;
  margin-bottom: 1.5rem;
}
.custom-card > .card-header, .carte > h2:first-child {
  padding: 1.25rem;
  border-bottom: 1px solid var(--dl-light);
  font-size: .9375rem; font-weight: 700;
  color: var(--dl-secondary);
}
.custom-card > .card-body { padding: 1.25rem; }

.nk-content-body h1, .nk-content-body h2, .nk-content-body h3 {
  color: var(--dl-secondary); font-weight: 700;
}
.nk-content-body h1 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.nk-content-body h2 { font-size: 1.0625rem; margin: 1.75rem 0 1rem; }
.nk-content-body h2:first-child { margin-top: 0; }
.nk-content-body h3 { font-size: .9375rem; }

/* ============================================================
   LA LARGEUR DU CONTENU

   Le contenu commence À GAUCHE, sous la barre latérale. Le
   centrer laissait un large vide à gauche pendant que les
   tableaux, eux, occupaient toute la largeur : deux règles
   contradictoires sur le même écran.

   On borne donc la largeur SANS centrer. Le regard part toujours
   du même bord, et les tableaux gardent la place dont ils ont
   besoin.
   ============================================================ */
.nk-content-body > .nk-block-head,
.nk-content-body > .nk-block,
.nk-content-body > form,
.nk-content-body > .custom-card,
.nk-content-body > .carte,
.nk-content-body > h1,
.nk-content-body > h2,
.nk-content-body > p,
.nk-content-body > .alerte {
  margin-left: 0;
  margin-right: 0;
}

/* Un formulaire, lui, reste étroit : au-delà de 960 px, l'œil
   perd la ligne entre un libellé et son champ. C'est la mesure
   du gabarit (« wide-md »). */
.nk-content-body form .row.gy-4,
.nk-content-body > .row.gy-4,
.nk-content-body form > .row.gy-4 {
  max-width: 960px;
}

/* ============================================================
   LES FORMULAIRES

   Les 39 écrans emploient désormais LES CLASSES DU GABARIT :
       row gy-4 > col-sm-6 > form-group
         > form-label + form-control-wrap > form-control

   Il n'y a donc plus rien à recopier ici : dashlite.css fait tout
   le travail, et le rendu est celui de ses pages, au pixel.

   On ne garde que ce que le gabarit ne prévoit pas.
   ============================================================ */

/* La couleur de la charte sur le champ actif */
.form-control:focus, .form-select:focus {
  border-color: var(--jere-orange);
  box-shadow: 0 0 0 3px rgba(242, 140, 40, .14);
}

/* Les écrans à deux colonnes serrées : le gabarit y met de l'air
   entre les groupes, pas seulement entre les champs. */
.nk-content-body .form-group { margin-bottom: 0; }
.nk-content-body .row.gy-4 { --bs-gutter-y: 1.5rem; }

/* La note explicative sous un champ. Le gabarit la met en petit
   gris, JAMAIS en italique : l'italique se lit mal à cette
   taille. */
.form-note {
  margin-top: .375rem;
  font-size: .75rem;
  font-style: normal;
  color: var(--dl-gray);
  line-height: 1.125rem;
}
.form-note em, .form-note i { font-style: normal; }

/* Le bouton d'envoi, quand il est seul en fin de formulaire */
.nk-content-body form > button:not(.btn),
.nk-content-body form > input[type="submit"]:not(.btn) {
  height: 2.5rem;
  padding: 0 1.5rem;
  margin-top: 1.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--jere-marine);
  border: 1px solid var(--jere-marine);
  border-radius: 4px;
  cursor: pointer;
}
.nk-content-body form > button:not(.btn):hover { background: #24508F; }

/* Les champs de fichier : le gabarit ne les habille pas */
.form-control[type="file"] { padding: .3125rem .75rem; line-height: 1.75rem; }

/* La barre de recherche au-dessus des listes */
.barre-recherche {
  display: flex; gap: .75rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.barre-recherche input, .barre-recherche select {
  height: 2.5rem; min-width: 15rem; padding: .4375rem 1rem;
  font-size: .8125rem; border: 1px solid var(--dl-bord); border-radius: 4px;
}
.barre-recherche button {
  height: 2.5rem; padding: 0 1.25rem;
  font-size: .8125rem; font-weight: 700; color: #fff;
  background: var(--jere-marine); border: 0; border-radius: 4px; cursor: pointer;
}

/* ============================================================
   LES PHOTOS ET LES IMAGES

   Une photo de dossier s'affichait en PLEINE LARGEUR : elle
   remplissait l'écran d'un téléphone et repoussait toute
   l'information sous la ligne de flottaison.

   Une photo d'identité se regarde ; elle ne se contemple pas.
   ============================================================ */
.contenu img, .nk-content-body img {
  max-width: 100%;
  height: auto;
}
/* Une image téléversée ne doit jamais déborder de sa carte. */
.nk-content-body img[src*="fichier.php"],
.nk-content-body img[src*="papier-image.php"] {
  max-width: 180px !important;
  max-height: 220px !important;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--dl-light);
}

/* Le portrait du dossier : dimensions FIXES, cadrage automatique.
   Quelle que soit la photo téléversée — panoramique, penchée,
   énorme — elle est recadrée en 110 × 140, comme une photo
   d'identité. C'est object-fit qui recadre, pas nous. */
.photo-employe {
  width: 110px !important;
  height: 140px !important;
  max-width: 110px !important;
  max-height: 140px !important;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dbdfea;
  display: block;
}
.photo-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f5f6fa;
  color: #8094ae;
  font-size: .75rem;
}
/* Les logos et signatures restent petits */
.nk-content-body img.logo-img,
.nk-content-body img[alt*="ogo"] {
  max-height: 60px !important;
  max-width: none !important;
  border: 0;
}

/* ============================================================
   LES TABLEAUX
   ============================================================ */
.contenu table, .nk-content-body table:not(.nk-tb-list) {
  width: 100%; border-collapse: collapse; background: #fff; font-size: .8125rem;
}
.contenu table th, .nk-content-body table th {
  padding: .75rem 1rem; text-align: left;
  font-size: .75rem; font-weight: 700; color: var(--dl-gray);
  background: #fff; border-bottom: 1px solid var(--dl-light); white-space: nowrap;
}
.contenu table td, .nk-content-body table td {
  padding: .875rem 1rem; color: var(--dl-texte);
  border-bottom: 1px solid #f5f6fa; vertical-align: middle;
}
.contenu table tbody tr:hover, .nk-content-body table tbody tr:hover { background: #f8f9fc; }
.contenu table a, .nk-content-body table a { color: var(--jere-bleu); }

/* ============================================================
   LES ÉTATS — les couleurs du gabarit, pas les nôtres
   ============================================================ */
.etiquette, .badge-etat {
  display: inline-block; padding: .25rem .625rem;
  font-size: .6875rem; font-weight: 700; line-height: 1rem; border-radius: 3px;
}
.etiquette.succes, .et-actif    { background: rgba(30, 224, 172, .15); color: #12b886; }
.etiquette.erreur, .et-suspendu { background: rgba(232, 83, 71, .15);  color: #e85347; }
.etiquette.alerte, .et-essai    { background: rgba(244, 189, 14, .15); color: #b58a00; }
.etiquette.info, .et-archive    { background: rgba(9, 194, 222, .15);  color: #0b96ad; }

.alerte, .alerte-succes, .alerte-erreur {
  padding: .875rem 1.25rem; margin-bottom: 1.25rem;
  font-size: .8125rem; border: 1px solid transparent; border-radius: 4px;
}
.alerte.succes, .alerte-succes {
  color: #12b886; background: rgba(30, 224, 172, .12); border-color: rgba(30, 224, 172, .25);
}
.alerte.erreur, .alerte-erreur {
  color: #e85347; background: rgba(232, 83, 71, .12); border-color: rgba(232, 83, 71, .25);
}
.alerte.avertissement {
  color: #b58a00; background: rgba(244, 189, 14, .12); border-color: rgba(244, 189, 14, .25);
}

/* ============================================================
   DIVERS
   ============================================================ */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
.avatar-md { width: 2.5rem; height: 2.5rem; }
.bg-primary-transparent { background: rgba(27, 58, 107, .12); color: var(--jere-marine); }
.bg-success-transparent { background: rgba(30, 224, 172, .15); color: #12b886; }
.bg-warning-transparent { background: rgba(244, 189, 14, .15); color: #b58a00; }
.bg-danger-transparent  { background: rgba(232, 83, 71, .15);  color: #e85347; }
.fs-12 { font-size: .75rem; }
.fs-24 { font-size: 1.5rem; }
.fs-28 { font-size: 1.75rem; }
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .8125rem; }

.nk-header.is-light { background: #fff; border-bottom: 1px solid var(--dl-light); }
.nk-header-search .form-control { background: #f5f6fa; border-color: transparent; }
.nk-header-search .form-control:focus { background: #fff; }

@media print {
  .nk-sidebar, .nk-header, .nk-footer, .impression-cachee { display: none !important; }
  .nk-wrap, .nk-content { padding: 0 !important; }
  .card, .custom-card, .carte { border: 0; box-shadow: none; }
}

/* ============================================================
   LE DOSSIER DE L'EMPLOYÉ

   L'écran le plus dense du système. L'en-tête de synthèse — la
   photo et le tableau d'identité — suit le style « profile » du
   gabarit : photo à gauche, informations en deux colonnes.
   ============================================================ */
.dossier-entete {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dossier-entete .photo-bloc { flex: 0 0 auto; }
.dossier-entete table {
  width: 100%;
  font-size: .8125rem;
  border-collapse: collapse;
}
.dossier-entete th {
  padding: .5rem .75rem .5rem 0;
  text-align: left;
  font-weight: 500;
  color: var(--dl-gray);
  white-space: nowrap;
  width: 1%;
  border-bottom: 1px solid #f5f6fa;
}
.dossier-entete td {
  padding: .5rem 1.25rem .5rem 0;
  color: var(--dl-secondary);
  border-bottom: 1px solid #f5f6fa;
}
.dossier-entete tr:last-child th,
.dossier-entete tr:last-child td { border-bottom: 0; }
.photo-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 170px;
  background: #f5f6fa;
  border: 1px dashed var(--dl-bord);
  border-radius: 4px;
  color: var(--dl-gray);
  font-size: .75rem;
  text-align: center;
}

/* Les onglets du dossier : ceux du gabarit, qui défilent sur
   petit écran au lieu de s'empiler sur trois lignes. */
.nav-tabs-card { border-bottom: 1px solid var(--dl-light); }
.nav-tabs .nav-link {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--dl-gray);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .9rem 1.1rem;
}
.nav-tabs .nav-link:hover { color: var(--jere-marine); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--jere-marine);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--jere-orange);
}
.nav-tabs .nav-link .icon { margin-right: .4rem; }

/* Les sous-sections d'un onglet */
.nk-content-body h3.sous-section {
  font-size: .9375rem;
  margin: 1.75rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--dl-light);
}


/* ============================================================
   LES RESTES D'AVANT LA MIGRATION, RATTACHÉS AU GABARIT

   Une classe employée sans style = un élément en vrac. Plutôt
   que de retoucher trente écrans, on rattache ici les quelques
   survivantes aux couleurs du gabarit.
   ============================================================ */
/* Les badges d'état historiques -> les teintes douces du gabarit */
.badge-refuse   { background: #fce9e7; color: #e85347; }
.badge-approuve { background: #e2f8f0; color: #0fac81; }
.badge-recue    { background: #e5e9fb; color: #559bfb; }
.badge-inactif  { background: #eceff5; color: #8094ae; }

/* La cellule d'actions d'un tableau : à droite, sans retour à la
   ligne entre les liens. */
td.cellule-action, th.cellule-action {
  text-align: right;
  white-space: nowrap;
}

/* Le trait de séparation employé par les fiches */
.nk-divider {
  border-top: 1px solid #e5e9f2;
  margin: 1rem 0;
}

/* La note explicative sous un titre ou un champ : partout dans le
   système (« class=note »), mais sa règle avait disparu — elle
   s'affichait comme du texte ordinaire. La voici, au ton doux du
   gabarit. */
.note, p.note, small.note {
  font-size: .8125rem;
  color: #8094ae;
  line-height: 1.4;
}
p.note { margin-bottom: 1rem; }


/* ============================================================
   LA VERSION MOBILE

   Le gabarit fait déjà l'essentiel : le menu se replie derrière
   le bouton, les colonnes s'empilent, l'horloge se cache. Restent
   les CONTENUS LARGES — un tableau de dix colonnes ou une rangée
   de douze onglets n'ont pas de forme étroite : on leur donne un
   DÉFILEMENT HORIZONTAL au doigt plutôt qu'une déformation.
   ============================================================ */

/* Les rangées d'onglets : une seule ligne qui défile au doigt.
   Douze onglets empilés sur quatre lignes mangeraient l'écran. */
.onglets-defilants {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.onglets-defilants::-webkit-scrollbar { display: none; }
.onglets-defilants .nav-link { flex-shrink: 0; }

@media (max-width: 991px) {
  /* Un tableau plus large que l'écran défile DANS sa carte, au
     lieu d'écraser ses colonnes ou de pousser toute la page. */
  .nk-content-body .card .table,
  .nk-content-body table.table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nk-content-body .table th,
  .nk-content-body .table td { white-space: nowrap; }

  /* La barre de recherche : les champs prennent la largeur au
     lieu d'imposer leurs quinze rem. */
  .barre-recherche input, .barre-recherche select {
    min-width: 0;
    flex: 1 1 100%;
  }
}

@media (max-width: 576px) {
  /* iPhone agrandit toute page dont un champ a une police sous
     16 px au moment de la saisie : on la lui donne, le zoom
     surprise disparaît. */
  .form-control, .form-select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], select, textarea {
    font-size: 16px !important;
  }
  /* Le portrait du dossier, centré au-dessus de la fiche */
  .photo-employe { margin: 0 auto; }
}


/* ============================================================
   FACT360 — L'USAGE AU TÉLÉPHONE

   Le module s'adresse à des professionnels qui facturent depuis
   leur mobile, souvent debout, d'une main. D'où : une barre de
   navigation en bas (au pouce), des cartes tactiles au lieu de
   tableaux, et des chiffres lisibles d'un coup d'œil.
   ============================================================ */

/* ---- La barre de navigation basse ---- */
.fac-barre-basse {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  background: #fff;
  border-top: 1px solid #e5e9f2;
  padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(28, 43, 70, .06);
}
.fac-barre-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
  padding: .35rem .1rem;
  color: #8094ae;
  font-size: .66rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}
.fac-barre-item .icon { font-size: 1.25rem; }
.fac-barre-item.est-actif { color: #1B3A6B; font-weight: 600; }
.fac-barre-item:active { background: #f5f6fa; }

/* Le bouton de création, au centre et en relief */
.fac-barre-plus {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  margin: 0 .2rem -14px;
  display: flex; align-items: center; justify-content: center;
  background: #1B3A6B;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(27, 58, 107, .35);
  text-decoration: none;
}
.fac-barre-plus .icon { font-size: 1.5rem; }
.fac-barre-plus:active { transform: scale(.94); }

/* La barre recouvre le bas de page : on dégage la place. */
@media (max-width: 991.98px) {
  body.fac-mobile .nk-content { padding-bottom: 5.5rem; }
}

/* ---- Les listes en CARTES sur téléphone ----
   Un tableau de six colonnes ne se lit pas sur un écran étroit.
   Chaque ligne devient une carte : l'essentiel à gauche, le
   montant à droite, le statut dessous. */
@media (max-width: 767.98px) {
  .fac-liste .nk-tb-item.nk-tb-head { display: none; }
  .fac-liste .nk-tb-item {
    display: block;
    position: relative;
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    margin-bottom: .6rem;
    padding: .75rem .85rem;
  }
  .fac-liste .nk-tb-col {
    display: inline-block;
    width: auto;
    padding: 0;
    border: 0;
  }
  .fac-liste .nk-tb-col.fac-col-titre { display: block; font-weight: 600; }
  .fac-liste .nk-tb-col.fac-col-montant {
    position: absolute; top: .75rem; right: .85rem;
    font-weight: 700; font-size: 1rem;
  }
  .fac-liste .nk-tb-col.fac-col-secondaire {
    display: block; color: #8094ae; font-size: .8rem; margin-top: .15rem;
  }
  .fac-liste .nk-tb-col.fac-col-etat { display: block; margin-top: .5rem; }
  /* Dashlite plafonne cette colonne à 3.75rem — 60 px. En tableau c'est
     juste ; en carte, deux ou trois boutons y débordent SANS être coupés,
     et la page se décale latéralement de la largeur qui dépasse. Mesuré
     sur un téléphone de 390 px : 418 px de large sur la file d'attente.
     La règle du fournisseur reste intacte, on la relâche ici. */
  .fac-liste .nk-tb-col.nk-tb-col-tools {
    display: block; margin-top: .55rem;
    max-width: none;
  }
}

/* ---- Les chiffres du tableau de bord, plus lisibles au doigt ---- */
@media (max-width: 575.98px) {
  .fac-chiffre .amount { font-size: 1.45rem; }
  .fac-chiffre .card-inner { padding: .9rem 1rem; }
}

/* Les deux grands boutons d'action, façon application */
.fac-actions-rapides { display: flex; gap: .7rem; margin-bottom: 1.1rem; }
.fac-action {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem;
  padding: 1.1rem .6rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.fac-action .icon { font-size: 1.5rem; }
.fac-action-creer   { background: #e5e9fb; color: #1B3A6B; }
.fac-action-depense { background: #f3e8fb; color: #7c3aed; }
.fac-action:active { transform: scale(.98); }


/* ---- La fenêtre de choix d'un article ----
   Le nom peut être long, le prix jamais : la colonne de gauche
   absorbe la largeur restante, celle de droite garde la sienne.
   Sans cela, les deux se chevauchent dès qu'un nom passe à la
   ligne. */
.fac-res { display: block; }
.fac-res .fac-res-ligne {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.fac-res .fac-res-gauche { flex: 1 1 auto; min-width: 0; }
.fac-res .fac-res-droite { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.fac-res:hover { background: #f5f6fa; }
.fac-res:active { background: #eef2f8; }


/* ============================================================
   LES BANDEAUX DE TÊTE — ESSAI, LECTURE SEULE, LICENCE

   Ils viennent de marque-jere360.css, qu'AUCUN écran ne charge :
   les règles y dormaient, et jere_bandeau_essai() posait depuis
   toujours un <div> sans style. Elles sont ici parce que
   header.php charge ce fichier-ci sur chaque écran.

   Trois tons, trois messages, et jamais deux à la fois :
     · orange — une échéance approche, il reste du temps ;
     · rouge  — c'est déjà fermé ;
     · indigo — une invitation, rien de pressant. Le socle gratuit
       l'est à vie : un client qui s'en contente ne fait rien de
       mal, et la couleur ne doit pas lui dire le contraire.

   Ils sont minces et centrés : ils doivent se voir sans prendre
   la place du travail.
   ============================================================ */
.bandeau-essai,
.bandeau-lecture-seule,
.bandeau-licence {
  font-size: .85rem;
  padding: .5rem 1.2rem;
  text-align: center;
  line-height: 1.45;
}
.bandeau-essai {
  background: #FDF3E3;
  border-bottom: 2px solid #E2A03F;
  color: #8A5210;
}
.bandeau-essai strong { color: #6E4008; }

.bandeau-lecture-seule {
  background: #FDEEEE;
  border-bottom: 2px solid #D9534F;
  color: #8D1F1F;
}
.bandeau-lecture-seule strong { color: #6E1414; }

.bandeau-licence {
  background: #EEF1FD;
  border-bottom: 2px solid #4A42C0;
  color: #2C2A6B;
}
.bandeau-licence strong { color: #1C1A52; }

/* Sur le papier, aucun des trois : c'est l'entreprise du client
   qui signe ses documents, pas notre rappel d'échéance. */
@media print {
  .bandeau-essai, .bandeau-lecture-seule, .bandeau-licence { display: none; }
}


/* ============================================================
   LES BOUTONS D'EN-TÊTE PASSENT À LA LIGNE

   LE DÉFAUT QUE CECI CORRIGE : .nk-block-tools est un flex SANS
   retour à la ligne. Trois boutons dans l'en-tête d'un écran —
   ce que produit ecran_entete() dès qu'on lui donne trois
   actions — sortaient de l'écran sur un téléphone, et la page
   entière se décalait de deux cents pixels vers la droite. Le
   contenu paraissait coupé, sans qu'on voie pourquoi.

   Cela vaut pour TOUS les écrans du logiciel, pas seulement pour
   celui qui l'a fait voir : c'est pourquoi la règle est ici et
   non dans un écran.
   ============================================================ */
.nk-block-tools { flex-wrap: wrap; row-gap: .5rem; }