/* Gabarits article (variante B) et technologie (variante A) — lot 121.
   Chargé uniquement par templates/single.php. S'appuie sur les variables de horizon.css (système « Verre »),
   ne modifie aucune règle existante hors des classes hz-g-*. */

.hz-g-art, .hz-g-tech { font-family: var(--horizon-font-sans); color: var(--horizon-anthracite); }
.hz-g-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hz-g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 18px 0 0; font-size: 13.5px; color: var(--horizon-anthracite-soft); }
.hz-g-h2 { margin: 0 0 20px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--horizon-bleu); text-wrap: balance; }
@media (min-width: 1100px) { .hz-g-h2 { font-size: 32px; } }

/* Lecture : colonne de 720 px, titres plus aérés que dessous, listes numérotées en grandes étapes */
.hz-g-prose { margin-top: 0; font-size: 17px; line-height: 1.7; }
@media (min-width: 768px) { .hz-g-prose { font-size: 18px; } }
.hz-g-prose > :first-child { margin-top: 0; }
.hz-g-prose h2 { margin: 52px 0 14px; scroll-margin-top: 88px; }
@media (min-width: 1100px) { .hz-g-prose h2 { font-size: 30px; } }
.hz-g-prose h3 { margin-top: 30px; }
.hz-g-prose a { text-decoration-color: var(--horizon-laiton); text-underline-offset: 3px; }
.hz-g-prose li::marker { color: var(--horizon-laiton); font-weight: 700; }
.hz-g-prose table { font-variant-numeric: tabular-nums; }
.hz-g-prose ::selection, .hz-g-top ::selection { background: rgba(111, 137, 119, .3); }

/* ============================================================ ARTICLE — variante B */
.hz-g-top { background: var(--horizon-gris-verre); }
.hz-g-top__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 8px; padding-bottom: 32px; }
.hz-g-top__in--solo { max-width: 860px; }
.hz-g-top__img { margin: 0 -16px; order: -1; }
.hz-g-top__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.hz-g-top .hz-crumbs { padding-top: 14px; }
.hz-g-top__title { margin: 10px 0 18px; font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; color: var(--horizon-bleu); text-wrap: balance; }
.hz-g-answer { display: grid; gap: 14px; background: var(--horizon-blanc-verre); border: 1px solid var(--horizon-gris-verre-ligne); border-radius: 10px; padding: 20px 20px 18px; }
.hz-g-answer__lead { margin: 0; font-size: 17.5px; line-height: 1.55; font-weight: 500; color: var(--horizon-anthracite); }
.hz-g-answer__toc { margin: 0; padding: 0; list-style: none; counter-reset: hzg; display: grid; gap: 2px; border-top: 1px solid var(--horizon-gris-verre-ligne); padding-top: 10px; }
.hz-g-answer__toc li { counter-increment: hzg; }
.hz-g-answer__toc a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; min-height: 36px; padding: 6px 0; color: var(--horizon-bleu); font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.hz-g-answer__toc a::before { content: counter(hzg); font-weight: 800; color: var(--horizon-laiton); }
.hz-g-answer__toc a:hover span, .hz-g-answer__toc a:hover { text-decoration: underline; text-decoration-color: var(--horizon-laiton); text-underline-offset: 3px; }
@media (min-width: 768px) {
  .hz-g-top__img { margin: 0; }
  .hz-g-top__title { font-size: 42px; }
}
@media (min-width: 1000px) {
  .hz-g-top__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-top: 24px; padding-bottom: 56px; }
  .hz-g-top__in--solo { grid-template-columns: minmax(0, 1fr); }
  .hz-g-top__img { order: 0; }
  .hz-g-top__img img { aspect-ratio: 4 / 5; border-radius: 10px; max-height: 620px; }
  .hz-g-top__title { font-size: 52px; }
}

