/* Owner reference: Héros ETCHENET en bleu nuit.png, 8 November 2026.
 * Live HTML cards, finite depth entrance, then native vertical scroll. */
.hero-sequence{position:relative;background:var(--bg)}
.hero.space-hero{height:100svh;min-height:820px;max-height:none;background:radial-gradient(ellipse at 50% 80%,#3c286b33,transparent 56%),var(--bg);overflow:clip;isolation:isolate}
.space-enhanced .space-hero{position:sticky;top:0}
.space-hero #space-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.space-nebula{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 16% 39%,#3c286b30,transparent 25%),radial-gradient(ellipse at 85% 36%,#31255528,transparent 24%),radial-gradient(ellipse at 50% 60%,#3c286b22,transparent 35%)}
.space-horizon{position:absolute;top:58%;left:-20%;width:140%;height:70%;border-radius:50%;border-top:1px solid #a398ff80;box-shadow:0 -4px 10px -5px #b9a8e7,0 -18px 65px -38px #67518e,inset 0 45px 65px -60px #8464ac;pointer-events:none}
.space-horizon:before{content:'';position:absolute;left:40%;right:40%;top:-4px;height:3px;background:linear-gradient(90deg,transparent,#d5cbf5,transparent);box-shadow:0 0 24px 7px #8464ac6a}
.space-horizon:after{content:'';position:absolute;inset:15% 12% -20%;border-radius:50%;border-top:1px solid #a398ff24;box-shadow:0 -8px 40px -22px #8464ac}
.space-hero .hero-content{position:absolute;inset:clamp(110px,12.2vh,140px) 0 auto;width:94%;min-height:0;max-width:1250px;padding:0;display:flex;justify-content:flex-start;pointer-events:auto}
.space-hero .hero-eyebrow{color:#e8f1fa;font-size:13px;letter-spacing:.08em;margin:0 0 22px}
.space-hero .live-dot{background:var(--violet);width:7px;height:7px;box-shadow:0 0 14px #8b79ff}
.space-hero h1{font-size:clamp(62px,6.25vw,98px);font-weight:600;line-height:1.02;letter-spacing:-.057em;color:var(--ink);text-shadow:0 3px 25px var(--bg)}
.space-hero h1>span{display:block}
.space-hero .hero-title-accent{display:inline;color:#c2baff;font-style:normal}
.space-hero .hero-intro{font-size:clamp(17px,1.65vw,24px);line-height:1.45;color:#e1e6ef;max-width:800px;margin-top:17px}
.space-hero .hero-actions{margin-top:24px;flex-direction:row;gap:0}
.space-hero .button-light{min-height:54px;padding:15px 30px;gap:32px;font-size:16px;font-weight:600;background:#eeecff;color:#151321;border:1px solid #e3ddff88;box-shadow:0 7px 35px #8464ac1a}
.space-hero .button-light:hover{background:#cbc2ff}
.space-gallery{position:absolute;z-index:4;left:5%;right:5%;bottom:104px;perspective:1300px;overflow:visible}
.space-gallery-window{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;padding:25px 9px 28px;margin:-25px -9px -28px;outline-offset:2px}
.space-gallery-window::-webkit-scrollbar{display:none}
.space-rail{display:flex;gap:30px;position:relative;transform-style:preserve-3d}
.space-card-slot{flex:0 0 calc((100% - 60px)/3);min-width:0;perspective:1200px;scroll-snap-align:start}
.space-card{display:block;position:relative;transform-style:flat;border:1px solid #b5aec15c;border-radius:16px;background:linear-gradient(135deg,#181923,#10111c);box-shadow:0 20px 50px #0006;overflow:hidden;transform-origin:50% 60%;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-mask-image:linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff);transition:border-color .2s,box-shadow .2s}
.space-card:hover{border-color:#c6b7f1;box-shadow:0 15px 50px #0008,0 0 24px #8464ac24}
.space-card .mini-browser{height:29px;padding:0 13px;gap:5px;font-size:9px;color:#d3ccdf;background:linear-gradient(180deg,#22212f,#10111c);border-bottom:1px solid #a398ff24}
.space-card .mini-browser i{width:5px;height:5px;background:#79748d}
.space-card .mini-browser span{margin-left:12px}
.space-card img{width:100%;height:clamp(150px,12vw,190px);object-fit:cover;object-position:top;border:0}
.space-card .floating-caption{padding:12px 18px 14px;font-size:17px;color:#f1f5fb;font-weight:500;line-height:1.2}
.space-card .floating-caption small{font-weight:400;font-size:12px;color:#b6c4d5;margin-top:5px}
.space-hero .hero-bottom{left:5%;right:5%;bottom:22px;display:grid;grid-template-columns:1fr auto;align-items:center;font-size:11px}
.space-hero .hero-bottom>p{color:#abbfd2;font-size:10px}
.space-gallery-controls{justify-self:end;margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.space-gallery-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #4a455b;border-radius:50%;background:#14151e;font-size:18px}
.space-gallery-controls button:hover{background:#2e2540}
.space-gallery-controls button:disabled{opacity:.35;cursor:default}
.space-gallery-controls output{font-size:10px;letter-spacing:.08em;color:#bccbdc;min-width:68px;text-align:center}
.space-enhanced .space-gallery-window{overflow:hidden;scroll-snap-type:none}
/* No JS / paused / reduced motion: native, touch and keyboard scrollable rail. */
.space-hero .space-gallery-window:focus-visible{outline:2px solid #b7dfff}
@media(min-width:1001px) and (max-height:800px){.hero.space-hero{min-height:700px}.space-hero .hero-content{top:102px}.space-hero .hero-eyebrow{margin-bottom:15px;font-size:11px}.space-hero h1{font-size:min(6vw,80px)}.space-hero .hero-intro{font-size:18px;margin-top:12px}.space-hero .hero-actions{margin-top:20px}.space-hero .button-light{min-height:46px;font-size:14px;padding:12px 26px}.space-gallery{bottom:87px}.space-card img{height:155px}.space-card .floating-caption{font-size:15px;padding:10px 15px}.space-card .floating-caption small{font-size:11px}.space-horizon{top:59%}}
@media(min-width:601px) and (max-width:1000px){.hero.space-hero{min-height:850px}.space-hero .hero-content{top:138px;width:94%}.space-hero .hero-eyebrow{font-size:10px;margin-bottom:24px}.space-hero h1{font-size:clamp(48px,7vw,70px);line-height:1.08}.space-hero .hero-intro{font-size:18px;margin-top:24px}.space-hero .hero-actions{margin-top:28px}.space-gallery{left:5%;right:5%;bottom:130px}.space-rail{gap:22px}.space-card-slot{flex-basis:calc((100% - 22px)/2)}.space-card img{height:195px}.space-card .floating-caption{font-size:16px}.space-hero .hero-bottom>p{max-width:130px}.space-hero .hero-bottom{bottom:35px}.space-horizon{top:57%}}
@media(max-width:600px){.hero.space-hero{min-height:760px;height:100svh;max-height:none}.space-hero .hero-content{top:111px;width:calc(100% - 36px);padding:0}.space-hero .hero-eyebrow{font-size:8px;letter-spacing:.045em;margin:0 0 23px;gap:8px}.space-hero h1{font-size:clamp(31px,8.35vw,49px);line-height:1.12;letter-spacing:-.058em}.space-hero h1>span:first-child{white-space:normal}.space-hero .hero-intro{font-size:13px;line-height:1.65;margin-top:20px}.space-hero .hero-actions{margin-top:24px;flex-direction:row;gap:0}.space-hero .button-light{font-size:12px;padding:13px 20px;min-height:46px;gap:25px}.space-gallery{left:9%;right:9%;bottom:130px}.space-rail{gap:22px}.space-card-slot{flex-basis:100%}.space-card{border-radius:12px}.space-card .mini-browser{height:25px;font-size:8px;gap:4px;padding-inline:11px}.space-card .mini-browser i{width:4px;height:4px}.space-card img{height:clamp(148px,41vw,205px)}.space-card .floating-caption{font-size:15px;padding:12px 15px}.space-card .floating-caption small{font-size:11px}.space-hero .hero-bottom{left:22px;right:22px;bottom:25px;display:flex;justify-content:space-between;gap:10px;align-items:center}.space-hero .hero-bottom>p{display:none}.space-gallery-controls{gap:7px}.space-gallery-controls button{width:34px;height:34px}.space-gallery-controls output{font-size:9px;min-width:54px}.space-horizon{top:55%;left:-60%;width:220%}}
@media(prefers-reduced-motion:reduce){.space-card{transform:none!important}.space-hero .space-horizon{box-shadow:none}}
@media(max-width:600px){.space-gallery-controls button{width:44px;height:44px}.space-gallery-controls output{font-size:10px}}
/* Keep the gallery controls with the cards and let the composition grow if needed. */
.hero.space-hero{height:auto;min-height:100svh;display:flex;flex-direction:column}
.space-composition{
  position:relative;flex:1;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(24px,3.4svh,42px);
  padding-block:calc(var(--header) + clamp(18px,3svh,42px)) clamp(36px,calc(28svh - 190px),300px);
}
.space-hero .space-composition .hero-content{
  position:relative;inset:auto;flex:0 0 auto;min-height:0;margin:0 auto;padding:0;pointer-events:auto;
}
.space-gallery-block{
  display:grid;flex:0 0 auto;gap:clamp(14px,2svh,24px);width:var(--showcase-width);
}
.space-hero .space-gallery-block .space-gallery{
  position:relative;inset:auto;min-width:0;pointer-events:auto;
}
.space-hero .space-gallery-block .hero-bottom{
  position:relative;inset:auto;min-width:0;pointer-events:auto;
}
.space-gallery-window{scroll-padding-inline:9px}
.space-hero .space-card img{
  display:block;width:100%;height:auto;aspect-ratio:2 / 1;
  max-height:clamp(132px,24svh,242px);
}
.space-hero .space-card .floating-caption{min-height:64px}
@media(min-width:1001px) and (max-height:970px){
  .space-composition{gap:24px;padding-block:calc(var(--header) + 18px) 24px}
  .space-hero h1{font-size:clamp(62px,5.85vw,88px)}
  .space-hero .hero-actions{margin-top:16px}
}
@media(min-width:1001px) and (max-height:800px){
  .space-composition{gap:20px;padding-block:calc(var(--header) + 14px) 18px}
  .space-hero h1{font-size:clamp(54px,5.5vw,72px)}
  .space-hero .hero-intro{margin-top:10px}
  .space-hero .hero-actions{margin-top:12px}
  .space-hero .space-card img{max-height:clamp(122px,22svh,184px)}
  .space-hero .space-card .floating-caption{min-height:56px}
}
@media(min-width:601px) and (max-width:1000px){
  .space-hero .space-card img{aspect-ratio:1.9 / 1;max-height:216px}
}
@media(min-width:601px) and (max-width:1000px) and (max-height:850px){
  .space-composition{gap:24px;padding-block:calc(var(--header) + 16px) 22px}
  .space-hero h1{font-size:clamp(42px,6.6vw,61px)}
  .space-hero .hero-eyebrow{margin-bottom:14px}
  .space-hero .hero-intro,.space-hero .hero-actions{margin-top:14px}
  .space-hero .space-card img{max-height:23svh}
}
@media(max-width:600px){
  .space-composition{padding-block:calc(var(--header) + 24px) 28px;gap:24px}
  .space-hero .space-card img{aspect-ratio:1.86 / 1;max-height:none}
  .space-hero .hero-actions{margin-top:16px}
  .space-hero .space-gallery-controls{margin-inline:auto}
}
@media (width < 768px) {
  .hero.space-hero { min-height: 100dvh; }
  .space-hero .space-composition {
    --hero-edge-gap: 8px;
    gap: clamp(12px, calc(8dvh - 30px), 24px);
    padding-block-start: calc(var(--pastel-mobile-header-top, 10px) + var(--pastel-mobile-header-height, 56px) + var(--hero-edge-gap));
    padding-block-end: calc(var(--pastel-widget-bottom, 12px) + var(--pastel-widget-height, 56px) + env(safe-area-inset-bottom, 0px) + var(--hero-edge-gap));
  }
  .space-hero .hero-eyebrow { margin-bottom: clamp(10px, calc(9dvh - 41px), 23px); }
  .space-hero .hero-intro { margin-top: clamp(11px, calc(6dvh - 23px), 20px); }
  .space-hero .hero-actions { display: none; }
  .space-hero .space-gallery-block { gap: clamp(8px, calc(5dvh - 20px), 15px); }
  .space-hero .space-card img { max-height: max(78px, calc(100dvh - 445px)); }
  .space-hero .space-card .floating-caption {
    min-height: clamp(50px, calc(8dvh + 5px), 64px);
    padding-block: clamp(7px, calc(4dvh - 16px), 12px);
  }
  .space-hero .space-gallery-controls { gap: 6px; }
  .space-hero .space-gallery-controls button { width: 34px; height: 34px; font-size: 16px; }
  .space-hero .space-gallery-controls output { min-width: 48px; }

  .etchenet-pastel-home #echwa-widget.echwa-position-right .echwa-attention {
    right: calc(var(--echwa-button-size) + 8px);
    bottom: 50%;
    translate: 0 50%;
    width: max-content;
    max-width: clamp(70px, calc(100vw - 236px), 135px);
    padding: 5px 8px;
    line-height: 1.25;
    white-space: normal;
  }
}
.project-card--xploravans .project-visual img{object-position:left top}

@media (prefers-reduced-motion: no-preference) {
  .space-hero h1 > span { animation: hero-title-in .8s cubic-bezier(.2,.7,.2,1) both; }
  .space-hero h1 > span + span { animation-delay: .11s; }
  .motion-paused .space-hero h1 > span { animation-duration: 0s; animation-delay: 0s; }
}

@keyframes hero-title-in {
  from { opacity: .12; transform: translateY(.3em); clip-path: inset(0 0 33%); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(-12% -6%); }
}