/* ═════════════════════════════════════════════════════════════
   DEMOLITIONS.CSS
   Pages de démolitions : liste de démolitions (liens stylisés),
   statut de complétion, navigation entre démolitions.
   ═════════════════════════════════════════════════════════════ */

/* ─ STATUT "COMPLET" ───────────────────────────────────────────– */
.status-done {
  color: var(--color-accent-green); /* Vert de complétion */
  font-size: var(--font-size-xs); /* Très petit (12px) */
  text-transform: uppercase; /* MAJUSCULES */
  letter-spacing: 0.08em; /* Très espacé */
  font-weight: var(--font-weight-semibold); /* Semi-gras */
}

/* ─ LISTE DE DÉMOLITIONS ───────────────────────────────────────– */
.demolitions {
  display: flex;
  flex-direction: column; /* Empilement vertical */
  gap: 2px; /* 2px entre liens (très resserré) */
}

/* Lien d'une démolition */
.demolitions a {
  padding: var(--spacing-sm) var(--spacing-md); /* 8px haut/bas, 16px côtés */
  background: transparent;
  border-radius: var(--border-radius); /* Coins arrondis (4px) */
  color: var(--color-text-secondary); /* Gris clair */
  text-decoration: none;
  font-size: var(--font-size-sm); /* Petit texte (14px) */
  border-left: 2px solid transparent; /* Barre transparente à gauche */
  transition:
    background var(--transition), /* Fond 0.2s */
    color var(--transition), /* Couleur 0.2s */
    border-color var(--transition), /* Bordure 0.2s */
    padding-left var(--transition); /* Padding 0.2s */
}

/* Effet au survol */
.demolitions a:hover {
  background: var(--color-bg-tertiary); /* Fond gris surlighté */
  color: var(--color-text-primary); /* Texte blanc */
  border-left-color: var(--color-accent); /* Barre bleue à gauche */
  padding-left: var(--spacing-lg); /* Indentation +24px (décalé) */
}

/* ─ NAVIGATION ENTRE DÉMOLITIONS ───────────────────────────────– */
.demolition-navigation {
  display: flex;
  justify-content: space-between; /* Boutons aux extrémités */
  align-items: center;
  gap: var(--spacing-md); /* 16px entre éléments */
  margin-top: var(--spacing-xxl); /* 40px avant */
  padding-top: var(--spacing-xl); /* 32px espace interne */
  border-top: var(--border); /* Ligne grise de séparation */
}

/* Bouton nav : prev/next/center */
.nav-button {
  background: transparent;
  color: var(--color-text-tertiary); /* Gris moyen */
  border: var(--border); /* Bordure grise */
  padding: var(--spacing-sm) var(--spacing-md); /* 8px haut/bas, 16px côtés */
  border-radius: var(--border-radius); /* Coins arrondis (4px) */
  text-decoration: none;
  font-size: var(--font-size-sm); /* Petit texte (14px) */
  letter-spacing: 0.03em; /* Légèrement espacé */
  transition:
    background var(--transition), /* Fond 0.2s */
    color var(--transition), /* Couleur 0.2s */
    border-color var(--transition); /* Bordure 0.2s */
}

/* Survol du bouton */
.nav-button:hover {
  background: var(--color-bg-tertiary); /* Fond gris */
  color: var(--color-accent); /* Texte bleu */
  border-color: var(--color-accent); /* Bordure bleue */
}

/* Bouton au centre */
.nav-button.center {
  margin: 0 auto; /* Centré horizontalement */
}