/* Alco Consulting — thème de l'application (complément à Bootstrap 5) */

/* ===========================================================================
   Identité visuelle Alco Consulting
   Trois couleurs relevées dans le logo — le disque, l'anneau, la lettre :
     · bleu marine  #1a4979  → structure : titres, menu, en-têtes de tableau
     · bleu vif     #0d6ea8  → action    : boutons, liens, élément actif
     · bleu acier   #a7c0d6  → aplat     : liserés, badges, fonds d'accent

   Contrastes mesurés (WCAG AA) :
     marine #1a4979 sur blanc ........  9,2:1  ✓ texte courant et boutons
     marine foncé #12314f sur blanc .. 13,3:1  ✓ survol, en-têtes
     bleu vif #0d6ea8 sur blanc ......  5,5:1  ✓ boutons à texte blanc, liens
     acier #a7c0d6 sur blanc .........  1,9:1  ✗ jamais en texte
     texte #1f2430 sur acier .........  8,2:1  ✓ aplat à texte foncé
   L'acier ne porte donc que du texte foncé, jamais du blanc.

   Il n'y a plus d'orange : le logo n'en contient pas. Les seules couleurs
   chaudes restantes disent une **gravité** — attention, danger — et non une
   marque : les confondre rendrait une alerte indistinguable d'un bouton.
   ======================================================================== */
:root {
  /* Le marine profond du bas du disque : sert aux dégradés. */
  --nk-marque-bleu: #12314f;

  --nk-primaire: #1a4979;
  --nk-primaire-clair: #22598f;
  --nk-primaire-fonce: #12314f;
  --nk-primaire-voile: #eaf0f6;
  --nk-primaire-voile-fort: #dae4ef;

  /* L'accent n'est plus une couleur chaude mais le bleu vif de l'action, et
     l'acier du logo pour les aplats qui portent du texte foncé. */
  --nk-accent: #0d6ea8;
  --nk-accent-fonce: #0b5c8d;
  --nk-accent-voile: #e7eff6;
  --nk-acier: #a7c0d6;
  --nk-acier-voile: #dce7f0;

  --nk-fond: #f4f7fa;
  --nk-bordure: #dde5ee;
  --nk-texte: #1f2430;
  --nk-texte-doux: #5d6479;
  --nk-succes: #157347;
  --nk-danger: #b02a37;
  --nk-attention: #b45309;

  --nk-rayon: 10px;
  --nk-largeur-menu: 252px;
}

body {
  background: var(--nk-fond);
  color: var(--nk-texte);
  font-size: 0.94rem;
}

