/* We Go Club — système d'animations métier.
   Une grammaire visuelle commune : fluide, expressive, sans modifier la logique du CRM.
   Animations ponctuelles uniquement : pas de mouvement permanent. */
:root {
  --wg-motion-fast: 185ms;
  --wg-motion-normal: 360ms;
  --wg-motion-slow: 470ms;
  --wg-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --wg-motion-soft: cubic-bezier(.2, .8, .2, 1);
}

/* Ne jamais afficher une vue à demi construite pendant le changement de
   thème Direction ↔ autres modules. La classe est retirée après rendu. */
#view.crm-route-switching { visibility: hidden; }
@media print { #view.crm-route-switching { visibility: visible; } }

/* Navigation : le contenu entre une seule fois quand la route a fini de charger. */
#view.wg-view-enter {
  animation: wg-view-in var(--wg-motion-normal) var(--wg-motion-ease) both;
}
@keyframes wg-view-in {
  from { opacity: .15; transform: translate3d(0, 18px, 0) scale(.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.nav a, .tabbar a, .tabbar button {
  transition: background-color var(--wg-motion-fast) ease, color var(--wg-motion-fast) ease, border-color var(--wg-motion-fast) ease;
}
.nav a.active .nav-ic, .tabbar a.on .tab-ic {
  animation: wg-nav-select 210ms var(--wg-motion-ease) both;
}
@keyframes wg-nav-select {
  from { opacity: .6; transform: scale(.91); }
  to { opacity: 1; transform: scale(1); }
}

/* Boutons, actions et champs : feedback tactile, jamais d'état de réussite simulé. */
.btn, .icon-btn, .pax-add, .pax-compact-toggle, .bk-form-step, .pill, .seg button {
  transition: background-color var(--wg-motion-fast) ease, color var(--wg-motion-fast) ease,
              border-color var(--wg-motion-fast) ease, box-shadow var(--wg-motion-fast) ease,
              transform var(--wg-motion-fast) var(--wg-motion-ease);
}
.btn:not(:disabled):active, .icon-btn:not(:disabled):active,
.pax-add:active, .pill:not(:disabled):active, .seg button:active {
  transform: scale(.98);
}
.btn:focus-visible, .pax-add:focus-visible, .bk-form-step:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  a.kpi:hover, a.dep-card:hover, a.portal-workspace-action:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 7px 19px rgba(15, 44, 72, .09);
  }
  a.kpi, a.dep-card, a.portal-workspace-action {
    transition: transform var(--wg-motion-normal) var(--wg-motion-ease), box-shadow var(--wg-motion-normal) ease, border-color var(--wg-motion-normal) ease;
  }
}
input.saved { animation: wg-field-saved 430ms ease-out both; }
@keyframes wg-field-saved {
  from { box-shadow: 0 0 0 4px var(--green-soft); }
  to { box-shadow: 0 0 0 0 transparent; }
}

/* Fenêtres : entrée légère. La fermeture reste instantanée pour ne pas bloquer les actions. */
#modal:not([hidden]) .modal-backdrop {
  animation: wg-backdrop 180ms ease-out both;
}
#modal:not([hidden]) .modal {
  animation: wg-dialog-in var(--wg-motion-normal) var(--wg-motion-ease) both;
  transform-origin: 50% 28%;
}
@keyframes wg-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes wg-dialog-in {
  from { opacity: .2; transform: translate3d(0, 24px, 0) scale(.955); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.search-results:not([hidden]), .ac-list:not([hidden]),
.notif-panel:not([hidden]), .presence-panel:not([hidden]) {
  animation: wg-popover-in var(--wg-motion-fast) var(--wg-motion-ease) both;
  transform-origin: top center;
}
@keyframes wg-popover-in {
  from { opacity: .45; transform: translate3d(0, -4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Animation métier : ajout d'un voyageur, d'un supplément, ou liaison avec un client. */
.wg-item-added {
  animation: wg-item-added var(--wg-motion-slow) var(--wg-motion-ease) both;
}
@keyframes wg-item-added {
  from { opacity: .25; transform: translate3d(0, 22px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.pax .linked, .booking-credit-info,
.pax .child-box:not([hidden]) {
  animation: wg-reveal 220ms var(--wg-motion-ease) both;
}
@keyframes wg-reveal {
  from { opacity: .45; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.bk-form-step.is-complete .bk-form-step-num {
  animation: wg-step-ready 260ms var(--wg-motion-ease) both;
}
@keyframes wg-step-ready {
  0% { box-shadow: 0 0 0 0 var(--brand-soft); transform: scale(.94); }
  65% { box-shadow: 0 0 0 5px var(--brand-soft); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

/* Notifications après réponse du serveur, typées par module.
   Les animations ne sont déclenchées que lors de la création du toast. */
#toasts .toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
  overflow: hidden;
  animation: wg-toast-in 380ms var(--wg-motion-ease) both;
}
#toasts .toast.out { animation: none; opacity: 0; transform: translate3d(0, 8px, 0); }
#toasts .toast .wg-toast-icon {
  display: inline-grid; flex: 0 0 20px; width: 20px; height: 20px;
  place-items: center; transform-origin: 50% 50%;
  color: inherit;
}
#toasts .toast .wg-toast-icon .ic { width: 20px; height: 20px; }
#toasts .toast .wg-toast-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@keyframes wg-toast-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.95); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.toast-task-booking .wg-toast-icon { animation: wg-task-booking 430ms var(--wg-motion-ease) both; }
.toast-task-traveler .wg-toast-icon, .toast-task-client .wg-toast-icon { animation: wg-task-person 300ms var(--wg-motion-ease) both; }
.toast-task-payment .wg-toast-icon, .toast-task-cash .wg-toast-icon, .toast-task-refund .wg-toast-icon {
  animation: wg-task-money 410ms var(--wg-motion-ease) both;
}
.toast-task-cancellation .wg-toast-icon, .toast-task-request .wg-toast-icon {
  animation: wg-task-confirm 310ms var(--wg-motion-ease) both;
}
.toast-task-loyalty .wg-toast-icon { animation: wg-task-loyalty 470ms var(--wg-motion-ease) both; }
.toast-task-message .wg-toast-icon, .toast-task-notification .wg-toast-icon {
  animation: wg-task-message 320ms var(--wg-motion-ease) both;
}
.toast-task-departure .wg-toast-icon, .toast-task-room .wg-toast-icon {
  animation: wg-task-depart 370ms var(--wg-motion-ease) both;
}
.toast-error .wg-toast-icon { animation: wg-task-alert 330ms ease-out both; }
@keyframes wg-task-booking {
  from { opacity: .3; transform: translateY(-6px) scale(1.18) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes wg-task-person {
  from { opacity: .3; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes wg-task-money {
  0% { opacity: .3; transform: translateY(-7px); }
  55% { opacity: 1; transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes wg-task-confirm {
  from { opacity: .3; transform: translateX(-7px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wg-task-loyalty {
  from { opacity: .3; transform: rotate(-14deg) scale(.83); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes wg-task-message {
  from { opacity: .3; transform: translate3d(-9px, 3px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes wg-task-depart {
  from { opacity: .3; transform: translateY(5px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wg-task-alert {
  from { opacity: .5; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 760px) {
  :root { --wg-motion-normal: 290ms; --wg-motion-slow: 355ms; }
  #toasts { bottom: calc(78px + env(safe-area-inset-bottom)); }
  #modal:not([hidden]) .modal { transform-origin: 50% 100%; }
}

/* Accessibilité : aucun mouvement si l'utilisateur a choisi le mode réduit. */
@media (prefers-reduced-motion: reduce) {
  #view.wg-view-enter, .wg-item-added, .nav a.active .nav-ic,
  .tabbar a.on .tab-ic, .pax .linked, .booking-credit-info,
  .pax .child-box:not([hidden]), .bk-form-step.is-complete .bk-form-step-num,
  #modal:not([hidden]) .modal, #modal:not([hidden]) .modal-backdrop,
  .search-results:not([hidden]), .ac-list:not([hidden]),
  .notif-panel:not([hidden]), .presence-panel:not([hidden]),
  #toasts .toast, #toasts .toast .wg-toast-icon, input.saved {
    animation: none !important; 
  }
  .btn, .icon-btn, .pax-add, .pax-compact-toggle, .bk-form-step,
  .pill, .seg button, .nav a, .tabbar a, .tabbar button,
  a.kpi, a.dep-card, a.portal-workspace-action {
    transition: none !important; 
  }
}
@media print {
  #view.wg-view-enter, .wg-item-added, #toasts .toast {
    animation: none !important; transform: none !important;
  }
}


/* Indicateur de navigation : visible uniquement pendant une requête prolongée. */
#view { position: relative; }
#view[aria-busy="true"]::before {
  content: "";
  position: absolute; z-index: 3; top: 0; left: 0;
  width: 38%; height: 3px; border-radius: 99px;
  background: var(--brand);
  animation: wg-route-loading 1000ms ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes wg-route-loading {
  from { opacity: .45; transform: translateX(0); }
  to { opacity: 1; transform: translateX(165%); }
}

/* Une notification nouvelle attire l'attention une fois ; pas de pulsation infinie. */
#notif-dot:not([hidden]), #notif-btn .dot:not([hidden]) {
  animation: wg-new-notification 420ms var(--wg-motion-ease) both;
}
@keyframes wg-new-notification {
  0% { opacity: .4; transform: scale(.6); }
  65% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #view[aria-busy="true"]::before, #notif-dot:not([hidden]), #notif-btn .dot:not([hidden]) {
    animation: none !important; 
  }
  #view[aria-busy="true"]::before { width: 100%; }
}
@media print { #view[aria-busy="true"]::before { display: none !important; } }


/* Version expressive : retour instantané au toucher et au clavier.
   Aucune animation de réussite ne peut partir d'un clic seul. */
.wg-press-feedback:not(:disabled) {
  animation: wg-press-feedback 420ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes wg-press-feedback {
  0% { filter: brightness(1); transform: scale(1); }
  35% { filter: brightness(1.09); transform: scale(.96); }
  67% { filter: brightness(1.045); transform: scale(1.025); }
  100% { filter: brightness(1); transform: scale(1); }
}

/* Apparition progressive des zones principales, sans attendre les autres éléments. */
#view.wg-view-enter .page-head,
#view.wg-view-enter .bk-overview,
#view.wg-view-enter .booking-recap,
#view.wg-view-enter .booking-main,
#view.wg-view-enter .grid > .card:nth-child(-n+5),
#view.wg-view-enter .direction-priority-grid > .kpi:nth-child(-n+5),
#view.wg-view-enter .portal-workspace-action:nth-child(-n+5) {
  animation: wg-section-entrance 480ms var(--wg-motion-ease) both;
}
#view.wg-view-enter .grid > :nth-child(2),
#view.wg-view-enter .direction-priority-grid > :nth-child(2),
#view.wg-view-enter .portal-workspace-action:nth-child(2) { animation-delay: 55ms; }
#view.wg-view-enter .grid > :nth-child(3),
#view.wg-view-enter .direction-priority-grid > :nth-child(3),
#view.wg-view-enter .portal-workspace-action:nth-child(3) { animation-delay: 110ms; }
#view.wg-view-enter .grid > :nth-child(4),
#view.wg-view-enter .direction-priority-grid > :nth-child(4),
#view.wg-view-enter .portal-workspace-action:nth-child(4) { animation-delay: 165ms; }
@keyframes wg-section-entrance {
  from { opacity: .18; transform: translate3d(0, 19px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Confirmation explicite d'une transaction déjà acceptée par l'API.
   Le bandeau est informatif et ne bloque ni les autres clics ni la navigation. */
.wg-success-scene {
  position: fixed; z-index: 210;
  top: clamp(78px, 19vh, 190px); left: 50%;
  width: min(420px, calc(100vw - 28px));
  pointer-events: none;
  border-radius: 22px;
  padding: 20px 22px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
  box-shadow: 0 20px 55px rgba(9,32,41,.22), 0 0 0 5px var(--green-soft);
  display: flex; align-items: center; gap: 17px;
  opacity: 0;
  transform: translate3d(-50%, -22px, 0) scale(.9);
  animation: wg-success-scene-in 490ms var(--wg-motion-ease) forwards;
}
.wg-success-scene .wg-success-symbol {
  width: 58px; height: 58px; flex: 0 0 58px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green);
  animation: wg-success-icon 600ms cubic-bezier(.18,1.3,.37,1) both;
}
.wg-success-scene .wg-success-symbol svg { width: 35px; height: 35px; }
.wg-success-scene .wg-success-copy { display: grid; gap: 3px; min-width: 0; }
.wg-success-scene strong { font-size: 19px; line-height: 1.22; }
.wg-success-scene small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.wg-success-scene.wg-success-leaving {
  animation: wg-success-scene-out 270ms ease-in forwards;
}
@keyframes wg-success-scene-in {
  0% { opacity: 0; transform: translate3d(-50%, -22px, 0) scale(.9); }
  65% { opacity: 1; transform: translate3d(-50%, 4px, 0) scale(1.018); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}
@keyframes wg-success-scene-out {
  from { opacity: 1; transform: translate3d(-50%,0,0) scale(1); }
  to { opacity: 0; transform: translate3d(-50%,-15px,0) scale(.98); }
}
@keyframes wg-success-icon {
  0% { opacity: 0; transform: rotate(-15deg) scale(.56); }
  64% { opacity: 1; transform: rotate(4deg) scale(1.17); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
@media (max-width: 760px) {
  .wg-success-scene { top: 76px; padding: 16px; gap: 12px; border-radius: 17px; }
  .wg-success-scene strong { font-size: 16.5px; }
  .wg-success-scene .wg-success-symbol { width: 49px; height: 49px; flex-basis: 49px; border-radius: 13px; }
  .wg-success-scene .wg-success-symbol svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-press-feedback, #view.wg-view-enter .page-head,
  #view.wg-view-enter .bk-overview, #view.wg-view-enter .booking-recap,
  #view.wg-view-enter .booking-main,
  #view.wg-view-enter .grid > .card:nth-child(-n+5),
  #view.wg-view-enter .direction-priority-grid > .kpi:nth-child(-n+5),
  #view.wg-view-enter .portal-workspace-action:nth-child(-n+5),
  .wg-success-scene, .wg-success-scene .wg-success-symbol,
  .wg-success-scene.wg-success-leaving { animation: none !important; }
  .wg-success-scene { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
@media print { .wg-success-scene { display: none !important; } }