/* =========================================
   BLOC NAVIGATION (PRÉCÉDENT / SUIVANT)
   ========================================= */

/* ✅ 1. Bloc externe principal : propre et sans fond */
#block-boutonprecsuiv {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important; /* Un peu d'espace vertical est mieux que 0 */
  margin: 0 !important;
}

/* ✅ 2. Supprimer toute mise en forme des layouts internes Drupal */
#block-boutonprecsuiv .layout,
#block-boutonprecsuiv .layout__region,
#block-boutonprecsuiv .block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ✅ 3. Cacher les liens contextuels d’édition (optionnel mais recommandé) */
#block-boutonprecsuiv .contextual {
  display: none !important;
}

/* =========================================
   STYLE DES BOUTONS DE NAVIGATION
   ========================================= */

/* ✅ Conteneur des boutons : alignement propre */
.navigation-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important; /* Espace entre le bouton Précédent et Suivant */
  margin-top: 10px !important; /* ✅ CORRECTION de "5 7px" */
  margin-left: 15px !important; /* Décalage vers la droite comme demandé */
  align-items: center !important;
}

/* ✅ Style des liens/boutons (Soft UI Bleu Marine) */
.navigation-buttons a,
.navigation-buttons .button,
.navigation-buttons .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important; /* Espace entre l'icône (si présente) et le texte */
  
  background-color: #ffffff !important;
  color: #1a2644 !important; /* Texte bleu marine */
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 8px !important; /* Coins arrondis cohérents */
  padding: 10px 20px !important;
  
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  
  /* Ombre douce */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(26, 38, 68, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ✅ Effet au survol (Hover) */
.navigation-buttons a:hover,
.navigation-buttons .button:hover,
.navigation-buttons .btn:hover {
  background-color: #e8ecf4 !important; /* Fond bleu pâle */
  border-color: #1a2644 !important; /* Bordure bleu marine */
  color: #1a2644 !important;
  
  /* Légère lévitation */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(26, 38, 68, 0.1) !important;
}

/* ✅ État actif ou focus (accessibilité) */
.navigation-buttons a:active,
.navigation-buttons a:focus,
.navigation-buttons .button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26, 38, 68, 0.15) !important; /* Halo bleu marine */
  transform: translateY(0) !important;
}