/* HV Blog v3 — refonte du design v2 (étape 3, 23/09/2026) : direction 1 « Carrefour des rubriques » (index, pages
   suivantes, rubriques) et direction 2 « À la une » (article), choisies par Jean le 23/09 à 22 h 04.
   Repris des prototypes validés (wp-content/uploads/_proto-blog-v2/, version 20260923v2e, css/blog.css) : seules les
   règles des deux directions retenues sont gardées ; g3.css (CSS des pages G3 du site, copiée telle quelle) est chargée
   avant ce fichier. En fin de fichier : l'intégration WordPress (Astra, Elementor, hv-grille-largeurs), reprise du lot G.
   Règle du site à respecter (style en ligne « C1 - FORCE MANROPE ON ALL BODY TEXT ») : p, li, blockquote et figcaption
   sont forcés en Manrope : une étiquette d'une autre police s'écrit en div ou span. */

.hvb{--navy:#1B3A5C;--dim:#001C38;--nuit:#0A1E33;--nuit2:#071626;--cyan:#0099CC;--cyan-s:#5BCAFF;--cyan-t:#0077A3;
  --ink:#191C1E;--ink2:#43474E;--mut:#4A6080;--line:#C3C6CF;--line2:#DDE3EA;--sf:#F7F9FB;--sf2:#F2F4F6;--sf3:#ECEEF0;
  --out:cubic-bezier(.23,1,.32,1);--sec:clamp(80px,9vw,128px);--sh-float:0 20px 40px rgba(27,58,92,.12);
  --pad:24px;--gout:clamp(20px,4vw,48px);--bord:calc((100vw - min(100vw - 2*var(--gout),1440px))/2 + var(--pad));
  font-family:'Manrope','Helvetica Neue',Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
  hyphens:none;-webkit-hyphens:none;text-wrap:pretty;overflow-x:clip}
