/* ============================================================
   motion.css - Mouvement partage, utile et sans rebond.
   Vitrine : une signature expressive autour de la Terre.
   Produit : retours courts sur les actions et changements d'etat.
   ============================================================ */

:root,
.ds-app,
.auth,
.auth-page,
.main-container,
.validation-shell,
.cra-validation-message,
.lp {
  --ds-motion-settle: cubic-bezier(.2, .8, .2, 1);
  --ds-motion-enter: cubic-bezier(.16, 1, .3, 1);
  --ds-motion-exit: cubic-bezier(.4, 0, 1, 1);
  --ds-motion-glide: cubic-bezier(.4, 0, .2, 1);
  --ds-motion-micro: 120ms;
  --ds-motion-fast: 160ms;
  --ds-motion-base: 200ms;
  --ds-motion-emphasis: 240ms;
  --ds-motion-auth: 280ms;
  --ds-motion-brand: 420ms;
}

@keyframes ds-motion-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to { opacity: 1; transform: none; }
}

@keyframes ds-motion-toast-in {
  from { opacity: 0; transform: translateX(8px) scale(.99); }
  to { opacity: 1; transform: none; }
}

@keyframes ds-motion-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.99); }
  to { opacity: 1; transform: none; }
}

@keyframes ds-motion-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ds-motion-rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ds-motion-check-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ds-motion-state-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes ds-motion-backdrop-in {
  from { opacity: 0; }
}

@keyframes ds-motion-essential-pulse {
  50% { opacity: .58; }
}

.ds-app .ds-btn,
.ds-app .ds-gbtn,
.ds-app .ds-icon-btn,
.ds-app .ds-t-action,
.ds-app .ds-pg,
.ds-app .pagination .page-link,
.ds-app .ds-content :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary):not(.ds-btn),
body .ds-modal :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary):not(.ds-btn) {
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-motion-settle);
}

.ds-app .ds-btn:not(:disabled):not([aria-disabled="true"]):active,
.ds-app .ds-gbtn:not(:disabled):not([aria-disabled="true"]):active,
.ds-app .ds-icon-btn:not(:disabled):active,
.ds-app .ds-t-action:not(:disabled):active,
.ds-app .ds-pg:not(:disabled):active,
.ds-app .pagination .page-link:not([aria-disabled="true"]):active,
.ds-app .ds-content :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary):not(.ds-btn):not(:disabled):active,
body .ds-modal :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary):not(.ds-btn):not(:disabled):active {
  transform: translateY(1px) scale(.99);
}

.ds-app :is(.ds-btn, .ds-gbtn, .ds-icon-btn, .ds-t-action) > :is(i, svg),
.ds-app .ds-nav-item > svg {
  transition: transform var(--ds-motion-fast) var(--ds-motion-settle),
              color var(--ds-motion-fast) var(--ds-motion-settle);
}

.ds-app :is(.ds-input, .ds-select, .ds-textarea, .form-control, .form-select, .ts-control),
.ds-app :is(.ds-cbx, .ds-radio, .form-check-input) {
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-motion-settle);
}

.ds-app .ds-card.ds-card--interactive,
.ds-app .ds-kpi,
.ds-app .ds-panel {
  transition-duration: var(--ds-motion-base);
  transition-timing-function: var(--ds-motion-settle);
}

.ds-app .ds-panel:focus-within {
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface), var(--border-strong) 36%);
}

.ds-app .ds-kpi__icon,
.ds-app .ds-table tbody tr,
.ds-app .ds-t-action,
.ds-app .ds-nav-item,
.ds-app .ds-side-user,
.ds-app .ds-icon-btn,
.ds-app .ds-pg,
.ds-app .pagination .page-link {
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-motion-settle);
}

body .ds-modal.show .modal-dialog {
  animation: ds-motion-modal-in var(--ds-motion-emphasis) var(--ds-motion-enter) both;
}

body > .modal-backdrop.show {
  animation: ds-motion-backdrop-in var(--ds-motion-base) var(--ds-motion-settle) both;
}

.search-modal-backdrop,
.search-modal-content,
.ds-drawer-scrim {
  transition-duration: var(--ds-motion-base);
  transition-timing-function: var(--ds-motion-settle);
}

.ds-toast {
  animation: ds-motion-toast-in var(--ds-motion-emphasis) var(--ds-motion-enter) both;
}

.ds-toast--out {
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-motion-exit);
}

.ds-app .ds-popover.ds-is-open,
.ds-app .autocomplete-dropdown.show,
.ds-app .autocomplete-dropdown.is-open,
.ds-app .dropdown-menu-etat.ds-is-open,
.ds-app .ts-dropdown,
body > .ts-dropdown.ds-select-overlay {
  animation: ds-motion-pop-in var(--ds-motion-base) var(--ds-motion-enter) both;
  transform-origin: top right;
}

