/* ==========================================================================
   Rubrique « Conseils » — complète offre.css (chargée juste après).
   Mêmes couleurs, mêmes polices ; on ajoute seulement ce qu'un article demande :
   date et temps de lecture, sommaire, encadrés, tableau, images du post, cartes du sommaire de la rubrique.
   ========================================================================== */

/* ---------- article ---------- */
.article-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lo); margin: -4px 0 26px;
}
.article-meta span { margin: 0 8px; opacity: 0.5; }
article h2 { scroll-margin-top: 84px; }
article h3 { font-size: 1.08rem; font-weight: 600; margin: 26px 0 8px; }
article p, article li { max-width: 66ch; }
article ul.points { margin: 0 0 20px; padding-left: 1.15em; color: var(--mid); }
article ul.points li { margin-bottom: 8px; }
article ul.points li::marker { color: var(--accent); }

/* ---------- sommaire ---------- */
.toc {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); padding: 20px 24px 18px; margin: 8px 0 6px;
}
.toc .toc-titre {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lo); margin: 0 0 10px;
}
.toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.toc li { color: var(--lo); }
.toc li::marker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8em; }
.toc a { color: var(--mid); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* ---------- encadrés ---------- */
.encadre {
  border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0;
  background: var(--surface); padding: 16px 20px; margin: 22px 0;
}
.encadre p { margin: 0; }
.encadre p + p { margin-top: 10px; }
.encadre .encadre-titre {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}

/* ---------- tableau ---------- */
.table-wrap { overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400;
  color: var(--lo); background: var(--surface);
}
td { color: var(--mid); }
td strong { white-space: nowrap; }

/* ---------- le post Instagram, en images ---------- */
figure.post { margin: 26px 0 8px; }
figure.post .slides { display: grid; gap: 10px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); max-width: 640px; }
figure.post img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); }
figure.post figcaption {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lo); margin-top: 10px;
}
figure.post figcaption a { color: var(--lo); }

/* ---------- pour aller plus loin ---------- */
.suite-lecture { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- sommaire de la rubrique ---------- */
.liste-conseils { display: grid; gap: 14px; }
.liste-conseils a {
  display: block; text-decoration: none; color: var(--hi);
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  padding: 20px 22px; transition: border-color 0.2s, transform 0.2s;
}
.liste-conseils a:hover { border-color: var(--accent); transform: translateY(-2px); }
.liste-conseils .rubrique {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.liste-conseils h2 { font-size: 1.32rem; margin: 6px 0 6px; }
.liste-conseils p { font-size: 0.95rem; margin: 0; color: var(--lo); }

/* ---------- source d'un chiffre, avertissement ---------- */
.source { font-size: 0.88rem; color: var(--lo); }

@media (max-width: 640px) {
  figure.post .slides { grid-template-columns: repeat(var(--n, 3), 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  figure.post img { scroll-snap-align: start; }
  th, td { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .liste-conseils a { transition: none; } }