/* ----------------------------------------------------------------- */
/* 1. FONDAMENTAUX & TYPOGRAPHIE (v2)
/* ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #374151;
  line-height: 1.6;
}

/* ----------------------------------------------------------------- */
/* 2. EN-TÊTE D'ARTICLE (v2 - Titre moins gros)
/* ----------------------------------------------------------------- */
.article-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 2rem;
}

.article-title {
  font-size: 2rem; /* 32px (réduit de 2.25rem / 36px) */
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

/* Conteneur pour l'auteur et les actions */
.article-meta-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.article-meta {
  font-size: 0.875rem; /* 14px */
  color: #6b7280;
}

.article-meta .meta-group {
  margin-left: 0;
}

.article-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.article-meta-container .button-imprimer {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.article-meta-container .button-imprimer:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

/* ----------------------------------------------------------------- */
/* 3. CORPS DE L'ARTICLE (v2 - Hiérarchie des titres)
/* ----------------------------------------------------------------- */

.prose {
  max-width: 720px !important;
  /* Réduction de la taille de police de base pour l'article */
  font-size: 0.95rem !important; /* 15px (au lieu de 16px) */
}

/* Paragraphes */
.prose p {
  font-size: 1em !important; /* 1em de 0.95rem = 15px */
  line-height: 1.65 !important; /* Hauteur de ligne légèrement augmentée pour la lisibilité */
  margin-bottom: 1.25rem !important;
}

/* Réinitialisation de base pour tous les titres DANS l'article */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  background-color: transparent !important;
  color: #111827 !important;
  font-weight: 600 !important;
  margin: 1.5rem 0 1rem 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* * STYLE H2 (Pour "OBJECTIF", "PRÉREQUIS", "PROCÉDURE")
 * Titre de section principal : avec une ligne en dessous.
 */
.prose h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  padding-bottom: 0.5rem !important;
  margin-top: 2.5rem !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* * STYLE H3 (Pour "ETAPE 1", "ETAPE 2")
 * Style "badge" pour bien marquer les étapes.
 */
.prose h3 {
  font-size: 1.125rem !important; /* 18px */
  font-weight: 600 !important;
  color: #ffffff !important; /* Texte blanc */
  background-color: #374151 !important; /* Fond gris foncé (style moderne) */
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important; /* Coins arrondis */
  margin-top: 2.25rem !important; /* Bon espace avant l'étape */
  margin-bottom: 1.25rem !important;
  display: inline-block !important; /* Le fond ne prend pas toute la largeur */
  border-bottom: none !important; /* Important: pas de ligne en dessous */
}

/* * STYLE H4 (Pour les sous-étapes, si nécessaire)
 * Simple titre en gras.
 */
.prose h4 {
  font-size: 1rem !important; /* 15px (ou 1.1rem) */
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}


.prose ul,
.prose ol {
  padding-left: 1.25rem !important; /* Indentation globale */
  margin-bottom: 1.25rem !important;
  font-size: 1em !important; /* Hérite de .prose (15px) */
}

/* Listes non ordonnées (puces) */
.prose ul {
  list-style-type: none !important; /* On retire les puces par défaut */
}
/* Listes ordonnées (numéros) */
.prose ol {
  list-style-type: decimal !important; /* On garde les numéros */
}

/* Éléments de liste non ordonnée */
.prose ul li {
  position: relative !important; /* Requis pour le pseudo-élément */
  padding-left: 1.75rem !important; /* Espace pour le nouveau "bullet" */
  margin-bottom: 0.625rem !important; /* Espace entre les items */
  line-height: 1.5 !important;
}

/* Création de la nouvelle puce personnalisée (un tiret long) */
.prose ul li::before {
  content: '—' !important; /* Tiret cadratin, plus propre qu'un simple - */
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  font-weight: 700 !important;
  color: #4b5563 !important; /* Couleur gris-bleu, plus doux que le noir */
}

/* Éléments de liste ordonnée (pour s'assurer que l'espacement est bon) */
.prose ol li {
    margin-bottom: 0.625rem !important;
    line-height: 1.5 !important;
    padding-left: 0.5rem !important; /* Léger alignement */
}
/* Style pour les images dans la procédure */
.prose img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.5rem !important;
  border: 3px solid #e5e7eb !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* ----------------------------------------------------------------- */
/* 4. BARRE LATÉRALE (Sidebar) (v2 - Inchangé)
/* ----------------------------------------------------------------- */
.article-sidebar {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}

.article-sidebar .collapsible-sidebar-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.article-sidebar .sidenav-item {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.article-sidebar .sidenav-item:hover {
  background-color: #e5e7eb;
  color: #111827;
}

.article-sidebar .sidenav-item.current-article {
  background-color: #e0e7ff;
  color: #3730a3;
  font-weight: 500;
}