.ds-app .ds-content .dropdown-menu.show,
.ds-app .collapse.show,
.ds-app .tab-pane.active.show {
  animation: ds-motion-state-in var(--ds-motion-base) var(--ds-motion-enter) both;
}

.ds-app .ds-filter-chip,
.ds-app .ds-segmented button,
.ds-app .ds-seg__item,
.ds-app .ds-tab {
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-motion-settle);
}

/* Dans le shell, le trait de l'onglet actif est dessine par ::after, qui
   s'anime. Le bord bas de components.css doit donc etre neutralise. Il ne
   l'etait pas sur l'onglet ACTIF, le seul cas qui compte : .ds-tabs
   .ds-tab.active (0,3,0) l'emporte sur .ds-app .ds-tab (0,2,0), d'ou deux
   traits bleus superposes sous chaque onglet actif de l'application. La
   neutralisation couvre desormais l'etat actif a specificite egale. */
.ds-app .ds-tab,
.ds-app .ds-tabs .ds-tab.active,
.ds-app .ds-tabs .ds-tab[aria-selected="true"] {
  position: relative;
  border-bottom-color: transparent;
}

.ds-app .ds-tab::after {
  content: "";
  position: absolute; right: 10px; bottom: -1px; left: 10px;
  height: 2px; border-radius: var(--r-pill); background: var(--signal-azure);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--ds-motion-base) var(--ds-motion-settle);
}

.ds-app .ds-tabs .ds-tab.active::after,
.ds-app .ds-tabs .ds-tab[aria-selected="true"]::after { transform: scaleX(1); }

.ds-app .ds-cbx:checked::after {
  animation: ds-motion-check-in var(--ds-motion-fast) var(--ds-motion-settle) both;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ds-app .ds-btn:not(:disabled):not([aria-disabled="true"]):hover:not(:active),
  .ds-app .ds-gbtn:not(:disabled):not([aria-disabled="true"]):hover:not(:active),
  .ds-app .ds-icon-btn:not(:disabled):hover:not(:active),
  .ds-app .ds-t-action:not(:disabled):hover:not(:active),
  .ds-app .ds-pg:not(:disabled):hover:not(:active),
  .ds-app .pagination .page-link:hover:not(:active),
  .ds-app .ds-content :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary):not(.ds-btn):not(:disabled):hover:not(:active),
  body .ds-modal :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary):not(.ds-btn):not(:disabled):hover:not(:active) {
    transform: translateY(-1px);
  }

  .ds-app .ds-card.ds-card--interactive:hover,
  .ds-app .ds-card.ds-card--interactive:focus-within { transform: translateY(-1px); }
}

.ds-app .ds-seg__item[data-tooltip]::after {
  transform: translateX(-50%) translateY(-2px);
  transition-timing-function: var(--ds-motion-settle);
  transition-delay: 0ms;
}

.ds-app .ds-seg__item[data-tooltip]:hover::after,
.ds-app .ds-seg__item[data-tooltip]:focus-visible::after,
.ds-app .ds-seg input[type="radio"]:focus-visible + .ds-seg__item[data-tooltip]::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition-delay: 320ms;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-context {
    animation: ds-motion-fade-in var(--ds-motion-auth) var(--ds-motion-settle) both;
  }

  .auth-card,
  .cra-validation-message .message-card {
    animation: ds-motion-rise-in var(--ds-motion-auth) var(--ds-motion-enter) both;
  }

  .auth-message-visual,
  .auth-card .alert,
  .main-container .alert {
    animation: ds-motion-state-in var(--ds-motion-emphasis) var(--ds-motion-enter) both;
  }

  .validation-grid > .validation-panel {
    animation: ds-motion-rise-in var(--ds-motion-auth) var(--ds-motion-enter) both;
  }

}

.validation-panel {
  transition: box-shadow var(--ds-motion-base) var(--ds-motion-settle);
}

.validation-panel:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--signal-azure) 16%, transparent);
}

:is(.auth, .auth-page, .main-container) :is(.btn-submit, .btn-primary),
.validation-shell :is(.ds-btn, .btn-primary, .btn-danger) {
  transition-timing-function: var(--ds-motion-settle);
}

:is(.auth, .auth-page, .main-container) :is(.btn-submit, .btn-primary):not(:disabled):active,
.validation-shell :is(.ds-btn, .btn-primary, .btn-danger):not(:disabled):active {
  transform: translateY(1px) scale(.99);
}

.lp .site-btn,
.lp .pill,
.lp .pstep,
.lp .xtile,
.lp .vcard,
.lp .rv {
  transition-timing-function: var(--ds-motion-enter);
}

