/* QG+ — Suivi des demandes mail (Vague 22, 10/10/2026, demande du Général).
   « Complet » puis « Spam » dans la foulée : la 1re demande est en cours, la 2e attend son tour, et ça se voit.
   Bandeau au-dessus de la saisie (replié par défaut : une ligne + barre de progression segmentée),
   liste numérotée une fois déplié, et état « En cours » / « En attente » sur la carte du mail.
   Fichier séparé : qg-courrier.css n'est pas modifié. Jetons --crr-* (clair par défaut, NEXUS sombre). */

#hermes-signature#hermes-signature .qg-file {
  position: relative; overflow: hidden; margin: 0 16px 8px; border-radius: 14px;
  background: var(--crr-carte); border: 1px solid var(--crr-bord); box-shadow: var(--crr-ombre);
  color: var(--crr-texte); font-family: var(--crr-sans);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}
#hermes-signature#hermes-signature:not([data-theme="light"]) .qg-file {
  border-color: rgba(77, 255, 216, .24);
  background: linear-gradient(115deg, rgba(77, 255, 216, .07), rgba(2, 14, 12, .9) 62%);
  box-shadow: inset 0 0 22px rgba(77, 255, 216, .05), 0 10px 28px rgba(0, 0, 0, .38);
}
#hermes-signature#hermes-signature:not([data-theme="light"]) .qg-file[data-etat="attente"] { border-color: var(--crr-ambre-bord); }

/* En-tête : une seule ligne, tout le bandeau est un bouton */
#hermes-signature#hermes-signature .qg-file-tete {
  width: 100%; min-height: 50px; display: flex; align-items: center; gap: 11px; margin: 0; padding: 8px 8px 7px 12px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#hermes-signature#hermes-signature .qg-file-tete:focus-visible { outline: 2px solid var(--crr-accent); outline-offset: -2px; border-radius: 14px; }
#hermes-signature#hermes-signature .qg-file-ico {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--crr-accent-fond); color: var(--crr-accent); transition: background .3s ease, color .3s ease;
}
#hermes-signature#hermes-signature .qg-file[data-etat="attente"] .qg-file-ico { background: var(--crr-ambre-fond); color: var(--crr-ambre); }
#hermes-signature#hermes-signature .qg-file[data-etat="echec"] .qg-file-ico { background: rgba(255, 92, 92, .12); color: #ff6b6b; }
#hermes-signature#hermes-signature .qg-file-ico svg { width: 14px; height: 14px; stroke-width: 2.4; }
#hermes-signature#hermes-signature .qg-file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#hermes-signature#hermes-signature .qg-file-txt small {
  font: 700 9px/1 var(--crr-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crr-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#hermes-signature#hermes-signature .qg-file[data-etat="attente"] .qg-file-txt small { color: var(--crr-ambre); }
#hermes-signature#hermes-signature .qg-file-txt span {
  font: 600 13.5px/1.25 var(--crr-sans); color: var(--crr-titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#hermes-signature#hermes-signature .qg-file-chev {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--crr-doux);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), background .2s ease;
}
#hermes-signature#hermes-signature .qg-file-chev svg { width: 17px; height: 17px; stroke-width: 2.2; }
#hermes-signature#hermes-signature .qg-file.est-ouvert .qg-file-chev { transform: rotate(180deg); }
@media (hover: hover) { #hermes-signature#hermes-signature .qg-file-tete:hover .qg-file-chev { background: var(--crr-btn); } }

/* Anneau qui tourne : demande en cours */
#hermes-signature#hermes-signature .qg-file-anneau {
  display: block; width: 15px; height: 15px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--crr-accent) 22%, transparent); border-top-color: var(--crr-accent);
  animation: qg-file-tour .85s linear infinite;
}
@keyframes qg-file-tour { to { transform: rotate(1turn); } }

/* Barre segmentée : une case par demande (faite, en cours, en attente) */
#hermes-signature#hermes-signature .qg-file-barre { display: flex; gap: 3px; height: 4px; margin: 0 12px 10px; }
#hermes-signature#hermes-signature .qg-file-barre > i {
  flex: 1 1 0; position: relative; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--crr-accent) 15%, transparent);
}
#hermes-signature#hermes-signature .qg-file-barre > i[data-e="attente"] {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--crr-ambre) 30%, transparent) 0 4px, color-mix(in srgb, var(--crr-ambre) 10%, transparent) 4px 8px);
  background-size: 11.31px 11.31px; animation: qg-file-raye 1.1s linear infinite;
}
@keyframes qg-file-raye { to { background-position: 11.31px 0; } }
#hermes-signature#hermes-signature .qg-file-barre > i > b {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, #00c2ff, var(--crr-accent)); transition: width 1s cubic-bezier(.25, .7, .3, 1);
}
#hermes-signature#hermes-signature[data-theme="light"] .qg-file-barre > i > b { background: linear-gradient(90deg, #00b4d8, var(--crr-accent)); }
#hermes-signature#hermes-signature .qg-file-barre > i[data-e="encours"] > b::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: qg-file-reflet 1.5s ease-in-out infinite;
}
@keyframes qg-file-reflet { to { transform: translateX(100%); } }
#hermes-signature#hermes-signature .qg-file-barre > i[data-e="echec"] > b { background: #ff6b6b; }
#hermes-signature#hermes-signature:not([data-theme="light"]) .qg-file-barre > i[data-e="encours"] > b { box-shadow: 0 0 10px rgba(77, 255, 216, .55); }

