/* QG+ · Mode clair « verre liquide » (07/10/2026) — retour du Général : « en haut le blanc est bizarre,
   en bas le menu est moche ».
   Haut : plus de bandeau blanc ni de trait, le fond coloré monte jusqu'à l'heure ; pastille d'état et
   boutons en verre, avatar en dégradé. Bas : dock flottant en verre liquide, icônes sobres, onglet actif
   coloré dans une capsule qui glisse et prend la couleur de l'onglet.
   Chargé après qg-couleur.css (triple #hermes-signature pour passer devant sans le modifier).
   Retour arrière : retirer la ligne qg-clair.css de index.html. */
@property --qg-tab { syntax: '<color>'; inherits: true; initial-value: #34c759; }
@property --qg-tab-ink { syntax: '<color>'; inherits: true; initial-value: #248a3d; }

/* 1. Haut de l'écran -------------------------------------------------------------------------------- */
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-top {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-top .nx-ticker {
  padding: 7px 13px 7px 11px; border-radius: 999px; color: rgba(28, 28, 30, .74) !important;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 14px rgba(120, 60, 30, .10);
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-top .nx-ticker .nx-led {
  background: #30d158 !important; box-shadow: 0 0 0 3px rgba(48, 209, 88, .18) !important;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-toptools .hs-themebutton {
  border-radius: 999px !important; border: 0 !important;   /* rond sur mobile (40 × 40), pilule « Paramètres » sur ordinateur */
  color: #1c1c1e !important; background: rgba(255, 255, 255, .52) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .82), inset 0 1px 0 #ffffff, 0 4px 14px rgba(120, 60, 30, .12) !important;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-toptools .hs-user {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 0 !important;
  color: #ffffff !important; font-weight: 700 !important; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
  background: linear-gradient(140deg, #ff9f0a 0%, #ff375f 52%, #bf5af2 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 16px rgba(255, 55, 95, .28) !important;
}
/* Bouton loupe de « Échanges » : même verre rond que les boutons du haut */
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-rech-btn {
  border-radius: 50% !important; border: 0 !important; color: #1c1c1e !important; background: rgba(255, 255, 255, .52) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .82), inset 0 1px 0 #ffffff, 0 4px 14px rgba(120, 60, 30, .12) !important;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-rech-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, .35), inset 0 1px 0 #ffffff, 0 6px 18px rgba(10, 132, 255, .18) !important;
}
/* Grand écran : menu du haut en capsules de verre, barre du bas sans trait */
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-nav button { border-radius: 999px !important; }
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-nav button[aria-current=page] {
  background: rgba(255, 255, 255, .62) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .86), inset 0 1px 0 #ffffff, 0 6px 18px rgba(120, 60, 30, .12) !important;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .hs-bottom {
  background: rgba(255, 255, 255, .28) !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

/* 2. Dock du bas : verre liquide flottant ------------------------------------------------------------ */
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav {
  --qg-tab: #34c759; --qg-tab-ink: #248a3d;
  transition: --qg-tab .45s ease, --qg-tab-ink .45s ease;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav:has(> button[data-page="tasks"][aria-current=page]) { --qg-tab: #ff9500; --qg-tab-ink: #c45200; }
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav:has(> button[data-page="agents"][aria-current=page]) { --qg-tab: #af52de; --qg-tab-ink: #8944ab; }
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav:has(> button[data-page="drive"][aria-current=page]) { --qg-tab: #0a84ff; --qg-tab-ink: #0062cc; }
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav:has(> button[data-page="activity"][aria-current=page]) { --qg-tab: #ff2d55; --qg-tab-ink: #d1103f; }
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav::before {
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important; backdrop-filter: blur(28px) saturate(210%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .74), inset 0 1.5px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(255, 255, 255, .32),
    0 18px 40px -10px rgba(76, 48, 140, .30), 0 4px 12px rgba(76, 48, 140, .10) !important;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav > button { color: rgba(60, 60, 67, .7) !important; }
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav > button svg {
  color: rgba(60, 60, 67, .6) !important; transition: color .3s ease;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav > button span {
  font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: .01em !important; text-transform: none !important;
  transition: color .3s ease;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav > button[aria-current=page],
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav > button[aria-current=page] span { color: var(--qg-tab-ink) !important; font-weight: 700 !important; }
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav > button[aria-current=page] svg { color: var(--qg-tab) !important; }
/* Capsule de l'onglet actif (elle glisse d'un onglet à l'autre) */
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .nx-dockbeam::before {
  left: 7% !important; right: 7% !important; top: 7px !important; bottom: 7px !important; border-radius: 20px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qg-tab) 22%, rgba(255, 255, 255, .86)), color-mix(in srgb, var(--qg-tab) 13%, rgba(255, 255, 255, .64))) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .92), inset 0 1px 0 #ffffff, 0 6px 16px color-mix(in srgb, var(--qg-tab) 26%, transparent) !important;
}
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .nx-dockbeam::after { display: none !important; }
/* Pastille des nouveaux messages : rouge, comme sur l'iPhone */
#hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav .qg-nonlu-onglet {
  top: 5px; background: #ff3b30 !important; color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .96), 0 3px 8px rgba(255, 59, 48, .35) !important;
}
@media (prefers-reduced-motion: reduce) {
  #hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav,
  #hermes-signature#hermes-signature#hermes-signature[data-theme="light"] .qg-mobile-nav > button :is(svg, span) { transition: none; }
}