@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{--ink:#171816;--paper:#e7e1d4;--cream:#f4efe5;--rust:#94513d;--signal:#c7db73;--line:rgba(23,24,22,.2);--display:"Space Grotesk",Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;text-rendering:optimizeLegibility}
a{color:inherit}
header{position:absolute;z-index:5;top:18px;left:18px;width:calc(100% - 36px);min-height:74px;padding:16px 4vw;display:flex;align-items:center;justify-content:space-between;color:#fff;border:1px solid rgba(255,255,255,.27);background:rgba(12,13,11,.4);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
header a,header strong{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;text-decoration:none}
header a:hover,header a:focus-visible{text-decoration:underline;text-underline-offset:5px}
.hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;padding:13vh 8vw 9vh;color:#fff;background:linear-gradient(90deg,rgba(7,8,7,.9),rgba(7,8,7,.28)),url('assets/maison-laboratoire.jpg') center/cover no-repeat}
.hero:before{content:"";position:absolute;inset:34px;border:1px solid rgba(255,255,255,.25);pointer-events:none}
.hero-copy{position:relative;z-index:1;max-width:970px;padding-left:28px;border-left:3px solid var(--signal)}
.hero-copy>p,.section-heading>p,.use>p,.type{text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:600}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.045em;line-height:.98}
h1{margin:.2em 0;font-size:clamp(3.3rem,7vw,7.4rem)}
.hero-copy>span{display:block;max-width:680px;font-size:1.05rem;line-height:1.75}
.support-options{padding:110px 7vw;background:var(--cream)}
.section-heading{display:grid;grid-template-columns:180px 1fr 1fr;gap:5vw;align-items:end;margin-bottom:55px}
.section-heading h2{margin:0;font-size:clamp(2.5rem,4.4vw,5.2rem)}
.section-heading>span{line-height:1.75}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.support-grid article{min-height:500px;padding:35px 30px;background:var(--paper);display:flex;flex-direction:column}
.support-grid article.membership{background:#d4ccb9}
.number{color:var(--rust);font:500 .72rem var(--display);letter-spacing:.12em}
.type{margin:42px 0 8px;color:var(--rust)}
.support-grid h2{margin:0 0 24px;font-size:clamp(2rem,3vw,3.4rem)}
.support-grid p:not(.type){line-height:1.75}
.support-grid strong{display:block;margin-top:auto;padding-top:30px;font-family:var(--display);font-size:1.2rem;font-weight:500}
.action{margin-top:18px;padding:16px 18px;text-align:center;background:var(--ink);color:var(--cream);border:1px solid var(--ink);text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;font-weight:600;transition:.2s}
.action:hover,.action:focus-visible{background:var(--signal);color:var(--ink);transform:translateY(-2px)}
.detail-link{margin-top:16px;text-align:center;font-size:.7rem;line-height:1.5;text-transform:uppercase;letter-spacing:.06em;text-underline-offset:4px}
.use{padding:100px 7vw;background:#171512;color:var(--cream);display:grid;grid-template-columns:240px 1fr;gap:7vw}
.use h2{margin:0 0 48px;font-size:clamp(2.5rem,4.8vw,5.5rem);max-width:900px}
.use ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.25)}
.use li{padding:18px 8px;border-bottom:1px solid rgba(255,255,255,.22)}
footer{padding:45px 7vw;background:#0f0e0d;color:#eee8dc;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
footer img{width:84px}footer p{margin:0;text-transform:uppercase;letter-spacing:.1em}footer span,footer a{font-size:.72rem;color:#bfb7aa}footer>a:last-child{grid-column:3}
@media(max-width:850px){header{top:10px;left:10px;width:calc(100% - 20px)}header strong{display:none}.hero{min-height:72svh;padding:120px 7vw 70px}.hero:before{inset:22px}.hero-copy{padding-left:18px}.support-options{padding:80px 6vw}.section-heading,.support-grid,.use{grid-template-columns:1fr}.section-heading{gap:20px}.support-grid article{min-height:430px}.use{padding:80px 6vw}.use ul{grid-template-columns:1fr}footer{grid-template-columns:auto 1fr;padding:40px 6vw}footer>a{grid-column:1/3!important}}
@media(max-width:520px){h1{font-size:3rem}.support-grid article{min-height:0}.support-grid strong{margin-top:30px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}