html{scroll-behavior:smooth;scroll-padding-top:62px}

.fh{
  --tq:var(--color-bleuvert);
  color:var(--color-txt);
  background:radial-gradient(120% 70% at 70% -10%,#0F1C33 0%,var(--background-color) 58%);
  scrollbar-color:var(--color-secondary) var(--background-color-zone);
  scrollbar-width:thin;
}

.fh h1,.fh h2{font-weight:700;line-height:1.06}
.fh h1{letter-spacing:-.035em}
.fh h2{letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.fh h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.fh h2 span,.fh h3 span{font-size:inherit}
.fh dt{font-weight:600;color:var(--color-txt)}

.fh-txt{max-width:64ch;font-size:var(--sizetxt);line-height:1.72;color:var(--color-txt-secondary);text-wrap:pretty}
.fh-zone{background:rgba(11,16,32,.72);border-top:var(--trait) solid var(--color-hairline);border-bottom:var(--trait) solid var(--color-hairline)}
.fh-svg{display:block;width:100%;height:auto}

.fh-btn{display:inline-block;color:var(--background-color);background:var(--color-primary);border:var(--trait) solid var(--color-primary);border-radius:2px;transition:background .18s,color .18s,border-color .18s}
.fh-btn:hover,.fh-btn:focus-visible{background:var(--color-txt);border-color:var(--color-txt);color:var(--background-color)}
.fh-btn-creux{--accent:var(--color-primary);background:transparent;color:var(--color-txt);border-color:var(--color-hairline)}
.fh-btn-creux:hover,.fh-btn-creux:focus-visible{background:transparent;color:var(--accent);border-color:var(--accent)}
.fh-lien{text-decoration:underline var(--trait) var(--color-hairline);text-underline-offset:.7em}
.fh-lien:hover,.fh-lien:focus-visible{text-decoration-color:var(--color-primary)}

.fh-hero{min-height:calc(100svh - 62px)}
.fh-hero .fh-in{z-index:var(--z-content)}
.fh-hero-txt{max-width:36rem}
.fh-fil li+li::before{content:"/\00a0\00a0";color:var(--color-secondary)}
.fh-titre span{display:block;font-size:var(--sizeh3);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--color-primary)}
.fh-chapeau{max-width:46ch;font-size:clamp(1.05rem,.98rem + .4vw,1.28rem);line-height:1.7;color:var(--color-txt-secondary)}
.fh-plaque{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-field);pointer-events:none;fill:none;stroke-width:1}
.fh-plaque text{fill:var(--color-txt-secondary);stroke:none;font-family:var(--font-accent);font-size:13px;letter-spacing:.14em}
.fh-cons{fill:none;stroke:var(--color-hairline-soft);stroke-dasharray:2 6}
.js-motion .fh-hero-txt>*{animation:fh-monte .9s var(--ease) both}
.js-motion .fh-hero-txt>:nth-child(2){animation-delay:.12s}
.js-motion .fh-hero-txt>:nth-child(3){animation-delay:.24s}
.js-motion .fh-hero-txt>:nth-child(4){animation-delay:.36s}
@keyframes fh-monte{from{opacity:0;transform:translateY(14px)}}
@keyframes fh-derive{to{stroke-dashoffset:-12}}
@keyframes fh-pulse{50%{opacity:.85}}

.fh-glyphe{width:3rem;height:3rem;fill:none;stroke:var(--color-primary)}
.fh-glyphe .p{fill:var(--color-primary);stroke:none}
.fh-glyphe .t{stroke:var(--color-txt-secondary);stroke-dasharray:2 3}
.fh-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.fh-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fh-dip{fill:none}
.fh-dip :not(.fh-assemble){vector-effect:non-scaling-stroke}
.fh-cadre{stroke:var(--color-hairline)}
.fh-assemble{stroke:var(--color-primary);stroke-dasharray:1 1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .2s}
.fh-anim:not(.is-visible) .fh-assemble{stroke-dashoffset:1}

.fh-croisements li::before{content:"";position:absolute;left:0;top:-1px;width:3rem;height:1px;background:var(--g);transform-origin:left;animation:fh-marque 12s ease-in-out infinite}
.fh-croisements li:nth-child(2)::before{background:var(--d);animation-delay:4s}
.fh-croisements li:nth-child(3)::before{background:var(--color-primary);animation-delay:8s}
@keyframes fh-tour{0%,40%,100%{opacity:.07}10%,26%{opacity:.34}}
@keyframes fh-allume{0%,40%,100%{fill:var(--background-color)}10%,26%{fill:var(--f)}}
@keyframes fh-marque{0%,40%,100%{transform:scaleX(.25)}10%,26%{transform:scaleX(1)}}

