/* Blog (index, category, article) and product banner, in the home-vert design system.
   Everything under .hv; tokens come from home-vert.css. Own classes: hvb-. */

.hv .hvb{padding:20px 20px 40px;display:flex;flex-direction:column;gap:20px}
.hv .hvb ::selection{background:var(--accent);color:var(--accent-ink)}
.hv .hvb h1,.hv .hvb h2,.hv .hvb h3,.hv .hvb p,.hv .hvb ol,.hv .hvb ul{margin:0}

/* breadcrumb */
.hv .hvb-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px;color:var(--muted)}
.hv .hvb-crumbs a{color:var(--ink2)}
.hv .hvb-crumbs a:hover{color:var(--link-hover)}
.hv .hvb-crumbs [aria-current]{color:var(--muted)}

/* page head */
.hv .hvb-head{display:flex;flex-direction:column;gap:14px;padding:12px 0 8px;max-width:920px}
.hv .hvb-head h1{font:800 clamp(30px,2.2vw + 20px,46px)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.hv .hvb-head>p:not(.hvb-meta){font-size:18px;line-height:1.55;color:var(--ink2);max-width:68ch;text-wrap:pretty}
.hv .hvb-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* category pills (links styled as the system's pills) */
.hv .hvb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hv .hvb-pills a.hv-pill{color:var(--ink2);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:16px;text-decoration:none;transition:border-color .15s,background-color .15s,color .15s}
.hv .hvb-pills a.hv-pill:hover{color:var(--ink);border-color:var(--ink2)}
.hv .hvb-pills a.hv-pill.on,.hv .hvb-pills a.hv-pill.on:hover{color:#fff;border-color:var(--nav)}
.hv .hvb-pill-n{font-weight:500;font-variant-numeric:tabular-nums;opacity:.7}

/* article rows */
.hv .hvb-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;padding-block:8px}
.hv .hvb-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line2);position:relative}
.hv .hvb-rows>.hvb-row:last-child,.hv .hvb-rows>.hvb-row:nth-last-child(2):nth-child(odd){border-bottom:0}
.hv .hvb-row-img{display:block;aspect-ratio:1;background:var(--soft);border-radius:8px;overflow:hidden;transition:background-color .2s}
.hv .hvb-row-img img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;padding:8px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hv .hvb-row:hover .hvb-row-img img{transform:scale(1.05)}
.hv .hvb-row-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.hv a.hvb-cat{align-self:flex-start;font:700 11px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--nav2);position:relative;z-index:1}
.hv a.hvb-cat:hover{color:var(--nav)}
.hv .hvb-row-title{font:700 18px/1.3 var(--display);letter-spacing:-.005em;text-wrap:balance}
.hv .hvb-row-title a{color:var(--ink);text-decoration:none}
.hv .hvb-row-title a::after{content:"";position:absolute;inset:0}
.hv .hvb-row:hover .hvb-row-title a{color:var(--nav2)}
.hv .hvb-row-title a:focus-visible{outline:0}
.hv .hvb-row:has(.hvb-row-title a:focus-visible){outline:2px solid var(--link);outline-offset:4px;border-radius:6px}
.hv .hvb-row-ex{font-size:14px;line-height:1.5;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.hv .hvb-empty{align-items:flex-start;gap:12px;padding:32px}
.hv .hvb-empty p{color:var(--ink2);font-size:15px}

/* pagination */
.hv .hvb-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px}
.hv .hvb-pager ul{display:flex;gap:6px;list-style:none;padding:0}
.hv .hvb-pager-n,.hv .hvb-pager-gap{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font:600 14px/1 var(--text);font-variant-numeric:tabular-nums}
.hv a.hvb-pager-n{background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .15s}
.hv a.hvb-pager-n:hover{border-color:var(--ink2);color:var(--ink)}
.hv .hvb-pager-n.on{background:var(--nav);color:#fff}
.hv .hvb-pager-gap{color:var(--muted);min-width:24px}
.hv a.hvb-pager-step{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;color:var(--ink);font:600 14px/1 var(--text);text-decoration:none}
.hv a.hvb-pager-step:hover{background:#fff;color:var(--ink)}

.hv .hvb-families a{text-decoration:none}

/* ---------- article ---------- */
.hv .hvb-single{max-width:1240px}
.hv .hvb-article{display:flex;flex-direction:column;gap:20px}
.hv .hvb-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.hv .hvb-body{padding:clamp(20px,3.4vw,48px);gap:28px}
.hv .hvb-hero{width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:8px;display:block}

.hv .hvb-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.hv .hvb-toc{gap:12px}
.hv .hvb-toc h2{font:700 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hv .hvb-toc ol{list-style:none;padding:0;display:flex;flex-direction:column;counter-reset:hvb}
.hv .hvb-toc li{counter-increment:hvb;border-top:1px solid var(--line2)}
.hv .hvb-toc li:first-child{border-top:0}
.hv .hvb-toc a{display:grid;grid-template-columns:22px 1fr;gap:6px;padding:10px 0;color:var(--ink2);font-size:14px;line-height:1.35;text-decoration:none}
.hv .hvb-toc a::before{content:counter(hvb);font:700 12px/1.6 var(--text);color:var(--nav2);font-variant-numeric:tabular-nums}
.hv .hvb-toc a:hover{color:var(--nav2)}
.hv .hvb-help{padding:22px}
.hv .hvb-help h2{font:800 21px/1.15 var(--display);text-wrap:balance;color:#fff}
.hv .hvb-help p{font-size:13px;color:#D4DEE6}

/* prose: the article text */
.hv .hvb-prose{max-width:70ch;font-size:17px;line-height:1.7;color:var(--ink2);caret-color:var(--nav2)}
.hv .hvb .hvb-prose>*{margin:0}
.hv .hvb .hvb-prose>*+*{margin-top:1.1em}
.hv .hvb .hvb-prose>h2{font:700 clamp(22px,1vw + 18px,28px)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;margin-top:2.1em;scroll-margin-top:24px}
.hv .hvb .hvb-prose>h3{font:700 19px/1.3 var(--display);color:var(--ink);margin-top:1.7em;scroll-margin-top:24px}
.hv .hvb .hvb-prose>h2:first-child,.hv .hvb .hvb-prose>h3:first-child{margin-top:0}
.hv .hvb .hvb-prose>h2+*,.hv .hvb .hvb-prose>h3+*{margin-top:.6em}
.hv .hvb-prose strong{color:var(--ink);font-weight:600}
.hv .hvb-prose a:not(.hv-btn):not(.hvb-banner-name):not(.hvb-banner-img){color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hv .hvb-prose a:not(.hv-btn):not(.hvb-banner-name):not(.hvb-banner-img):hover{color:var(--link-hover);text-decoration-thickness:2px}
.hv .hvb-prose ul,.hv .hvb-prose ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.5em}
.hv .hvb-prose li{position:relative;padding-left:1.6em}
.hv .hvb-prose ul>li::before{content:"";position:absolute;left:.35em;top:.68em;width:7px;height:7px;border-radius:999px;background:var(--accent)}
.hv .hvb-prose ol{counter-reset:hvbo}
.hv .hvb-prose ol>li{counter-increment:hvbo}
.hv .hvb-prose ol>li::before{content:counter(hvbo) ".";position:absolute;left:0;font-weight:700;color:var(--nav2);font-variant-numeric:tabular-nums}
.hv .hvb-prose img{height:auto;border-radius:8px}
.hv .hvb-prose figure{margin-inline:0}
.hv .hvb-prose figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* "à retenir" note: <p class="hvb-note"> or <div class="hvb-note"> */
.hv .hvb-prose .hvb-note{background:var(--tint);color:var(--accent-ink);border-radius:8px;padding:16px 20px;font-size:16px;line-height:1.6}
.hv .hvb-prose .hvb-note strong{color:inherit;font-weight:700}

/* tables: wrap in <div class="hvb-table"> to scroll on phones */
.hv .hvb-prose .hvb-table{overflow-x:auto;border:1px solid var(--line2);border-radius:8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.hv .hvb-prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.hv .hvb-prose th,.hv .hvb-prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line2);vertical-align:top}
.hv .hvb-prose thead th{font:700 12px/1.3 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft);white-space:nowrap}
.hv .hvb-prose tbody th{font-weight:600;color:var(--ink)}
.hv .hvb-prose tbody tr:last-child>*{border-bottom:0}

/* questions and answers: <details class="hvb-faq"><summary>…</summary><p>…</p></details> */
.hv .hvb .hvb-prose>details.hvb-faq{border-top:1px solid var(--line);margin-top:0}
.hv .hvb .hvb-prose>h2+details.hvb-faq{margin-top:1em}
.hv .hvb-prose details.hvb-faq:last-of-type{border-bottom:1px solid var(--line)}
.hv .hvb-prose details.hvb-faq>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:16px;align-items:center;padding:16px 0;font:600 17px/1.4 var(--text);color:var(--ink)}
.hv .hvb-prose details.hvb-faq>summary::-webkit-details-marker{display:none}
.hv .hvb-prose details.hvb-faq>summary::after{content:"";width:10px;height:10px;justify-self:center;border-right:2px solid var(--nav2);border-bottom:2px solid var(--nav2);transform:translateY(-3px) rotate(45deg);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.hv .hvb-prose details.hvb-faq[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.hv .hvb-prose details.hvb-faq>summary:hover{color:var(--nav2)}
.hv .hvb-prose details.hvb-faq>summary:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.hv .hvb-prose details.hvb-faq>:not(summary){margin:0 40px 16px 0}
.hv .hvb-prose details.hvb-faq>:not(summary)+:not(summary){margin-top:-6px}

/* product banner */
.hv .hvb-banner{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:16px 20px 16px 16px;background:#fff;font-size:14px;line-height:1.4;box-shadow:0 1px 2px rgba(15,23,32,.04),0 8px 24px -12px rgba(15,23,32,.14)}
.hv .hvb .hvb-prose>.hvb-banner{margin-block:1.8em}
.hv .hvb-banner-img{display:block;aspect-ratio:1;background:var(--soft);border-radius:8px;overflow:hidden}
.hv .hvb-banner-img img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;padding:8px;border-radius:0}
.hv .hvb-banner-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.hv a.hvb-banner-name{font:700 17px/1.3 var(--display);color:var(--ink);text-decoration:none;text-wrap:balance}
.hv a.hvb-banner-name:hover{color:var(--nav2)}
.hv .hvb-banner-count{font-size:13px;color:var(--muted)}
.hv .hvb-banner a.hvb-banner-cta{white-space:nowrap;padding-inline:22px}
.hv .hvb-banner:not(:has(.hvb-banner-img)){grid-template-columns:minmax(0,1fr) auto}

/* related */
.hv .hvb-related .hvb-rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;padding:0}
.hv .hvb-related .hvb-row{grid-template-columns:96px minmax(0,1fr);gap:16px;border-bottom:0;padding:8px 0}
.hv .hvb-related .hvb-row-title{font-size:16px}
.hv .hvb-related .hvb-row-ex{display:none}

@media (prefers-reduced-motion:no-preference){
	html:has(.hvb-toc){scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
	.hv .hvb-row-img img,.hv .hvb-prose details.hvb-faq>summary::after{transition:none}
}

@media (max-width:1100px){
	.hv .hvb-cols{grid-template-columns:minmax(0,1fr)}
	.hv .hvb-side{position:static;max-height:none;overflow:visible;order:-1;display:grid;grid-template-columns:minmax(0,1fr)}
	.hv .hvb-help{display:none}
	.hv .hvb-related .hvb-rows{grid-template-columns:minmax(0,1fr)}
	.hv .hvb-rows{gap:0 28px}
}
@media (max-width:768px){
	.hv .hvb{padding:16px 16px 32px;gap:16px}
	.hv .hvb-head>p:not(.hvb-meta){font-size:16px}
	.hv .hvb-rows{grid-template-columns:minmax(0,1fr)}
	.hv .hvb-rows>.hvb-row:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line2)}
	.hv .hvb-row{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:16px 0}
	.hv .hvb-row-title{font-size:16px}
	.hv .hvb-prose{font-size:16px}
	.hv .hvb-prose details.hvb-faq>summary{font-size:16px}
	.hv .hvb-prose details.hvb-faq>:not(summary){margin-right:0}
	/* tables become stacked blocks: nothing to scroll sideways on a phone */
	.hv .hvb-prose .hvb-table{overflow:visible}
	.hv .hvb-prose table,.hv .hvb-prose tbody,.hv .hvb-prose tr,.hv .hvb-prose th,.hv .hvb-prose td{display:block}
	.hv .hvb-prose thead{position:absolute;left:-9999px}
	.hv .hvb-prose tbody tr{padding:12px 16px;border-bottom:1px solid var(--line2)}
	.hv .hvb-prose tbody tr:last-child{border-bottom:0}
	.hv .hvb-prose tbody th,.hv .hvb-prose tbody td{padding:0;border:0}
	.hv .hvb-prose tbody td+td{color:var(--muted);font-size:14px;margin-top:2px}
	.hv .hvb-banner{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px}
	.hv .hvb-banner a.hvb-banner-cta{grid-column:1/-1}
	.hv .hvb-pager-step{flex:1 1 40%;justify-content:center;background:#fff;border:1px solid var(--line)}
	.hv .hvb-pager ul{order:-1;flex-basis:100%;justify-content:center}
}

/* WordPress' own class for text meant for screen readers only; the theme's stylesheet normally hides it, this page must not depend on that */
.hv .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
