/* Header commun - iArmy */
/* Inclure dans toutes les pages: <link rel="stylesheet" href="/css/header.css"> */

nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.nav-inner {
  max-width: 768px !important;
  margin: 0 auto !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.logo-i {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  background: linear-gradient(135deg, #FF6B35, #FF8B5E) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.logo-i:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 30px rgba(255,107,53,0.5) !important;
}

/* Logo SVG iArmy - avec padding pour voir l'orange autour */
.logo-i svg,
.logo-i img {
  width: 75% !important;
  height: 75% !important;
  object-fit: contain !important;
}

/* Animation idle - le soldat balance bien visible */
.logo-i svg {
  animation: soldierIdle 2.5s ease-in-out infinite !important;
}

@keyframes soldierIdle {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-3deg); }
  70% { transform: rotate(3deg); }
}

/* Le casque bouge bien - surveille à gauche/droite */
.logo-i #i-helmet {
  transform-origin: 70px 70px !important;
  animation: helmetWatch 2.5s ease-in-out infinite !important;
}

@keyframes helmetWatch {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(-8deg) translateX(-1px); }
  75% { transform: rotate(8deg) translateX(1px); }
}

/* Animation au hover - casque manque de tomber puis garde-à-vous */
.logo-i:hover svg {
  animation: soldierSurprise 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
}

.logo-i:hover #i-helmet {
  animation: helmetWobble 0.8s ease-out forwards !important;
}

@keyframes soldierSurprise {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(3deg) scale(0.98); }
  30% { transform: rotate(-2deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes helmetWobble {
  0% { transform: rotate(0deg) translateY(0); }
  15% { transform: rotate(15deg) translateY(2px); }
  30% { transform: rotate(-10deg) translateY(1px); }
  45% { transform: rotate(8deg) translateY(0); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* Petit brillant sur le casque au hover */
.logo-i::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.logo-i:hover::after {
  left: 100%;
}

/* Fallback ancien logo CSS (deprecated) */
.logo-i-new,
.logo-i-helmet,
.logo-i-head,
.logo-i-stem {
  display: none !important;
}

.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Avatar miniature dans le header - Glow continu */
.nav-avatar-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.nav-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,107,53,0.4) !important;
  box-shadow: 0 0 12px rgba(255,107,53,0.3), 0 0 4px rgba(255,107,53,0.15) !important;
  transition: all 0.25s ease !important;
}

.nav-avatar:hover {
  border-color: rgba(255,107,53,0.8) !important;
  box-shadow: 0 0 20px rgba(255,107,53,0.5), 0 0 8px rgba(255,107,53,0.25) !important;
  transform: scale(1.08) !important;
}

.btn-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.5) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  padding: 0 !important;
}

.btn-icon:hover {
  background: rgba(255,255,255,0.08) !important;
  color: white !important;
}

.btn-icon.danger:hover {
  background: rgba(239,68,68,0.1) !important;
  color: #ef4444 !important;
}

/* ==================== */
/* Boutons communs */
/* ==================== */

