/* Styles de l'agent PAGES (thème v2). Ne modifier que ce fichier.
   Rubriques renforcées (template-parts/hub.php, content/hubs/*.html) et hub du blog (template-parts/blog-list.php).
   Mêmes règles que site.css : anneaux, ligne de métro, pas d'ombres, pas d'étiquettes au-dessus des titres. */

/* ---------- Rubrique : premier écran (reprend .em-hub .cat-hero de site.css) ---------- */
.hubx-top .cat-hero h1 { max-width: 13ch; }

/* ---------- Réponse courte en tête ---------- */
.hubx-answer { padding-top: 0; }
.hubx-answer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.hubx-answer__text { grid-column: 4 / span 8; }
.hubx-answer__lead { font-size: var(--step-lead); line-height: 1.45; max-width: 46ch; }
.hubx-checked { margin-top: 20px; color: var(--muted); font-size: var(--step-small); font-weight: 500; }
@media (max-width: 900px) { .hubx-answer__text { grid-column: 1 / -1; } }

/* ---------- Sections : titre à gauche, texte à droite ---------- */
.hubx-sec--alt { background: var(--surface); }
.hubx-sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: start; }
.hubx-sec__grid > h2 { grid-column: 1 / span 4; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); max-width: 14ch; position: sticky; top: 104px; }
.hubx-sec__body { grid-column: 6 / span 7; }
.hubx-sec__body > * + * { margin-top: 1em; }
.hubx-sec__body p, .hubx-sec__body li { max-width: 62ch; }
.hubx-sec__body h3 { margin-top: 2em; font-size: 1.375rem; }
.hubx-sec__body h3:first-child { margin-top: 0; }
.hubx-sec__body h3 + * { margin-top: 0.6em; }
.hubx-sec__body a:not(.btn) { color: var(--accent); font-weight: 500; }
.hubx-sec__body .ring-list { margin-top: 1.2em; gap: 14px; }
.hubx-note { color: var(--muted); font-size: var(--step-small); }
@media (max-width: 900px) {
	.hubx-sec__grid > h2 { grid-column: 1 / -1; position: static; max-width: none; }
	.hubx-sec__body { grid-column: 1 / -1; }
}

/* Tableaux (tarifs, loyers, impôt) : lignes simples, défilement horizontal sur téléphone */
.hubx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hubx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 1rem; }
.hubx-table th, .hubx-table td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
.hubx-table thead th { color: var(--muted); font-weight: 500; }
.hubx-table td:last-child, .hubx-table th:last-child { padding-right: 0; }
.hubx-table .num { white-space: nowrap; font-weight: 600; color: var(--accent); }
.hubx-sec--alt .hubx-table th, .hubx-sec--alt .hubx-table td { border-bottom-color: var(--surface-2); }

/* ---------- Étapes : ligne de métro (reprend .how de site.css) ---------- */
.hubx-steps h2 { font-size: var(--step-head); max-width: 16ch; }
.hubx-steps .how--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hubx-steps.hubx-sec--alt .how li::before { background: var(--surface); }
.hubx-steps .how p { max-width: 30ch; }
@media (max-width: 1100px) { .hubx-steps .how--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hubx-steps .how--4 li:nth-child(2)::after { display: none; } }
@media (max-width: 760px) { .hubx-steps .how--4 { grid-template-columns: 1fr; } .hubx-steps .how--4 li:nth-child(2)::after { display: block; } }

/* ---------- Guides de la rubrique : puces en anneau ; en préparation = anneau clair ---------- */
.hubx-guides { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.hubx-guides li { position: relative; padding-left: 44px; max-width: 60ch; }
.hubx-guides li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 24px; height: 24px; border: 6px solid var(--accent); border-radius: 50%; box-sizing: border-box; }
.hubx-guides a { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.hubx-sec__body .hubx-guides a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .hubx-guides a:hover { text-decoration-color: var(--accent); } }
.hubx-guides li > span { display: block; margin-top: 4px; color: var(--muted); }
.hubx-guides .is-soon::before { border-color: var(--surface-2); }
.hubx-guides .is-soon strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--muted); }
.hubx-guides .is-soon em { font-style: normal; font-size: var(--step-small); font-weight: 500; color: var(--muted); margin-left: 6px; }

/* ---------- Offre conseillée de la rubrique ---------- */
.hubx-offer { background: var(--deep); color: var(--deep-ink); }
.hubx-offer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.hubx-offer__text { grid-column: 1 / span 6; }
.hubx-offer__text h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem); max-width: 16ch; margin-bottom: 20px; }
.hubx-offer__text p { max-width: 46ch; }
.hubx-offer__price { margin-top: 24px; color: var(--deep-muted); }
.hubx-offer__price span { color: var(--deep-ink); font-size: var(--step-lead); font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.hubx-offer__status { color: var(--deep-muted); font-size: var(--step-small); }
.hubx-offer__actions { margin-top: 28px; }
.hubx-offer .btn { background: var(--deep-ink); color: var(--deep); }
@media (hover: hover) and (pointer: fine) { .hubx-offer .btn:hover { background: #FFFFFF; } }
.hubx-offer__lines { grid-column: 8 / span 5; margin: 0; }
.hubx-offer .ring-list li { color: var(--deep-ink); }
.hubx-offer .ring-list li::before { border-color: var(--deep-ink); }
@media (max-width: 900px) { .hubx-offer__text, .hubx-offer__lines { grid-column: 1 / -1; } }

/* ---------- FAQ : reprend .questions / .faq de site.css ---------- */
.hubx .questions { margin-top: 0; }

/* ---------- Sources ---------- */
.hubx-sources ol { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; font-size: 1rem; }
.hubx-sources li { max-width: 72ch; overflow-wrap: anywhere; }
.hubx-sources li::marker { color: var(--accent); font-weight: 600; }
.hubx-sources a { color: var(--ink); font-weight: 500; }
.hubx-sources .hubx-note { margin-top: 20px; }

/* ---------- Blog : articles et guides organisés par thème ---------- */
.blog-themes { padding-top: 0; }
.blog-jump { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 36px; }
.blog-theme + .blog-theme { margin-top: clamp(3.5rem, 7vw, 6rem); }
.blog-theme__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.blog-theme__head { grid-column: 1 / span 4; }
.blog-theme__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); max-width: 12ch; }
.blog-theme__head h2 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .blog-theme__head h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); } }
.blog-theme__head p { margin-top: 16px; max-width: 36ch; }
.blog-theme__body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 32px; }
.blog-theme__body .post-rows { margin: 0; }
.blog-theme__guides h3 { font-size: 1.125rem; margin-bottom: 18px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.blog-theme__guides .hubx-guides + .hubx-guides { margin-top: 22px; }
.blog-theme__hubs { margin-top: 24px; }
.blog-theme__empty { color: var(--muted); max-width: 52ch; }
.blog-cat-guides { margin-top: clamp(3rem, 6vw, 5rem); }
.blog-cat-guides h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); margin-bottom: 28px; }
@media (max-width: 900px) { .blog-theme__head, .blog-theme__body { grid-column: 1 / -1; } }