.lp .site-btn:not(:disabled):active,
.lp .pill:not(:disabled):active { transform: translateY(1px) scale(.99); }

.lp .nav__menu.open,
.lp .rs-expertise-menu.is-open {
  animation: ds-motion-pop-in var(--ds-motion-emphasis) var(--ds-motion-enter) both;
  transform-origin: top center;
}

.lp .status > div.is-shown {
  animation: ds-motion-state-in var(--ds-motion-emphasis) var(--ds-motion-enter) both;
}

@media (prefers-reduced-motion: no-preference) {
  .lp .rv {
    transition-duration: var(--ds-motion-brand);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp .site-btn:hover:not(:active), .lp .pill:hover:not(:active) { transform: translateY(-1px); }
  .lp :is(.pstep, .xtile, .vcard):hover { transform: translateY(-1px); }
}

/* ============================================================
   QUIETER
   Une seule signature orbitale lente reste autour de la Terre.
   Les effets decoratifs continus du produit et des actions sont retires.
   ============================================================ */

@keyframes ds-quiet-orbit {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: no-preference) {
  .lp .lp-globe-stage--matching::before,
  .auth-page .auth-globe-stage::before {
    content: "";
    position: absolute;
    inset: -38%;
    z-index: 2;
    pointer-events: none;
    background: conic-gradient(
      from .76turn at 50% 50%,
      transparent 0 78%,
      oklch(0.72 0.07 220 / .015) 82%,
      oklch(0.76 0.08 215 / .08) 86%,
      oklch(0.82 0.04 220 / .03) 89%,
      transparent 94% 100%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 38% 42% at 50% 50%,
      transparent 0 48%,
      oklch(0 0 0) 58% 69%,
      transparent 78%
    );
    mask-image: radial-gradient(
      ellipse 38% 42% at 50% 50%,
      transparent 0 48%,
      oklch(0 0 0) 58% 69%,
      transparent 78%
    );
    opacity: .42;
    transform-origin: center;
    animation: ds-quiet-orbit 28s linear infinite;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  .ds-app,
  .ds-app *,
  .ds-app *::before,
  .ds-app *::after,
  :is(.auth, .auth-page, .main-container, .validation-shell, .cra-validation-message, .lp),
  :is(.auth, .auth-page, .main-container, .validation-shell, .cra-validation-message, .lp) *,
  :is(.auth, .auth-page, .main-container, .validation-shell, .cra-validation-message, .lp) *::before,
  :is(.auth, .auth-page, .main-container, .validation-shell, .cra-validation-message, .lp) *::after,
  .ds-select-overlay,
  .ds-select-overlay *,
  .ds-select-overlay *::before,
  .ds-select-overlay *::after,
  .ds-toast,
  .ds-toast *,
  .ds-toast *::before,
  .ds-toast *::after,
  .ds-modal,
  .ds-modal *,
  .modal-backdrop,
  .search-modal-backdrop,
  .search-modal-content,
  .ds-drawer-scrim {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .ds-app :is(.ds-btn, .ds-gbtn, .ds-icon-btn, .ds-t-action, .ds-pg, .page-link, .ds-card--interactive, .ds-kpi, .ds-panel, .ds-table tbody tr, .ds-badge, .ds-filter-chip),
  :is(.auth, .auth-page, .main-container) :is(.btn-submit, .btn-primary),
  .validation-shell :is(.validation-panel, .ds-btn, .btn-primary, .btn-danger),
  .lp :is(.site-btn, .pill, .pstep, .xtile, .vcard, .rv),
  .ds-modal .modal-dialog,
  .search-modal-content {
    transform: none !important;
  }

  .ds-app :is(a, button, input, select, textarea, .ds-card--interactive, .ds-panel),
  :is(.auth, .auth-page, .main-container, .validation-shell) :is(a, button, input, select, textarea),
  .lp :is(a, button, input, select, textarea, .pstep, .xtile, .vcard) {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: var(--ds-motion-micro) !important;
    transition-timing-function: var(--ds-motion-settle) !important;
  }

  body .ds-modal.show .modal-dialog,
  body > .modal-backdrop.show,
  .ds-toast,
  .search-modal-backdrop.show .search-modal-content,
  .lp .status > div.is-shown {
    animation: ds-motion-fade-in var(--ds-motion-fast) var(--ds-motion-settle) both !important;
  }

  .lp .rv {
    opacity: 1 !important;
  }

  :is(.ds-loading-dot, .processing-spinner, .loading-pulse, .spin, .loader) {
    animation: ds-motion-essential-pulse 1.4s ease-in-out infinite !important;
  }
}