/* ------------------------------------------------------------- Structure */
/* Plus de colonne latérale : le contenu occupe toute la largeur. */
.nk-application {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Les onglets du module : ses écrans, sous la barre du titre. Ils ont remplacé
   la barre latérale — on entre par la grille, on circule par les onglets.
   L'onglet ouvert prend la teinte du module : c'est le fil qui relie la tuile
   de la grille à l'écran où l'on se trouve. */
.nk-barre-module {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  padding: 0 1.25rem;
  background: #fff;
  border-bottom: 1px solid var(--nk-bordure);
  box-shadow: 0 1px 3px rgba(18, 49, 79, .04);
}

.nk-barre-module__nom {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem .7rem 0;
  border-right: 1px solid var(--nk-bordure);
  color: var(--nk-teinte, var(--nk-primaire));
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
}

.nk-barre-module__nom i { font-size: 1.1rem; }

.nk-barre-module__liens {
  display: flex;
  align-items: stretch;
  gap: .15rem;
  overflow-x: auto;
}

.nk-barre-module__lien {
  display: inline-flex;
  align-items: center;
  padding: .7rem .9rem;
  border-bottom: 3px solid transparent;
  color: var(--nk-texte-doux);
  text-decoration: none;
  font-size: .92rem;
  white-space: nowrap;
  transition: color .14s, border-color .14s, background .14s;
}

.nk-barre-module__lien:hover {
  color: var(--nk-primaire);
  background: var(--nk-primaire-voile);
}

/* L'onglet ouvert : le seul repère de position depuis que la barre latérale a
   disparu. Le filet reprend la teinte du module, posée par le gabarit. */
.nk-barre-module__lien.actif {
  color: var(--nk-primaire-fonce);
  font-weight: 600;
  border-bottom-color: var(--nk-teinte, var(--nk-accent));
}

/* Le logo de la barre, qui ramène à la grille. */
.nk-barre__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.nk-barre__logo img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.nk-contenu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nk-barre {
  background: #fff;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
  /* Filet orange : la signature de marque qui court sous le titre de page. */
  border-bottom: 2px solid var(--nk-accent);
  box-shadow: 0 1px 4px rgba(10, 16, 70, 0.07);
}
.nk-barre__titre {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--nk-primaire);
}
.nk-barre__sous-titre {
  font-size: 0.78rem;
  color: var(--nk-texte-doux);
  margin: 0;
}
/* Repère de marque affiché seulement sur mobile, où le menu latéral est masqué. */
.nk-barre__marque {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.nk-page {
  padding: 1rem 1.25rem;
  flex: 1 1 auto;
}

/* ----------------------------------------------------------------- Cartes */
.nk-carte {
  background: #fff;
  border: 1px solid var(--nk-bordure);
  border-radius: var(--nk-rayon);
  box-shadow: 0 1px 2px rgba(10, 16, 70, 0.05);
}
.nk-carte__entete {
  padding: 0.65rem 1rem;
  background: var(--nk-primaire-voile);
  border-bottom: 1px solid var(--nk-primaire-voile-fort);
  border-radius: var(--nk-rayon) var(--nk-rayon) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.nk-carte__titre {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--nk-primaire);
}
.nk-carte__corps {
  padding: 1rem;
}

/* Tuiles de statistiques */
.nk-tuile {
  background: #fff;
  border: 1px solid var(--nk-bordure);
  border-left: 4px solid var(--nk-primaire);
  border-radius: var(--nk-rayon);
  padding: 0.65rem 0.85rem;
  height: 100%;
}
.nk-tuile__libelle {
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nk-texte-doux);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.nk-tuile__valeur {
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nk-texte);
  word-break: break-word;
}
.nk-tuile__note {
  font-size: 0.76rem;
  color: var(--nk-texte-doux);
  margin-top: 0.25rem;
}
/* Une tuile qui mène quelque part doit le montrer : sans indice, personne ne
   pense à cliquer un chiffre. Le lien porte la tuile entière — viser un nombre
   de deux caractères au doigt serait pénible. */
