/* ===================================================================
   GBU Connect — couche de finition
   Ce fichier ne change AUCUNE structure : il ne fait que rendre vivant ce
   qui existe. Chaque règle répond à un défaut constaté, pas à un effet.
   Chargé après app.css, il ne surcharge que ce qu'il doit.
   =================================================================== */

/* --- Le mouvement, avec mesure -------------------------------------------
   La navigation portait « transition:none » : le survol basculait d'un coup,
   ce qui donne à toute l'interface un air de maquette. 140 ms suffisent à
   rendre le geste sensible sans le ralentir. */
.nav-item,
.btn,
.card,
.tag,
.delivery-row,
.rail-row,
.raccourci,
.input,
select,
textarea {
  transition: background-color .14s ease, border-color .14s ease,
              color .14s ease, box-shadow .18s ease, transform .14s ease;
}

/* --- Profondeur : les cartes réagissent au survol quand elles mènent
   quelque part. Une carte inerte et une carte cliquable se ressemblaient. */
a.card:hover,
.raccourci:hover {
  box-shadow: 0 14px 34px rgba(42, 33, 27, .13);
  transform: translateY(-1px);
}
a.card:active,
.raccourci:active { transform: translateY(0); }

.delivery-row { position: relative; }
a.delivery-row::before,
.rail-row::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px; background: var(--primary);
  opacity: 0; transition: opacity .14s ease;
}
a.delivery-row:hover::before,
.rail-row:hover::before { opacity: 1; }
a.delivery-row:hover,
.rail-row:hover { background: var(--panel2); }

/* --- Boutons : un appui doit s'entendre du doigt. */
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 6px 16px rgba(232, 115, 42, .22); }
.btn-primary:hover { box-shadow: 0 9px 22px rgba(232, 115, 42, .30); }

/* --- Saisie : le champ actif doit être évident, y compris au clavier.
   Sans anneau de focus visible, on ne sait plus où l'on écrit. */
.input:focus,
select:focus,
textarea:focus,
input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232, 115, 42, .15);
}
a:focus-visible,
button:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Navigation : la page courante se repère du coin de l'œil. */
.nav-item.active {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(232, 115, 42, .12);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -16px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--primary);
}

/* --- Entrée de page : une apparition douce, une seule fois, jamais une
   animation qui se rejoue et fatigue. */
@keyframes gbuMonte {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.col-main > .card,
.col-main > .section-title,
.bilan {
  animation: gbuMonte .34s cubic-bezier(.22, .9, .3, 1) both;
}
.col-main > .card:nth-of-type(2) { animation-delay: .04s; }
.col-main > .card:nth-of-type(3) { animation-delay: .08s; }

/* --- Chiffres : ils doivent s'aligner en colonne, toujours. */
.chiffre .n,
.bilan .n,
td.num,
.reel,
.poste + div {
  font-variant-numeric: tabular-nums;
}

/* --- Titres : éviter les veuves sur les titres courts. */
.serif,
.section-title,
h1, h2, h3 { text-wrap: balance; }

/* --- Texte long : une lecture confortable ne dépasse pas ~70 signes. */
.faint p, .muted p { max-width: 66ch; }

/* --- Sélection : la couleur du mouvement, pas le bleu du système. */
::selection { background: rgba(232, 115, 42, .22); color: var(--text); }

/* --- Barres de défilement : discrètes, dans la palette. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 6px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #DCCFBD; }

/* --- Étiquettes : un peu de tenue. */
.tag { letter-spacing: .01em; }
.tag-ok { box-shadow: inset 0 0 0 1px rgba(47, 125, 82, .16); }

/* --- Écrans vides : ils doivent inviter, pas constater. */
.vide { padding: 46px 28px; }
.vide .ico { font-size: 40px; opacity: .55; margin-bottom: 6px; }
.vide .titre { font-family: var(--display); font-size: 19px; margin-bottom: 6px; }
.vide .txt { max-width: 54ch; margin: 0 auto; line-height: 1.7; }

/* --- Bandeaux d'information : moins criards, mieux lisibles. */
.bandeau-info {
  border-radius: 13px; line-height: 1.6;
  box-shadow: 0 2px 10px rgba(42, 33, 27, .04);
}

/* --- Impression : les procès-verbaux et budgets se sortent sur papier.
   Sans cette règle, on imprimait la navigation et les boutons. */
@media print {
  .sidebar, .barre-mobile, .salle-bar, .btn, form, .rail { display: none !important; }
  .app { display: block; }
  body { background: #fff; font-size: 11pt; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* --- Respect du réglage système : certaines personnes désactivent les
   animations pour raison médicale. On ne discute pas ce choix. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Icônes des raccourcis : passées du pictogramme système au trait
   dessiné. Un cercle doux les pose, sans les rendre criards. */
.raccourci .ic {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--primary);
  transition: background-color .14s ease, color .14s ease;
}
.raccourci .ic svg { width: 21px; height: 21px; }
.raccourci:hover .ic { background: var(--primary); color: #fff; }

/* --- Icônes des écrans vides : le pictogramme brut faisait bricolage.
   Posé dans un disque, désaturé, il devient un ornement assumé. */
.vide .ico {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); font-size: 27px; opacity: 1;
  filter: saturate(.55);
}

/* --- « Ce qui vous attend » : la pastille de gauche, même traitement. */
.attente .ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); font-size: 18px; filter: saturate(.6);
}
.attente.urgent .ic { background: #FBEAE7; filter: none; }
.attente.calme .ic { background: var(--ok-bg); }