/* Article (maquette « Article template ») et pages texte. Chargé sur single.php et template-legal.php.
   Le HTML existant des articles (paragraphes courts, data-start/end, hr, figures, tableaux) est rendu tel quel. */

/* Barre de progression de lecture : 2px accent sous le header */
.tm-reading-progress { position: fixed; left: 0; right: 0; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h)); height: 2px; z-index: 880; pointer-events: none; }
.tm-reading-progress span { display: block; height: 100%; width: 100%; background: var(--accent-ink); transform: scaleX(var(--tm-progress, 0)); transform-origin: left; }

/* Fil d'Ariane */
.tm-breadcrumb {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 40px var(--gutter) 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; line-height: normal; color: var(--text-subtle);
}
.tm-breadcrumb a { color: var(--text-subtle); text-decoration: none; }
.tm-breadcrumb a:hover { color: var(--text-primary); }
.tm-breadcrumb a.is-current { color: var(--accent-ink); }

/* Grille : article + colonne sticky 288 */
.tm-post {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 96px;
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 64px; align-items: start;
}
.tm-post__main { min-width: 0; }
.tm-post__head { display: flex; flex-direction: column; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--border-subtle); }
.tm-post__cat {
  align-self: flex-start; padding: 8px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  font-size: 11px; line-height: normal; font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); text-decoration: none;
}
.tm-post__cat:hover { border-color: var(--accent-ink); }
.tm-post__title { font-weight: var(--weight-black); font-size: 52px; line-height: 1.06; letter-spacing: -0.035em; color: var(--text-primary); }
.tm-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; line-height: normal; color: var(--text-muted); }
.tm-post__author { display: flex; align-items: center; gap: 10px; }
.tm-post__avatar {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
  background: var(--border-subtle); border: 1px solid var(--border-default);
  font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--weight-bold); font-size: 13px; color: var(--text-secondary);
}
.tm-post__dot { width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--border-muted); }
.tm-post__cover { margin: 40px 0 0; position: relative; aspect-ratio: 848 / 548; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-alt); }
.tm-post__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Colonne : sommaire et partage */
.tm-post__aside { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + 40px); display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - var(--header-h) - 60px); overflow-y: auto; }
.tm-toc, .tm-share { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.tm-share { gap: 16px; }
.tm-post__label { font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.tm-toc__link { padding-left: 12px; border-left: 2px solid var(--border-subtle); font-size: 14px; line-height: 1.45; color: var(--text-muted); text-decoration: none; }
.tm-toc__link:hover { color: var(--text-primary); }
.tm-toc__link.is-active { border-left-color: var(--accent-ink); color: var(--text-primary); font-weight: var(--weight-semibold); }
.tm-share__list { display: flex; flex-wrap: wrap; gap: 10px; }
.tm-share__btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary);
}
.tm-share__btn:hover, .tm-share__btn:focus-visible { border-color: var(--accent-ink); }
.tm-share__done { font-size: 13px; color: var(--accent-ink); }

/* ------------------------------------------------------------------ */
/* Corps de l'article (.tm-article) : colonne de lecture 720           */
/* ------------------------------------------------------------------ */
.tm-article { margin-top: 40px; max-width: 720px; font-size: 18px; line-height: 1.75; color: var(--text-secondary); overflow-wrap: break-word; }
.tm-article > * { margin: 0; }
.tm-article > * + * { margin-top: 24px; }
.tm-article > p + p { margin-top: 16px; } /* contenu en phrases courtes (un paragraphe par ligne) : rythme proche des retours à la ligne de la maquette */
.tm-article strong, .tm-article b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.tm-article a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.tm-article a:hover { color: var(--accent-hover); }
.tm-article a:not([href]) { color: inherit; text-decoration: none; } /* ancre sans lien (contenu collé) : pas d'aspect de lien */
.tm-article em { font-style: italic; }

/* Séparateurs : nouvelle section, espacement sans trait (maquette : sections espacées de 56) */
.tm-article hr { height: 0; border: 0; margin: 56px 0 0; }
.tm-article hr + * { margin-top: 0; }

