/* Volny — Fenêtres : en-tête, croix de fermeture, pied. */
/* Fenêtres */
/* croix de fermeture, en haut à droite de chaque fenêtre */
.fermer-x{position:absolute;top:14px;right:14px;z-index:5;width:var(--h-petit);height:var(--h-petit);padding:0;border:1px solid var(--trait);border-radius:var(--r-petit);
  background:var(--surface);color:var(--doux);cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.fermer-x:hover{background:var(--surface-2);color:var(--encre)}
/* à l'ouverture, le navigateur place le focus sur la croix : pas de cadre au doigt ou à la souris,
   seulement au clavier (Tab) */
.fermer-x:focus:not(:focus-visible){outline:none}
@media (hover:none){.fermer-x:focus{outline:none}}
.fermer-x svg{width:16px;height:16px;fill:currentColor}
/* l'en-tête laisse la place à la croix */
.fenetre>.formulaire>:first-child,.fenetre>form>:first-child{padding-right:44px}
.fenetre{border:0;padding:0;border-radius:22px;background:var(--surface);color:var(--encre);width:min(440px,calc(100vw - 32px));
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.fenetre-large{width:min(620px,calc(100vw - 32px))}
.fenetre-xl{width:min(880px,calc(100vw - 32px))}
.fenetre::backdrop{background:rgba(18,17,22,.45);backdrop-filter:blur(3px)}
.fenetre>.formulaire,.fenetre>form{padding:26px}
.fenetre h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.fenetre-intro{margin:-6px 0 0;color:var(--doux);font-size:14px}
.fenetre-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
ul.acces{list-style:none;margin:0;padding:0;border:1px solid var(--trait);border-radius:14px;overflow:hidden}
.acces li{display:flex;align-items:center;gap:12px;padding:12px 14px;flex-wrap:wrap}
.acces li+li{border-top:1px solid var(--trait)}
.acces .avatar{width:34px;height:34px;font-size:14px}
.acces-nom{font-weight:700;min-width:90px}
.acces-etat{font-size:13px;font-weight:600}
.acces-etat.ok{color:var(--vert)}
.acces-etat.attente{color:var(--ambre)}
.acces-actions{margin-left:auto;display:flex;gap:6px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0));transform:translateX(-50%);z-index:50;
  background:var(--encre);color:var(--surface);padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.4);animation:monte .25s ease-out}
.toast.erreur{background:var(--rouge);color:#fff}
@keyframes monte{from{transform:translate(-50%,10px);opacity:0}}

/* Journal complet : grande fenêtre, filtres sur une ligne, tableau qui défile, pied fixe */
.fenetre-journal{width:min(1280px,calc(100vw - 32px));height:min(900px,calc(100vh - 32px))}
.fenetre-journal>.formulaire{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
.journal-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.journal-filtres{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.journal-champ{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--pale);min-width:0}
.journal-champ select,.journal-champ input,.journal-dates input{height:var(--h-petit);padding:0 10px;border:1px solid var(--trait);border-radius:var(--r-petit);
  background:var(--surface);color:var(--encre);font:inherit;font-size:13.5px;font-weight:500;max-width:220px}
.journal-champ select:disabled{opacity:.5}
.journal-recherche{flex:1;min-width:180px}
.journal-recherche input{max-width:none;width:100%;box-sizing:border-box}
.journal-dates{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--doux)}
.journal-dates label{display:inline-flex;gap:6px;align-items:center}
.journal-tuiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.journal-tuiles .tuile{padding:10px 14px;box-shadow:none}
.journal-tuiles .tuile-val{font-size:20px}
.journal-table-zone{flex:1;min-height:0;overflow:auto;border:1px solid var(--trait);border-radius:14px}
#dlg-journal[aria-busy="true"] .journal-table-zone{opacity:.6;transition:opacity .2s .15s}
.journal-table{width:100%;border-collapse:collapse;font-size:13.5px}
.journal-table thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;font-size:12px;font-weight:600;color:var(--pale);
  padding:8px 12px;border-bottom:1px solid var(--trait);white-space:nowrap}
.journal-table th button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.journal-table th button:hover{color:var(--encre)}
.journal-table th[aria-sort] button{color:var(--encre)}
.journal-table th[aria-sort="descending"] button::after{content:" ↓"}
.journal-table th[aria-sort="ascending"] button::after{content:" ↑"}
.journal-table td{padding:9px 12px;border-bottom:1px solid var(--trait);vertical-align:top;font-variant-numeric:tabular-nums}
.journal-table th.num,.journal-table td.num{text-align:right}
.journal-table tbody tr[data-detail-ligne]{cursor:pointer}
.journal-table tbody tr[data-detail-ligne]:hover,.journal-table tbody tr[data-detail-ligne]:focus-visible{background:var(--surface-2);outline:none}
.journal-table td small{display:block;font-size:12px;color:var(--pale);margin-top:2px}
.journal-table td.vide,.journal-table td.alerte{text-align:center;padding:30px 12px;color:var(--doux)}
.journal-date{white-space:nowrap}
.journal-client .societe{margin-left:6px}
.journal-sens{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--doux);white-space:nowrap}
.journal-sens.sortant{background:var(--vert-pale);color:var(--vert)}
.journal-sens.groupe{background:var(--ambre-pale);color:var(--ambre)}
.journal-resultat{display:flex;align-items:flex-start;gap:8px;min-width:130px}
.journal-resultat .ico{flex:none;width:24px;height:24px;border-radius:8px}
.journal-resultat .ico svg{width:13px;height:13px}
.journal-resultat .a-rappeler{color:var(--rouge);font-weight:600}
.journal-table td small.journal-num,.journal-date{white-space:nowrap}
.journal-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:260px;color:var(--doux)}
.journal-pied{align-items:center;flex-wrap:wrap}
.journal-pages{display:flex;align-items:center;gap:10px}
@media (max-width:900px){.journal-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}.journal-champ select{max-width:160px}}
.fenetre-journal .segments{max-width:100%;overflow-x:auto}
.fenetre-journal .segments button{white-space:nowrap}
@media (max-width:640px){
  /* téléphone : la fenêtre entière défile, le tableau garde sa hauteur et défile en largeur */
  .fenetre-journal{width:100vw;height:100dvh;overflow-y:auto}
  .fenetre-journal>.formulaire{height:auto}
  .journal-table-zone{flex:none;overflow:auto hidden}
  .journal-champ{flex:1 1 140px}.journal-champ select{max-width:none;width:100%}
  .journal-tuiles{gap:8px}.journal-tuiles .tuile{padding:8px 12px}.journal-tuiles .tuile-val{font-size:18px}
  .journal-table{min-width:1000px}
}