a.nk-tuile {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
a.nk-tuile:hover {
  box-shadow: 0 4px 14px rgba(26, 73, 121, 0.14);
  transform: translateY(-1px);
  border-color: var(--nk-acier);
}
a.nk-tuile:hover .nk-tuile__valeur { color: var(--nk-primaire); }
a.nk-tuile:focus-visible {
  outline: 2px solid var(--nk-accent);
  outline-offset: 2px;
}
/* La flèche n'apparaît qu'au survol : affichée en permanence, six tuiles
   côte à côte en deviendraient bavardes. */
a.nk-tuile .nk-tuile__libelle::after {
  content: "92";
  margin-left: 0.3rem;
  opacity: 0;
  transition: opacity .12s ease;
}
a.nk-tuile:hover .nk-tuile__libelle::after { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  a.nk-tuile { transition: none; }
  a.nk-tuile:hover { transform: none; }
}

.nk-tuile--succes { border-left-color: var(--nk-succes); }
.nk-tuile--danger { border-left-color: var(--nk-danger); }
.nk-tuile--attention { border-left-color: var(--nk-attention); }
.nk-tuile--accent { border-left-color: var(--nk-accent); }

/* ---------------------------------------------------------------- Badges */
.badge-succes, .badge-danger, .badge-attention, .badge-info, .badge-neutre {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-succes { background: #d9f2e4; color: #0f6b3f; }
.badge-danger { background: #fbdfe2; color: #a01f2b; }
.badge-attention { background: #fdf0d5; color: #92500a; }
.badge-info { background: #dae4ef; color: #1a4979; }
.badge-neutre { background: #eaeef3; color: #52627a; }

.montant-positif { color: var(--nk-succes); font-weight: 600; }
.montant-negatif { color: var(--nk-danger); font-weight: 600; }

/* --------------------------------------------------------------- Tableaux */
.nk-tableau {
  width: 100%;
  margin: 0;
  font-size: 0.87rem;
}
.nk-tableau thead th {
  background: var(--nk-primaire-voile);
  border-bottom: 2px solid var(--nk-primaire-voile-fort);
  color: var(--nk-primaire);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.6rem 0.75rem;
}
.nk-tableau tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #f1f4f8;
  vertical-align: middle;
}
.nk-tableau tbody tr:hover { background: #f8f9fe; }
.nk-tableau tfoot td {
  background: var(--nk-primaire-voile);
  color: var(--nk-primaire);
  font-weight: 700;
  padding: 0.65rem 0.75rem;
  border-top: 2px solid var(--nk-bordure);
}
.nk-nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nk-tableau--compact tbody td { padding: 0.4rem 0.6rem; }

.nk-defilement { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------- Filtres */
.nk-filtres {
  background: #fff;
  border: 1px solid var(--nk-bordure);
  border-radius: var(--nk-rayon);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
}
/* Deux blocs de filtres qui se suivent forment un seul groupe visuel. */
.nk-filtres + .nk-filtres {
  margin-top: -0.75rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent;
}
.nk-filtres:has(+ .nk-filtres) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0.75rem;
}
.nk-filtres .form-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--nk-primaire);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 0.2rem;
}
.nk-filtres .form-control, .nk-filtres .form-select { font-size: 0.87rem; }

.nk-periode-rapide { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nk-periode-rapide a {
  font-size: 0.78rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--nk-bordure);
  border-radius: 999px;
  color: var(--nk-texte-doux);
  text-decoration: none;
  background: #fff;
}
.nk-periode-rapide a:hover { border-color: var(--nk-primaire); color: var(--nk-primaire); }
.nk-periode-rapide a.actif {
  background: var(--nk-primaire);
  border-color: var(--nk-primaire);
  color: #fff;
  font-weight: 600;
}

/* ------------------------------------------------------------ Formulaires */
.nk-formulaire .form-label { font-weight: 600; font-size: 0.83rem; margin-bottom: 0.25rem; }
.nk-formulaire .form-text { font-size: 0.76rem; }
.nk-formulaire fieldset {
  border: 1px solid var(--nk-bordure);
  border-radius: var(--nk-rayon);
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fff;
}
.nk-formulaire legend {
  float: none;
  width: auto;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--nk-primaire);
  padding: 0 0.4rem;
  margin-bottom: 0.5rem;
}
.champ-obligatoire::after { content: " *"; color: var(--nk-danger); }

/* Encart de calcul temps réel */
.nk-calcul {
  background: linear-gradient(135deg, var(--nk-primaire), var(--nk-marque-bleu));
  color: #fff;
  border-radius: var(--nk-rayon);
  padding: 1rem 1.15rem;
}
.nk-calcul__libelle {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  opacity: 0.82;
  font-weight: 600;
}
.nk-calcul__valeur { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.nk-calcul__detail { font-size: 0.8rem; opacity: 0.85; }
.nk-calcul hr { border-color: rgba(255, 255, 255, 0.25); }

/* --------------------------------------------------------------- Alertes */
.nk-alerte {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.84rem;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
}
.nk-alerte--danger { background: #fdf0f1; border-color: #f5c6cb; color: #86212b; }
.nk-alerte--attention { background: #fdf3e3; border-color: #f0d5a8; color: #7a4708; }
.nk-alerte--info { background: #eef5fd; border-color: #cfe0f5; color: #14507d; }
.nk-alerte i { font-size: 1rem; margin-top: 0.05rem; }

/* ------------------------------------------------------------ Graphiques */
.nk-graphique { position: relative; height: 300px; }
.nk-graphique--petit { height: 240px; }

.nk-barre-mesure {
  height: 8px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.nk-barre-mesure span {
  display: block;
  height: 100%;
  background: var(--nk-primaire-clair);
  border-radius: 999px;
}

/* ------------------------------------------------------------ Connexion */
.nk-connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--nk-primaire-fonce), var(--nk-marque-bleu));
  padding: 1.25rem;
}
.nk-connexion__carte {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  width: 100%;
  max-width: 410px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  border-top: 4px solid var(--nk-accent);
}
.nk-connexion__logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}

/* -------------------------------------------------------------- Impression */
@media print {
  .nk-barre, .nk-barre-module, .nk-filtres, .nk-sans-impression {
    display: none !important;
  }
  .nk-page { padding: 0; }
  .nk-carte { border: none; box-shadow: none; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------- Mobile */
@media (max-width: 991.98px) {
  .nk-page { padding: 0.85rem; }
  .nk-tuile__valeur { font-size: 1.15rem; }
  .nk-barre { padding: 0.6rem 0.85rem; }
  .nk-barre__titre { font-size: 1rem; }
  /* La barre du module défile plutôt que de se replier sur trois lignes. */
  .nk-barre-module {
    padding: .4rem .85rem;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .nk-barre-module__liens { flex-wrap: nowrap; }
}

@media (min-width: 992px) {
  .nk-bouton-menu { display: none; }
}

/* Cartes de liste sur très petits écrans */
@media (max-width: 575.98px) {
  .nk-actions-page { width: 100%; }
  .nk-actions-page .btn { flex: 1 1 auto; }
}

/* ===========================================================================
   Surcharge des composants Bootstrap aux couleurs de la marque
   Bootstrap arrive avec son bleu #0d6efd : on le remplace partout par le bleu
   NK, et l'on ajoute un bouton orange pour les actions à mettre en avant.
   ======================================================================== */

/* --- Liens ---------------------------------------------------------------- */
a { color: var(--nk-primaire); }
a:hover { color: var(--nk-primaire-fonce); }

/* --- Action principale : bleu de marque, texte blanc (11,4:1) ------------- */
.btn-primary {
  --bs-btn-bg: var(--nk-primaire);
  --bs-btn-border-color: var(--nk-primaire);
  --bs-btn-hover-bg: var(--nk-primaire-fonce);
  --bs-btn-hover-border-color: var(--nk-primaire-fonce);
  --bs-btn-active-bg: var(--nk-primaire-fonce);
  --bs-btn-active-border-color: var(--nk-primaire-fonce);
  --bs-btn-disabled-bg: var(--nk-primaire);
  --bs-btn-disabled-border-color: var(--nk-primaire);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--nk-primaire);
  --bs-btn-border-color: var(--nk-primaire);
  --bs-btn-hover-bg: var(--nk-primaire);
  --bs-btn-hover-border-color: var(--nk-primaire);
  --bs-btn-active-bg: var(--nk-primaire-fonce);
  --bs-btn-active-border-color: var(--nk-primaire-fonce);
  font-weight: 600;
}

/* --- Action mise en avant : le bleu vif du logo ---------------------------
   Texte blanc : 5,5:1 sur ce bleu, là où l'ancien orange plafonnait à 2,9:1
   et imposait un libellé foncé. Le bouton se distingue du marine de la
   structure par sa clarté, pas par sa température.                          */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nk-accent);
  --bs-btn-border-color: var(--nk-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nk-accent-fonce);
  --bs-btn-hover-border-color: var(--nk-accent-fonce);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #094a72;
  --bs-btn-active-border-color: #094a72;
  --bs-btn-focus-shadow-rgb: 13, 110, 168;
  font-weight: 700;
}

/* --- Boutons neutres : bordure discrète, libellé bleu au survol ----------- */
.btn-light.border:hover {
  border-color: var(--nk-primaire) !important;
  color: var(--nk-primaire);
  background: var(--nk-primaire-voile);
}

/* --- Champs de saisie : focus bleu de marque ------------------------------ */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--nk-primaire-clair);
  box-shadow: 0 0 0 0.2rem rgba(26, 73, 121, 0.15);
}
.form-check-input:checked {
  background-color: var(--nk-primaire);
  border-color: var(--nk-primaire);
}

/* --- Pagination ---------------------------------------------------------- */
.page-link { color: var(--nk-primaire); }
.page-item.active .page-link {
  background-color: var(--nk-primaire);
  border-color: var(--nk-primaire);
}
.page-link:focus { box-shadow: 0 0 0 0.2rem rgba(26, 73, 121, 0.15); }

/* --- Onglets et messages ------------------------------------------------- */
.nav-tabs .nav-link.active { color: var(--nk-primaire); border-bottom-color: var(--nk-accent); }
.alert-success { --bs-alert-border-color: #b7e2c8; }
.alert-info {
  --bs-alert-color: var(--nk-primaire);
  --bs-alert-bg: var(--nk-primaire-voile);
  --bs-alert-border-color: var(--nk-primaire-voile-fort);
}

/* --- Menu déroulant du compte utilisateur -------------------------------- */
.dropdown-item:active { background-color: var(--nk-primaire); }

/* --- Titres de section dans les formulaires ------------------------------ */
.nk-formulaire legend { color: var(--nk-primaire); }

/* ===========================================================================
   Module documentaire : miniatures, aperçus et alertes d'échéance
   ======================================================================== */
.nk-miniature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 1px solid var(--nk-bordure);
  border-radius: 6px;
  background: var(--nk-fond);
  color: var(--nk-danger);
  font-size: 1.3rem;
  text-decoration: none;
}
.nk-miniature--pdf { color: var(--nk-danger); }
.nk-miniature:hover { border-color: var(--nk-primaire); }

.nk-apercu {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border: 1px solid var(--nk-bordure);
  border-radius: 8px;
  background: var(--nk-fond);
}
.nk-apercu-pdf {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--nk-bordure);
  border-radius: 8px;
}

/* Niveaux d'urgence des échéances documentaires */
.nk-echeance {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  font-size: 0.84rem;
  margin-bottom: 0.35rem;
  border-left: 3px solid transparent;
}
.nk-echeance--critique { background: #fdf0f1; border-left-color: var(--nk-danger); }
.nk-echeance--urgent { background: #fdf3e3; border-left-color: var(--nk-attention); }
.nk-echeance--prevenir { background: var(--nk-primaire-voile); border-left-color: var(--nk-primaire); }
.nk-echeance__cible { font-weight: 700; }
.nk-echeance__delai { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Filtres automatiques : retour visuel pendant le rechargement */
.nk-filtres--chargement { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* Lignes de dépôt des documents dans les fiches camion et chauffeur */
.nk-ligne-document {
  border: 1px solid var(--nk-bordure);
  border-left: 3px solid var(--nk-primaire);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--nk-fond);
}
.nk-ligne-document .form-label { color: var(--nk-texte-doux); font-weight: 600; }
.invalid-note { color: var(--nk-danger); font-size: 0.78rem; margin-top: 0.15rem; }

/* Galerie de photos d'un camion */
.nk-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.6rem;
}
.nk-galerie__element {
  margin: 0;
  border: 1px solid var(--nk-bordure);
  border-radius: 8px;
  overflow: hidden;
  background: var(--nk-fond);
}
.nk-galerie__element--principale {
  border-color: var(--nk-accent);
  box-shadow: 0 0 0 1px var(--nk-accent);
}
.nk-galerie__element img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
}
.nk-galerie__element figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.76rem;
}
.nk-galerie__legende {
  max-width: 100%;
  font-weight: 600;
  color: var(--nk-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Vignette de la liste des véhicules : la photo principale, réduite au format
   d'une pastille. Sans taille imposée, l'image s'affiche en pleine résolution
   et fait exploser la ligne du tableau. */
.nk-vignette-vehicule {
  width: 42px;
  height: 32px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--nk-bordure);
}
.nk-photo-principale {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--nk-rayon);
  border: 1px solid var(--nk-bordure);
}

/* ------------------------------------------------------- Lanceur d'applications
   Une grille de modules, à la manière d'un bureau : un carré blanc porte
   l'icône, le nom se lit dessous. Rien d'autre sur la tuile — ce qui se lit d'un
   trait ne doit pas demander de lecture. La phrase de présentation vit dans
   l'infobulle. */
.nk-lanceur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 2rem 1.25rem;
  justify-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem .5rem 3rem;
}

.nk-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  width: 100%;
  max-width: 132px;
  text-decoration: none;
  color: var(--nk-texte);
}

