/* Interface de BPMS : Bootstrap 6 (vendor/) servi par l'application, chargé AVANT ce fichier.
   Ici : la palette bleu nuit en surcouche (variables --bs-*), la barre de navigation et le strict
   nécessaire propre à l'application. Aucune couleur écrite en dur hors des variables ci-dessous. */

:root {
  /* Page, surfaces, texte, bordures */
  --bs-border-width: 2px;
  --bs-bg-body: light-dark(#f6f7f9, #12161d);
  --bs-bg-1: light-dark(#ffffff, #1a202b);
  --bs-fg-body: light-dark(#1c2330, #e6e9ef);
  --bs-fg-2: light-dark(#5b6578, #9aa3b2);
  --bs-border-body: light-dark(#e3e6ec, #2a3240);
  --bs-border-subtle: light-dark(#e3e6ec, #2a3240);

  /* Accent : bleu nuit */
  --bs-primary-base: light-dark(#2c4066, #8fa9d6);
  --bs-primary-bg: light-dark(#2c4066, #8fa9d6);
  --bs-primary-contrast: light-dark(#ffffff, #10151d);
  --bs-primary-fg: light-dark(#2c4066, #8fa9d6);
  --bs-primary-fg-emphasis: light-dark(#1c2f52, #dbe5f6);
  --bs-primary-border: light-dark(#2c4066, #8fa9d6);
  --bs-primary-focus-ring: light-dark(#6b86b8, #8fa9d6);
  --bs-primary-bg-subtle: light-dark(#c5d2ea, #263a60);

  /* États : vert, orange, rouge réservés aux états (avec un texte explicite) */
  --bs-success-base: light-dark(#1f7a4d, #5fcf97);
  --bs-success-bg: light-dark(#1f7a4d, #5fcf97);
  --bs-success-fg: light-dark(#1f7a4d, #5fcf97);
  --bs-success-fg-emphasis: light-dark(#14543a, #bdeed4);
  --bs-success-border: light-dark(#1f7a4d, #5fcf97);
  --bs-success-bg-subtle: light-dark(#e8f5ee, #163023);
  --bs-warning-base: light-dark(#b26a00, #f0b45a);
  --bs-warning-bg: light-dark(#b26a00, #f0b45a);
  --bs-warning-fg: light-dark(#8a5300, #f0b45a);
  --bs-warning-fg-emphasis: light-dark(#6b4000, #fbe2b3);
  --bs-warning-border: light-dark(#b26a00, #f0b45a);
  --bs-warning-bg-subtle: light-dark(#fdf3e1, #332811);
  --bs-danger-base: light-dark(#b3261e, #ff8a80);
  --bs-danger-bg: light-dark(#b3261e, #ff8a80);
  --bs-danger-fg: light-dark(#b3261e, #ff8a80);
  --bs-danger-fg-emphasis: light-dark(#7d1a14, #ffd2cf);
  --bs-danger-border: light-dark(#b3261e, #ff8a80);
  --bs-danger-bg-subtle: light-dark(#fbeae9, #3a1c1b);

  /* Survol franc des boutons pleins (celui de Bootstrap 6 est presque invisible) */
  --app-survol-bg: light-dark(#4a6aa5, #bccdea);
  --app-survol-fg: light-dark(#ffffff, #10151d);
}

/* Icônes (sprite Bootstrap Icons) : couleur héritée du texte */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

/* Boutons : survol net */
.btn-solid.theme-primary { --bs-btn-hover-bg: var(--app-survol-bg); --bs-btn-hover-color: var(--app-survol-fg); }
.btn-outline.theme-primary { --bs-btn-hover-bg: var(--bs-primary-bg-subtle); --bs-btn-hover-color: var(--bs-primary-fg-emphasis); }

/* ---- Barre de navigation ---- */
.marque-logo { height: 1.75rem; width: auto; max-width: 8rem; object-fit: contain; }
.marque-version { font-size: .7rem; font-weight: 400; color: var(--bs-fg-2); }
.apercu-marque { max-height: 4rem; max-width: 100%; background: var(--bs-bg-2); padding: .5rem; border-radius: .5rem; }
.drawer-fullscreen { --bs-drawer-inset: 0; border-radius: 0; border: 0; }
.navbar-nav .nav-link { border-radius: .75rem; display: inline-flex; align-items: center; gap: .4rem; }
.navbar-nav .nav-link:focus { outline: 0; }
/* Ni l'accent d'un clic ou d'un toucher (:active), ni celui d'un focus à la souris, restent affichés */
.navbar-nav .nav-link:not(.active-parent):active,
.navbar-nav .nav-link:not(.active-parent):focus:not(:focus-visible) { background-color: transparent; color: inherit; box-shadow: none; }
/* Focus clavier visible partout dans la barre */
.navbar-nav .nav-link:focus-visible, .navbar summary:focus-visible, .navbar .menu-item:focus-visible,
.actions .action:focus-visible, .navbar-brand:focus-visible { outline: 2px solid var(--bs-primary-focus-ring); outline-offset: 2px; }
/* Lien d'évitement : visible au focus, au-dessus de la barre */
.visually-hidden-focusable:focus { position: fixed; top: .5rem; left: .5rem; z-index: 1100; padding: .5rem 1rem; border-radius: .5rem;
  background-color: var(--bs-bg-1); color: var(--bs-fg-body); outline: 2px solid var(--bs-primary-focus-ring); }
/* La barre collante ne masque pas l'élément qui reçoit le focus (hauteur mesurée par navigation.js) */
html { scroll-padding-top: calc(var(--navbar-h) + .5rem); }
main:focus { outline: 0; }
/* Tactile : pas de halo au toucher, pas de sélection de texte ni de zoom au double toucher */
.navbar, .drawer { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.navbar .nav-link, .navbar summary, .navbar .menu-item, .actions .action { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Une seule pastille à la fois (survol ou menu ouvert), jamais pour la page courante, seulement au bureau */
@media (min-width: 1024px) {
  .navbar-nav .nav-link[aria-expanded="true"] { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-fg-emphasis); }
}
@media (min-width: 1024px) and (hover: hover) {
  .navbar-nav .nav-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-fg-emphasis); }
  /* Une autre entrée est survolée : le menu ouvert reste affiché, mais son entrée redevient neutre */
  .navbar-nav:has(.nav-link:hover) .nav-link[aria-expanded="true"]:not(:hover) { background-color: transparent; color: inherit; }
}
/* Menu parent de la page courante : texte accentué et filet, sans pastille. Un lien sans sous-menu
   n'a que aria-current : aucun marquage permanent. */
.navbar-nav .nav-link.active-parent {
  color: var(--bs-primary-fg-emphasis); box-shadow: inset 0 -2px 0 var(--bs-primary-fg-emphasis); border-radius: .75rem .75rem 0 0;
}
.nav-link .chev { flex: none; transition: transform .15s; width: .8em; height: .8em; }
.nav-link[aria-expanded="true"] .chev, details[open] > summary .chev { transform: rotate(180deg); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Menus riches */
/* Toutes les colonnes ont la même largeur d'un menu à l'autre ; la largeur du menu s'en déduit */
.menu-rich { --menu-col: 19rem; --bs-menu-min-width: 0; width: max-content; }
.menu-rich .menu-col { flex: 0 0 var(--menu-col); width: var(--menu-col); }
.navbar .menu { padding: 1rem; }
.menu-header { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; margin: .5rem 0 .625rem; }
.menu-header:first-child { margin-top: 0; }
.menu-item { align-items: center; gap: .85rem; border-radius: .5rem; }
/* Les descriptions passent à la ligne au lieu de dépasser (Bootstrap : nowrap et largeur du contenu) */
.menu-item { white-space: normal; }
.menu-item-content { min-width: 0; }
.menu-item + .menu-item { margin-top: .3rem; }
.menu-item.active { color: var(--bs-primary-fg-emphasis); background-color: var(--bs-primary-bg-subtle); }
.menu-deconnexion { margin: .625rem 0 0; padding-top: .625rem; border-top: var(--bs-border-width) solid var(--bs-border-body); }
.tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem;
  border-radius: .6rem; background-color: var(--bs-bg-2); color: var(--bs-fg-2); }

/* Actions : notifications, thème, compte */
.actions .action { position: relative; gap: .75rem; }
.actions .action .ico { width: 1.25rem; height: 1.25rem; }
#bascule-theme .ico { display: none; }
#bascule-theme[data-mode="auto"] .i-auto,
#bascule-theme[data-mode="light"] .i-light,
#bascule-theme[data-mode="dark"] .i-dark { display: inline-block; }
.actions .notif-badge { position: absolute; top: .15rem; right: calc(100% - .55rem); box-sizing: border-box; min-width: 1.05rem;
  height: 1.05rem; padding: 0 .25rem .125rem; display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; line-height: 1; }
@supports (text-box: trim-both cap alphabetic) { .actions .notif-badge { padding-bottom: 0; text-box: trim-both cap alphabetic; } }

@media (max-width: 1023.98px) {
  .drawer-footer.actions { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin-top: auto; padding: 1rem; border-top: var(--bs-border-width) solid var(--bs-border-body); }
  .drawer-footer.actions .action { width: 100%; justify-content: flex-start; padding: .75rem 1rem; }
  .drawer-footer.actions .notif-badge { position: static; margin-inline-start: auto; }
  .drawer-footer.actions .menu { position: static; width: 100%; }
  .navbar-nav .nav-link { font-size: 1.25rem; padding: 1rem .5rem; color: var(--bs-fg-body); }
  .navbar-nav .nav-link.active-parent { box-shadow: none; }
  .navbar-nav > .nav-item, .navbar-nav details, .navbar-nav summary { width: 100%; }
  .navbar-nav details > div { padding-inline: 1rem; }
  .navbar-nav details .menu-header { padding-top: 1rem; padding-bottom: 0; }
  .navbar-nav details .menu-item { padding-block: .6rem; }
  .navbar > .container > .actions { display: flex; align-items: center; gap: .25rem; }
  .navbar > .container > .actions .action-label { display: none; }
}

@media (min-width: 1024px) {
  .navbar > .container { position: relative; }
  .navbar-nav { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; }
  .navbar-nav > * { border-width: 0; }
  .actions { display: flex; flex-direction: row; align-items: center; gap: .25rem; padding: 0; border: 0; }
  .actions .action-label { display: none; }
}

/* Notifications ponctuelles (toasts) : en haut à gauche, sous la barre ; 5 s, figées au survol et au focus */
:root { --navbar-h: 4rem; }
.toast-stack { position: fixed; top: calc(var(--navbar-h, 4rem) + .75rem); left: .75rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; width: min(24rem, calc(100vw - 1.5rem)); }
.toast-stack .toast { position: relative; overflow: hidden; user-select: text; }
.toast-progress { position: absolute; inset: auto 0 0 0; height: 4px; background: currentColor; opacity: .5; transform-origin: left; animation: toast-progress 5s linear forwards; }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast:hover .toast-progress, .toast:focus-within .toast-progress { animation-play-state: paused; }

/* Mouvement réduit : pas de rotation du chevron ; la barre des toasts n'est pas créée (navigation.js) */
@media (prefers-reduced-motion: reduce) {
  .nav-link .chev { transition: none; }
  .toast-progress { display: none; }
}

/* Formulaires : largeur de lecture ; erreurs sans puces */
.form-field { max-width: 48rem; }
.errorlist { list-style: none; margin: 0; padding: 0; }

/* Pages de détail : listes de définitions en grille */
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; margin-bottom: 0; }
dt { color: var(--bs-fg-2); font-weight: 400; }
dd { margin: 0; }
@media (max-width: 575.98px) { dl { grid-template-columns: minmax(0, 1fr); } dt { margin-top: .5rem; } }
dd { overflow-wrap: anywhere; }
dd code { white-space: normal; word-break: break-all; }
.texte-multiligne { white-space: pre-line; }
.ligne-masquee > * { opacity: .6; }

/* Gabarits de page (skill interface-web) : en-tête, cartes, filtres, état vide, chiffres */
.page { padding-block: 2rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.page > * { min-width: 0; }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-title { font-size: 1.75rem; font-weight: 600; margin: 0; line-height: 1.2; }
.page-lead { margin: .35rem 0 0; color: var(--bs-fg-2); max-width: 65ch; }
.page-back { display: inline-block; margin-bottom: .5rem; color: var(--bs-fg-2); text-decoration: none; }
.page-back:hover { color: var(--bs-fg-body); text-decoration: underline; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.filters .form-field { max-width: none; }
.filters-grow { flex: 1 1 16rem; }
.filters-check { min-height: 2.5rem; align-content: center; }
.section-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.card .h5 { font-weight: 600; }
/* Les coins carrés des tableaux et des en-têtes restent dans les coins arrondis de la carte */
.card { overflow: hidden; }
/* Les libellés visually-hidden (position absolue) restent dans le conteneur qui défile */
.table-responsive { position: relative; overflow-y: hidden; }
.card > .table-responsive > .table, .card > .table { margin-bottom: 0; }
.empty { text-align: center; padding-block: 2rem; }
.empty p { margin: 0 0 .5rem; }
.stat-value { font-size: 2rem; font-weight: 600; line-height: 1; margin: 0 0 .35rem; }
.stat-label { margin: 0; color: var(--bs-fg-2); }
.card-stat { text-decoration: none; color: inherit; }
.card-stat:hover { border-color: var(--bs-primary-border); }
.table th, .table td { padding-block: .75rem; }
.table tbody th { font-weight: 500; }
.table thead th { font-weight: 600; color: var(--bs-fg-2); font-size: .85rem; }
.texte-lisible { max-width: 65ch; }
.apercu-signature { max-width: 20rem; padding: .5rem; border: var(--bs-border-width) solid var(--bs-border-body); border-radius: .5rem; background: white; }

/* Pages étroites (connexion, assistant) */
main.etroit { max-width: 50rem; }

/* Boîte de confirmation (navigation.js) */
.boite-confirmation { max-width: min(28rem, calc(100vw - 2rem)); padding: 1.25rem; border: var(--bs-border-width) solid var(--bs-border-body); border-radius: .75rem;
  background-color: var(--bs-bg-1); color: var(--bs-fg-body); }
.boite-confirmation::backdrop { background: color-mix(in srgb, var(--bs-fg-body) 45%, transparent); }

/* Boîte d'ajout rapide d'un élément (client…) depuis un formulaire (navigation.js) */
.boite-ajout { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem; border: var(--bs-border-width) solid var(--bs-border-body); border-radius: .75rem;
  background-color: var(--bs-bg-1); color: var(--bs-fg-body); overflow-y: auto; }
.boite-ajout::backdrop { background: color-mix(in srgb, var(--bs-fg-body) 45%, transparent); }

/* Champ grisé : son titre et son aide le sont aussi (sinon seul le contrôle paraît inactif) */
.form-field:has(:disabled) > label, .form-field:has(:disabled) .form-text, .form-field:has(:disabled) .helptext,
.form-field:has(:disabled) > .help-text { opacity: .5; }

/* Cases et boutons radio dans un simple <label> (filtres de liste) : alignés sur le texte, comme
   dans un .form-field */
label:has(> .check, > .radio, > .switch) { display: inline-flex; align-items: center; gap: .5rem; }

/* Chevron des listes déroulantes : en mode automatique, Bootstrap n'a pas de variante sombre
   (elle ne suit que data-bs-theme="dark"), le chevron noir disparaît alors sur fond sombre */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) select.form-control, :root:not([data-bs-theme="light"]) .form-control-caret {
    background-image: var(--bs-control-select-bg-dark);
  }
}

/* Mobile : un tableau devient une liste de fiches (une ligne = une fiche, chaque cellule précédée de son
   en-tête, posé par navigation.js dans data-label), au lieu d'un défilement horizontal qu'on ne devine pas. */
@media (max-width: 639.98px) {
  .table-responsive { overflow-x: visible; }
  .table-responsive > .table, .table-responsive > .table > tbody, .table-responsive > .table > tfoot,
  .table-responsive > .table > tbody > tr, .table-responsive > .table > tfoot > tr { display: block; }
  .table-responsive > .table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-responsive > .table > tbody > tr, .table-responsive > .table > tfoot > tr {
    padding: .5rem 1rem; border-bottom: var(--bs-border-width) solid var(--bs-border-body); }
  .table-responsive > .table > tbody > tr:last-child { border-bottom: 0; }
  .table-responsive > .table > tbody > tr > *, .table-responsive > .table > tfoot > tr > * {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem 0;
    border: 0; box-shadow: none; background: transparent; text-align: right; }
  .table-responsive > .table > tbody > tr > *::before { content: attr(data-label); flex: none; max-width: 45%;
    font-size: .8rem; font-weight: 600; text-align: left; color: var(--bs-fg-2); }
  /* La première cellule (le nom, le numéro) sert de titre de la fiche */
  .table-responsive > .table > tbody > tr > :first-child { justify-content: flex-start; text-align: left;
    font-weight: 600; font-size: 1.05rem; }
  .table-responsive > .table > tbody > tr > :first-child::before { display: none; }
  .table-responsive > .table > tbody > tr > :not([data-label])::before { display: none; }
}