/* OK Menuiserie — accueil (préfixe okh-). Thème clair, bandeaux anthracite, accent vert. */
:root{--okh-ease:cubic-bezier(.2,.8,.2,1);--okh-spring:cubic-bezier(.34,1.56,.64,1);--okh-light:#76dc86;--okh-ink:#1d211f}
.okh-wrap{width:min(1180px,100%);margin-inline:auto}
.okh-section{padding:clamp(72px,9vw,112px) 24px;overflow-x:clip}
.okh-eyebrow{display:block;margin-bottom:12px;color:var(--accent-texte);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.okh-heading{max-width:760px;margin-bottom:40px}
.okh-heading h2,.okh-split h2{font-size:clamp(32px,4.4vw,54px);line-height:1.06}
.okh-heading p,.okh-split p{margin-top:20px;line-height:1.8;color:var(--texte-doux)}

/* --- hero --- */
.okh-hero{position:relative;min-height:min(max(640px,calc(100svh - 120px)),880px);display:flex;align-items:center;overflow:hidden;background:var(--okh-ink);color:#fff}
.okh-hero-slide{position:absolute;inset:-4%;background:center/cover no-repeat}
.okh-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,33,31,.9) 0%,rgba(29,33,31,.8) 40%,rgba(29,33,31,.38) 68%,rgba(29,33,31,.04) 100%),linear-gradient(0deg,rgba(29,33,31,.5) 0%,transparent 35%)}
.okh-hero-content{position:relative;z-index:2;padding:clamp(80px,12vh,130px) 24px clamp(90px,12vh,120px)}
.okh-hero .okh-kicker{margin:0;line-height:1.4;font-size:clamp(14px,2vw,18px);font-weight:700;letter-spacing:.06em;color:#fff}
/* h1 (SEO) : « Menuisier à Péruwelz » en sur-titre discret ; le grand titre visuel est .okh-hero-big (voir ci-dessous) */
.okh-hero h1.okh-hero-h1{max-width:850px;margin:clamp(12px,1.6vw,18px) 0 0;color:var(--okh-light);font:700 clamp(19px,2.4vw,28px)/1.25 'Bricolage Grotesque',sans-serif;letter-spacing:.01em;text-transform:none;text-wrap:balance}
.okh-hero .okh-hero-big{max-width:900px;margin:clamp(6px,1vw,12px) 0 0;color:#fff;font:800 clamp(32px,8.7vw,84px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.okh-hero .okh-hero-copy{max-width:640px;margin:18px 0 0;font-size:clamp(16px,1.7vw,19px);line-height:1.7;color:rgba(255,255,255,.92)}
.okh-hero-dots{position:absolute;z-index:4;right:max(24px,calc((100% - 1180px)/2));bottom:42px;display:flex;gap:8px}
.okh-hero-dots button{height:9px;padding:0;border:0;border-radius:9px;cursor:pointer;transition:width .3s,background .3s}

/* --- carrousel de photos (manuel : flèches, points, glisser ; jamais d'autoplay) --- */
.okh-car{position:relative;aspect-ratio:var(--ar,4/3);border:1px solid var(--bord);border-radius:24px;overflow:hidden;background:#dce5de;box-shadow:0 22px 56px -34px rgba(7,27,10,.6)}
.okh-track{display:flex;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.okh-track::-webkit-scrollbar{display:none}
.okh-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.okh-slide[data-o=p]::before{content:'';position:absolute;inset:-24px;background:var(--bg) center/cover;filter:blur(20px) brightness(.92)}
.okh-slide-btn{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.okh-slide img{display:block;width:100%;height:100%;object-fit:cover}
.okh-slide[data-o=p] img{object-fit:contain}
.okh-arrow{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--okh-ink);box-shadow:0 8px 22px rgba(0,0,0,.28);cursor:pointer;transition:background .2s,color .2s,transform .25s var(--okh-spring)}
.okh-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.okh-arrow:hover{background:var(--accent);color:var(--sur-accent);transform:scale(1.08)}
.okh-prev{left:12px}.okh-next{right:12px}
.okh-arrow,.okh-dots{display:none}html.okh-js .okh-arrow{display:grid}html.okh-js .okh-dots{display:flex}
.okh-dots{position:absolute;z-index:3;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:7px;padding:7px 10px;border-radius:30px;background:rgba(29,33,31,.55)}
.okh-dots button{width:9px;height:9px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.6);cursor:pointer;transition:width .3s,background .3s}
.okh-dots button.on{width:24px;background:var(--okh-light)}
.okh-car[data-single=true] .okh-arrow,.okh-car[data-single=true] .okh-dots,html.okh-js .okh-car[data-single=true] .okh-arrow,html.okh-js .okh-car[data-single=true] .okh-dots{display:none}

/* --- présentation --- */
.okh-presentation{background:var(--fond)}
.okh-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(40px,7vw,86px);align-items:center}
.okh-car-pres{--ar:5/4}
.okh-checks{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.okh-checks li{display:flex;align-items:center;gap:14px;line-height:1.5;font-weight:600;color:var(--titre)}
.okh-checks svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--accent);fill:none;stroke:var(--sur-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.okh-checks b{color:var(--accent-texte-fonce);font-weight:800}
html.okh-js .okh-checks li{opacity:0;translate:0 14px;transition:opacity .6s var(--okh-ease),translate .6s var(--okh-ease);transition-delay:calc(var(--i,0)*.14s)}
html.okh-js .okh-checks svg path{stroke-dasharray:24;stroke-dashoffset:24}
html.okh-js .okh-checks.is-in li{opacity:1;translate:none}
html.okh-js .okh-checks.is-in svg path{animation:okh-draw .55s ease-out forwards;animation-delay:calc(var(--i,0)*.14s + .25s)}
@keyframes okh-draw{to{stroke-dashoffset:0}}

/* --- services, nos derniers projets, bandeau d'appel : COPIE de NEM (voir bloc « NEM » en fin de fichier) --- */

/* --- visionneuse --- */
.okh-lightbox[hidden]{display:none}
.okh-lightbox{position:fixed;z-index:10000;inset:0;display:grid;grid-template-columns:54px minmax(0,1fr) 54px;align-items:center;gap:16px;padding:24px;background:rgba(14,17,15,.95)}
.okh-lightbox>img{max-width:100%;max-height:90vh;justify-self:center;object-fit:contain;border-radius:8px}
.okh-lightbox button{width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.okh-lightbox .okh-lb-close{position:absolute;z-index:2;right:18px;top:18px}
.okh-lightbox button:hover{background:var(--accent);color:var(--sur-accent)}

/* --- pourquoi nous choisir (bande sombre vivante) --- */
.okh-why{position:relative;overflow:hidden;background:var(--bandeau);color:#fff}
.okh-why::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(118,220,134,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(118,220,134,.05) 1px,transparent 1px);background-size:52px 52px}
.okh-why::after{content:'';position:absolute;left:-10%;top:-30%;width:60%;height:140%;background:radial-gradient(closest-side,rgba(56,180,76,.3),transparent);animation:okh-drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes okh-drift{to{translate:75% 12%;scale:1.2}}
.okh-why .okh-wrap{position:relative;z-index:1}
.okh-heading-light h2{color:#fff}
.okh-heading-light .okh-eyebrow{color:var(--okh-light)}
.okh-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.okh-why-grid article{padding:28px 24px;border:1px solid rgba(118,220,134,.28);border-radius:22px;background:rgba(255,255,255,.07);backdrop-filter:blur(6px);transition:transform .35s var(--okh-spring),border-color .3s,background .3s}
.okh-why-grid article:hover{transform:translateY(-6px);border-color:var(--okh-light);background:rgba(255,255,255,.1)}
.okh-why-grid span{position:relative;display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:var(--okh-light);color:#071b0a;font-weight:900;animation:okh-ring 3.6s ease-out infinite;animation-delay:calc(var(--n,0)*.9s)}
.okh-why-grid article:nth-child(1) span{--n:0}.okh-why-grid article:nth-child(2) span{--n:1}.okh-why-grid article:nth-child(3) span{--n:2}.okh-why-grid article:nth-child(4) span{--n:3}
@keyframes okh-ring{0%{box-shadow:0 0 0 0 rgba(118,220,134,.55)}60%,100%{box-shadow:0 0 0 16px rgba(118,220,134,0)}}
.okh-why-grid h3{margin-top:22px;font-size:21px;color:#fff}
.okh-why-grid p{margin-top:10px;color:rgba(255,255,255,.8);line-height:1.65}

/* --- zones desservies : COPIE de la section « zones » de NEM (accueil.css §11), nm- -> okh-, bleu -> vert.
   Bande sombre, radar à cercles concentriques à gauche (commune du siège au centre), communes en pastilles à droite.
   Pastilles NON cliquables (<span>, pas de pages ville) : pas de survol. La classe .okh-zh (cachée) n'est posée que par accueil.js. --- */
.okh-zone{position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 -1px 0 rgba(118,220,134,.16)}
.okh-zone::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(640px circle at 16% 62%,rgba(56,180,76,.34),transparent 70%),radial-gradient(520px circle at 92% 8%,rgba(118,220,134,.14),transparent 70%)}
.okh-zone-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:center}
.okh-radar{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto}
.okh-radar svg{display:block;width:100%;height:100%;overflow:visible}
.okh-radar circle{fill:none;stroke:var(--okh-light);stroke-width:1.6}
.okh-radar circle.r{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--okh-ease)}
.okh-radar circle.r1{transition-delay:.2s}
.okh-radar circle.r2{transition-delay:.5s;opacity:.7}
.okh-radar circle.r3{transition-delay:.8s;opacity:.45}
.okh-radar circle.rp{stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0;animation:okhRadar 4.8s ease-out 1.6s infinite}
@keyframes okhRadar{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.24);opacity:0}}
.okh-zh .okh-radar circle.r{stroke-dashoffset:1}
.okh-ctr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:16px;text-align:center;
  transition:opacity .6s ease 1.1s,transform .8s var(--okh-spring) 1.1s}
.okh-zh .okh-ctr{opacity:0;transform:translate(-50%,-50%) scale(.5)}
.okh-ctr b{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--okh-light);color:#071b0a;box-shadow:0 0 0 10px rgba(118,220,134,.22)}
.okh-ctr svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.okh-pills{display:flex;flex-wrap:wrap;gap:12px}
.okh-city{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:40px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:15px;font-weight:600;line-height:1.2;
  cursor:default;transition:background .3s,color .3s,transform .45s var(--okh-spring),border-color .3s,opacity .5s ease,box-shadow .3s}
.okh-city svg{display:block;width:15px;height:15px;flex:none;fill:none;stroke:var(--okh-light);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.okh-city.okh-main{background:var(--okh-light);border-color:var(--okh-light);color:#071b0a;font-weight:800;box-shadow:0 10px 26px -12px rgba(118,220,134,.8)}
.okh-city.okh-main svg{stroke:#071b0a}
a.okh-city{cursor:pointer}
.okh-city:is(a):hover,.okh-city:is(a):focus-visible{background:var(--okh-light);border-color:var(--okh-light);color:#071b0a;transform:translateY(-4px) scale(1.06)}
.okh-city:is(a):hover svg,.okh-city:is(a):focus-visible svg{stroke:#071b0a}
.okh-city:is(a):focus-visible{outline:3px solid #fff;outline-offset:3px}
.okh-zh .okh-city{opacity:0;transform:translateY(14px) scale(.9)}
.okh-zone.okh-zgo .okh-city{transition-delay:0s,0s,calc(var(--i,0)*70ms + 1.2s),0s,calc(var(--i,0)*70ms + 1.2s),0s}
@media (max-width:900px){
  .okh-zone-grid{grid-template-columns:1fr;gap:34px}
  .okh-radar{max-width:300px}
}
@media (max-width:640px){
  .okh-radar{max-width:230px}
  .okh-ctr{font-size:14px}
  .okh-ctr b{width:46px;height:46px;box-shadow:0 0 0 8px rgba(118,220,134,.22)}
  .okh-ctr svg{width:22px;height:22px}
  .okh-pills{gap:10px}
  .okh-city{padding:10px 15px;font-size:14px}
}

/* --- FAQ --- */
.okh-faq{background:var(--fond)}
.okh-faq-wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:70px;align-items:start}
.okh-faq-list{display:grid;gap:12px}
.okh-faq-list article{border:1px solid var(--bord);border-radius:18px;background:var(--carte);overflow:hidden}
.okh-faq-list button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:0;background:none;color:var(--titre);font:700 16px/1.4 'Plus Jakarta Sans',sans-serif;text-align:left;cursor:pointer}
.okh-faq-list i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-style:normal;font-size:22px}
.okh-faq-a{min-height:0;overflow:hidden}.okh-faq-a>p{margin:0;padding:0 20px 20px;max-width:none;color:var(--texte-doux);line-height:1.7}
[data-reveal]{transition-duration:.8s!important}

@media (max-width:980px){
  .okh-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .okh-faq-wrap{grid-template-columns:1fr;gap:24px}
}
@media (max-width:767px){
  .okh-hero-slide{background-position:65% center!important}
  .okh-hero-shade{background:linear-gradient(180deg,rgba(29,33,31,.55) 0%,rgba(29,33,31,.82) 100%)}
  .okh-split{grid-template-columns:1fr}
  .okh-car-pres{--ar:4/3}
  .okh-why-grid{grid-template-columns:1fr}
  .okh-car{border-radius:18px}
}
@media (max-width:480px){
  .okh-section{padding-inline:18px}
  .okh-hero-content{padding-inline:18px}
  .okh-hero-dots{right:18px}
  .okh-lightbox{grid-template-columns:40px minmax(0,1fr) 40px;gap:6px;padding:12px}.okh-lightbox button{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .okh-why-grid article,.okh-arrow,[data-reveal]{transition:none!important}
  .okh-why::after,.okh-why-grid span{animation:none!important}
  html.okh-js .okh-checks li{opacity:1;translate:none;transition:none}html.okh-js .okh-checks svg path{stroke-dashoffset:0;animation:none}
}

/* ======================================================================================================
   COPIE de NEM (accueil.css du gabarit NEM : §1 apparitions, §2 titres, §3 relief, §5 boutons, §7 photos)
   pour les sections « services » et « nos derniers projets » de l'accueil (le bandeau d'appel, commun à plusieurs
   pages, est dans commun.css, classe .okm-appel). Préfixe nm- → okh-. Tout est limité à .okh-n (classe posée sur ces trois sections) : le reste de la
   page ne bouge pas. Le markup, lui, est en style inline comme dans NEM (classes du thème : grille-cartes,
   hv23, hv19, hv04, hv20, hv06, hv02, eco-piste-*, du fichier assets/eco/css/site.css).
   ====================================================================================================== */

/* §1 apparitions au scroll, plus amples que celles du thème */
.okh-n [data-reveal]{transition:opacity .85s var(--okh-ease),transform .95s var(--okh-ease),filter .85s ease}
.okh-n [data-reveal].is-hidden{filter:blur(8px)}
.okh-n [data-reveal].is-hidden[data-reveal="1"]{transform:translateY(46px) scale(.985)}
.okh-n [data-reveal].is-hidden[data-reveal="zoom"]{transform:scale(.9)}

/* entrée pivotante des cartes de services */
.okh-scene{perspective:1100px}
.okh-in{opacity:0;transform:perspective(1000px) rotateY(-26deg) rotateX(9deg) translateY(50px) scale(.94)}
.okh-in.okh-vu{opacity:1;transform:none;transition:opacity .8s ease,transform 1s var(--okh-ease)}

/* §2 titres : trait avant le sur-titre + filet dégradé sous le h2 */
.okh-tt>span:first-child::before{content:'';display:inline-block;vertical-align:middle;width:30px;height:2px;margin:-3px 12px 0 0;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--okh-ease) .25s}
.okh-tt:not(.is-hidden)>span:first-child::before{transform:scaleX(1)}
.okh-tt h2::after{content:'';display:block;height:3px;width:0;margin-top:16px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--okh-light));transition:width .9s var(--okh-ease) .45s}
.okh-tt:not(.is-hidden) h2::after{width:72px}
@media (max-width:480px){.okh-tt>span:first-child::before{display:none}}

/* §3 cartes en relief (inclinaison suivant la souris ; sans reflet blanc sur les photos : règle du socle) */
.okh-tilt{position:relative;transform-style:preserve-3d;will-change:transform}
.okh-tilt.okh-on{transition:transform .08s linear,box-shadow .3s,background .3s,border-color .3s!important;box-shadow:0 30px 60px -28px rgba(29,33,31,.55)}

/* §5 boutons : brillance (sur le bouton seulement) + ressort */
.okh-n .hv04,.okh-n .hv20{position:relative;overflow:hidden;isolation:isolate}
.okh-n .hv04::after,.okh-n .hv20::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-140%) skewX(-20deg);transition:transform .75s var(--okh-ease)}
.okh-n .hv04:hover::after,.okh-n .hv20:hover::after{transform:translateX(260%) skewX(-20deg)}
html .okh-n .hv04,html .okh-n .hv20{transition:transform .5s var(--okh-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
html .okh-n .hv04:hover,html .okh-n .hv20:hover{transform:translateY(-3px) scale(1.045)}
html .okh-n .hv04:active,html .okh-n .hv20:active{transform:scale(.97)}

/* §7 nos derniers projets : survol des photos, glisser au doigt / à la souris */
.okh-projects [data-projects-track]{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.okh-projects .eco-piste-slide img{-webkit-user-drag:none;user-drag:none}
.okh-projects .eco-piste-slide>div{cursor:zoom-in}
.okh-projects .eco-piste-slide>div img{transition:transform .9s var(--okh-ease)}
.okh-projects .eco-piste-slide>div:hover img{transform:scale(1.07)}


/* mobile : cartes de services empilées à la verticale (règle du socle OKM ; NEM y met un rail horizontal) */
@media (max-width:767px){
  .okh-services .grille-services-accueil{display:grid!important;grid-template-columns:1fr!important;overflow:visible;gap:18px!important;padding:0!important;margin:22px 0}
  .okh-services .grille-services-accueil>div{flex:none}
}

@media (prefers-reduced-motion:reduce){
  .okh-n [data-reveal]{transition:none!important;filter:none!important}
  .okh-in{opacity:1!important;transform:none!important;transition:none!important}
  .okh-n .hv04::after,.okh-n .hv20::after{display:none!important}
  html .okh-n .hv04:hover,html .okh-n .hv20:hover{transform:none}
  .okh-radar circle,.okh-ctr,.okh-city{transition:none!important}
  .okh-city:is(a):hover,.okh-city:is(a):focus-visible{transform:none!important}
  .okh-radar circle.rp{animation:none!important;opacity:0}
  .okh-zh .okh-radar circle.r{stroke-dashoffset:0!important}
  .okh-zh .okh-ctr{opacity:1!important;transform:translate(-50%,-50%)!important}
  .okh-zh .okh-city{opacity:1!important;transform:none!important}
  .okh-tt>span:first-child::before{transform:scaleX(1)!important;transition:none!important}
  .okh-tt h2::after{width:72px!important;transition:none!important}
}

/* boutons de l'accueil = boutons de NEM : pilule pleine accent + flèche (.hv21b sur fond sombre / hero, .hv04 sur fond clair),
   brillance sur le bouton seulement + ressort au survol (copie NEM contact.css §boutons) */
.okh-hero .hv21b,.okh-why .hv21b,.okh-presentation .hv04{position:relative;overflow:hidden;isolation:isolate}
.okh-hero .hv21b::after,.okh-why .hv21b::after,.okh-presentation .hv04::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-140%) skewX(-20deg);transition:transform .75s var(--okh-ease)}
.okh-hero .hv21b:hover::after,.okh-why .hv21b:hover::after,.okh-presentation .hv04:hover::after{transform:translateX(260%) skewX(-20deg)}
html .okh-hero .hv21b,html .okh-why .hv21b,html .okh-presentation .hv04{transition:transform .5s var(--okh-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
html .okh-hero .hv21b:hover,html .okh-why .hv21b:hover,html .okh-presentation .hv04:hover{transform:translateY(-3px) scale(1.045)}
html .okh-hero .hv21b:active,html .okh-why .hv21b:active,html .okh-presentation .hv04:active{transform:scale(.97)}
/* survol d'un .hv04 : le thème garde le texte foncé sur --accent-fonce (3,57:1) -> blanc (5,03:1), comme commun.css le fait pour .hv21b */
.okh-n .hv04:hover,.okh-presentation .hv04:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  .okh-hero .hv21b::after,.okh-why .hv21b::after,.okh-presentation .hv04::after{display:none!important}
  html .okh-hero .hv21b:hover,html .okh-why .hv21b:hover,html .okh-presentation .hv04:hover{transform:none}
}

/* ---------- Accueil : vignettes des cartes « Nos derniers conseils » (même rendu que blog.css) ---------- */
.blog-card__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* bouton « Voir tous les articles » : survol = texte blanc sur --accent-fonce (le texte foncé ne ferait que 3,6:1) */
[data-blog-section] .hv04:hover{color:#fff!important}
[data-blog-section] a:focus-visible{outline:3px solid var(--accent-texte-fonce);outline-offset:3px;border-radius:3px}