/* Le carré : blanc, comme une icône posée sur un bureau. La teinte vient de
   l'icône et d'un halo très pâle — un fond plein aurait fait, à seize modules,
   une mosaïque au lieu d'une grille. */
.nk-module__vignette {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: #fff;
  color: var(--nk-teinte, var(--nk-primaire));
  box-shadow: 0 1px 2px rgba(18, 49, 79, .06), 0 6px 16px rgba(18, 49, 79, .07);
  font-size: 2.5rem;
  line-height: 1;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s;
}

/* Le halo prend la teinte du module et n'apparaît qu'au survol : la couleur
   sert alors à confirmer le geste, pas à décorer le repos. */
.nk-module__vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity .18s;
}

.nk-module:hover .nk-module__vignette,
.nk-module:focus-visible .nk-module__vignette {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(18, 49, 79, .08), 0 14px 28px rgba(18, 49, 79, .16);
}

.nk-module:hover .nk-module__vignette::after { opacity: .07; }

.nk-module__nom {
  text-align: center;
  font-size: .94rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--nk-primaire-fonce);
}

.nk-module:hover .nk-module__nom { color: var(--nk-accent); }

/* Un module à venir se montre — il dit où va le produit — mais ne s'ouvre pas. */
.nk-module--a-venir { cursor: default; }