.tm-article h1, .tm-article h2, .tm-article h3, .tm-article h4, .tm-article h5 { color: var(--text-primary); } /* ancres : scroll-padding-top du html (header + 16 px), qui s'additionnerait à un scroll-margin */
.tm-article h1, .tm-article h2 { font-weight: var(--weight-black); font-size: 32px; line-height: 1.15; letter-spacing: -0.03em; }
.tm-article h3 { font-weight: var(--weight-bold); font-size: 24px; line-height: normal; letter-spacing: -0.02em; }
.tm-article h4, .tm-article h5 { font-weight: var(--weight-bold); font-size: 18px; line-height: normal; letter-spacing: -0.01em; }
.tm-article * + h2, .tm-article * + h1 { margin-top: 40px; }
.tm-article * + h3 { margin-top: 32px; }
.tm-article h2 + *, .tm-article h1 + * { margin-top: 20px; }
.tm-article h3 + *, .tm-article h4 + * { margin-top: 16px; }

/* Listes : points accent, numéros */
.tm-article ul, .tm-article ol { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tm-article li { position: relative; line-height: 1.6; }
.tm-article ul > li { padding-left: 19px; }
.tm-article ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--accent-ink); }
.tm-article ol { counter-reset: tm-ol; padding-left: 0; gap: 10px; }
.tm-article ol > li { counter-increment: tm-ol; padding-left: 28px; }
.tm-article ol > li::before { content: counter(tm-ol) "."; position: absolute; left: 0; color: var(--text-subtle); font-weight: var(--weight-semibold); }
.tm-article li > ul, .tm-article li > ol { margin-top: 12px; }

/* Citations en carte (accent si .tm-quote--accent) */
.tm-article blockquote {
  padding: 24px 32px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--weight-semibold); font-size: 20px; line-height: 1.4; color: var(--text-primary);
}
.tm-article blockquote p { margin: 0; }
.tm-article blockquote p + p { margin-top: 12px; }
.tm-article blockquote.tm-quote--accent { border-color: var(--border-default); color: var(--accent-ink); }

/* Images et figures */
.tm-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.tm-article figure { max-width: 100%; }
.tm-article figure img { display: block; border: 1px solid var(--border-subtle); }
.tm-article .aligncenter { margin-left: auto; margin-right: auto; }
.tm-article figcaption, .tm-article .wp-element-caption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--text-subtle); text-align: center; }
.tm-article iframe { max-width: 100%; border: 0; border-radius: var(--radius-md); }
.tm-article .wp-block-embed iframe, .tm-article iframe[src*="youtube"], .tm-article iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Tableaux : neutres, défilement horizontal */
.tm-article table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tm-article th, .tm-article td { padding: 12px 14px; border: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.tm-article th { background: var(--surface-card); color: var(--text-primary); font-weight: var(--weight-semibold); }
.tm-article code, .tm-article pre { font-family: var(--font-mono); font-size: 15px; }
.tm-article pre, .tm-article .tm-code { padding: 20px 24px; background: var(--surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow-x: auto; color: var(--text-muted); }

/* Formats de l'éditeur (encadré, note, flux, promo) */
.tm-article .tm-card { padding: 32px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); font-size: 17px; line-height: 1.7; }
.tm-article .tm-card--page { padding: 24px; background: var(--surface-page); border-radius: var(--radius-md); font-size: 16px; color: var(--text-muted); }
.tm-article .tm-flow { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }

/* « En bref » : encadré */
.tm-article__summary { margin-top: 48px !important; padding: 32px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); font-size: 17px; line-height: 1.7; }
.tm-article__summary > * { margin: 0; }
.tm-article__summary > * + * { margin-top: 20px; }
.tm-article__summary h2, .tm-article__summary h3 { font-size: 24px; line-height: normal; letter-spacing: -0.02em; }
.tm-article__summary li { font-size: 17px; }
.tm-article__summary ol, .tm-article__summary ul { gap: 10px; }

/* Encart promo (section avec lien WhatsApp, ou encart des réglages) */
.tm-article__promo {
  position: relative; overflow: hidden; margin-top: 56px; padding: 40px; font-size: 17px; line-height: 1.7;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.tm-article__promo::before { content: ""; position: absolute; top: -120px; right: -60px; width: 400px; height: 280px; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.18), transparent 65%); pointer-events: none; }
