/* ==========================================================================
   Modern SPIP 4 Theme - Main Stylesheet
   ========================================================================== */

/* Import order matters for cascade */
@import url('variables.css');
@import url('reset.css');
@import url('base.css');
@import url('layout.css');
@import url('components.css');
@import url('forms.css');
@import url('spip.css');
@import url('theme.css');

/* ==========================================================================
   Custom overrides can be added below
   ========================================================================== */

/* Add your custom CSS here */

.grille-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

.grille-logos img {
  max-width: 100%;
  height: auto;
  border: none;
  box-shadow: none;
}

.grille-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.grille-logos a:hover {
  opacity: 1;
}

/* Couleur vieux rouge pour les liens */
:root {
  --color-old-red: #8B3A3A;
  --color-old-red-dark: #6B2A2A;
}

a {
  color: var(--color-old-red);
}

a:hover {
  color: var(--color-old-red-dark);
}

/* Navigation active - rubrique sélectionnée */
.nav-link.on {
  color: var(--color-old-red);
  font-weight: var(--font-weight-semibold);
  border-bottom: 2px solid var(--color-old-red);
}

/* Pagination horizontale */
.pagination,
nav.pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: var(--space-8) !important;
}

.pagination a,
.pagination strong,
.pagination span,
.pagination > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.pagination a {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

.pagination a:hover {
  background-color: var(--color-old-red);
  color: var(--color-white);
}

.pagination strong,
.pagination .on {
  background-color: var(--color-old-red);
  color: var(--color-white);
}

/* Fond blanc pour le contenu des articles et rubriques */
.page-article .content {
/* .page-rubrique .content { */
  background-color: #FFFFFF;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Tags en couleur vieux rouge */
.tag {
  color: var(--color-old-red);
  background-color: rgba(193, 4, 53, 0.1);
}

.tag:hover {
  color: #FFFFFF;
  background-color: var(--color-old-red);
}