.nk-module--a-venir .nk-module__vignette {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--nk-bordure);
  color: var(--nk-acier);
}

.nk-module--a-venir .nk-module__nom { color: var(--nk-texte-doux); }

/* Le bouton du lanceur, dans la barre : même poids visuel que le bouton du
   menu, pour qu'aucun des deux ne passe pour l'accessoire de l'autre. */
.nk-barre__lanceur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--nk-primaire);
  text-decoration: none;
  font-size: 1.1rem;
  transition: background .15s, color .15s;
}

.nk-barre__lanceur:hover,
.nk-barre__lanceur:focus-visible {
  background: var(--nk-primaire-voile);
  color: var(--nk-accent);
}

/* Le fond du lanceur : un dégradé très pâle qui fait ressortir les carrés
   blancs. Rien d'autre — la page n'a qu'un travail, montrer seize modules. */
.nk-page--lanceur {
  background:
    radial-gradient(120% 80% at 15% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, var(--nk-primaire-voile) 0%, var(--nk-fond) 60%);
}

/* Bandeau de consultation d'un exercice clôturé.
 *
 * Permanent et bien visible : sans lui, on ne comprend pas pourquoi un
 * enregistrement est refusé, et on croit à une panne. */
.nk-bandeau-lecture-seule {
  background: #fdf0d5;
  border-bottom: 2px solid #b07a12;
  color: #6b4a0a;
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
}
.nk-bandeau-lecture-seule a {
  color: #6b4a0a;
  font-weight: 600;
  margin-left: 0.5rem;
}

/* « Concerne » du plan d'entretien : une liste déroulante, « Tous les
   ensembles » en tête, puis une case devant chaque ensemble « Tête / Remorque ». */
.nk-concerne__liste { max-height: 18rem; overflow-y: auto; }
.nk-concerne__liste .form-check {
  margin: 0;
  padding: .35rem .5rem .35rem 2.1rem;
  border-radius: .375rem;
}
.nk-concerne__liste .form-check:hover { background: var(--bs-tertiary-bg, #f1f3f5); }
.nk-concerne__liste .form-check-label { cursor: pointer; width: 100%; }
.nk-concerne__tous {
  font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0 !important;
  margin-bottom: .25rem !important;
}