.hz-g-related { max-width: 784px; padding-top: 40px; }
.hz-g-related__h { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--horizon-bleu); }
.hz-g-related ul { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 6px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hz-g-related ul::-webkit-scrollbar { display: none; }
.hz-g-related a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--horizon-gris-verre-ligne); border-radius: 999px; color: var(--horizon-anthracite); font-size: 14.5px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: border-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1); }
.hz-g-related a:hover { border-color: var(--horizon-bleu); color: var(--horizon-bleu); }
@media (min-width: 768px) { .hz-g-related ul { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .hz-g-related a { white-space: normal; } }

.hz-g-main { max-width: 784px; padding-top: 36px; }
/* Listes numérotées du contenu : grandes étapes (méthodes pas à pas) */
.hz-g-art .hz-g-prose ol { list-style: none; counter-reset: hzs; padding: 0; margin: 18px 0; border-top: 1px solid var(--horizon-gris-verre-ligne); }
.hz-g-art .hz-g-prose ol > li { counter-increment: hzs; position: relative; margin: 0; padding: 18px 0 18px 58px; border-bottom: 1px solid var(--horizon-gris-verre-ligne); }
.hz-g-art .hz-g-prose ol > li::before { content: counter(hzs); position: absolute; left: 0; top: 14px; width: 44px; font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; color: var(--horizon-bleu); }
/* Lot 168 : la puce orange des listes du theme (theme.css, li::before 3 x 3 px) s'appliquait aussi au chiffre et dessinait un trait orange sous le filet. */
.hz-g-art .hz-g-prose ol > li::before { display: block; height: auto; background: none; }
.hz-g-art .hz-g-prose ol > li > strong:first-child { color: var(--horizon-bleu); }
@media (min-width: 768px) { .hz-g-art .hz-g-prose ol > li { padding-left: 76px; } .hz-g-art .hz-g-prose ol > li::before { font-size: 38px; top: 12px; } }
.hz-g-art .hz-author { margin-top: 48px; }
.hz-g-art .hz-art__cta, .hz-g-tech .hz-art__cta { max-width: 784px; }

/* ============================================================ TECHNOLOGIE — variante A */
.hz-g-tintro { padding-top: 32px; max-width: 1120px; }
.hz-g-tintro .hz-crumbs { padding-bottom: 6px; }
.hz-g-tintro__title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; color: var(--horizon-bleu); text-wrap: balance; max-width: 18ch; }
.hz-g-tintro__lead { margin: 16px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--horizon-bleu); }
@media (min-width: 768px) { .hz-g-tintro { padding-top: 48px; } .hz-g-tintro__title { font-size: 46px; } .hz-g-tintro__lead { font-size: 21px; } }
@media (min-width: 1100px) { .hz-g-tintro__title { font-size: 56px; } }
.hz-g-tabs { display: flex; gap: 2px; width: max-content; max-width: 100%; overflow-x: auto; margin-top: 24px; padding: 4px; border-radius: 999px; background: var(--horizon-gris-verre); }
.hz-g-tabs a { white-space: nowrap; padding: 10px 14px; border-radius: 999px; color: var(--horizon-anthracite-soft); font-size: 14px; font-weight: 600; text-decoration: none; }
.hz-g-tabs a[aria-current] { background: var(--horizon-blanc-verre); color: var(--horizon-bleu); }

.hz-g-tgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; }
@media (min-width: 1000px) { .hz-g-tgrid { grid-template-columns: 280px minmax(0, 1fr); gap: 72px; padding-top: 56px; } .hz-g-tgrid--solo { grid-template-columns: minmax(0, 760px); } }
.hz-g-proof { align-self: start; border-top: 1.5px solid var(--horizon-bleu); }
@media (min-width: 1000px) { .hz-g-proof { position: sticky; top: 96px; } }
.hz-g-proof__h { margin: 12px 0 0; font-size: 14px; font-weight: 800; color: var(--horizon-bleu); }
.hz-g-proof dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; margin: 0; }
@media (min-width: 1000px) { .hz-g-proof dl { grid-template-columns: minmax(0, 1fr); } }
.hz-g-proof dl > div { padding: 16px 0; border-bottom: 1px solid var(--horizon-gris-verre-ligne); }
.hz-g-proof dt { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--horizon-bleu); font-variant-numeric: tabular-nums; }
.hz-g-proof dd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--horizon-anthracite-soft); }
@media (min-width: 1000px) { .hz-g-proof dt { font-size: 32px; } }
.hz-g-proof__btn { width: 100%; margin-top: 22px; }

.hz-g-how { margin-bottom: 56px; }
.hz-g-steps { margin: 0; padding: 0; list-style: none; counter-reset: hzt; border-top: 1px solid var(--horizon-gris-verre-ligne); }
.hz-g-steps li { counter-increment: hzt; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--horizon-gris-verre-ligne); }
.hz-g-steps li::before { content: counter(hzt); grid-row: 1 / span 2; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--horizon-bleu); }
.hz-g-steps h3 { margin: 2px 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; color: var(--horizon-bleu); }
.hz-g-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--horizon-anthracite-soft); max-width: 62ch; }
@media (min-width: 768px) { .hz-g-steps li { grid-template-columns: 72px minmax(0, 1fr); } .hz-g-steps li::before { font-size: 44px; } }
.hz-g-tech .hz-g-prose { max-width: 70ch; }

.hz-g-daily { margin-top: 72px; background: var(--horizon-bleu-deep); color: var(--horizon-blanc-verre); }
.hz-g-daily__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 48px; padding-bottom: 48px; }
.hz-g-daily h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; color: var(--horizon-blanc-verre); text-wrap: balance; }
.hz-g-daily p { margin: 0; font-size: 17px; line-height: 1.6; color: #C8D5E0; max-width: 56ch; }
@media (min-width: 900px) { .hz-g-daily__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; } .hz-g-daily h2 { font-size: 44px; } .hz-g-daily p { font-size: 18px; } }

.hz-g-series { padding-top: 64px; }
.hz-g-series ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--horizon-gris-verre-ligne); }
@media (min-width: 900px) { .hz-g-series ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hz-g-series a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--horizon-gris-verre-ligne); color: var(--horizon-anthracite); text-decoration: none; }
.hz-g-series strong { font-size: 18px; color: var(--horizon-bleu); }
.hz-g-series span { grid-column: 1; font-size: 14px; color: var(--horizon-anthracite-soft); }
.hz-g-series .hz-g-icon { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--horizon-bleu); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.hz-g-series a:hover .hz-g-icon { transform: translateX(4px); }
.hz-g-series a:hover strong { text-decoration: underline; text-decoration-color: var(--horizon-laiton); text-underline-offset: 3px; }

.hz-g-art :focus-visible, .hz-g-tech :focus-visible { outline: 2px solid var(--horizon-bleu); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .hz-g-art *, .hz-g-tech * { transition: none !important; } }