/* Liste dépliée */
#hermes-signature#hermes-signature .qg-file-corps { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 0fr; transition: grid-template-rows .44s cubic-bezier(.2, .8, .2, 1); }
#hermes-signature#hermes-signature .qg-file.est-ouvert .qg-file-corps { grid-template-rows: 1fr; }
#hermes-signature#hermes-signature .qg-file-int { min-height: 0; min-width: 0; overflow: hidden; }
#hermes-signature#hermes-signature .qg-file-liste {
  list-style: none; margin: 0; padding: 0 8px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px;
  opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .44s cubic-bezier(.2, .8, .2, 1);
}
#hermes-signature#hermes-signature .qg-file.est-ouvert .qg-file-liste { opacity: 1; transform: none; transition-delay: .06s; }
#hermes-signature#hermes-signature .qg-file-liste > li {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; margin: 0; padding: 6px 8px 6px 10px; border-radius: 11px;
  background: var(--crr-btn); border: 1px solid var(--crr-btn-bord); transition: opacity .4s ease, border-color .3s ease;
}
#hermes-signature#hermes-signature .qg-file-liste > li[data-ident] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#hermes-signature#hermes-signature .qg-file-liste > li:focus-visible { outline: 2px solid var(--crr-accent); outline-offset: 1px; }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="encours"] { border-color: color-mix(in srgb, var(--crr-accent) 42%, transparent); background: var(--crr-accent-fond); }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="attente"] { border-color: var(--crr-ambre-bord); }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="fait"] { opacity: .6; }
#hermes-signature#hermes-signature .qg-file-num {
  flex: none; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%;
  font: 700 10px/1 var(--crr-mono); color: var(--crr-doux); border: 1px solid var(--crr-btn-bord);
}
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="encours"] .qg-file-num { color: var(--crr-accent); border-color: color-mix(in srgb, var(--crr-accent) 50%, transparent); }
#hermes-signature#hermes-signature .qg-file-i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--crr-accent-fond); color: var(--crr-accent); }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="attente"] .qg-file-i { background: var(--crr-ambre-fond); color: var(--crr-ambre); }
#hermes-signature#hermes-signature .qg-file-i svg { width: 13px; height: 13px; stroke-width: 2.3; }
#hermes-signature#hermes-signature .qg-file-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#hermes-signature#hermes-signature .qg-file-t b { font: 600 13px/1.25 var(--crr-sans); color: var(--crr-titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hermes-signature#hermes-signature .qg-file-t small { font: 500 11px/1.25 var(--crr-sans); color: var(--crr-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hermes-signature#hermes-signature .qg-file-s {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px;
  font: 700 9px/1 var(--crr-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
#hermes-signature#hermes-signature .qg-file-s svg { width: 11px; height: 11px; stroke-width: 2.6; }
#hermes-signature#hermes-signature .qg-file-s .qg-file-anneau { width: 11px; height: 11px; border-width: 1.6px; }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="encours"] .qg-file-s { color: var(--crr-accent); background: color-mix(in srgb, var(--crr-accent) 14%, transparent); }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="attente"] .qg-file-s { color: var(--crr-ambre); background: var(--crr-ambre-fond); }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="fait"] .qg-file-s { color: var(--crr-accent); background: transparent; padding-right: 2px; }
#hermes-signature#hermes-signature .qg-file-liste > li[data-e="echec"] .qg-file-s { color: #ff6b6b; background: rgba(255, 92, 92, .12); }

/* Carte du mail : « En cours » (barre) ou « En attente » au lieu de disparaître sans nouvelles */
#hermes-signature#hermes-signature .qg-crr-ligne--encours, #hermes-signature#hermes-signature .qg-crr-ligne--attente { position: relative; overflow: hidden; }
#hermes-signature#hermes-signature .qg-crr-ligne--encours { border-color: color-mix(in srgb, var(--crr-accent) 45%, transparent); }
#hermes-signature#hermes-signature .qg-crr-ligne--encours .qg-crr-ltxt b { color: var(--crr-accent); }
#hermes-signature#hermes-signature .qg-crr-ligne--encours .qg-crr-ico .qg-file-anneau { width: 12px; height: 12px; border-width: 1.8px; }
#hermes-signature#hermes-signature .qg-crr-ligne--attente { border-color: var(--crr-ambre-bord); }
#hermes-signature#hermes-signature .qg-crr-ligne--attente .qg-crr-ico { background: var(--crr-ambre-fond); color: var(--crr-ambre); }
#hermes-signature#hermes-signature .qg-crr-ligne--attente .qg-crr-ltxt b { color: var(--crr-ambre); }
#hermes-signature#hermes-signature :is(.qg-crr-ligne--encours, .qg-crr-ligne--attente) .qg-crr-ltxt b { animation: qg-file-fondu .4s ease both; }
@keyframes qg-file-fondu { from { opacity: 0; } to { opacity: 1; } }
#hermes-signature#hermes-signature .qg-crr-lbarre { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: color-mix(in srgb, var(--crr-accent) 14%, transparent); }
#hermes-signature#hermes-signature .qg-crr-lbarre > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; overflow: hidden;
  background: linear-gradient(90deg, #00c2ff, var(--crr-accent)); transition: width 1s cubic-bezier(.25, .7, .3, 1);
}
#hermes-signature#hermes-signature .qg-crr-lbarre > i::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: qg-file-reflet 1.5s ease-in-out infinite;
}

/* Les messages éphémères passent au-dessus du bandeau au lieu de le cacher */
#hermes-signature#hermes-signature#hermes-signature:has(.qg-file) .hs-toast { bottom: calc(66px + var(--qg-file-h, 72px)) !important; transition: bottom .42s cubic-bezier(.2, .8, .2, 1); }

@media (max-width: 600px) {
  #hermes-signature#hermes-signature .qg-file { margin: 0 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #hermes-signature#hermes-signature :is(.qg-file, .qg-file *, .qg-crr-lbarre, .qg-crr-lbarre *, .qg-file-anneau) { animation: none !important; transition: none !important; }
}