/* Modal de reconnexion Blazor Server - bouclier Isodit + animation spirale */
/* BLOCK-UX-04 : prefers-contrast:more, BLOCK-UX-05 : RTL, SUGGEST-UX-04 : 44px bouton */
/* Design : fond/bordure/couleur par etat, hint 14px, line-height 1.5, compteur, reassurance */

/* --- Base (masque) --- */
.reconnect-modal {
  display: none !important;
}

.reconnect-modal.components-reconnect-show,
.reconnect-modal.components-reconnect-failed,
.reconnect-modal.components-reconnect-rejected {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

/* --- Overlay --- */
.reconnect-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .reconnect-overlay {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

/* Dark mode : overlay plus opaque */
[data-theme="dark"] .reconnect-overlay {
  background: rgba(0, 0, 0, 0.65);
}

@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  [data-theme="dark"] .reconnect-overlay {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

/* --- Carte --- */
.reconnect-card {
  position: relative;
  background: rgb(var(--color-surface, 255 255 255));
  border: 1px solid rgb(var(--color-border, 229 231 235));
  border-inline-start: 4px solid rgb(var(--color-primary, 37 99 235));
  border-radius: 16px;
  padding: 40px 48px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* --- Etat failed : carte warning --- */
.reconnect-modal.components-reconnect-failed .reconnect-card {
  background: rgb(var(--color-warning-subtle, 255 251 235));
  border-inline-start-color: rgb(var(--color-warning, 217 119 6));
}

/* --- Etat rejected : carte erreur --- */
.reconnect-modal.components-reconnect-rejected .reconnect-card {
  background: rgb(var(--color-error-subtle, 254 242 242));
  border-inline-start-color: rgb(var(--color-error, 220 38 38));
}

/* --- Logo bouclier SVG --- */
.reconnect-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.reconnect-logo svg {
  overflow: visible;
  width: 80px;
  height: 96px;
}

/* --- Icone semantique par etat --- */
.reconnect-state-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  min-height: 24px;
}

.reconnect-state-icon svg {
  width: 24px;
  height: 24px;
}

/* ===========================================================
   ANIMATION SPIRALE
   =========================================================== */

.reconnect-logo .shield-frag {
  transform-origin: 50px 60px;
  transform-box: view-box;
}

.reconnect-logo .shield-frag-q1 {
  animation: spiral-cw 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0s;
}

.reconnect-logo .shield-frag-q2 {
  animation: spiral-ccw 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.08s;
}

.reconnect-logo .shield-frag-q3 {
  animation: spiral-ccw 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.16s;
}

.reconnect-logo .shield-frag-q4 {
  animation: spiral-cw 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.24s;
}

.reconnect-logo .shield-frag-eye {
  animation: spiral-eye 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.12s;
}

@keyframes spiral-cw {
  0%   { transform: rotate(0deg) translateY(0) scale(1); opacity: 1; }
  8%   { transform: rotate(10deg) translateY(-2px) scale(1.02); opacity: 1; }
  22%  { transform: rotate(160deg) translateY(-28px) scale(0.7); opacity: 0.5; }
  32%  { transform: rotate(300deg) translateY(-36px) scale(0.5); opacity: 0; }
  50%  { transform: rotate(420deg) translateY(-34px) scale(0.5); opacity: 0; }
  68%  { transform: rotate(560deg) translateY(-18px) scale(0.7); opacity: 0.4; }
  85%  { transform: rotate(680deg) translateY(-4px) scale(0.98); opacity: 0.9; }
  100% { transform: rotate(720deg) translateY(0) scale(1); opacity: 1; }
}

@keyframes spiral-ccw {
  0%   { transform: rotate(0deg) translateY(0) scale(1); opacity: 1; }
  8%   { transform: rotate(-10deg) translateY(-2px) scale(1.02); opacity: 1; }
  22%  { transform: rotate(-160deg) translateY(-28px) scale(0.7); opacity: 0.5; }
  32%  { transform: rotate(-300deg) translateY(-36px) scale(0.5); opacity: 0; }
  50%  { transform: rotate(-420deg) translateY(-34px) scale(0.5); opacity: 0; }
  68%  { transform: rotate(-560deg) translateY(-18px) scale(0.7); opacity: 0.4; }
  85%  { transform: rotate(-680deg) translateY(-4px) scale(0.98); opacity: 0.9; }
  100% { transform: rotate(-720deg) translateY(0) scale(1); opacity: 1; }
}

@keyframes spiral-eye {
  0%   { transform: rotate(0deg) translateY(0) scale(1); opacity: 1; }
  10%  { transform: rotate(0deg) translateY(0) scale(1.1); opacity: 1; }
  25%  { transform: rotate(180deg) translateY(-22px) scale(0.6); opacity: 0.4; }
  35%  { transform: rotate(360deg) translateY(-28px) scale(0.4); opacity: 0; }
  50%  { transform: rotate(450deg) translateY(-26px) scale(0.4); opacity: 0; }
  70%  { transform: rotate(580deg) translateY(-12px) scale(0.8); opacity: 0.5; }
  88%  { transform: rotate(700deg) translateY(-2px) scale(1.02); opacity: 0.95; }
  100% { transform: rotate(720deg) translateY(0) scale(1); opacity: 1; }
}

.reconnect-logo .shield-outline {
  animation: outline-pulse 3.2s ease-in-out infinite;
}

@keyframes outline-pulse {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.3; }
  50% { opacity: 0.15; }
  75% { opacity: 0.5; }
}

.reconnect-logo .shield-cross-el {
  animation: cross-fade 3.2s ease-in-out infinite;
}

@keyframes cross-fade {
  0%, 100% { opacity: 1; }
  20% { opacity: 0.5; }
  30%, 55% { opacity: 0; }
  80% { opacity: 0.7; }
}

/* --- Etat failed : animation douce (pulse au lieu de spirale) --- */
.reconnect-modal.components-reconnect-failed .shield-frag,
.reconnect-modal.components-reconnect-failed .shield-outline,
.reconnect-modal.components-reconnect-failed .shield-cross-el {
  animation: gentle-pulse 3s ease-in-out infinite !important;
}

/* --- Etat rejected : logo fixe, desature --- */
.reconnect-modal.components-reconnect-rejected .shield-frag,
.reconnect-modal.components-reconnect-rejected .shield-outline,
.reconnect-modal.components-reconnect-rejected .shield-cross-el {
  animation: none;
}

.reconnect-modal.components-reconnect-rejected .reconnect-logo svg {
  opacity: 0.45;
  filter: saturate(0.3);
}

/* Fix achromatopsie : eviter double filter grayscale + saturate */
[data-colorblind="achromatopsia"] .reconnect-modal.components-reconnect-rejected .reconnect-logo svg {
  filter: none;
  opacity: 0.35;
}

/* --- Textes --- */
.reconnect-brand {
  font-size: 20px;
  font-weight: 700;
  color: rgb(var(--color-primary, 37 99 235));
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.reconnect-modal.components-reconnect-failed .reconnect-brand {
  color: rgb(var(--color-warning-subtle-text, 120 53 15));
}

.reconnect-modal.components-reconnect-rejected .reconnect-brand {
  color: rgb(var(--color-error-subtle-text, 127 29 29));
}

.reconnect-message {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: rgb(var(--color-text, 17 24 39));
  margin-bottom: 8px;
}

.reconnect-modal.components-reconnect-failed .reconnect-message {
  color: rgb(var(--color-warning-subtle-text, 120 53 15));
}

.reconnect-modal.components-reconnect-rejected .reconnect-message {
  color: rgb(var(--color-error-subtle-text, 127 29 29));
}

.reconnect-hint {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--color-text-secondary, 55 65 81));
  margin-bottom: 0;
}

/* --- Message de rassurance --- */
.reconnect-reassurance {
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: rgb(var(--color-text-muted, 107 114 128));
  margin-top: 4px;
  margin-bottom: 0;
}

/* Masquer en failed/rejected */
.reconnect-modal.components-reconnect-failed .reconnect-reassurance,
.reconnect-modal.components-reconnect-rejected .reconnect-reassurance {
  display: none;
}

/* --- Bouton retry (visible seulement en failed/rejected) --- */
.reconnect-retry-btn {
  display: none;
  margin-top: 20px;
  padding: 12px 24px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: rgb(var(--color-primary, 37 99 235));
  color: rgb(var(--color-primary-text, 255 255 255));
  transition: opacity 0.15s;
}

.reconnect-retry-btn:hover {
  opacity: 0.85;
}

.reconnect-retry-btn:focus-visible {
  outline: 2px solid rgb(var(--color-focus-ring, 59 130 246));
  outline-offset: 2px;
}

.reconnect-modal.components-reconnect-failed .reconnect-retry-btn,
.reconnect-modal.components-reconnect-rejected .reconnect-retry-btn {
  display: inline-block;
}

/* --- Lien support (rejected uniquement) --- */
.reconnect-support {
  display: none;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
  color: rgb(var(--color-text-muted, 107 114 128));
}

.reconnect-support a {
  color: rgb(var(--color-primary, 37 99 235));
  text-decoration: underline;
}

.reconnect-modal.components-reconnect-rejected .reconnect-support {
  display: block;
}

/* Bouton warning en etat failed */
.reconnect-modal.components-reconnect-failed .reconnect-retry-btn {
  background: rgb(var(--color-warning, 217 119 6));
}

/* --- RTL support (BLOCK-UX-05) --- */
[dir="rtl"] .reconnect-card {
  text-align: right;
}

/* --- Accessibilite : prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .reconnect-logo .shield-frag,
  .reconnect-logo .shield-outline,
  .reconnect-logo .shield-cross-el {
    animation: gentle-pulse 3s ease-in-out infinite !important;
  }
}

@keyframes gentle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Accessibilite : prefers-contrast:more (BLOCK-UX-04) --- */
@media (prefers-contrast: more) {
  .reconnect-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .reconnect-card {
    border-width: 3px;
    border-color: rgb(var(--color-text, 17 24 39));
    box-shadow: 0 0 0 4px rgb(var(--color-surface, 255 255 255));
  }

  .reconnect-hint {
    color: rgb(var(--color-text, 17 24 39));
  }

  .reconnect-reassurance {
    color: rgb(var(--color-text-secondary, 55 65 81));
  }

  .reconnect-retry-btn {
    border: 2px solid rgb(var(--color-text, 17 24 39));
  }
}