@media (min-width:768px){.hvb{--pad:48px}}
@media (min-width:1280px){.hvb{--pad:64px}}
.hvb *,.hvb *::before,.hvb *::after{box-sizing:border-box}
.hvb img{display:block;max-width:100%;height:auto}
.hvb a{text-decoration:none}
.hvb-sprite{position:absolute;width:0;height:0;overflow:hidden}
.hvb svg.i{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hvb svg.i.f{fill:currentColor;stroke:none}
.hvb-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hvb :is(a,button,summary):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.hvb button{font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none}
/* conteneur hors sections G3 : mêmes valeurs que .hv-g3-wrap (g3.css : marges internes de 24, 48 et 64 px). Pas écrits
   en dur plutôt que var(--pad) : dans un bloc .hv-g3, g3.css redéfinit --pad en clamp(24px,4vw,64px), ce qui décalait le
   texte des articles de 6 px à 1440 px et de 7 px à 1024 px par rapport au hero et au pied (audit du 24/09/2026). */
.hvb-w{width:min(100% - 2*var(--gout),1440px);margin-inline:auto;padding-inline:24px}
@media (min-width:768px){.hvb-w{padding-inline:48px}}
@media (min-width:1280px){.hvb-w{padding-inline:64px}}

/* ---------- scène : le contenu glisse par-dessus le hero collant (moment signature des pages G3) ---------- */
.hvb-stage{position:relative;background:#fff}
.hvb-apres{position:relative;z-index:2;background:#fff;box-shadow:0 -24px 60px rgba(0,28,56,.35)}
@media (max-width:700px){.hvb-apres{box-shadow:none}}

/* ---------- hero manifeste (G3) : le H1 porte les mots (nom exact de la page, décision A2) ---------- */
.hvb .hv-g3-hero h1.hvb-mots,.hvb h1.hvb-mots{margin:0;padding:0;font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:0;color:inherit;text-transform:none}
.hvb .hvb-mots .hv-g3-word:last-child::after{content:"."}
/* mots du hero en Manrope 900, comme la Home (.hv-hero-word) et les pages de l'offre (.hv-g3-word) : la regle du kit
   Elementor « h1 span { font-family: police des titres !important } » les passait en Montserrat 900 parce qu'ils sont
   dans le H1 (ecart signale par Jean le 23/09/2026 a 23 h 02, mesure : Montserrat 900 128 px contre Manrope 900 128 px) */
.hvb .hv-g3-hero h1.hvb-mots .hv-g3-word,.hvb h1.hvb-mots .hv-g3-word{font-family:'Manrope',sans-serif!important;font-weight:900!important}
/* ligne du hero en Manrope 300 comme sur la Home (.hv-hero-line) et les pages de l'offre (h1.hv-g3-line) : sur le blog
   c'est un paragraphe, que la regle du site « html body p { font-weight: 400 !important } » passait en 400 */
html body .hvb .hv-g3-hero p.hv-g3-line{font-family:'Manrope',sans-serif!important;font-weight:300!important}
.hvb .hv-g3-hero .hvb-line{color:rgba(255,255,255,.82)}
.hvb .hv-g3-hero .hvb-intro{font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:rgba(255,255,255,.88);max-width:58ch;margin-top:14px}
.hvb .hv-g3-hero .hv-g3-ctas .hv-g3-lnk.on-dark{color:#fff}
.hvb .hvb-mots.is-3 .hv-g3-word{font-size:clamp(44px,6.6vw,96px);line-height:1.12}
.hvb .hvb-hero-art{min-height:min(calc(100svh - var(--hd,126px)),720px)}
.hvb .hvb-hero-art .hv-g3-hero-in{padding-bottom:clamp(56px,10vh,96px)}
.hvb .hvb-hero-art .hv-g3-veil{background:linear-gradient(90deg,rgba(10,30,51,.88) 0%,rgba(10,30,51,.66) 44%,rgba(10,30,51,.22) 74%,rgba(10,30,51,.08) 100%),linear-gradient(0deg,rgba(10,30,51,.6) 0%,rgba(10,30,51,0) 50%)}

/* ---------- fil d'Ariane (articles) ---------- */
.hvb-ariane ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;font:500 13px/1.4 'Manrope',sans-serif;color:var(--mut)}
.hvb-ariane li{display:inline-flex;align-items:center;margin:0}
.hvb-ariane li+li::before{content:"›";margin:0 8px;color:var(--line)}
.hvb-ariane a{display:inline-flex;align-items:center;min-height:24px;color:var(--mut);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;transition:color .2s ease,text-decoration-color .2s ease}
.hvb-ariane a:hover{color:var(--navy);text-decoration-color:currentColor}
.hvb-ariane.sur-nuit ol,.hvb-ariane.sur-nuit a{color:rgba(255,255,255,.7)}
.hvb-ariane.sur-nuit li+li::before{color:rgba(255,255,255,.35)}
.hvb-ariane.sur-nuit a:hover{color:#fff}
.hvb-ariane.sur-nuit [aria-current]{color:rgba(255,255,255,.9)}
@media (max-width:767px){.hvb-ariane li:first-child{display:none}.hvb-ariane li:nth-child(2)::before{content:none}
  .hvb-ariane.is-article li[aria-current]{display:none}.hvb-ariane ol{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}}

/* ---------- sections et têtes de section ---------- */
.hvb-sec{padding:var(--sec) 0 0}
.hvb-tete{margin-bottom:clamp(28px,3vw,44px)}
.hvb-tete--ligne{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.hvb-tete--ligne h2{flex:1 1 auto}

/* ---------- rubriques : les vrais boutons de filtre du site (.hv-g3-f), en liens vers les pages de rubrique ---------- */
.hvb-rubriques ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
@media (max-width:1100px){.hvb-rubriques ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hvb-rubriques li{margin:0}
.hvb .hvb-rubriques .hv-g3-f{display:inline-flex;align-items:center;gap:10px;min-height:48px;border-radius:0;text-transform:none;letter-spacing:0;
  background:#fff;border:1px solid var(--line);color:var(--navy);font:700 14px/1 'Manrope',sans-serif;padding:14px 18px;text-decoration:none;
  width:100%;justify-content:space-between;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--out)}
.hvb .hvb-rubriques .hv-g3-f:hover{border-color:var(--navy)}
.hvb .hvb-rubriques .hv-g3-f:active{transform:scale(.97)}
.hvb .hvb-rubriques .hv-g3-f[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.hvb .hvb-rubriques .hv-g3-f small{font-weight:600;font-size:12px;color:var(--mut)}
.hvb .hvb-rubriques .hv-g3-f[aria-current] small{color:rgba(255,255,255,.86)}
.hvb .hvb-rubriques.sur-nuit .hv-g3-f small{color:rgba(255,255,255,.8)}
.hvb .hvb-rubriques.sur-nuit .hv-g3-f[aria-current] small{color:var(--mut)}
.hvb .hvb-rubriques.sur-nuit .hv-g3-f{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.hvb .hvb-rubriques.sur-nuit .hv-g3-f:hover{border-color:#fff}
.hvb .hvb-rubriques.sur-nuit .hv-g3-f[aria-current]{background:#fff;border-color:#fff;color:var(--navy)}
.hvb-rubriques--haut{margin-bottom:clamp(48px,5vw,72px)}
@media (max-width:700px){
  .hvb-rubriques ul{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-24px;padding-right:24px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .hvb-rubriques ul::-webkit-scrollbar{display:none}
  .hvb .hvb-rubriques .hv-g3-f{width:auto;justify-content:flex-start;font-size:13px;padding:12px 14px;min-height:44px}
}

/* ---------- cartes d'articles : grammaire des cartes « Other LED technologies » (cadre, photo 4:3 à coins, flèche) ---------- */
.hvb-cartes{display:grid;gap:clamp(32px,3.2vw,48px) clamp(16px,1.8vw,24px);list-style:none;margin:0;padding:0}
.hvb-cartes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hvb-cartes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hvb-carte{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line2);isolation:isolate;
  transition:border-color .24s ease,box-shadow .3s ease}
.hvb-carte:hover{border-color:var(--cyan);box-shadow:var(--sh-float)}
.hvb-carte figure{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--sf)}
.hvb-carte figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.hvb-carte:hover figure img{transform:scale(1.04)}
.hvb-carte figure i.cn,.hvb-rub i.cn{position:absolute;width:14px;height:14px;border:2px solid var(--cyan);z-index:3;pointer-events:none}
.hvb-carte figure i.cn.tl,.hvb-rub i.cn.tl{left:10px;top:10px;border-right:0;border-bottom:0}
.hvb-carte figure i.cn.br,.hvb-rub i.cn.br{right:10px;bottom:10px;border-left:0;border-top:0}
.hvb-carte .hv-g3-tag{position:absolute;top:16px;right:16px;z-index:3;max-width:calc(100% - 56px);line-height:1.25}
.hvb-carte .t{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;padding:22px 24px 24px}
.hvb .hvb-carte h3{margin:0;font:600 18px/1.3 'Montserrat',sans-serif;letter-spacing:-.02em;color:#001C38;text-wrap:balance}
.hvb .hvb-carte h3 a{color:inherit;text-decoration:none}
.hvb .hvb-carte h3 a::after{content:"";position:absolute;inset:0;z-index:4}
.hvb-carte .x{font-size:15px;line-height:1.55;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hvb-carte .m{margin-top:auto;padding-top:4px;font:700 11px/1.2 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.hvb-carte .fl{position:absolute;right:18px;bottom:22px;font-size:18px;color:var(--cyan);transition:transform .3s var(--out)}
.hvb-carte:hover .fl{transform:translateX(4px)}
.hvb-carte:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:1100px){.hvb-cartes--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.hvb-cartes--2,.hvb-cartes--3{grid-template-columns:minmax(0,1fr)}.hvb-carte .t{padding:18px 20px 20px}}

/* ---------- « Afficher plus d'articles » : bouton cadre navy du site (.hv-g3-more) ---------- */
.hvb-plus{margin-top:clamp(40px,4.4vw,64px)}
.hvb .hvb-plus__a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;background:#fff;
  border:1px solid var(--navy);color:var(--navy);font:800 12px/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:background .2s ease,color .2s ease}
.hvb .hvb-plus__a:hover{background:var(--navy);color:#fff}
.hvb .hvb-plus__a .i{font-size:16px}
@media (max-width:700px){.hvb .hvb-plus__a{width:100%;padding:0 20px;letter-spacing:.12em;white-space:nowrap}}

/* ---------- colonne de droite « Les plus lus » : panneau navy numéroté (numéros de la liste DATAVSN du site) ---------- */
.hvb-rail{position:relative;isolation:isolate;overflow:hidden;background:var(--nuit);color:#fff;
  padding:clamp(28px,2.6vw,40px) clamp(24px,2.2vw,36px) clamp(16px,1.6vw,24px)}
.hvb-rail .dots{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(0,153,204,.32) 1.2px,transparent 1.8px);
  background-size:16px 16px;-webkit-mask-image:radial-gradient(110% 70% at 100% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(110% 70% at 100% 0%,#000 0%,transparent 70%)}
.hvb .hvb-rail__h{margin:0 0 20px;font:600 clamp(24px,2.1vw,32px)/1.15 'Montserrat',sans-serif;letter-spacing:-.03em;color:#fff;text-transform:none}
.hvb-rail ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.hvb-rail li{margin:0;border-bottom:1px solid rgba(255,255,255,.16)}
.hvb-rail li:last-child{border-bottom:0}
.hvb-rail a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 12px;padding:18px 0;color:#fff;text-decoration:none}
.hvb-rail .n{font:600 24px/1 'Montserrat',sans-serif;letter-spacing:-.03em;color:var(--cyan-s);font-variant-numeric:tabular-nums}
.hvb-rail .t{display:block;font:600 16px/1.35 'Montserrat',sans-serif;letter-spacing:-.01em;color:#fff;transition:color .2s ease;text-wrap:balance}
.hvb-rail .r{display:block;margin-top:8px;font:700 11px/1.2 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.hvb-rail a:hover .t{color:var(--cyan-s)}
.hvb-rail.is-collant{position:sticky;top:112px}

/* =================== 1 · CARREFOUR DES RUBRIQUES =================== */
.hvb-sec--rubs{padding:clamp(80px,8.5vw,120px) 0 clamp(96px,10vw,144px)}
.hvb-rubs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:280px;gap:16px}
.hvb-rub{position:relative;display:block;overflow:hidden;isolation:isolate;background:var(--dim);color:#fff;text-decoration:none}
.hvb-rub--g{grid-column:span 2;grid-row:span 2}
.hvb-rub--l{grid-column:span 2}
.hvb-rub .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform 1.2s var(--out),filter .6s ease}
.hvb-rub::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,28,56,.05) 30%,rgba(0,28,56,.86) 100%)}
.hvb-rub .tx{position:absolute;left:22px;right:64px;bottom:22px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hvb-rub .ic{font-size:22px;color:var(--cyan-s)}
.hvb-rub .nm{font:700 clamp(20px,1.7vw,24px)/1.15 'Montserrat',sans-serif;letter-spacing:-.02em;color:#fff}
.hvb-rub--g .nm{font-size:clamp(28px,2.8vw,42px);letter-spacing:-.03em}
.hvb-rub .nb{font:500 13px/1.3 'Manrope',sans-serif;color:rgba(255,255,255,.82)}
.hvb-rub .fl{position:absolute;right:22px;bottom:24px;z-index:2;font-size:20px;color:var(--cyan-s);transition:transform .3s var(--out)}
.hvb-rub:hover .im img{transform:scale(1.035);filter:none}
.hvb-rub:hover .fl{transform:translateX(4px)}
.hvb-rub:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.hvb-deux{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,3.4vw,56px);align-items:start}
@media (max-width:1100px){.hvb-rubs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:240px}.hvb-rub--g{grid-row:span 1}
  .hvb-deux{grid-template-columns:minmax(0,1fr)}.hvb-rail.is-collant{position:static}}
@media (max-width:700px){.hvb-rubs{gap:12px;grid-auto-rows:176px}.hvb-rub--g,.hvb-rub--l{grid-column:span 2}.hvb-rub--g{grid-row:span 1}
  .hvb-rub .tx{left:16px;right:40px;bottom:16px;gap:6px}.hvb-rub .nm{font-size:17px}.hvb-rub--g .nm{font-size:24px}.hvb-rub .fl{right:14px;bottom:18px}}

/* =================== ARTICLE (2 · À LA UNE) =================== */
/* ouverture : photo de l'article sous le voile du site (hero G3 .hvb-hero-art, règles plus haut) */
.hvb .hvb-h1-art{margin:24px 0 0;max-width:24ch;font:600 clamp(34px,3.9vw,58px)/1.05 'Montserrat',sans-serif;letter-spacing:-.04em;color:#fff;text-transform:none;text-wrap:balance}
.hvb .hvb-h1-art em{font-style:normal;color:var(--cyan)}
.hvb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;font:500 14px/1.4 'Manrope',sans-serif;color:rgba(255,255,255,.8)}
.hvb .hvb-meta .hv-g3-tag{text-decoration:none}
.hvb .hvb-meta a:not(.hv-g3-tag){color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:.2em}
.hvb .hvb-meta a:not(.hv-g3-tag):hover{text-decoration-color:#fff}
/* lien « HYPERVISUAL » de la ligne de méta : cible tactile de 24 px de haut au moins (WCAG 2.2, 2.5.8 ; mesuré à 19 px
   le 24/09), la marge négative garde la ligne telle quelle */
.hvb .hvb-meta a:not(.hv-g3-tag){display:inline-block;padding-block:3px;margin-block:-3px}
@media (max-width:700px){.hvb .hvb-h1-art{font-size:30px;line-height:1.1}}

/* partage et « J'aime » : boutons carrés du site (rayon 0, 48 px), sans script tiers */
.hvb-actions-art{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
.hvb-partage{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hvb-pts{display:flex;flex-wrap:wrap;gap:8px}
.hvb .hvb-pt,.hvb .hvb-aime,.hvb .hvb-natif{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;margin:0;border-radius:0;
  border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;font:700 13px/1 'Manrope',sans-serif;letter-spacing:0;text-transform:none;
  text-decoration:none;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--out)}
.hvb .hvb-pt{width:48px;padding:0}
.hvb .hvb-natif[hidden],.hvb .hvb-pts[hidden]{display:none}
.hvb .hvb-aime,.hvb .hvb-natif{padding:0 18px}
.hvb .hvb-pt .i,.hvb .hvb-aime .i,.hvb .hvb-natif .i{font-size:18px}
.hvb .hvb-pt:hover,.hvb .hvb-aime:hover,.hvb .hvb-natif:hover{background:#fff;border-color:#fff;color:var(--navy)}
.hvb .hvb-pt:active,.hvb .hvb-aime:active,.hvb .hvb-natif:active{transform:scale(.96)}
.hvb .hvb-aime .n{padding-left:12px;border-left:1px solid currentColor;font-variant-numeric:tabular-nums;opacity:.9}
.hvb .hvb-aime[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--navy)}
.hvb .hvb-aime[aria-pressed=true] .i{fill:var(--cyan);stroke:var(--cyan)}
.hvb .hvb-pt .i.ok{display:none}
.hvb .hvb-pt.is-ok .i{display:none}
.hvb .hvb-pt.is-ok .i.ok{display:inline-block;color:var(--cyan-s)}
.hvb-etat{font:600 13px/1.2 'Manrope',sans-serif;color:var(--cyan-s)}
.hvb .sur-clair .hvb-pt,.hvb .sur-clair .hvb-aime,.hvb .sur-clair .hvb-natif{border-color:var(--line);color:var(--navy);background:#fff}
.hvb .sur-clair .hvb-pt:hover,.hvb .sur-clair .hvb-aime:hover,.hvb .sur-clair .hvb-natif:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.hvb .sur-clair .hvb-aime[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.hvb .sur-clair .hvb-pt.is-ok .i.ok{color:var(--cyan-t)}
.hvb .sur-clair .hvb-etat{color:var(--cyan-t)}
@media (max-width:700px){.hvb .hvb-pt{width:44px;height:44px}.hvb .hvb-aime,.hvb .hvb-natif{height:44px}.hvb-pts{gap:6px}
  .hvb .hvb-hero-art .hv-g3-veil{background:linear-gradient(180deg,rgba(10,30,51,.55) 0%,rgba(10,30,51,.88) 50%,rgba(10,30,51,.94) 100%)}}
.hvb-etat:empty{display:none}

/* corps : texte à 20 px dans 60ch (B1), sommaire collant à droite (B3) */
.hvb-art{padding-top:clamp(56px,6vw,96px)}
.hvb-art__g{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,300px);justify-content:space-between;gap:64px;align-items:start}
.hvb-art__m{min-width:0}
@media (max-width:1279px){.hvb-art__g{grid-template-columns:minmax(0,1fr)}}
.hvb .hvb-chapo{margin:0 0 40px;max-width:52ch;font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.5;color:var(--ink2)}
.hvb .hvb-prose{font-size:20px;line-height:1.6;color:var(--ink);max-width:60ch}
.hvb .hvb-prose>*{margin:0}
.hvb .hvb-prose>*+*{margin-top:32px}
.hvb .hvb-prose>:first-child{margin-top:0}
.hvb .hvb-prose h2{margin-top:72px;font:600 clamp(26px,2.3vw,34px)/1.15 'Montserrat',sans-serif;letter-spacing:-.03em;color:var(--navy);text-transform:none;scroll-margin-top:120px}
.hvb .hvb-prose h3{margin-top:48px;font:600 clamp(21px,1.6vw,24px)/1.25 'Montserrat',sans-serif;letter-spacing:-.02em;color:var(--navy);text-transform:none}
.hvb .hvb-prose h2+*,.hvb .hvb-prose h3+*{margin-top:16px}
.hvb .hvb-prose :is(ul,ol){padding-left:24px}
.hvb .hvb-prose ul{list-style:none}
.hvb .hvb-prose ul>li{position:relative}
.hvb .hvb-prose ul>li::before{content:"";position:absolute;left:-24px;top:.72em;width:8px;height:8px;background:var(--cyan)}
.hvb .hvb-prose ol{list-style:decimal}
.hvb .hvb-prose li+li{margin-top:10px}
.hvb .hvb-prose :is(p,li) a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--cyan);text-underline-offset:.18em}
.hvb .hvb-prose :is(p,li) a:hover{color:var(--cyan-t)}
.hvb .hvb-prose :is(strong,b){font-weight:700;color:var(--ink)}
.hvb .hvb-prose blockquote{margin-left:0;border-left:2px solid var(--cyan);padding:4px 0 4px 28px;font:400 clamp(21px,1.7vw,24px)/1.45 'Manrope',sans-serif;color:var(--navy)}
.hvb .hvb-prose blockquote p{margin:0}
.hvb .hvb-prose blockquote p+p{margin-top:12px;font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--mut)}
.hvb .hvb-prose figure{margin-left:0;margin-right:0}
.hvb .hvb-prose figure img{width:100%;height:auto}
.hvb .hvb-prose figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--mut)}
.hvb .hvb-prose hr{border:0;border-top:1px solid var(--line2)}
.hvb .hvb-prose table{width:100%;border-collapse:collapse;font-size:16px}
.hvb .hvb-prose :is(th,td){padding:12px 12px 12px 0;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
@media (max-width:767px){.hvb .hvb-prose{font-size:18px;line-height:1.56}.hvb .hvb-prose h2{font-size:23px;line-height:1.2;margin-top:56px}
  .hvb .hvb-prose h3{font-size:19px}.hvb .hvb-prose blockquote{font-size:19px;padding-left:18px}.hvb .hvb-chapo{font-size:19px}}
.hvb-fin{margin-top:72px;padding-top:32px;border-top:1px solid var(--line)}
.hvb-fin__t{margin-bottom:4px;font:700 11px/1 'Manrope',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.hvb-fin .hvb-actions-art{margin-top:16px}

/* sommaire : collant à droite sur ordinateur, replié en tête sur téléphone */
.hvb-toc{position:sticky;top:120px;align-self:start;max-height:calc(100vh - 144px);overflow:auto}
.hvb-toc .tt{margin-bottom:16px;font:700 11px/1 'Manrope',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.hvb-toc ol{list-style:none;margin:0;padding:0}
.hvb-toc li{margin:0}
.hvb-toc a{display:block;padding:8px 0 8px 16px;border-left:2px solid var(--line2);font:500 15px/1.4 'Manrope',sans-serif;color:var(--ink2);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.hvb-toc a:hover{color:var(--navy)}
.hvb-toc a[aria-current]{color:var(--navy);font-weight:700;border-left-color:var(--cyan)}
.hvb-toc-m{display:none}
@media (max-width:1279px){.hvb-toc{display:none}
  .hvb-toc-m{display:block;margin:0 0 40px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .hvb-toc-m summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:56px;cursor:pointer;
    font:700 12px/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
  .hvb-toc-m summary::-webkit-details-marker{display:none}
  .hvb-toc-m summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--cyan-t);border-bottom:2px solid var(--cyan-t);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--out)}
  .hvb-toc-m[open] summary::after{transform:rotate(-135deg)}
  .hvb-toc-m ol{list-style:none;margin:0;padding:0 0 16px}
  .hvb-toc-m a{display:flex;min-height:48px;align-items:center;padding:8px 0 8px 16px;border-left:2px solid var(--line2);font:500 16px/1.35 'Manrope',sans-serif;color:var(--ink2);text-decoration:none}}

/* articles liés */
.hvb-sec--lies{padding:clamp(80px,9vw,128px) 0 clamp(128px,12vw,176px)}
@media (prefers-reduced-motion:reduce){.hvb *{transition:none !important;animation:none !important}}

/* appel d'un article : photo paysage (pages de l'offre v3) posée en 4:3 plutôt qu'en portrait 3:4 */
.hvb .hv-g3-cta figure.is-paysage{aspect-ratio:4/3}
/* direction 1 : les visuels de l'ancien blog sont plus clairs que les photos des pages G3 : voile un peu plus dense
   sous le texte (même teinte #0A1E33 que le voile du site), la photo reste nette à droite */
.hvb--r .hvb-stage .hv-g3-hero:not(.hvb-hero-art) .hv-g3-veil{background:linear-gradient(90deg,rgba(10,30,51,.8) 0%,rgba(10,30,51,.52) 50%,rgba(10,30,51,.16) 100%)}
@media (max-width:700px){.hvb--r .hvb-stage .hv-g3-hero:not(.hvb-hero-art) .hv-g3-veil{background:linear-gradient(180deg,rgba(10,30,51,.45),rgba(10,30,51,.86))}}

/* ---------- intégration WordPress (reprise du lot G, 23/09) ---------- */
/* article servi par Astra (gabarit article.php), pages de liste servies par Elementor (widget « shortcode ») */
.hvb-page-article .site-content>.ast-container,.hvb-page-liste .site-content>.ast-container{max-width:none;width:100%;padding:0;display:block}
.hvb-page-article #primary,.hvb-page-article #secondary{display:none}
.elementor-widget-shortcode:has(>.elementor-widget-container>.elementor-shortcode>.hvb),.elementor-widget-shortcode:has(>.elementor-shortcode>.hvb){width:100%}
/* Le mu-plugin hv-grille-largeurs.php (style en ligne, imprimé après cette feuille) borne « .single-post #content >
   .ast-container » à 1440 px moins les gouttières (!important) et impose aux pages non Elementor (les articles) une
   mesure de 74ch avec marges automatiques sur p, h2, h3, h4, h5, ul, ol, blockquote, dl (spécificité 1-1-2). Le gabarit
   porte ses propres colonnes (texte à 60ch, B1) : on rétablit ses valeurs avec une spécificité plus forte ; la largeur
   voulue d'un paragraphe passe par la variable --hvb-mw (mesures du lot G, 23/09). */
html body.hvb-page-article #content>.ast-container,html body.hvb-page-liste #content>.ast-container{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
body.hvb-page-article #content .hvb :is(p,h2,h3,h4,h5,ul,ol,blockquote,dl){max-width:var(--hvb-mw,none);margin-left:0;margin-right:0}
.hvb .hvb-chapo{--hvb-mw:52ch}
.hvb .hv-g3-cta .lead{--hvb-mw:46ch}
/* Elementor V4 : le bloc e-div-block porte par défaut un retrait de 10 px ; la section qui accueille le court code
   (identifiant hvbsect, posé par injecter_page_blog.php) en est libérée pour que les sections aillent d'un bord à l'autre. */
.elementor .elementor-element.elementor-element-hvbsect{padding:0}
/* 24/09/2026, decisions de Jean sur le prototype des titres : titres des cartes a 18 px en 600 (point 1), H3 en 600 partout,
   la graisse de la Home (point 2 ; ici les H3 des blocs G3 du blog, 700 dans g3.css), approche du H1 d'article a -0,04 em
   et une seule definition du petit H2, 1,15 / -0,03 em (point 6) */
.hvb .hv-g3 h3{font-weight:600}

/* =================== finitions du 24/09/2026 (nuit), demandes de Jean =================== */
/* 1. hero des 27 pages de liste, revu le 26/09/2026 (nuit) à la demande de Jean (« beaucoup trop haut par rapport aux
   autres pages ») : le sur-titre, la ligne et le H1 exactement à la hauteur de ceux des pages Technologies (hero G3), à
   toutes les tailles d'écran, et à la même hauteur sur les 27 pages (demande du 24/09). Le hero G3 cale son contenu en
   bas (retrait bas de 28vh, 245 px au plus) : son sur-titre est à max(40 px ; hauteur du hero - retrait bas - hauteur du
   contenu). Ici le contenu est calé en haut, avec ce même retrait calculé sur le contenu type d'une page Technologies
   (sur-titre, ligne, deux mots, texte final de deux lignes, bouton) et les mêmes tailles de police ; un contenu plus haut
   (rubrique, boutons) allonge le hero vers le bas au lieu de remonter le titre. Mesuré à 1280 × 720, 1440 × 900,
   1512 × 862, 1714 × 1320, 1920 × 970, 2560 × 1300 et 1024 × 768 : même position que Indoor LED, à 1 px près. Écrans de
   860 px de haut ou moins : la règle réduite du G3. Téléphone (700 px et moins) : hero calé en haut par le G3 (112 px),
   inchangé. Remplace la règle du 24/09 (retrait de 15 % de la hauteur d'écran, titre plus haut que sur les autres pages
   dès que l'écran est haut, plus bas sur un portable). */
@media (min-width:701px){
  .hvb--r .hvb-stage .hv-g3-hero{align-items:flex-start}
  .hvb--r .hvb-stage .hv-g3-hero .hv-g3-hero-in{
    --hvb-fl:clamp(22px,2.8vw,40px);--hvb-fw:clamp(52px,8.9vw,128px);--hvb-ff:clamp(20px,2.8vw,40px);--hvb-pb:clamp(96px,28vh,245px);
    --hvb-h:calc(131px + 1.35*var(--hvb-fl) + 2.34*var(--hvb-fw) + 2.7*var(--hvb-ff));
    padding-top:max(40px,calc(100svh - var(--hd,126px) - var(--hvb-pb) - var(--hvb-h)));padding-bottom:var(--hvb-pb)}
}
@media (min-width:701px) and (max-height:860px){
  .hvb--r .hvb-stage .hv-g3-hero .hv-g3-hero-in{
    --hvb-fl:clamp(18px,2vw,28px);--hvb-fw:clamp(44px,6.6vw,96px);--hvb-ff:clamp(18px,2vw,28px);--hvb-pb:clamp(64px,20vh,160px);
    --hvb-h:calc(119px + 1.35*var(--hvb-fl) + 2.24*var(--hvb-fw) + 2.7*var(--hvb-ff));
    padding-top:max(24px,calc(100svh - var(--hd,126px) - var(--hvb-pb) - var(--hvb-h)))}
}
/* 2. les 8 boutons de rubrique dans le hero des rubriques et des pages suivantes (à la place des deux actions) : boutons
   du site (.hv-g3-f) en version sur fond sombre ; fond navy translucide et flou léger pour rester lisibles sur la photo.
   Revu le 26/09/2026 (nuit), demande de Jean (« la liste des catégories n'est pas placée correctement ; sur certaines
   pages c'est bon, sur d'autres pas du tout ») : la rangée libre (largeur de leur texte, boîte de 960 px) coupait les
   8 boutons autrement dans chaque langue (5 + 3, 4 + 4) et laissait « Demander une offre » flotter à droite de la boîte.
   Au-delà de 1100 px : la grille 4 × 2 du design validé le 23/09, colonnes à la largeur du plus long nom (750 px en
   anglais, 790 en allemand, 881 en français), nom à gauche et nombre à droite, la même forme sur les 24 pages ;
   de 701 à 1100 px : une seule rangée qui défile, estompée à droite (la rubrique active reste visible, hv-blog-v3.js) ;
   au téléphone, la rangée qui défile d'un bord à l'autre (règle existante). */
.hvb .hvb-rubriques--hero{margin-top:32px}
.hvb .hvb-rubriques--hero .hv-g3-f{background:rgba(10,30,51,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (min-width:1101px){
  .hvb .hvb-rubriques--hero ul{display:grid;grid-template-columns:repeat(4,auto);gap:8px}
  .hvb .hvb-rubriques--hero .hv-g3-f{width:100%;justify-content:space-between;gap:16px;min-height:44px;padding:12px 16px}
}
@media (min-width:701px) and (max-width:1100px){
  .hvb .hvb-rubriques--hero ul{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .hvb .hvb-rubriques--hero ul::-webkit-scrollbar{display:none}
  .hvb .hvb-rubriques--hero li{flex:0 0 auto}
  .hvb .hvb-rubriques--hero .hv-g3-f{width:auto;justify-content:flex-start;min-height:44px;padding:12px 16px}
}
/* téléphone : la rangée qui défile va d'un bord à l'autre de l'écran (gouttière + retrait du hero, 44 px à 390 px) et
   s'estompe aux deux bords, pour qu'un bouton défilé passe sous le bord au lieu d'être coupé au ras du texte */
@media (max-width:700px){
  .hvb .hvb-rubriques--hero{margin-top:28px}
  .hvb .hvb-rubriques--hero ul{--hvb-b:calc(var(--hv-gouttiere,clamp(20px,4vw,48px)) + 24px);margin-left:calc(-1*var(--hvb-b));margin-right:calc(-1*var(--hvb-b));
    padding-left:var(--hvb-b);padding-right:var(--hvb-b);scroll-padding-inline:var(--hvb-b);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--hvb-b),#000 calc(100% - var(--hvb-b)),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--hvb-b),#000 calc(100% - var(--hvb-b)),transparent 100%)}
}
/* 3. bande grise sous « J'aime » et le partage, avant le bloc d'appel (tous les articles ; aussi sous les listes) :
   l'ombre du contenu qui glisse sur le hero (box-shadow 0 -24px 60px) débordait aussi vers le bas, sur 36 px, dans la
   marge blanche du bloc d'appel. L'ombre reste en haut seulement : tout ce qui dépasse sur les côtés et en bas est coupé. */
.hvb-apres{clip-path:inset(-120px 0 0 0)}
/* 4. « J'aime » sur les cartes d'articles : icône du bouton de l'article et nombre, à la suite de la date, dans la même
   ligne de méta ; même couleur que la date ; cœur plein cyan quand ce navigateur a aimé l'article (hv-blog-v3.js). */
.hvb-carte .m{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.hvb-carte .m .lk{display:inline-flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line2);
  font:700 12px/1 'Manrope',sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--mut)}
.hvb-carte .m .lk .i{font-size:14px;vertical-align:0}
.hvb-carte .m .lk.is-aime .i{fill:var(--cyan);stroke:var(--cyan)}
/* 5. visuels de rubrique : point focal horizontal (HVB_VIS_FX, variable --hvb-fx posée par noyau.php) pour les recadrages
   étroits, tuiles de l'index et hero au téléphone (24/09/2026, nuit ; nouveaux visuels, sujet dans la partie droite) */
.hvb-rub .im img{object-position:var(--hvb-fx,50%) 50%}
.hvb--r .hv-g3-hero .hv-g3-media img{object-position:var(--hvb-fx,50%) 50%}
/* 6. « Demander une offre » dans le hero des rubriques et des pages suivantes de l'index, à côté des 8 boutons (25/09/2026,
   soir, demande de Jean) : au-delà de 700 px, le lien du site (.hv-g3-lnk, comme sur l'index) à droite du bloc des boutons,
   calé sur leur dernière rangée (hauteur du hero inchangée à 1440 px, mesurée sur les 24 pages) ; sans la place (tablette),
   il passe dessous ; au téléphone, dessous (la rangée des boutons défile). */
/* 26/09/2026 (nuit) : au-delà de 1100 px, le lien suit la grille à 40 px, centré sur sa rangée du bas, à la même place
   relative sur toutes les pages ; s'il n'a pas la place (français de 1101 à 1380 px environ), il passe dessous ; de 701
   à 1100 px et au téléphone, dessous. */
.hvb .hvb-hero-actions{margin-top:36px}
.hvb .hvb-hero-actions .hvb-rubriques--hero{margin-top:0}
.hvb .hvb-hero-actions .hv-g3-ctas{margin-top:0}
@media (min-width:1101px){
  .hvb .hvb-hero-actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 40px}
  .hvb .hvb-hero-actions .hvb-rubriques--hero{flex:0 0 auto;max-width:100%}
  .hvb .hvb-hero-offre{margin-bottom:12px}
}
@media (min-width:701px) and (max-width:1100px){
  .hvb .hvb-hero-offre{margin-top:24px}
}
@media (max-width:700px){
  .hvb .hvb-hero-actions{margin-top:28px}
  .hvb .hvb-hero-offre{margin-top:20px}
}