/* =============================================================================
   ARTICLE — système Madic (compact / sombre)
   Chargé en fin de body sur article_page.hbs (sert d'override fiable).
   ============================================================================= */

/* Pas de hero sur l'article : on démarre au fil d'ariane (design) */
.hero.pages--hero { display: none; }

/* ---------- Fil d'ariane ---------- */
.breadcrumbs__block {
  background: none;
  border: none;
  padding: 24px 0 0;
  margin: 0;
}

.breadcrumbs__block .breadcrumbs {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 13px/1.4 var(--md-font-ui, 'Hanken Grotesk', sans-serif);
}
.breadcrumbs__block .breadcrumbs li { display: inline; font-size: 13px; max-width: none; }

/* Pas d'icône maison (le thème en injecte une via LineIcons) */
.breadcrumbs__block .breadcrumbs li:first-child a::before { content: none !important; }

/* Séparateur « / » (remplace le chevron LineIcons du thème) */
.breadcrumbs__block .breadcrumbs li + li::before {
  content: "/" !important;
  font-family: var(--md-font-ui, 'Hanken Grotesk', sans-serif) !important;
  color: var(--md-label-2, #9AA0AC);
  margin: 0 9px;
  font-size: 13px;
}

/* Couleurs : 1er crumb rouge, intermédiaires gris, dernier foncé */
.breadcrumbs__block .breadcrumbs a { color: var(--md-text-2, #5B616E); text-decoration: none; }
.breadcrumbs__block .breadcrumbs a:hover { color: var(--md-red, #E2001A); }
.breadcrumbs__block .breadcrumbs li:first-child a { color: var(--md-red, #E2001A); font-weight: 600; }
.breadcrumbs__block .breadcrumbs li:last-child,
.breadcrumbs__block .breadcrumbs li:last-child a { color: var(--md-text, #1A1D23); font-weight: 600; }

/* ---------- Layout : contenu (gauche) + sidebar collante (droite) ---------- */
.article-container {
  display: grid !important; /* annule le flex row-reverse du thème */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  max-width: none; /* remplit le .container du site (largeur 90% / 1600px) */
  margin: 0;
  padding: 24px 0 64px;
}
/* contenu à gauche — neutralise flex:1 0 75% / max-width:75% / min-width:640 du thème */
.article-container .article {
  order: 1;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex: none !important;
}
.article-container .article-sidebar { order: 2; flex: none !important; } /* sidebar à droite */
.article-container .article.full__article { grid-column: 1 / -1; max-width: 820px; }

@media (max-width: 920px) {
  .article-container { grid-template-columns: 1fr !important; }
  .article-container .article-sidebar { position: static; }
}

/* ---------- Carte article ---------- */
.article-container .article {
  background: var(--md-card, #fff);
  border: 1px solid var(--md-border, #E7E9ED);
  border-radius: var(--md-r-card-lg, 16px);
  padding: 36px;
  box-shadow: var(--md-shadow-card, 0 1px 2px rgba(20,24,32,.04), 0 1px 3px rgba(20,24,32,.06));
}

.article-header {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--md-border-soft, #EEF0F3);
  margin-bottom: 28px;
}

.article-title {
  font: 800 32px/1.1 var(--md-font-display, 'Archivo', sans-serif);
  letter-spacing: -.02em;
  color: var(--md-text, #1A1D23);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Auteur : avatar + nom rouge + « Mis à jour il y a X » */
.article-author { display: flex; align-items: center; gap: 12px; }
.article-author .article-avatar { position: relative; flex: none; width: 38px; height: 38px; }
.article-author .user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
/* avatar propre (pas de badge agent superposé, comme le design) */
.article-author .icon-agent { display: none; }
/* Initiales (pastille dégradée anthracite) — injectées en JS */
.article-author .author-initials {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3A3F49, #15181E);
  color: #fff;
  font: 700 13px/1 var(--md-font-display, 'Archivo', sans-serif);
}
.article-meta { font: 400 12.5px/1.4 var(--md-font-ui, 'Hanken Grotesk', sans-serif); color: var(--md-label-2, #9AA0AC); }
.article-meta a { font: 700 13.5px var(--md-font-ui, 'Hanken Grotesk', sans-serif); color: var(--md-red, #E2001A); text-decoration: none; }
.article-meta .meta-group { display: flex; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.article-meta .meta-data { color: var(--md-label-2, #9AA0AC); }

/* ---------- Corps de l'article (prose) ---------- */
.prose {
  max-width: none; /* le texte remplit la carte (plus de coupure au milieu) */
  font-family: var(--md-font-ui, 'Hanken Grotesk', sans-serif);
  font-size: 15px;
  color: var(--md-text-strong, #3A3F49);
}
.prose p { font-size: 15px; line-height: 1.65; margin: 0 0 1.25rem; }
.prose a { color: var(--md-red, #E2001A); text-decoration: underline; }

/* H2 : titre de section avec barre verticale rouge (design) */
.prose h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 800 19px/1.3 var(--md-font-display, 'Archivo', sans-serif) !important;
  color: var(--md-text, #1A1D23) !important;
  margin: 2.2rem 0 .8rem !important;
  padding: 0 !important;
  border-bottom: none !important;
  background: none !important;
}
.prose h2::before {
  content: "";
  flex: none;
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: var(--md-red, #E2001A);
}

/* H3 : bandeau d'étape anthracite (design) — override .article-body h3 (width:100% + uppercase) */
.prose h3 {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  width: auto !important;
  text-transform: none !important;
  text-align: left !important;
  font: 700 13.5px/1 var(--md-font-ui, 'Hanken Grotesk', sans-serif) !important;
  color: #fff !important;
  background: var(--md-ink, #15181E) !important;
  padding: 9px 16px !important;
  border-radius: 9px !important;
  margin: 2rem 0 1rem !important;
  border-bottom: none !important;
}
.prose h3 strong { font-weight: 700; }
/* Pastille numéro rouge (ajoutée en JS depuis « Étape N ») */
.prose h3 .step-num {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--md-red, #E2001A);
  color: #fff;
  border-radius: 5px;
  font: 700 11px/1 var(--md-font-display, 'Archivo', sans-serif);
}

.prose h4 {
  font: 700 15px var(--md-font-ui, 'Hanken Grotesk', sans-serif) !important;
  color: var(--md-text, #1A1D23) !important;
  margin: 1.5rem 0 .6rem !important;
}

.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.25rem; font-size: 15px; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; line-height: 1.55; }
.prose ul li::before { content: "—"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--md-red, #E2001A); }
.prose ol li { margin-bottom: .5rem; line-height: 1.55; }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--md-border, #E7E9ED);
  margin: 1rem 0;
}

/* Encadré « prérequis » : <blockquote> ou table à fond doux (option rédacteurs) */
.prose blockquote {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--md-soft, #F8F9FB);
  border: 1px solid var(--md-border-soft, #EEF0F3);
  border-left: 3px solid var(--md-ok-dot, #23A65E);
  border-radius: 10px;
  padding: 13px 16px;
  margin: 0 0 1.5rem;
  font: 500 14.5px var(--md-font-ui, 'Hanken Grotesk', sans-serif);
  color: var(--md-text-strong, #3A3F49);
}

/* ---------- Sidebar (collante à droite) ---------- */
.article-sidebar {
  position: sticky;
  top: 80px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Actions : Imprimer (fantôme) + S'abonner (rouge) — côte à côte, même hauteur */
.article-actions { display: flex; gap: 9px; align-items: stretch; }
.article-actions .imprimer {
  flex: 1;
  min-height: 40px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 !important;
  box-sizing: border-box;
  background: #fff !important;
  color: var(--md-text, #1A1D23) !important;
  border: 1px solid var(--md-input-border, #E0E2E7) !important;
  border-radius: var(--md-r-btn, 10px) !important;
  padding: 0 16px !important;
  font: 600 13px/1 var(--md-font-ui, 'Hanken Grotesk', sans-serif) !important;
  cursor: pointer;
  vertical-align: baseline;
  transition: background .15s ease;
}
.article-actions .imprimer:hover { background: var(--md-soft, #F8F9FB) !important; }
.article-actions .imprimer i { color: var(--md-text-2, #5B616E); }
/* la colonne d'abonnement + tout wrapper interne du helper remplissent la largeur */
.article-actions .article-subscribe { flex: 1; display: flex; flex-direction: column; }
.article-actions .article-subscribe > * { width: 100%; }
.article-actions .article-subscribe button,
.article-actions .article-subscribe .subscribe {
  width: 100% !important;
  height: 100%;
  min-height: 40px;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: normal;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--md-red, #E2001A);
  color: #fff;
  border: none;
  border-radius: var(--md-r-btn, 10px);
  padding: 0 16px;
  font: 700 13px/1 var(--md-font-ui, 'Hanken Grotesk', sans-serif);
  cursor: pointer;
  box-shadow: var(--md-shadow-btn, 0 1px 2px rgba(226,0,26,.35));
}
/* Icône cloche devant « S'abonner » (le helper n'en fournit pas) */
.article-actions .article-subscribe button::before {
  content: "\f0f3";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
.article-actions .article-subscribe button:hover { background: var(--md-red-hover, #BE0016); }

/* Carte « Articles dans cette section » */
.article-sidebar .collapsible-sidebar {
  background: var(--md-card, #fff);
  border: 1px solid var(--md-border, #E7E9ED);
  border-radius: var(--md-r-card, 14px);
  padding: 18px;
  margin-top: 0; /* annule le margin-top:25px du thème (style.css:3704) */
}
.article-sidebar .collapsible-sidebar-title,
.article-sidebar .sidenav-title {
  display: block;
  font: 700 13px/1 var(--md-font-ui, 'Hanken Grotesk', sans-serif);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-label, #8A909C);
  margin-bottom: 12px;
  padding: 0;
  border: none;
}
/* pas de barre rouge sous le titre (le thème ajoute .sidenav-title:after) */
.article-sidebar .sidenav-title::after,
.article-sidebar .collapsible-sidebar-title::after { content: none !important; }

/* pas d'icône fichier devant les items (le thème ajoute FontAwesome \f15c) */
.article-sidebar ul > li::before,
.article-sidebar .article-relatives li::before { content: none !important; }
.article-sidebar ul > li { padding-left: 0 !important; }
.article-sidebar .collapsible-sidebar-body ul { margin: 0; padding: 0; list-style: none; }
.article-sidebar .sidenav-item {
  display: block;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--md-text-2, #5B616E);
  text-decoration: none;
  font: 500 13px/1.35 var(--md-font-ui, 'Hanken Grotesk', sans-serif);
  margin-bottom: 2px;
  transition: background .15s ease, color .15s ease;
}
.article-sidebar .sidenav-item:hover { background: var(--md-bg, #F4F5F7); color: var(--md-text, #1A1D23); }
.article-sidebar .sidenav-item.current-article {
  background: var(--md-red-tint, #FDECEC);
  color: var(--md-red, #E2001A);
  font-weight: 700;
}
.article-sidebar .article-sidebar-item {
  display: inline-block;
  margin-top: 8px;
  font: 600 13px var(--md-font-ui, 'Hanken Grotesk', sans-serif);
  color: var(--md-red, #E2001A);
  text-decoration: none;
}

/* Le toggle (chevron) du collapsible : caché en desktop, la carte reste ouverte */
.collapsible-sidebar-toggle { display: none; }
.collapsible-sidebar-body { display: block !important; }

/* Bloc related / recent dans la sidebar (carte secondaire) */
.article-relatives { margin-top: 0; }

/* ---------- Footer article (vote / partage / retour haut) ---------- */
.article-votes {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--md-border-soft, #EEF0F3);
}
.article-votes-question { font: 700 14px var(--md-font-ui, 'Hanken Grotesk', sans-serif); color: var(--md-text, #1A1D23); }
.article-return-to-top a { color: var(--md-text-2, #5B616E); font: 600 13px var(--md-font-ui, 'Hanken Grotesk', sans-serif); text-decoration: none; }
.article-return-to-top a:hover { color: var(--md-red, #E2001A); }

/* ---------- Impression : uniquement le contenu de l'article ---------- */
@media print {
  /* Chrome & éléments hors contenu */
  .header-unified,
  .modern-subnav,
  .site-subnav,
  .breadcrumbs__block,
  .hero,
  .article-sidebar,
  .article-actions,
  .article-footer,
  .article-votes,
  .article-share,
  .article-comment-count,
  .article-return-to-top,
  .article-comments,
  .article-attachments,
  .hc_footer,
  .footer,
  .footer_copyright,
  .toast-container,
  #launcher,
  [data-product="web_widget"],
  .zEWidget-launcher,
  iframe[title*="mess"],
  iframe[id*="webWidget"] {
    display: none !important;
  }

  body { background: #fff !important; }

  /* Largeur pleine, pas de carte */
  .container,
  .article-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .article-container .article {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .prose { max-width: 100% !important; }
}