/**
 * USMG Tennis - Main Stylesheet
 * Point d'entrée centralisé pour tous les styles
 */

/* Design System */
@import url('variables.css');

/* Reset & Normalisation */
@import url('reset.css');

/* Layout & Structure */
@import url('layout.css');

/* Composants */
@import url('components.css');

/**
 * Styles globaux supplémentaires
 */

/* Titres de section */
.section-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--color-dark);
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--gradient-primary);
  margin: var(--spacing-sm) auto 0;
  border-radius: var(--radius-full);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Animations d'entrée */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Loading state */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

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

/* Alert messages */
.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.alert--success {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.alert--error {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

.alert--warning {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid var(--color-warning);
  color: #f57c00;
}

.alert--info {
  background: rgba(30, 136, 229, 0.1);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
}

.pagination__item {
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.pagination__item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination__item--active {
  background: var(--gradient-primary);
  border-color: var(--color-primary);
  color: white;
}

/* Modal overlay (pour futures fonctionnalités) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal-overlay--active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform var(--transition-base);
}

.modal-overlay--active .modal {
  transform: scale(1);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.breadcrumb__item {
  color: var(--color-text-light);
}

.breadcrumb__item--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.breadcrumb__separator {
  color: var(--color-border);
}

/* Scroll to top button */
.scroll-top {
  position: fixed;
  bottom: var(--spacing-md);
  right: var(--spacing-md);
  width: 50px;
  height: 50px;
  background: var(--gradient-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-base);
  z-index: var(--z-fixed);
}

.scroll-top--visible {
  opacity: 1;
  pointer-events: all;
}

.scroll-top:hover {
  transform: translateY(-4px);
}

/* Print styles */
@media print {
  .header,
  .footer,
  .nav__toggle,
  .btn,
  .scroll-top {
    display: none !important;
  }

  .main {
    min-height: auto;
  }

  body {
    font-size: 12pt;
  }
}