/* QG+ — Appui sur les boutons des cartes mail (08/10/2026, demande du Général :
   « quand j'appuie sur le bouton, j'aimerais que ce soit plus esthétique »).
   Avant : le bouton rétrécissait à peine, puis toute la rangée devenait grise d'un coup et le bouton touché clignotait.
   Maintenant : le bouton s'enfonce sous le doigt (halo à l'endroit touché) ; au relâcher il rebondit et son icône
   s'anime (la flèche repart, l'horloge tourne, la coche se dessine…) ; pendant l'envoi il se remplit depuis le point
   touché, un reflet le traverse (plus de clignotement) et les autres boutons s'effacent en douceur.
   Échec de l'envoi : il secoue la tête. Clair et sombre. qg-courrier.css/js ne sont pas modifiés.
   Retour arrière : retirer qg-appui.css et qg-appui.js d'index.html. */

#hermes-signature#hermes-signature {
  --app-ressort: cubic-bezier(.34, 1.56, .64, 1);
  --app-doux: cubic-bezier(.2, .8, .2, 1);
  --app-appui: rgba(118, 118, 128, .17);
  --app-halo: rgba(0, 0, 0, .09);
  --app-onde: rgba(0, 0, 0, .08);
  --app-plein: #0b0d0e; --app-plein-bord: #0b0d0e; --app-plein-txt: #ffffff;
  --app-plein-ombre: 0 6px 16px rgba(11, 13, 14, .22);
  --app-reflet: rgba(255, 255, 255, .30);
  --app-erreur: rgba(255, 59, 48, .12); --app-erreur-bord: rgba(255, 59, 48, .55);
  --app-prim-appui: #2c2c2e; --app-prim-halo: rgba(255, 255, 255, .20);
}
#hermes-signature#hermes-signature:not([data-theme="light"]) {
  --app-appui: rgba(77, 255, 216, .11);
  --app-halo: rgba(77, 255, 216, .24);
  --app-onde: rgba(77, 255, 216, .22);
  --app-plein: rgba(77, 255, 216, .22); --app-plein-bord: rgba(77, 255, 216, .9); --app-plein-txt: #f0fffb;
  --app-plein-ombre: 0 0 18px rgba(77, 255, 216, .35), inset 0 0 14px rgba(77, 255, 216, .14);
  --app-reflet: rgba(200, 255, 243, .30);
  --app-erreur: rgba(255, 90, 80, .16); --app-erreur-bord: rgba(255, 120, 110, .7);
  --app-prim-appui: rgba(77, 255, 216, .24); --app-prim-halo: rgba(77, 255, 216, .30);
}