.tm-article__promo > * { position: relative; margin: 0; }
.tm-article__promo > * + * { margin-top: 20px; }
.tm-article__promo h2, .tm-article__promo h3 { font-weight: var(--weight-black); font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.tm-article__promo li { font-size: 17px; }
.tm-article__promo-cta a {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 16px 28px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--text-on-accent) !important; text-decoration: none !important;
  font-family: var(--font-body); font-size: 14px; line-height: normal; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-button); text-transform: uppercase;
}
.tm-article__promo-cta a strong { color: inherit; font-weight: inherit; }
.tm-article a.tm-article__button {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 16px 28px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--text-on-accent); text-decoration: none;
  font-family: var(--font-body); font-size: 14px; line-height: normal; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-button); text-transform: uppercase;
}
.tm-article a.tm-article__button:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.tm-article__promo-cta a:hover { background: var(--accent-hover); }

/* Questions liées : cartes avec flèche */
.tm-article__related { margin-top: 56px; max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.tm-article .tm-article__related { margin-top: 56px; }
.tm-article__related > * { margin: 0 !important; }
.tm-article__related-title { font-weight: var(--weight-black); font-size: 24px; line-height: normal; letter-spacing: -0.02em; color: var(--text-primary); }
.tm-article__related-list { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.tm-article__related-list > li {
  position: relative; padding: 20px 56px 20px 24px !important; font-size: 17px; line-height: 1.5; color: var(--text-primary);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color var(--transition-fast);
}
.tm-article__related-list > li::before { display: none; }
.tm-article__related-list > li::after { content: "→"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--accent-ink); }
.tm-article__related-list > li:hover, .tm-article__related-list > li:focus-within { border-color: var(--accent-ink); }
.tm-article__related-list a { color: var(--text-primary) !important; text-decoration: none !important; }
.tm-article__related-list a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toute la carte est cliquable */

/* Tablette : colonne sous l'article masquée (sommaire et partage desktop) */
@media (max-width: 1024px) {
  .tm-post { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tm-post__aside { display: none; }
}

/* Mobile (maquette 390) */
@media (max-width: 768px) {
  .tm-breadcrumb { padding: 20px var(--gutter-mobile) 0; gap: 8px; font-size: 12px; }
  .tm-post { padding: 20px var(--gutter-mobile) 56px; }
  .tm-post__cat { font-size: 10px; }
  .tm-post__title { font-size: 34px; line-height: 1.1; }
  .tm-post__meta { font-size: 13px; }
  .tm-post__avatar { font-size: 12px; }
  .tm-post__cover { border-radius: var(--radius-md); }
  .tm-article { max-width: none; font-size: 15px; }
  .tm-article h1, .tm-article h2 { font-size: 24px; }
  .tm-article h3 { font-size: 20px; }
  .tm-article h4, .tm-article h5 { font-size: 17px; }
  .tm-article ul > li::before { top: 9px; }
  .tm-article blockquote { padding: 20px 24px; font-size: 18px; }
  .tm-article__summary, .tm-article__promo { padding: 24px; font-size: 15px; }
  .tm-article__summary h2, .tm-article__summary h3 { font-size: 18px; }
  .tm-article__summary li, .tm-article__promo li { font-size: 15px; }
  .tm-article__promo h2, .tm-article__promo h3 { font-size: 20px; }
  .tm-article__promo-cta a { font-size: 13px; }
  .tm-article__related-title { font-size: 18px; }
  .tm-article__related-list > li { font-size: 15px; }
}

/* Pages texte (template-legal.php) : H1 et colonne de lecture */
.tm-legal .tm-section__inner { gap: 16px; }
.tm-legal__title { font-weight: var(--weight-black); font-size: 44px; line-height: 1.08; letter-spacing: -0.035em; color: var(--text-primary); }
.tm-legal__date { font-size: 14px; color: var(--text-subtle); }
.tm-legal__content { margin-top: 24px; max-width: none; font-size: 17px; }
@media (max-width: 768px) {
  .tm-legal__title { font-size: 30px; }
  .tm-legal__content { font-size: 15px; }
}