/* CFA360 V222 - finition visuelle et stabilisation des surfaces communes */
:root {
  --cfa360-v222-radius: 18px;
  --cfa360-v222-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  --cfa360-v222-border: rgba(15, 23, 42, 0.10);
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: geometricPrecision;
}

.cfa360-topbar,
.cfa218-topbar,
.parent-topbar,
.messages-v217-topbar {
  backdrop-filter: blur(14px);
}

.panel,
.admin-card,
.stat-card,
.role-action-card,
.cfa360-profile-card,
.secondary-access-link,
.cfa360-login-card,
.tutor-card,
.apprenti-card,
.cfa360-quick-grid > a {
  border-color: var(--cfa360-v222-border);
  box-shadow: var(--cfa360-v222-shadow);
}

.panel,
.stat-card,
.role-action-card,
.cfa360-profile-card,
.secondary-access-link,
.cfa360-login-card,
.cfa360-quick-grid > a {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
  .role-action-card:hover,
  .cfa360-profile-card:hover,
  .secondary-access-link:hover,
  .cfa360-quick-grid > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
  }
}

.primary-btn,
.secondary-btn,
.compact-btn,
.cfa360-submit,
.logout-btn,
.admin-top-btn,
.role-logout-top,
.cfa360-help,
.cfa360-profile-switch-top {
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.primary-btn:active,
.secondary-btn:active,
.compact-btn:active,
.cfa360-submit:active,
.logout-btn:active,
.admin-top-btn:active,
.role-logout-top:active,
.cfa360-help:active,
.cfa360-profile-switch-top:active {
  transform: translateY(1px);
}

.dashboard-header,
.role-hero-zone,
.apprenti-hero-zone,
.bilan-hero-zone,
.preuves-hero-zone,
.cfa360-hero {
  animation: cfa360-v222-rise 360ms ease both;
}

.panel,
.stat-card,
.role-action-card,
.cfa360-profile-card,
.secondary-access-link {
  animation: cfa360-v222-rise 420ms ease both;
}

.cfa360-profile-grid > *:nth-child(2),
.stats-grid > *:nth-child(2),
.cards-grid > *:nth-child(2),
.role-action-grid > *:nth-child(2) {
  animation-delay: 45ms;
}

.cfa360-profile-grid > *:nth-child(3),
.stats-grid > *:nth-child(3),
.cards-grid > *:nth-child(3),
.role-action-grid > *:nth-child(3) {
  animation-delay: 90ms;
}

.cfa360-profile-grid > *:nth-child(4),
.stats-grid > *:nth-child(4),
.cards-grid > *:nth-child(4),
.role-action-grid > *:nth-child(4) {
  animation-delay: 135ms;
}

body.cfa360-profile-only:not(.cfa360-login-active) #cfa360-global-footer-v2212,
body.cfa360-profile-only:not(.cfa360-login-active) #cfa360-legal-dock-v2214,
body.cfa360-profile-only:not(.cfa360-login-active) #cfa360-legal-footer-v2213 {
  display: none !important;
}

/* V222 - pictogrammes de profils plus distinctifs et plus contemporains. */
body.cfa360-profile-only .cfa360-profile-icon.cfa360-profile-icon-v222 {
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 26px rgba(0, 40, 84, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

body.cfa360-profile-only .cfa360-profile-icon.cfa360-profile-icon-v222 svg {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 1.85 !important;
}

body.cfa360-profile-only .cfa360-profile-card[data-role="apprenti"] .cfa360-profile-icon-v222 {
  color: #086fae !important;
  background: linear-gradient(145deg, #e4f4ff, #ffffff) !important;
}

body.cfa360-profile-only .cfa360-profile-card[data-role="tuteur"] .cfa360-profile-icon-v222 {
  color: #087968 !important;
  background: linear-gradient(145deg, #e4f8f3, #ffffff) !important;
}

body.cfa360-profile-only .cfa360-profile-card[data-role="formateur"] .cfa360-profile-icon-v222 {
  color: #c85d00 !important;
  background: linear-gradient(145deg, #fff0df, #ffffff) !important;
}

body.cfa360-profile-only .cfa360-profile-card[data-role="representant-legal"] .cfa360-profile-icon-v222 {
  color: #a64058 !important;
  background: linear-gradient(145deg, #ffebef, #ffffff) !important;
}

body.cfa360-profile-only .cfa360-profile-card:hover .cfa360-profile-icon-v222,
body.cfa360-profile-only .cfa360-profile-card:focus-visible .cfa360-profile-icon-v222 {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 16px 30px rgba(0, 40, 84, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.cfa360-login-only.cfa360-login-active #cfa360-legal-dock-v2214 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  body.cfa360-profile-only .cfa360-profile-icon.cfa360-profile-icon-v222 {
    width: 60px !important;
    height: 60px !important;
    border-radius: 15px !important;
  }

  body.cfa360-profile-only .cfa360-profile-icon.cfa360-profile-icon-v222 svg {
    width: 31px !important;
    height: 31px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cfa360-profile-only .cfa360-profile-icon.cfa360-profile-icon-v222 {
    transition: none !important;
  }
}

/* The trainer evaluation uses the panel as the single scroll container. */
html body[data-role="formateur"][data-flow-page="competences"].formateur-mini-panel-open .formateur-save-panel {
  bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  grid-template-rows: auto auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

html body[data-role="formateur"][data-flow-page="competences"] .formateur-panel-scroll-v107,
html body[data-role="formateur"][data-flow-page="competences"] #formateurCompetenceHistoryBox,
html body[data-role="formateur"][data-flow-page="competences"] .formateur-history-panel,
html body[data-role="formateur"][data-flow-page="competences"] .formateur-history-list {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-role="formateur"][data-flow-page="competences"] #closeEvaluationPanelBtn {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}

body.cfa360-profile-only:not(.cfa360-login-active) .cfa360-home-screen {
  padding-bottom: clamp(28px, 5vw, 56px);
}

@keyframes cfa360-v222-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}