.fh-releve{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.fh-etape{--ligne:var(--color-primary);background:linear-gradient(90deg,var(--ligne) 0 3px,transparent 3px) 0 0/8px 1px repeat-x}
.fh-etape:first-child{--ligne:var(--moi)}
.fh-etape:first-child,.fh-service{background:linear-gradient(var(--ligne),var(--ligne)) 0 0/100% 1px no-repeat}
.fh-etape::before{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--ligne)}
.fh-chantier{animation:fh-glisse 6s linear infinite}
.fh-chantier::before{background:var(--background-color);border:var(--trait) dashed var(--ligne)}
.fh-reserve{--ligne:var(--color-hairline-soft)}
.fh-reserve::before{background:var(--background-color);border:var(--trait) solid var(--color-hairline-soft)}
.fh-hache{display:block;width:11rem;max-width:100%;height:1.35em;border:var(--trait) solid var(--color-hairline-soft);background:repeating-linear-gradient(135deg,var(--color-hairline-soft) 0 1px,transparent 1px 7px)}
@keyframes fh-glisse{to{background-position:24px 0}}
@keyframes fh-glisse-v{to{background-position:5px 24px}}

.fh-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fh-dims::before{content:"";position:absolute;top:2.5rem;left:16.67%;right:16.67%;height:1px;background:var(--color-hairline)}
.fh-dim{display:grid;justify-items:center;align-content:start}
.fh-dim-cpt{--c:var(--tq)}.fh-dim-tec{--c:var(--color-bleu)}.fh-dim-cnx{--c:var(--color-orange)}
.fh-dim svg{width:5rem;height:5rem;fill:none;stroke:var(--c)}
.fh-dim .o{fill:var(--background-color-zone);stroke:var(--color-hairline)}
.fh-dim .b{fill:var(--background-color-zone)}
.fh-dim .p{fill:var(--c);stroke:none}
.fh-dim .t{stroke-dasharray:2 3}
.fh-dim[aria-current] .o{stroke:var(--c);fill:color-mix(in srgb,var(--c) 10%,var(--background-color-zone))}
.fh-dim-nom{font-size:.82rem;color:var(--c)}
.fh-dims-flux svg{height:4.5rem;fill:none;stroke-dasharray:2 4;animation:fh-derive 7s linear infinite}
.fh-dims-flux path{vector-effect:non-scaling-stroke;stroke:var(--tq)}
.fh-dims-flux path+path{stroke:var(--color-bleu)}
.fh-dims-flux path+path+path{stroke:var(--color-orange)}
.fh-dims-flux span{width:13px;height:13px;border-radius:50%;background:var(--moi);box-shadow:0 0 0 5px var(--background-color-zone),0 0 0 6px var(--color-hairline)}

.fh-anim{transition:opacity .5s ease,transform .5s var(--ease)}
.fh-anim:not(.is-visible){opacity:0;transform:translateY(12px)}

@media (max-width:1100px){
  .fh-hero{min-height:0}
  .fh-plaque{position:relative;inset:auto;height:auto;aspect-ratio:1;max-width:62svh}
  .fh-plaque text{display:none}
}
@media (max-width:900px){
  .fh-duo,.fh-trois,.fh-dims{grid-template-columns:minmax(0,1fr)}
  .fh-releve{grid-auto-flow:row}
  .fh-etape,.fh-etape:first-child,.fh-service{background-size:1px 100%;background-position:5px 0}
  .fh-dims::before{left:2.5rem;right:auto;top:2.5rem;bottom:2.5rem;width:1px;height:auto}
  .fh-dim{grid-template-columns:5rem minmax(0,1fr);justify-items:start;text-align:left}
  .fh-dims-flux svg{display:none}
  .fh-etape::before{top:0}
  .fh-chantier,.fh-reserve{background-image:linear-gradient(var(--ligne) 0 3px,transparent 3px);background-size:1px 8px;background-repeat:repeat-y}
  .fh-chantier{animation-name:fh-glisse-v}
}

@media (prefers-reduced-motion:reduce){
  .fh *,.fh *::before{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}