/* Effets des boutons — retour visuel au survol, au clic et au clavier.
   Un seul fichier pour tout le tableau de bord. Règles :
   - on n'anime que transform et opacity (rien ne bouge dans la page) ;
   - pas de halo ni de dégradé : un balayage de couleur à bord net, un soulèvement d'un pixel, un enfoncement ;
   - les effets de survol n'existent que sur un appareil avec souris (@media (hover: hover)) ;
   - « mouvement réduit » : la couleur change, plus rien ne bouge. */

:root {
  --fx-ease: cubic-bezier(.22, .8, .3, 1);
  --fx-fast: .16s;
  --fx-slow: .42s;
}

/* Base commune : un contexte d'empilement propre pour que les calques d'effet restent sous le texte. */
:where(.btn, .head-btn, .quick-btn, .choice-btn, .icon-btn, .tool-btn, .chip, .app-btn) { position: relative; }
.btn, .head-btn, .quick-btn, .choice-btn, .icon-btn, .tool-btn, .chip, .app-btn {
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: translate var(--fx-fast) var(--fx-ease), scale var(--fx-fast) var(--fx-ease), opacity var(--fx-fast) ease,
    background-color var(--fx-fast) ease, border-color var(--fx-fast) ease, color var(--fx-fast) ease;
}
/* Les puces et les petits boutons d'icône gardent leur débordement visible (pastille, info-bulle). */
.icon-btn, .tool-btn { overflow: visible; }

/* Enfoncement : à tout appareil, c'est le retour du clic ou du toucher. */
.btn:active:not(:disabled), .head-btn:active:not(:disabled), .quick-btn:active:not(:disabled),
.choice-btn:active:not(:disabled), .chip:active, .app-btn:active:not(:disabled) {
  translate: 0 0;
  scale: .97;
  transition-duration: .06s;
}
.icon-btn:active:not(:disabled), .tool-btn:active:not(:disabled) { scale: .92; transition-duration: .06s; }

/* Clavier : un anneau net, jamais supprimé. */
.btn:focus-visible, .head-btn:focus-visible, .quick-btn:focus-visible, .choice-btn:focus-visible,
.icon-btn:focus-visible, .tool-btn:focus-visible, .chip:focus-visible, .app-btn:focus-visible {
  outline: 2px solid var(--turq);
  outline-offset: 2px;
}
.btn-primary:focus-visible, .btn-stop:focus-visible { outline-color: var(--ivory); }

/* Un bouton désactivé ne réagit à rien. */
.btn:disabled, .head-btn:disabled, .quick-btn:disabled, .choice-btn:disabled, .icon-btn:disabled, .tool-btn:disabled {
  pointer-events: none;
}

