/* ==========================================================================
   PAGE — ARTICLE (single post) · cree-ton-entreprise.ch
   Layout 2 colonnes (contenu + aside sommaire sticky), fidèle à la maquette.
   Chargé via is_singular('post'). S'appuie sur components.css (.prose, .post-card).
   ========================================================================== */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-7) var(--space-8);
}

/* ----- Colonne article ----- */
.article__category { display: inline-block; margin-bottom: var(--space-3); }
.article > h1 { font-size: var(--fs-h1); margin-bottom: var(--space-5); }

.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-5); margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-card);
}
.article__author { display: inline-flex; align-items: center; gap: var(--space-3); }
.article__author-name { font-weight: var(--fw-bold); color: var(--text-strong); }
.meta-chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }

.article__media { margin-bottom: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; }
.article__media img { width: 100%; height: auto; display: block; }

/* Typographie de lecture : intro grande (.lead-in), corps en taille normale. */
.prose > * + * { margin-top: var(--space-5); }
.prose .lead-in { font-size: var(--fs-lead); color: var(--text-strong); line-height: var(--lh-snug); }
.prose h2 { margin-top: var(--space-8); }
.prose :where(h2, h3)[id] { scroll-margin-top: 90px; } /* ancrage sous header sticky */

/* ----- Tableau comparatif (auto sur les tableaux d'article) ----- */
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-table table { border: 1px solid var(--border-card); border-radius: var(--radius-lg); overflow: hidden; min-width: 540px; background: var(--white); }
.prose .wp-block-table thead th { background: var(--blue-trust); color: var(--white); font-weight: var(--fw-bold); }
.prose .wp-block-table th, .prose .wp-block-table td { font-size: var(--fs-sm); padding: var(--space-3) var(--space-4); }
.prose .wp-block-table tbody td { font-weight: var(--fw-semibold); color: var(--text-body); }
/* Variant « chiffré » (.is-pricing) : colonnes de valeurs alignées à droite, sur une seule
   ligne (pas de retour). La 1re colonne (libellé) reste à gauche et peut passer à la ligne.
   À utiliser pour les tableaux de prix/montants ; les tableaux comparatifs « texte » ne le mettent pas. */
.prose .wp-block-table.is-pricing th:not(:first-child),
.prose .wp-block-table.is-pricing td:not(:first-child) { text-align: right; white-space: nowrap; }
/* Densité : la table de prix porte plus de colonnes chiffrées → marge intérieure réduite
   et typo légèrement plus petite pour éviter le scroll horizontal sur mobile/desktop étroit. */
.prose .wp-block-table.is-pricing th, .prose .wp-block-table.is-pricing td { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }
.prose .wp-block-table.is-pricing table { min-width: 0; }

/* ----- Callouts de contenu (blocs Groupe avec className) ----- */
.prose .callout { border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.prose .callout__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: var(--space-3); }
.prose .callout p, .prose .callout li { color: var(--text-body); }
.prose .callout--brief { background: var(--blue-50); border: 1px solid var(--blue-100); }
.prose .callout--brief .callout__title { color: var(--blue-trust); }
.prose .callout--brief li { font-weight: var(--fw-semibold); color: var(--text-strong); }
.prose .callout--keep { background: var(--bg-soft); border-left: 4px solid var(--blue-electric); }
.prose .callout--keep .callout__title { color: var(--text-strong); }
.prose .callout--def { background: var(--surface-muted); border: 1px dashed var(--border-soft); }
.prose .callout--def .callout__title { color: var(--text-muted); }
.prose .callout--example { background: var(--bg-soft); border-left: 4px solid var(--red, #E22A4B); }
.prose .callout--example .callout__title { color: var(--red, #E22A4B); }

/* ----- CTA inline mis en évidence (milieu d'article) ----- */
.prose .cta-inline { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-6); }
.prose .cta-inline p { margin: 0; }
.prose .cta-inline__title { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-h4); }
.prose .cta-inline .cta-inline__sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }
.prose .cta-inline .cta-inline__action { margin-top: var(--space-5); }
.prose .cta-inline__action .btn { margin: 0; color: var(--text-on-red); }

/* ----- Sommaire ----- */
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: var(--space-2); }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }
.toc a::before { content: counter(toc) "."; color: var(--blue-electric); font-weight: var(--fw-bold); flex-shrink: 0; }
.toc a:hover { color: var(--blue-electric); text-decoration: none; }

/* sommaire desktop (dans l'aside sticky) */
.article-aside { position: sticky; top: var(--space-7); display: grid; gap: var(--space-5); align-self: start; }
.toc--desktop { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: var(--space-5); }
.toc--desktop h2 { font-size: var(--fs-h4); margin-bottom: var(--space-4); }

/* sommaire mobile (repliable) — masqué en desktop */
.toc-mobile { display: none; }
.toc-mobile summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: var(--fw-bold); padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); list-style: none; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile[open] summary .chev { transform: rotate(180deg); }
.toc-mobile .chev { transition: transform var(--t-med); color: var(--blue-electric); }
.toc-mobile .toc { padding: var(--space-4) var(--space-5); }

/* ----- CTA latéral ----- */
.side-cta { background: linear-gradient(160deg, var(--blue-electric), var(--blue-trust)); color: var(--white); border-radius: var(--radius-lg); padding: var(--space-6); }
.side-cta h2 { color: var(--white); font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.side-cta p { color: color-mix(in srgb, var(--white) 88%, transparent); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.side-cta .btn { width: 100%; background: var(--white); color: var(--blue-trust); }
.side-cta .btn:hover { background: var(--beige-soft); }

/* ----- Encadré auteur (E-E-A-T) ----- */
.author-box {
  display: flex; gap: var(--space-4); align-items: flex-start;
  margin-top: var(--space-8); padding: var(--space-6);
  background: var(--surface-muted); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
}
.author-box__name { font-weight: var(--fw-extra); color: var(--text-strong); }
.author-box__name a { color: inherit; text-decoration: none; }
.author-box__name a:hover { text-decoration: underline; }
.author-box__bio { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-2); }
.author-box__links { margin-top: var(--space-3); }
.author-box__links a { color: var(--text-link); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.author-box__links a:hover { text-decoration: underline; }
.avatar--lg { width: 60px; height: 60px; font-size: var(--fs-lead); flex-shrink: 0; }

/* ----- Responsive : 1 colonne ----- */
@media (max-width: 980px) {
  /* minmax(0,1fr) et pas 1fr : « 1fr » = minmax(auto,1fr) dont le min = min-content ; un
     tableau .is-pricing (min-width:540px) imposerait alors 540px à la colonne → débordement
     horizontal sur mobile (H1, méta, tout coupé). minmax(0,…) + min-width:0 laissent la colonne
     descendre sous le min-content, et le tableau se contient via son overflow-x:auto. (Fix 30.06.) */
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .article { min-width: 0; }
  .article-aside { position: static; min-width: 0; }
  .toc--desktop { display: none; }   /* le sommaire mobile prend le relais */
  .toc-mobile { display: block; margin-bottom: var(--space-6); }
}