/* Base : le bouton porte son halo et son onde ; ressort au retour */
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button {
  position: relative; isolation: isolate; overflow: hidden; touch-action: manipulation;
  transition: transform .55s var(--app-ressort), background-color .22s ease, border-color .22s ease, color .22s ease,
    opacity .3s ease, filter .3s ease, box-shadow .3s ease;
}
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button > * { position: relative; z-index: 1; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button::before,
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button::after {
  content: ""; position: absolute; z-index: 0; left: var(--qx, 50%); top: var(--qy, 50%); pointer-events: none;
  width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; opacity: 0; transform: scale(0);
}
/* Halo sous le doigt pendant l'appui */
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button::before {
  background: radial-gradient(circle, var(--app-halo) 0%, transparent 62%);
  transition: transform .5s var(--app-doux), opacity .35s ease;
}
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.est-principal::before {
  background: radial-gradient(circle, var(--app-prim-halo) 0%, transparent 62%);
}

/* 1. Appui : il s'enfonce */
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-appui:not(:disabled) {
  transform: scale(.93); background-color: var(--app-appui);
  transition: transform .14s var(--app-doux), background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.est-principal.qg-appui:not(:disabled) { background-color: var(--app-prim-appui); }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-appui:not(:disabled) svg { transform: scale(.88); }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button svg { transition: transform .45s var(--app-ressort); }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-appui::before { opacity: 1; transform: scale(1); }

/* 2. Relâcher : rebond + onde (le remplissage, s'il y a envoi, part du point touché) */
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-rebond { animation: qg-app-rebond .6s var(--app-ressort); }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-onde::after {
  background: var(--app-onde); animation: qg-app-onde .6s var(--app-doux) both;
}
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.est-envoi.qg-onde::after {
  background: var(--app-plein); animation: qg-app-remplir .42s var(--app-doux) both;
}
@keyframes qg-app-rebond { 0% { transform: scale(.93); } 42% { transform: scale(1.06); } 72% { transform: scale(.985); } 100% { transform: scale(1); } }
@keyframes qg-app-onde { 0% { opacity: 1; transform: scale(.06); } 100% { opacity: 0; transform: scale(1); } }
@keyframes qg-app-remplir { 0% { opacity: 1; transform: scale(.06); } 100% { opacity: 1; transform: scale(1.05); } }

/* 3. Icônes vivantes */
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim svg path,
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim svg circle { transform-box: view-box; transform-origin: 50% 50%; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="rep"] svg { animation: qg-app-rep .62s var(--app-ressort) both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="rel"] svg path { animation: qg-app-tour .75s var(--app-doux) both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="tsk"] svg path:nth-of-type(-n+2) { stroke-dasharray: 9; animation: qg-app-trait9 .38s ease-out both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="tsk"] svg path:nth-of-type(1) { animation-delay: .14s; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="spam"] svg { animation: qg-app-non .55s ease both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="spam"] svg path { stroke-dasharray: 18; animation: qg-app-trait18 .36s .06s ease-out both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="full"] svg { animation: qg-app-feuille .6s var(--app-ressort) both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="full"] svg path:nth-of-type(2) { stroke-dasharray: 24; animation: qg-app-trait24 .5s .08s ease-out both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="rien"] svg { animation: qg-app-pop .55s var(--app-ressort) both; }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-anim[data-crr-action="rien"] svg path { stroke-dasharray: 24; animation: qg-app-trait24 .4s .04s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes qg-app-rep { 0% { transform: none; } 38% { transform: translateX(-5px) rotate(-16deg); } 100% { transform: none; } }
@keyframes qg-app-tour { from { transform: rotate(-360deg); } to { transform: rotate(0); } }
@keyframes qg-app-non { 0%, 100% { transform: none; } 20% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } }
@keyframes qg-app-feuille { 0% { transform: none; } 40% { transform: translateY(-4px) rotate(-5deg); } 100% { transform: none; } }
@keyframes qg-app-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes qg-app-trait9 { from { stroke-dashoffset: 9; } to { stroke-dashoffset: 0; } }
@keyframes qg-app-trait18 { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
@keyframes qg-app-trait24 { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* 4. Envoi : les autres s'effacent en douceur ; le bouton choisi est plein, un reflet le traverse */
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button:disabled:not(.est-envoi) { opacity: .3; transform: scale(.95); filter: saturate(.3); }
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.est-envoi {
  opacity: 1; filter: none; transform: none;
  background-color: var(--app-plein); border-color: var(--app-plein-bord); color: var(--app-plein-txt); box-shadow: var(--app-plein-ombre);
  background-image: linear-gradient(105deg, transparent 38%, var(--app-reflet) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 100% 0;
  animation: qg-app-rebond .6s var(--app-ressort), qg-app-reflet 1.5s .45s ease-in-out infinite;
  transition: background-color .2s ease .3s, border-color .2s ease .3s, color .14s ease .03s, box-shadow .35s ease .25s;
}
@keyframes qg-app-reflet { 0% { background-position: 100% 0; } 65%, 100% { background-position: 0% 0; } }

/* 5. Échec : il secoue la tête */
#hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button.qg-erreur {
  animation: qg-app-secoue .5s ease both; background-color: var(--app-erreur); border-color: var(--app-erreur-bord);
}
@keyframes qg-app-secoue { 0%, 100% { transform: none; } 16% { transform: translateX(-6px); } 34% { transform: translateX(5px); } 52% { transform: translateX(-4px); } 70% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  #hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button,
  #hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button *,
  #hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button::before,
  #hermes-signature#hermes-signature#hermes-signature .qg-crr-boutons button::after { animation: none !important; transform: none !important; }
}