/* =============================================================================
   Enthalpic, site public : articles des Ressources
   Habillage des structures héritées des anciens articles (cartes, encadrés,
   formules, tableaux), dans le système de jetons du site. Chargé par base.html
   après components.css ; n'affecte que .article-content.
   ============================================================================= */

.article-content { max-width: 860px; margin-inline: auto; }

.article-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: var(--border-width) solid var(--color-border);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
}
.article-meta p + p { margin-top: var(--space-1); text-transform: none; letter-spacing: 0; }

.article-body { font-size: var(--text-md); line-height: var(--leading-loose); }
/* Ecran large : colonne plus large et texte un peu plus grand, longueur de ligne inchangee (~90 caracteres) */
@media (min-width: 900px) { .article-body { font-size: 17px; } }
.article-body h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.article-body h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.article-body h4 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.article-body p + p, .article-body ul, .article-body ol { margin-top: var(--space-4); }
.article-body li + li { margin-top: var(--space-1); }
.article-body img { margin-block: var(--space-5); border: var(--border-width) solid var(--color-border); }
.article-body a[target="_blank"]::after { content: " ↗"; font-size: 0.8em; }

/* Mise en valeur en ligne : filet d'accent, pas de surlignage jaune */
.highlight { box-shadow: inset 0 -2px 0 var(--color-accent-soft); font-weight: 500; }

/* Grilles de cartes (composants du cycle, seuils, services) */
.cycle-components, .threshold-cards, .services-grid, .solution-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
}
.component-card, .threshold-card, .service-card, .performance-indicators, .example-box {
  background: var(--color-bg-elevated);
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-5);
  font-size: var(--text-base);
}
.component-card h4, .threshold-card h4, .service-card h3, .service-card h4, .performance-indicators h4, .example-box h4 { margin-top: 0; }
/* Titres de cartes dans les articles : h3 pour l'ordre des titres, taille d'un h4 */
.article-body .component-card h3, .article-body .threshold-card h3, .article-body .performance-indicators h3, .article-body .example-box h3 { margin-top: 0; font-size: var(--text-md); }
.service-card { border-top: var(--accent-bar) solid var(--color-accent); }
.service-content ul { padding-left: 1.1em; }

/* Encadrés */
.info-box, .warning-box, .note, .table-note {
  border-left: var(--accent-bar) solid var(--color-accent);
  background: var(--color-bg-elevated);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  font-size: var(--text-base);
}
.warning-box { border-left-color: var(--color-alert); }
.note, .table-note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Formules et résultats */
.formula {
  font-family: var(--font-mono);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  line-height: 1.8;
}
.example-item + .example-item { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.result { font-family: var(--font-mono); color: var(--color-accent); font-weight: 500; }

/* Tableaux */
.comparison-table-container, .data-table { display: block; overflow-x: auto; margin-block: var(--space-5); }
.comparison-table-container table, table.data-table { display: table; width: 100%; min-width: 520px; background: var(--color-bg-elevated); border: var(--border-width) solid var(--color-border); margin: 0; }

/* Liens réglementaires */
.regulation-links { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-sm); }
.external-link { font-weight: 500; }

/* Emplacement d'illustration non encore produite */
.image-placeholder {
  border: var(--border-width) dashed var(--color-border-strong);
  padding: var(--space-5);
  margin-block: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 600px) {
  .cycle-components, .threshold-cards, .services-grid, .solution-features { grid-template-columns: minmax(0, 1fr); }
}

/* --- Pages legales ----------------------------------------------------------- */
.legal { max-width: 76ch; font-size: var(--text-base); line-height: var(--leading-loose); }
.legal--wide { max-width: none; }
.legal h1 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.legal h3 { font-size: var(--text-md); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.legal h4 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.legal p + p, .legal ul, .legal ol, .legal table { margin-top: var(--space-3); }
.legal li + li { margin-top: var(--space-1); }
.legal table { display: block; overflow-x: auto; }
.legal hr { margin: var(--space-6) 0; }
.legal-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-5); }
.legal-card { background: var(--color-bg-elevated); border: var(--border-width) solid var(--color-border); border-left: var(--accent-bar) solid var(--color-accent); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); line-height: var(--leading-normal); }
.legal-card h2 { font-size: var(--text-sm); font-weight: 600; margin: 0; }
.legal-card p { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.legal-card .btn { margin-top: auto; align-self: flex-start; min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
@media (max-width: 700px) { .legal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .legal-card { padding: var(--space-3); } }