/* Styles personnalisés pour la page code-acces */

.gradient-text {
  background: linear-gradient(135deg, #E91E8C 0%, #F97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-bg {
  background: linear-gradient(135deg, #E91E8C 0%, #F97316 100%);
}

.page-bg {
  background: linear-gradient(160deg, #fff9fb 0%, #fff4f0 50%, #f8f9ff 100%);
}

/* Barre animée */
.card-bar {
  height: 3px;
  background: linear-gradient(90deg, #E91E8C, #F97316, #a855f7, #E91E8C);
  background-size: 300% 100%;
  animation: barSlide 3s linear infinite;
}

@keyframes barSlide {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* Entrée de la carte */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-enter {
  animation: fadeUp 0.65s cubic-bezier(.22,.68,0,1.15) both;
}

/* Pulse du logo */
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233,30,140,0.18); }
  50%       { box-shadow: 0 0 0 10px rgba(233,30,140,0); }
}

.logo-pulse {
  animation: logoPulse 2.8s ease-in-out infinite;
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Champ de saisie du code */
.code-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
}

.code-input:focus {
  outline: none;
  border-color: #E91E8C;
  box-shadow: 0 0 0 3px rgba(233,30,140,0.12);
}

.code-input::placeholder {
  letter-spacing: 0.04em;
  font-size: 0.9rem;
}

/* Bouton de soumission */
.btn-submit {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-submit:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(233,30,140,0.35);
}

.btn-submit:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

/* État succès (code valide) */
.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* Animation message d'erreur */
@keyframes errSlide {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.err-anim {
  animation: errSlide 0.25s ease both;
}

/* Formes décoratives */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}

.deco-1 {
  animation: float 6s ease-in-out infinite;
}

.deco-2 {
  animation: float 8s ease-in-out infinite 2s;
}

.deco-3 {
  animation: float 5s ease-in-out infinite 4s;
}

/* Utilitaires */
.hidden {
  display: none;
}