.btn-primary {
  background: linear-gradient(135deg, #FF6B35, #FF8B5E) !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all 0.3s !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,107,53,0.4) !important;
}

.btn-secondary {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
  transition: all 0.3s !important;
  color: white !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

.btn-danger {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  color: #f87171 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.btn-danger:hover {
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.35) !important;
}

/* ==================== */
/* Alertes */
/* ==================== */

.alert {
  padding: 14px 18px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.alert svg {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.alert-success {
  background: rgba(34,197,94,0.1) !important;
  border: 1px solid rgba(34,197,94,0.25) !important;
  color: #4ade80 !important;
}

.alert-error {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  color: #f87171 !important;
}

.alert-warning {
  background: rgba(245,158,11,0.1) !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
  color: #fbbf24 !important;
}

.alert-info {
  background: rgba(59,130,246,0.1) !important;
  border: 1px solid rgba(59,130,246,0.25) !important;
  color: #60a5fa !important;
}

/* ==================== */
/* Toast notifications */
/* ==================== */

.toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100px) scale(0.9) !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: #1a1a1a !important;
  padding: 14px 24px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
  opacity: 0 !important;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.toast.show {
  transform: translateX(-50%) translateY(0) scale(1) !important;
  opacity: 1 !important;
}

.toast.toast-success {
  background: rgba(34,197,94,0.95) !important;
  color: white !important;
  box-shadow: 0 8px 32px rgba(34,197,94,0.3) !important;
}

.toast.toast-error {
  background: rgba(239,68,68,0.95) !important;
  color: white !important;
  box-shadow: 0 8px 32px rgba(239,68,68,0.3) !important;
}

.toast.toast-warning {
  background: rgba(245,158,11,0.95) !important;
  color: white !important;
  box-shadow: 0 8px 32px rgba(245,158,11,0.3) !important;
}

.toast.toast-info {
  background: rgba(59,130,246,0.95) !important;
  color: white !important;
  box-shadow: 0 8px 32px rgba(59,130,246,0.3) !important;
}

/* ==================== */
/* Badges */
/* ==================== */

.badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.badge-success {
  background: rgba(34,197,94,0.15) !important;
  color: #4ade80 !important;
}

.badge-error {
  background: rgba(239,68,68,0.15) !important;
  color: #f87171 !important;
}

.badge-warning {
  background: rgba(245,158,11,0.15) !important;
  color: #fbbf24 !important;
}

.badge-info {
  background: rgba(59,130,246,0.15) !important;
  color: #60a5fa !important;
}

.badge-orange {
  background: rgba(255,107,53,0.15) !important;
  color: #FF8B5E !important;
}

/* ==================== */
/* Loader unifié iArmy */
/* ==================== */

/* Page loader - plein écran avec logo animé */
.iarmy-loader {
  position: fixed !important;
  inset: 0 !important;
  background: #0f0f0f !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.iarmy-loader.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Glow derrière le logo */
.iarmy-loader-glow {
  position: absolute !important;
  width: 150px !important;
  height: 150px !important;
  background: radial-gradient(circle, rgba(255,107,53,0.25) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  filter: blur(30px) !important;
  animation: loaderGlow 2s ease-in-out infinite !important;
}

@keyframes loaderGlow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* Container du logo */
.iarmy-loader-logo {
  width: 80px !important;
  height: 80px !important;
  background: linear-gradient(135deg, #FF6B35, #FF8B5E) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 10px 40px rgba(255,107,53,0.4) !important;
  animation: logoFloat 2s ease-in-out infinite !important;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.iarmy-loader-logo svg {
  width: 70% !important;
  height: 70% !important;
}

/* Animation du soldat dans le loader */
.iarmy-loader-logo svg {
  animation: loaderSoldier 2s ease-in-out infinite !important;
}

@keyframes loaderSoldier {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* Casque qui surveille */
.iarmy-loader-logo #i-helmet {
  animation: loaderHelmet 2s ease-in-out infinite !important;
  transform-origin: 70px 70px !important;
}

@keyframes loaderHelmet {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  20% { transform: rotate(-12deg) translateX(-2px); }
  40% { transform: rotate(0deg) translateX(0); }
  60% { transform: rotate(10deg) translateX(2px); }
  80% { transform: rotate(0deg) translateX(0); }
}

/* Label optionnel */
.iarmy-loader-label {
  margin-top: 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  animation: loaderLabelPulse 2s ease-in-out infinite !important;
}

@keyframes loaderLabelPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Mini loader - spinner pour actions rapides */
.mini-loader {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(255,107,53,0.2) !important;
  border-top-color: #FF6B35 !important;
  border-radius: 50% !important;
  animation: miniSpin 0.8s linear infinite !important;
}

.mini-loader.white {
  border-color: rgba(255,255,255,0.2) !important;
  border-top-color: white !important;
}

@keyframes miniSpin {
  to { transform: rotate(360deg); }
}

/* Overlay loader - fond semi-transparent */
.overlay-loader {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}

.overlay-loader.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.overlay-loader .mini-loader {
  width: 32px !important;
  height: 32px !important;
  border-width: 3px !important;
}

/* ==================== */
/* Modals uniformes */
/* ==================== */

.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 100 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.modal-overlay.active {
  display: flex !important;
  animation: modalFadeIn 0.3s ease !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: linear-gradient(145deg, rgba(20,20,22,0.95), rgba(12,12,14,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 28px !important;
  width: 100% !important;
  max-width: 440px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 1px 0 rgba(255,255,255,0.1) inset !important;
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
}

.modal::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent) !important;
  border-radius: 28px 28px 0 0 !important;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent) !important;
}

.modal-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.8)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.modal-close {
  width: 32px !important;
  height: 32px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.5) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}

.modal-close:hover {
  background: rgba(255,107,53,0.1) !important;
  color: #FF8B5E !important;
  border-color: rgba(255,107,53,0.2) !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

/* Modal backdrop (alternative) */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 100 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

.modal-backdrop.active {
  opacity: 1 !important;
  pointer-events: all !important;
}

.modal-content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.95) translateY(10px) !important;
  background: linear-gradient(145deg, rgba(20,20,22,0.95), rgba(12,12,14,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 28px !important;
  padding: 40px !important;
  width: 90% !important;
  max-width: 440px !important;
  z-index: 101 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 1px 0 rgba(255,255,255,0.1) inset !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modal-content::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent) !important;
  border-radius: 28px 28px 0 0 !important;
}

.modal-content.active {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) translateY(0) !important;
  pointer-events: all !important;
}

/* Delete modal */
.delete-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 200 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.delete-modal-overlay.show {
  display: flex !important;
}

.delete-modal {
  background: linear-gradient(145deg, rgba(20,20,22,0.98), rgba(12,12,14,0.99)) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  max-width: 360px !important;
  width: 100% !important;
  text-align: center !important;
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.delete-modal-icon {
  width: 56px !important;
  height: 56px !important;
  background: rgba(239,68,68,0.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  color: #f87171 !important;
}

.delete-modal-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  color: white !important;
}

.delete-modal-text {
  font-size: 14px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
}

.delete-modal-btns {
  display: flex !important;
  gap: 12px !important;
}

.delete-modal-btn {
  flex: 1 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
}

.delete-modal-btn.cancel {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.delete-modal-btn.cancel:hover {
  background: rgba(255,255,255,0.1) !important;
}

.delete-modal-btn.confirm {
  background: rgba(239,68,68,0.9) !important;
  color: white !important;
}

.delete-modal-btn.confirm:hover {
  background: #ef4444 !important;
}