/* Hero pleine page des trois accueils (31/10/2026) : photos en fondu, et sur chacune un élément
   technique tiré du site lui-même (couleurs de la photo, vrai code, typographie).
   Le hero reste sombre quel que soit le thème du site. */
.hs{
 --bord:clamp(20px,5vw,96px);--bande:68px;--haut:86px;--marine:3,19,47;
 position:relative;display:flex;flex-direction:column;justify-content:flex-end;
 min-height:max(100vh,720px);min-height:max(100svh,720px);
 padding:calc(var(--haut) + 24px) var(--bord) calc(var(--bande) + 44px);
 overflow:hidden;background:#03132F;color:#fff;isolation:isolate
}

/* Photos */
.hs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.hs-slide.is-on{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s}
.hs-photo,.hs-photo img{display:block;position:absolute;inset:0;width:100%;height:100%}
.hs-photo img{object-fit:cover;object-position:var(--pos,50% 50%);filter:brightness(var(--lum,1));transform:scale(1.07);transition:transform 10s linear}
.hs-slide.is-on .hs-photo img{transform:none}
.hs-slide:after{content:"";position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(var(--marine),.72) 0,rgba(var(--marine),0) 24%),
 linear-gradient(0deg,rgba(var(--marine),.7) 0,rgba(var(--marine),0) 34%),
 linear-gradient(90deg,rgba(var(--marine),.86) 0,rgba(var(--marine),.62) 36%,rgba(var(--marine),0) 66%)}

