:root{
  --sky:#9ed4ef;--sky-l:#d1eef9;--butter:#fde99b;--mint:#9bd8a9;--peri:#b8caf5;
  --ink:#030302;--ink2:#41413f;--ink3:#5a5958;--ink4:#807e7d;--edge:#e6e3e1;--canvas:#fcf9f7;
  --serif:"Source Serif 4",ui-serif,Georgia,serif;
  --sans:"Inter",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --stack:0 50px 40px rgba(0,0,0,.01),0 50px 40px rgba(0,0,0,.02),0 20px 40px rgba(0,0,0,.05),0 3px 10px rgba(0,0,0,.08);
  --glass:0 12px 12px 2px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font:400 16px/1.4 var(--sans);letter-spacing:-.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
em{font-style:italic}
.wrap-1080{max-width:1080px;margin:0 auto}
.wrap-720{max-width:720px;margin:0 auto}
.center{text-align:center;margin-top:72px}
section{position:relative}

/* grain */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;filter:url(#grain);border-radius:inherit}
.grain--dark{opacity:.5;mix-blend-mode:screen}

/* typographie */
.display{font:400 66px/1 var(--serif);letter-spacing:-.03em}
.h-lg{font:400 54px/1.1 var(--serif);letter-spacing:-.02em}
.h-feature{font:400 36px/1.22 var(--serif);letter-spacing:-.03em}
.h-invite{font:italic 400 56px/1.1 var(--serif);letter-spacing:-.03em}
.h-closing{font:400 36px/40px var(--serif);letter-spacing:-.04em}
.eyebrow{font:500 16px/1.5 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:var(--ink3)}
.support{font:400 18px/1.4 var(--sans);color:var(--ink3)}
.body{color:var(--ink2)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 32px;border-radius:9999px;font:500 16px/1.5 var(--sans);white-space:nowrap;transition:background .25s,transform .25s;will-change:transform}
.btn--glass{color:var(--ink);background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.59) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.84) 75%);box-shadow:var(--glass);backdrop-filter:blur(4px)}
.btn--glass:hover{background:#fff}
.btn--dark{background:var(--ink);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.btn--dark:hover{background:rgba(3,3,2,.75)}
.btn--sm{height:36px;padding:0 14px}
.btn--lg{height:56px;padding:0 40px}
.pill-glass{display:inline-block;padding:6px 16px;border-radius:9999px;background:rgba(255,255,255,.55);box-shadow:var(--glass);font:500 14px/1.5 var(--sans);backdrop-filter:blur(4px)}

/* navigation flottante */
.nav{position:fixed;top:32px;left:50%;transform:translateX(-50%);width:min(920px,calc(100% - 32px));height:52px;border-radius:26px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 24px;background:linear-gradient(rgba(255,255,255,.4) 10%,rgba(255,255,255,.8));backdrop-filter:blur(4px);box-shadow:var(--glass);z-index:50}
.nav__brand{font:400 24px/1 var(--serif);letter-spacing:-.03em}
.nav__brand span{color:#4f9fcb}
.nav__links{display:flex;gap:28px}
.nav__links a{opacity:.8}.nav__links a:hover{opacity:1}

/* scènes */
.stage{position:relative;overflow:hidden;border-radius:32px;box-shadow:var(--stack)}
.hero{padding:20px 20px 0}
.sky{max-width:1400px;height:828px;margin:0 auto;border-radius:24px;background:linear-gradient(in oklab,var(--sky) 0,var(--sky-l) 100%)}
.hero__text{position:relative;z-index:5;max-width:800px;margin:0 auto;padding-top:130px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.hero__actions{display:flex;gap:12px;margin-top:12px}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.word>span{display:inline-block}

/* nuages demi-teinte */
.cloud{position:absolute;width:420px;height:130px;border-radius:999px;opacity:.9;
  background:radial-gradient(circle,#fff 1.6px,transparent 2px) 0 0/7px 7px;
  -webkit-mask:radial-gradient(ellipse at center,#000 20%,transparent 70%);mask:radial-gradient(ellipse at center,#000 20%,transparent 70%)}
.cloud--1{left:3%;top:150px}.cloud--2{right:2%;top:290px;width:520px}.cloud--3{left:36%;top:60px;width:300px;opacity:.6}

/* collage papier déchiré */
.collage{position:absolute;left:0;right:0;bottom:0;height:420px;z-index:2}
.torn{position:absolute;left:0;width:100%;bottom:0;height:300px;filter:drop-shadow(0 -6px 10px rgba(0,0,0,.08))}
.torn--back{bottom:50px;height:310px}
.sheet{position:absolute;background:#fff;border:1px solid var(--edge);border-radius:20px;box-shadow:var(--stack);padding:22px 24px}
.sheet__eyebrow{font:500 12px/1.5 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:var(--ink4)}
.sheet__title{font:400 24px/1.2 var(--serif);letter-spacing:-.02em;margin:6px 0 12px}
.sheet__list{list-style:none;color:var(--ink2);font-size:14px;display:grid;gap:6px;margin-bottom:16px}
.sheet__list b{font-weight:500;color:var(--ink)}
.sheet__big{font:400 70px/1 var(--serif);letter-spacing:-.03em;margin:8px 0}
.sheet__small{font-size:14px;color:var(--ink3)}
.chip{display:inline-block;padding:6px 14px;border-radius:9999px;background:var(--ink);color:#fff;font:500 13px/1.5 var(--sans)}
.sheet__bar{display:flex;gap:6px;margin-bottom:14px}.sheet__bar i{width:9px;height:9px;border-radius:50%;background:#e4e4e7}
.sheet--a{left:calc(50% - 420px);bottom:30px;width:430px;transform:rotate(-3deg)}
.sheet--b{left:calc(50% + 70px);bottom:-10px;width:320px;transform:rotate(2.5deg);background:#fffdf3}

/* sections */
.statement{padding:140px 24px 60px;text-align:center}
.statement__text{font:400 46px/1.22 var(--serif);letter-spacing:-.03em}
.statement__text em{font-style:italic}
.features{display:grid;gap:24px;padding:60px 0 0}
.feature{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;padding:48px;min-height:440px;align-items:center}
.feature.reverse .feature__text{order:2}
.feature__text{position:relative;z-index:2;display:grid;gap:16px;justify-items:start}
.feature__media{position:relative;display:grid;gap:14px;justify-items:center}
.periwinkle{background:var(--peri)}.mint{background:var(--mint)}.butter{background:var(--butter)}
.sheet--mini,.sheet--steps,.sheet--lined{position:relative;width:min(100%,340px)}
.sheet--mini:nth-child(2){margin-left:60px}
.steps{list-style:none;display:grid;gap:12px;margin-top:10px}
.steps li{display:flex;gap:12px;align-items:center;font-size:15px}
.steps span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font-weight:500}
.lines{display:grid;gap:14px;margin:14px 0 18px}.lines i{height:1px;background:#d9d3c0}
.sheet--lined{background:#fffdf3}

.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:120px 0 0;text-align:center}
.num{display:block;font:400 54px/1.1 var(--serif);letter-spacing:-.02em}
.proof p{color:var(--ink3);margin-top:8px}

.catalogue{padding:120px 24px 0}
.intro{text-align:center;max-width:720px;margin:0 auto 60px;display:grid;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{position:relative;background:#fff;border:1px solid var(--edge);border-radius:24px;padding:12px 12px 20px;box-shadow:var(--stack);display:grid;gap:8px}
.card h3{font:400 28px/1.2 var(--serif);letter-spacing:-.02em;padding:0 8px}
.card .eyebrow{padding:8px 8px 0;font-size:13px}
.card__media{height:170px;border-radius:14px}
.tint-1{background:var(--peri)}.tint-2{background:var(--mint)}.tint-3{background:var(--butter)}
.arrow{position:absolute;right:20px;bottom:18px;color:var(--ink4);transition:transform .3s}
.card:hover .arrow{transform:translateX(6px)}

.quote{display:flex;gap:40px;align-items:flex-start;padding:140px 48px 0}
.quote blockquote{flex:2;font:italic 400 32px/1.5 var(--serif);letter-spacing:-.04em}
.quote__who{flex:1;display:grid;gap:10px;justify-items:start}
.avatar{width:54px;height:54px;border-radius:50%;background:var(--peri);display:grid;place-items:center;font:400 24px/1 var(--serif)}
.quote__who hr{width:100%;border:0;border-top:1px solid var(--edge)}

.band{padding:120px 24px 0}
.band__stage{padding:96px 48px;text-align:center;display:grid;gap:24px;justify-items:center}
.band__stage>*{position:relative}
.band__stage .h-closing{max-width:640px;color:var(--ink2)}

.footer{position:relative;background:var(--ink);color:#fff;border-radius:24px;margin:96px 16px 16px;overflow:hidden;padding:64px 24px 24px}
.footer__grid{position:relative;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:40px}
.footer h4{font:500 14px/1.5 var(--sans);letter-spacing:.01em;text-transform:uppercase;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.15)}
.footer a,.footer p{display:block;font-size:14px;line-height:21px;color:rgba(255,255,255,.8);margin-bottom:6px}
.footer a:hover{color:#fff}
.footer__bottom{position:relative;max-width:1160px;margin:56px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:14px;color:rgba(255,255,255,.6)}

@media(max-width:900px){
  .display{font-size:42px}.h-lg{font-size:38px}.h-invite{font-size:38px}.h-closing{font-size:26px;line-height:1.2}
  .nav__links{display:none}.sky{height:760px}.hero__text{padding:120px 20px 0}
  .sheet--a{left:16px;width:80%}.sheet--b{left:auto;right:12px;width:60%}
  .feature{grid-template-columns:1fr;padding:28px}.feature.reverse .feature__text{order:0}
  .grid-3,.proof{grid-template-columns:1fr}.statement__text{font-size:32px}
  .quote{flex-direction:column;padding:100px 24px 0}.footer__grid{grid-template-columns:1fr 1fr}
}