/* Reflow content at each screen size without hiding it beyond the viewport. */
:root{--nav-height:84px}
body{overflow-x:visible}
section,header[id]{scroll-margin-top:calc(var(--nav-height) + 20px)}
.wrap,.hero-in,.nav-in,.foot{min-width:0}
.sec-head>*,.tb>*,.spec-row>*,.cap-grid>*,.why-grid>*,.maisons>*,.comelit>*,.rfq-grid>*,.foot>*,.legal .wrap>*{min-width:0}
.eyebrow{line-height:1.5;overflow-wrap:anywhere}
.eyebrow::before{flex:0 0 34px}
.btn{max-width:100%;white-space:normal;text-align:center;justify-content:center;line-height:1.5}
.btn>span{min-width:0;overflow-wrap:anywhere}
.btn .arr{flex-shrink:0}
.link-line,.mk span,.direct a,.composer .alt,.legal .wrap{overflow-wrap:anywhere}
.sec-head{grid-template-columns:minmax(0,1fr) minmax(0,.55fr)}
.sec-head .side{max-width:34ch;justify-self:end;line-height:1.6}
.tb{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.tb>div{overflow-wrap:anywhere}
.tb .tl{line-height:1.6}
.brand,.lang,.burger{flex-shrink:0}
.nav-links a{display:block}
.lang button{min-height:44px;min-width:44px;justify-content:center}
.burger{flex:0 0 44px}
.real-grid,.prods{grid-template-columns:repeat(4,minmax(0,1fr))}
.why-grid,.maisons{grid-template-columns:repeat(3,minmax(0,1fr))}
.real .rc{flex-wrap:wrap}
.real .rc span{white-space:normal}
.real img,.prod img,.prod .pim img.cover{object-fit:contain;object-position:center}
.real:hover img,.prod:hover img,.reel:hover video{transform:none}
.reel-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.reel{min-width:0;aspect-ratio:auto;display:flex;flex-direction:column}
.reel video{height:auto;aspect-ratio:9/16;object-fit:contain}
.reel .cap2{position:static;padding:16px;background:var(--noir-2);flex:1;overflow-wrap:anywhere}
.reel-ctl{flex-wrap:wrap}
.spec-row .v{overflow-wrap:anywhere}
.spec-row .v>b{font-weight:500}
.fld input,.fld textarea{min-width:0;max-width:100%;font-size:16px}
.chips button{min-height:44px}
.composer .btn{white-space:normal}
.wa{right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom))}
.legal .wrap{padding-right:calc(var(--pad) + 68px)}

@media(max-width:1200px){
  .nav-in{gap:18px}
  .nav-links{gap:16px}
  .nav-links a{letter-spacing:.14em}
  #nav .btn{padding-inline:16px}
  .comelit{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .comelit .actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
}
@media(max-width:1120px){
  .nav-links{top:var(--nav-height);max-height:calc(100vh - var(--nav-height));max-height:calc(100dvh - var(--nav-height));overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(24px,env(safe-area-inset-bottom));gap:0}
  .nav-links a{min-height:48px;padding:15px 0;line-height:1.5}
  .lang{margin-left:auto}
  .burger{margin-left:0}
}
@media(max-width:1024px){
  .sec-head{grid-template-columns:minmax(0,1fr);gap:22px}
  .sec-head .side{display:block;max-width:60ch;justify-self:start}
  .tb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb>div:nth-child(3),.tb>div:nth-child(4){display:block}
  .tb>div{margin:0;padding:18px 20px;border-bottom:1px solid var(--hair)}
  .tb>div:nth-child(odd){padding-left:0}
  .tb>div:nth-child(even){border-right:0}
  .tb>div:last-child{display:none}
  .spec-row{grid-template-columns:170px minmax(0,1fr);gap:22px}
  .spec-row .n{display:none}
  .cap-grid,.rfq-grid{grid-template-columns:minmax(0,1fr)}
  .real-grid,.prods,.maisons,.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .maisons> :last-child,.why-grid> :last-child{grid-column:1/-1}
  .reel-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .reel{width:auto;flex:none}
  .reel-ctl .rc-prev,.reel-ctl .rc-next{display:none}
  .comelit{grid-template-columns:minmax(0,1fr)}
  .comelit .actions{grid-column:auto}
}
/* Readable fallback when motion is reduced or the animation cannot load. */
.no-anim .stage{display:block;overflow:visible;contain:none;padding:24px var(--pad) 0}
.no-anim .stage-wrap{height:auto}
.no-anim #pcb{width:100%;height:auto;aspect-ratio:1320/520;max-width:1360px;margin-inline:auto}
.no-anim .stage-tag{position:static;margin:20px auto;max-width:var(--maxw);line-height:1.6}
.no-anim .cap{position:static;width:100%;max-width:var(--maxw);margin:auto;padding:24px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.no-anim .cap .c{position:static;opacity:1;visibility:visible;transform:none;height:auto;min-width:0}
.no-anim .cap .c p{font-size:15px}
.no-anim .rail,.no-anim .stage-vig{display:none}
@media(max-width:1024px),(max-height:600px){
  .rv,.hl>span{opacity:1;transform:none;transition:none}
}
@media(max-width:600px){
  :root{--pad:clamp(16px,5vw,28px);--sp:clamp(64px,16vw,96px);--nav-height:72px}
  .nav-in{height:var(--nav-height);gap:12px}
  .hero-in{padding-top:calc(var(--nav-height) + 40px);padding-bottom:40px}
  .hero-in .eyebrow{margin-bottom:26px}
  .h-display{font-size:clamp(34px,9.5vw,48px)}
  .h-section{font-size:clamp(30px,8.5vw,42px)}
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .btn{padding:17px 20px;letter-spacing:.15em}
  .sec-head{margin-bottom:36px}
  .tb>div{padding:16px 12px}
  .tb .tl{letter-spacing:.15em}
  .spec-row{grid-template-columns:minmax(0,1fr);gap:10px;padding-block:24px}
  .spec-row .v{font-size:23px}
  .spec-row .v small{font-size:15px;line-height:1.65}
  .no-anim .cap{grid-template-columns:minmax(0,1fr)}
  .no-anim .cap .c{padding:22px}
  .real-grid,.prods,.why-grid,.maisons,.foot{grid-template-columns:minmax(0,1fr)}
  .reel-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.8vw,10px)}
  .reel{max-width:none;width:100%;justify-self:stretch}
  .reel .rec{top:4px;left:4px;padding:3px 4px;gap:3px;font-size:6px;letter-spacing:.08em}
  .reel .rec i{width:4px;height:4px;flex-shrink:0}
  .reel .cap2{padding:8px 5px;font-size:9px;line-height:1.45;letter-spacing:0}
  .reel .cap2 b{font-size:8px;line-height:1.45;letter-spacing:.04em;margin-bottom:5px}
  .maisons> :last-child,.why-grid> :last-child{grid-column:auto}
  .comelit .actions{width:100%;flex-direction:column}
  .comelit .actions .btn{width:100%}
  .composer{padding:24px 18px}
  .direct a,.direct div{grid-template-columns:minmax(0,1fr);gap:5px}
  .wa{width:46px;height:46px;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .nav-in{gap:8px}
  .brand{gap:7px}
  .brand img{max-height:26px}
  .brand .bt span{letter-spacing:.18em}
  .lang button{padding:8px;min-width:40px}
  .eyebrow{font-size:10px;letter-spacing:.2em;gap:10px}
  .eyebrow::before{flex-basis:22px}
}