/* Texte */
.hs-texte{position:relative;z-index:3;max-width:56%}
.hs-marque{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:clamp(16px,1.5vw,24px);font-weight:600;letter-spacing:-.01em}
.hs-marque span{color:var(--cyan);font-weight:500}
.hs-accroche{display:flex;align-items:center;gap:12px;margin:0 0 clamp(14px,2vh,24px);font:400 clamp(12px,.95vw,14px)/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;color:rgba(255,255,255,.86)}
.hs-accroche:before{content:"";width:32px;height:2px;background:var(--cyan);flex:none}
.hs-titre{margin:0;font-family:Outfit,sans-serif;font-size:clamp(42px,5.5vw,104px);font-weight:600;line-height:1;letter-spacing:-.05em;color:#fff}
.hs-titre span{display:block}
.hs-titre .hs-avance{margin-top:.12em;font-size:.84em;background:linear-gradient(90deg,#5FA6FF,#22CFFF);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.hs-slogan{margin:clamp(14px,2.4vh,26px) 0 clamp(20px,3.2vh,34px);font-size:clamp(20px,2.3vw,38px);font-weight:600;line-height:1.15;letter-spacing:-.03em;color:#fff}
.hs-slogan em{font-style:normal;color:var(--cyan)}
.hs-boutons{display:flex;flex-wrap:wrap;gap:12px}
.hs .hs-boutons .btn{margin:0}
.hs .hs-boutons .btn-ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.42);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hs .hs-boutons .btn-ghost:hover{background:#fff;color:#03132F;border-color:#fff}
.hs .btn:focus-visible,.hs-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Élément technique de la photo */
.hs-tech{position:absolute;z-index:2;right:var(--bord);bottom:calc(var(--bande) + 44px);width:clamp(420px,42vw,760px);height:clamp(250px,42vh,420px)}

.hs-couleurs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(5px,.5vw,8px)}
.hs-carte{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:clamp(10px,1vw,16px);background:var(--c);color:var(--t)}
.hs-carte b{font-size:clamp(12px,1.08vw,18px);font-weight:400;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.hs-carte small{font:400 clamp(10px,.76vw,13px)/1.55 'JetBrains Mono',monospace;white-space:nowrap}
.hs-carte small span{font-weight:600;margin-right:.5em}
.hs-slide.is-on .hs-carte{animation:hs-carte .8s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.3s + var(--n)*90ms)}
@keyframes hs-carte{from{clip-path:inset(100% 0 0 0);transform:translateY(18px)}to{clip-path:inset(0);transform:none}}

.hs-panneau{display:flex;flex-direction:column;background:rgba(var(--marine),.76);border:1px solid rgba(255,255,255,.16);border-radius:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden}
.hs-slide.is-on .hs-panneau{animation:hs-panneau .8s .3s ease-out both}
@keyframes hs-panneau{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hs-fichier{flex:none;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.14);font:400 clamp(11px,.85vw,13px)/1.4 'JetBrains Mono',monospace;color:rgba(255,255,255,.72)}
.hs-panneau pre{flex:1;margin:0;padding:clamp(12px,1.4vw,22px) clamp(14px,1.5vw,24px);display:flex;align-items:center;overflow:hidden;background:none;border:0}
.hs-panneau code{font:400 clamp(13px,1.3vw,22px)/1.7 'JetBrains Mono',monospace;color:#F5F8FF;background:none;padding:0;white-space:pre}
.hs-panneau .p{color:#6FD8FF}.hs-panneau .v{color:#FFC861}.hs-panneau .g{color:rgba(255,255,255,.55)}
.hs-puce{display:inline-block;width:.8em;height:.8em;margin-right:.45em;border-radius:2px;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.4);vertical-align:-.05em}

.hs-typo{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(14px,2vw,34px);padding:clamp(14px,2vw,32px);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:24px 24px}
.hs-aa{font-size:clamp(84px,11vw,190px);font-weight:600;line-height:.9;letter-spacing:-.05em;color:#fff}
.hs-aa.hs-mono{font:700 clamp(34px,4.1vw,70px)/1 'JetBrains Mono',monospace;letter-spacing:-.02em;color:var(--cyan)}
.hs-specimen{min-width:0}
.hs-specimen strong{display:block;font-size:clamp(17px,1.7vw,27px);font-weight:600;letter-spacing:-.02em;color:#fff}
.hs-specimen p{margin:.2em 0 .7em;font-size:clamp(12px,1.05vw,16px);line-height:1.4;color:rgba(255,255,255,.76)}
.hs-specimen ul{list-style:none;margin:0;padding:0;font-size:clamp(14px,1.25vw,20px);line-height:1.4;color:#fff}
.hs-specimen .hs-alpha{margin:.7em 0 0;font-size:clamp(12px,1vw,15px);overflow-wrap:anywhere;color:rgba(255,255,255,.86)}
.hs-specimen code{display:block;font:400 clamp(11px,1vw,15px)/1.65 'JetBrains Mono',monospace;color:#F5F8FF;background:none;padding:0;white-space:nowrap}

/* Bande du bas */
.hs-bande{position:absolute;z-index:4;left:0;right:0;bottom:0;height:var(--bande);display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);padding-inline:var(--bord);background:rgba(var(--marine),.66);border-top:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hs-legende{min-width:0;margin:0;display:flex;align-items:baseline;gap:.9em;font-size:15px;white-space:nowrap;overflow:hidden}
.hs-num{font:400 13px 'JetBrains Mono',monospace;color:rgba(255,255,255,.76)}
.hs-nom{font-weight:600}
.hs-credit{font-size:13px;color:rgba(255,255,255,.76);overflow:hidden;text-overflow:ellipsis}
.hs-commandes{display:none;align-items:center;gap:clamp(8px,1.2vw,18px);margin-left:auto;flex:none}
.hs-js .hs-commandes{display:flex}
.hs-barres{display:flex;gap:4px;width:clamp(120px,22vw,340px)}
.hs-barre{flex:1;height:3px;background:rgba(255,255,255,.28);overflow:hidden}
.hs-barre i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.hs-barre.fait i{transform:scaleX(1)}
.hs-barre.courant i{animation:hs-rempli var(--duree,7s) linear forwards}
.hs-arret .hs-barre.courant i{animation-play-state:paused}
@keyframes hs-rempli{to{transform:scaleX(1)}}
.hs-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:8px;color:#fff;cursor:pointer}
.hs-btn:hover{background:rgba(255,255,255,.14)}
.hs-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hs-btn .lire{display:none}.hs-arret .hs-btn .lire{display:block}.hs-arret .hs-btn .pause{display:none}

/* Menu transparent tant que la page n'a pas défilé */
.hs-page .nav:not(.scrolled):not(.menu-open){background:transparent;box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hs-page .nav{transition:background .3s ease,box-shadow .3s ease}
.hs-page .nav:not(.scrolled):not(.menu-open) .nav-logo-img{filter:brightness(0) invert(1)}
.hs-page .nav:not(.scrolled):not(.menu-open) .nav-cta{background:#fff;color:#03132F}
.hs-page .nav:not(.scrolled):not(.menu-open) .nav-cta:hover,.hs-page .nav:not(.scrolled):not(.menu-open) .nav-cta:focus-visible{background:var(--accent);color:#fff}
.hs-page .nav:not(.scrolled):not(.menu-open) .nav-burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.hs-page .nav:not(.scrolled):not(.menu-open) .nav-burger span{background:#fff}
@media(min-width:1024px){
 .hs-page .nav:not(.scrolled) .nav-links a{color:#fff}
 .hs-page .nav:not(.scrolled) .nav-links a:hover,.hs-page .nav:not(.scrolled) .nav-links a:focus-visible{color:var(--cyan)}
 .hs-page .nav:not(.scrolled) .nav-links a.active{color:#fff;box-shadow:inset 0 -2px var(--cyan)}
 .hs-page .nav:not(.scrolled) .lang-switcher{background:rgba(var(--marine,3,19,47),.35);border-color:rgba(255,255,255,.3)}
 .hs-page .nav:not(.scrolled) .lang-link{color:#fff}
 .hs-page .nav:not(.scrolled) .nav-controls{border-color:rgba(255,255,255,.3)}
 .hs-page .nav:not(.scrolled) .theme-toggle,.hs-page .nav:not(.scrolled) .color-toggle{color:#fff}
 .hs-page .nav:not(.scrolled) .theme-toggle svg,.hs-page .nav:not(.scrolled) .color-toggle svg{stroke:#fff;color:#fff}
}

/* Texte repris sous le hero */
.hs-intro{padding:clamp(48px,7vw,96px) clamp(20px,5vw,96px);background:var(--bg);color:var(--text)}
.hs-intro h2{max-width:22em;margin:0 0 .6em;font-size:clamp(28px,3.4vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.035em;color:var(--text)}
.hs-intro p{max-width:44em;margin:0 0 1em;font-size:clamp(17px,1.35vw,20px);line-height:1.7;color:var(--text-2)}
.hs-intro p:last-child{margin-bottom:0}

/* Écran moyen : la valeur sans son libellé, pour tenir dans la carte */
@media(max-width:1199px){.hs-carte small span{display:none}}

/* Tablette et téléphone : le texte en haut, l'élément technique juste au-dessus de la bande */
@media(max-width:1023px){
 .hs{--haut:72px;--bande:58px;--tech:190px;padding-bottom:calc(var(--bande) + var(--tech) + 26px);justify-content:flex-start}
 .hs-slide:after{background:linear-gradient(180deg,rgba(var(--marine),.82) 0,rgba(var(--marine),.62) 55%,rgba(var(--marine),.42) 100%)}
 .hs-texte{max-width:none}
 .hs-tech{left:var(--bord);right:var(--bord);bottom:calc(var(--bande) + 14px);width:auto;height:var(--tech)}
 .hs-titre{font-size:clamp(42px,8.6vw,76px)}
 .hs-slogan{font-size:clamp(20px,3.8vw,32px)}
 .hs-aa{font-size:clamp(70px,14vw,110px)}
 .hs-aa.hs-mono{font-size:clamp(26px,6vw,44px)}
}
@media(max-width:700px){
 .hs{--tech:158px;min-height:max(100vh,760px);min-height:max(100svh,760px)}
 .hs-marque{margin-bottom:10px}
 .hs-accroche{margin-bottom:12px;letter-spacing:.02em}
 .hs-accroche:before{width:22px}
 .hs-titre{font-size:clamp(36px,11.2vw,60px)}
 .hs-slogan{font-size:clamp(18px,5.4vw,26px);margin:12px 0 16px}
 .hs-boutons{gap:8px}
 .hs .hs-boutons .btn{padding:12px 16px;font-size:15px;width:auto;justify-content:center}
 .hs-carte{padding:9px 7px}
 .hs-carte b{font-size:12px;letter-spacing:0;text-transform:none;line-height:1.2}
 .hs-carte small{font-size:10px}
 .hs-carte small.rvb{display:none}
 .hs-carte small span{display:none}
 .hs-fichier{padding:7px 12px}
 .hs-panneau pre{padding:8px 12px}
 .hs-panneau code{font-size:11px;line-height:1.55}
 .hs-typo{gap:12px;padding:12px}
 .hs-aa{font-size:76px}
 .hs-aa.hs-mono{font-size:25px}
 .hs-specimen strong{font-size:16px}
 .hs-specimen p{font-size:11.5px;margin-bottom:.4em}
 .hs-specimen ul{font-size:13px;line-height:1.3}
 .hs-specimen .hs-alpha{display:none}
 .hs-specimen code{font-size:10.5px;line-height:1.5}
 .hs-bande{gap:8px}
 .hs-credit{display:none}
 .hs-barres{position:absolute;left:0;right:0;top:-1px;width:auto;gap:2px}
 .hs-barre{height:2px}
 .hs-commandes{gap:0}
}

@media(prefers-reduced-motion:reduce){
 .hs-slide,.hs-slide.is-on{transition:none}
 .hs-photo img,.hs-slide.is-on .hs-photo img{transform:none;transition:none}
 .hs-slide.is-on .hs-carte,.hs-slide.is-on .hs-panneau{animation:none}
 .hs-barre.courant i{animation:none;transform:scaleX(1)}
}

/* Photos légères en fond de quatre parties de la page (31/10). L'image ne se charge qu'à l'approche de la
   partie (hero-photos.js pose hs-fond-vu). Atténuée et effacée vers le texte par un masque. */
.hs-page .section.services,.hs-page .section.creations,.hs-page .section.besoins,.hs-page .section.contact,.hs-page .section.faq{position:relative;isolation:isolate}
.hs-page .section.services:before,.hs-page .section.creations:before,.hs-page .section.besoins:before,.hs-page .section.contact:before,.hs-page .section.faq:before{
 content:"";position:absolute;z-index:-1;top:0;right:0;width:min(100%,1500px);height:min(100%,760px);opacity:0;transition:opacity .9s ease;
 background:var(--fond) right top/cover no-repeat;pointer-events:none;
 -webkit-mask-image:linear-gradient(to left,#000 20%,transparent 86%),linear-gradient(to bottom,#000 30%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(to left,#000 20%,transparent 86%),linear-gradient(to bottom,#000 30%,transparent 100%);mask-composite:intersect
}
.hs-page .section.services{--fond:url(captures/fonds/alpes.webp?v=20261031)}
.hs-page .section.creations{--fond:url(captures/fonds/glacier.webp?v=20261031)}
.hs-page .section.besoins{--fond:url(captures/fonds/ocean.webp?v=20261031)}
.hs-page .section.contact{--fond:url(captures/fonds/vague.webp?v=20261031)}
.hs-page .section.faq{--fond:url(captures/fonds/feuilles.webp?v=20261031)}
.hs-page .section.hs-fond-vu:before{opacity:.42}
.hs-page .section.faq.hs-fond-vu:before{opacity:.46}
[data-theme="dark"] .hs-page .section.faq.hs-fond-vu:before,.hs-page[data-theme="dark"] .section.faq.hs-fond-vu:before{opacity:.5}
@media(min-width:701px){.hs-page .section.faq:before{width:min(70%,1100px);-webkit-mask-image:linear-gradient(to left,#000 25%,transparent 92%),linear-gradient(to bottom,#000 25%,transparent 95%);mask-image:linear-gradient(to left,#000 25%,transparent 92%),linear-gradient(to bottom,#000 25%,transparent 95%)}}
[data-theme="dark"] .hs-page .section.hs-fond-vu:before,.hs-page[data-theme="dark"] .section.hs-fond-vu:before{opacity:.26}
@media(max-width:700px){
 .hs-page .section.services{--fond:url(captures/fonds/alpes-tel.webp?v=20261031)}
 .hs-page .section.creations{--fond:url(captures/fonds/glacier-tel.webp?v=20261031)}
 .hs-page .section.besoins{--fond:url(captures/fonds/ocean-tel.webp?v=20261031)}
 .hs-page .section.contact{--fond:url(captures/fonds/vague-tel.webp?v=20261031)}
 .hs-page .section.faq{--fond:url(captures/fonds/feuilles-tel.webp?v=20261031)}
 .hs-page .section.services:before,.hs-page .section.creations:before,.hs-page .section.besoins:before,.hs-page .section.contact:before,.hs-page .section.faq:before{height:360px;-webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 100%);-webkit-mask-composite:source-over;mask-image:linear-gradient(to bottom,#000 10%,transparent 100%);mask-composite:add}
 .hs-page .section.hs-fond-vu:before{opacity:.24}
 .hs-page .section.faq.hs-fond-vu:before{opacity:.2}
}