/* NOMA: typography and spacing tuned for French and small screens. */
:root{--muted:#685c4f}
body{line-height:1.75}h1,h2{text-wrap:balance}p{text-wrap:pretty}
h1{font-size:clamp(62px,5.25vw,98px);line-height:1.02;letter-spacing:-.035em}h1 em{margin-left:0}
.hero-content{width:44%;max-width:680px}.hero-word{opacity:.09;bottom:70px}
.intro{font-size:14px;max-width:330px}.link{font-size:12px;min-height:44px}
nav a{display:flex;align-items:center;min-height:44px}.edition{max-width:250px;text-align:right;font-size:9px}
.section{padding-top:100px;padding-bottom:100px}.product{padding-top:15px}.sole-study{padding-top:0}
.statement p,.product-info>p,.detail-text p,.sole-copy p,.manifesto p{font-size:14px;line-height:1.85}
.product-head{gap:24px}.product-head p{white-space:nowrap}.product-info{gap:40px}
summary{font-size:14px;gap:20px;min-height:30px;align-items:center}summary::after{flex-shrink:0}
.section-label{letter-spacing:.1em}.photo-caption{backdrop-filter:blur(8px);font-size:11px}
.detail-photo{aspect-ratio:4/5}.footer-bottom{font-size:11px}.close{width:44px;height:44px}
dialog{overscroll-behavior:contain}.dialog-inner h2{font-size:clamp(32px,4vw,48px)}
@media(min-width:801px) and (max-width:1100px){.edition{display:none}.hero-content{width:48%}h1{font-size:64px}}
@media(max-width:800px){
 header{padding:12px 5%;gap:14px;background:rgba(240,234,223,.94);border-bottom:1px solid var(--line)}
 .wordmark{font-size:24px;letter-spacing:.12em}nav{gap:14px;font-size:10px;letter-spacing:0}nav a{white-space:nowrap}
 .hero-content{left:7%;top:13%;width:86%;max-width:none}h1{font-size:clamp(38px,11.5vw,64px);line-height:1.03;margin:20px 0 16px}
 .intro{font-size:13px;line-height:1.7}.hero-content .link{margin-top:0;gap:30px}
 html[data-motion="on"] .hero-video,html[data-motion="on"] .hero-image{top:49%;height:33%}
 .hero-bottom{bottom:22px;align-items:center}.scroll-note{max-width:210px;font-size:8px;letter-spacing:.07em}.scroll-note i{flex-shrink:0}
 .hero-counter{flex-direction:column;gap:0;align-items:end}.hero-counter .progress{margin-top:4px}
 .section{padding:64px 7%}.product{padding-top:10px}.sole-study{padding-top:0}
 .statement h2{font-size:clamp(36px,10vw,48px)}.product-head{align-items:start;flex-direction:column;gap:8px}.product-head p{margin:0}
 .product-scene{aspect-ratio:1}.product-info{gap:20px}.details-grid{gap:32px}
 .detail-text h2,.sole-copy h2{font-size:clamp(36px,10.8vw,48px)}.photo-caption{left:16px;bottom:16px;font-size:10px}
 .manifesto h2{font-size:clamp(36px,10.4vw,52px)}.closing{align-items:start;flex-direction:column;gap:24px}.closing h2{font-size:46px}.circle-link{width:96px;height:96px;font-size:11px}
 .footer-bottom{font-size:10px}.dialog-inner{padding:24px}#dialog-image{height:200px}
}
@media(max-width:359px){header{gap:8px}.wordmark{font-size:21px}nav{gap:10px;font-size:9px}.hero-content{top:12%}h1{font-size:37px}.eyebrow{font-size:9px}.intro{font-size:12px}}
@media(max-height:700px) and (max-width:800px){.hero-content{top:12%}h1{font-size:38px;margin:14px 0 10px}.hero-content .intro{margin:8px 0}.hero-content .link{padding-top:6px}html[data-motion="on"] .hero-video,html[data-motion="on"] .hero-image{top:48%;height:34%}}
@media(max-height:500px) and (orientation:landscape){html[data-motion="on"] .stage{min-height:100svh}.hero-content{top:25%;width:44%}h1{font-size:34px}.intro{display:none}html[data-motion="on"] .hero-video,html[data-motion="on"] .hero-image{left:22%;top:15%;width:85%;height:70%;object-fit:contain}.hero-bottom{bottom:12px}.hero-content .link{font-size:10px}.motion-toggle{bottom:55px!important}}

@media(max-width:800px){html[data-motion="on"] .stage{min-height:100svh}html[data-motion="on"] .motion-toggle{bottom:55px}.motion-status{bottom:104px}}
@media(max-width:800px) and (max-height:700px){html[data-motion="on"] .hero-video,html[data-motion="on"] .hero-image{top:50%;height:30%}.hero-bottom{bottom:14px}}

/* Typographie des titres : Anton (alternative libre à Druk Condensed), texte en DM Sans. */
:root{--display:'Anton','Arial Narrow',Impact,sans-serif}
h1,h2,.scene-label span,.hero-word,.manifesto::before,.dialog-inner h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.012em;font-synthesis:none}
h1{font-size:clamp(60px,6.2vw,108px);line-height:.96;margin:30px 0 26px}
h1 em{margin-left:0}
.statement h2{font-size:clamp(44px,4.6vw,78px);line-height:1.02;letter-spacing:.01em}
.product-head h2{font-size:clamp(56px,6.4vw,100px);line-height:.98;letter-spacing:.012em}
.detail-text h2,.sole-copy h2{font-size:clamp(44px,4.2vw,68px);line-height:1;letter-spacing:.012em}
.manifesto h2{font-size:clamp(52px,6.4vw,100px);line-height:1;letter-spacing:.01em}
.closing h2{font-size:clamp(52px,5.8vw,90px);line-height:.98;letter-spacing:.012em}
.hero-word{letter-spacing:.02em;line-height:.9}
.manifesto::before{font-size:560px;letter-spacing:0}
.scene-label span{font-size:34px;letter-spacing:.02em}
.dialog-inner h2{font-size:clamp(34px,4vw,50px);line-height:1}
@media(min-width:801px) and (max-width:1100px){h1{font-size:62px}}
@media(max-width:800px){
 h1{font-size:clamp(42px,12.4vw,70px);line-height:.98}
 .statement h2{font-size:clamp(38px,10.4vw,52px)}
 .product-head h2{font-size:clamp(52px,15vw,70px)}
 .detail-text h2,.sole-copy h2{font-size:clamp(40px,11.2vw,52px)}
 .manifesto h2{font-size:clamp(40px,11vw,56px)}
 .closing h2{font-size:clamp(42px,12vw,54px)}
 .manifesto::before{font-size:380px}
}
@media(max-width:359px){h1{font-size:38px}}
@media(max-height:700px) and (max-width:800px){h1{font-size:40px}}
@media(max-height:500px) and (orientation:landscape){h1{font-size:34px}}