@media (hover: hover) {
  /* 1. Boutons pleins (principal, inversé) : soulèvement + reflet qui traverse le bouton une fois. */
  .btn-primary:hover:not(:disabled), .btn-stop:hover:not(:disabled) {
    opacity: 1;
    translate: 0 -1px;
  }
  .btn-primary::after, .btn-stop::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    background: rgba(255, 255, 255, .38);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    z-index: 1;
  }
  .btn-primary:hover:not(:disabled)::after, .btn-stop:hover:not(:disabled)::after {
    transform: translateX(330%) skewX(-18deg);
    transition: transform var(--fx-slow) var(--fx-ease);
  }

  /* 2. Boutons à contour (ghost, outline, en-tête, rapides, choix) : la couleur entre par la gauche. */
  .btn-ghost::before, .btn-outline::before, .head-btn::before, .quick-btn::before, .choice-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fx-fill, rgba(246, 242, 234, .1));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .28s var(--fx-ease);
    pointer-events: none;
    z-index: -1;
  }
  .btn-outline, .choice-btn { --fx-fill: rgba(59, 217, 219, .16); }
  .btn-ghost:hover:not(:disabled)::before, .btn-outline:hover:not(:disabled)::before,
  .head-btn:hover:not(:disabled)::before, .quick-btn:hover:not(:disabled)::before,
  .choice-btn:hover:not(:disabled)::before { transform: scaleX(1); }
  .btn-ghost:hover:not(:disabled), .btn-outline:hover:not(:disabled), .head-btn:hover:not(:disabled),
  .quick-btn:hover:not(:disabled), .choice-btn:hover:not(:disabled) { translate: 0 -1px; }
  /* Le bouton de choix du chat se remplit en entier, comme avant, mais en glissant. */
  .choice-btn:hover { background: rgba(59, 217, 219, .12); color: var(--turq); }
  .choice-btn::before { --fx-fill: var(--turq); }
  .choice-btn:hover:not(:disabled) { color: var(--navy); }

  /* 3. Texte seul et puces : le soulignement se dessine sous le mot. */
  .btn-text::after, .app-btn::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .26s var(--fx-ease);
    pointer-events: none;
  }
  .btn-text:hover:not(:disabled)::after, .app-btn:hover:not(:disabled)::after { transform: scaleX(1); }
  .chip:hover { translate: 0 -1px; }

  /* 4. Boutons d'icône : un petit rebond. */
  .icon-btn:hover:not(:disabled), .tool-btn:hover:not(:disabled) { translate: 0 -1px; scale: 1.06; }

  /* Le clic l'emporte sur le survol : le bouton s'enfonce même quand la souris est dessus. */
  .btn:hover:active:not(:disabled), .head-btn:hover:active:not(:disabled), .quick-btn:hover:active:not(:disabled),
  .choice-btn:hover:active:not(:disabled), .app-btn:hover:active:not(:disabled), .chip:hover:active {
    translate: 0 0;
  scale: .97;
    transition-duration: .06s;
  }
  .icon-btn:hover:active:not(:disabled), .tool-btn:hover:active:not(:disabled) { scale: .92; transition-duration: .06s; }

  /* 5. Les flèches avancent d'un cran vers ce qu'on va faire. */
  .btn .ico, .head-btn .ico, .quick-btn .ico { transition: translate .22s var(--fx-ease); }
  .btn:hover:not(:disabled) .ico, .head-btn:hover:not(:disabled) .ico { translate: 2px 0; }
  .btn:hover:not(:disabled) .ico:first-child:not(:only-child) { translate: -1px 0; }
}

/* Chargement dans un bouton : le libellé se grise, pas de saut de taille. */
.btn:has(.spinner) { cursor: progress; }

/* Mouvement réduit : mêmes couleurs, aucun déplacement ni balayage. */
@media (prefers-reduced-motion: reduce) {
  .btn, .head-btn, .quick-btn, .choice-btn, .icon-btn, .tool-btn, .chip, .app-btn, .btn .ico, .head-btn .ico {
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
  .btn::before, .btn::after, .head-btn::before, .quick-btn::before, .choice-btn::before, .app-btn::after, .btn-text::after {
    transition: none !important;
    transform: none !important;
  }
  .btn-primary::after, .btn-stop::after { display: none; }
  .btn-ghost::before, .btn-outline::before, .head-btn::before, .quick-btn::before, .choice-btn::before { transform: scaleX(0) !important; }
  .btn-ghost:hover:not(:disabled), .head-btn:hover:not(:disabled), .quick-btn:hover:not(:disabled) { background: rgba(246, 242, 234, .08); }
  .btn-outline:hover:not(:disabled) { background: rgba(59, 217, 219, .14); }
}

/* Interrupteurs : le bouton glisse et la piste change de couleur en douceur ; la ligne (missions) s'estompe sans saut. */
.switch { transition: background-color .2s ease, opacity .2s ease; }
.switch::after { transition: left .2s cubic-bezier(.3, .7, .3, 1); }
.mission-row .m-name { transition: opacity .2s ease; }
.m-next > span { animation: mNextIn .25s ease both; }
@keyframes mNextIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::after, .mission-row .m-name { transition: none !important; }
  .m-next > span { animation: none; }
}

/* Cartes de groupe : pastilles sobres (avatar + nom), « meneur » discret, une seule ligne tant que ça tient. */
.group-member.compact { flex-wrap: nowrap; flex: 0 1 auto; white-space: nowrap; }
.group-member.compact .gm-handle { overflow: hidden; text-overflow: ellipsis; }
.group-member.compact .gm-lead { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mute); padding: 0; border: 0; background: none; }

/* Carte d'état (menu) : cachée quand tout va bien, sans laisser de trou au-dessus du profil. */
.health[hidden] { display: none !important; }
.health[hidden] + .me { margin-top: auto; }