/* Direction portfolio : typographie centrée, fond blanc, créations en premier. */
:root{--cream:#fff;--ink:#191919;--body:#626262;--muted:#717171;--line:#e9e9e9;--orange:#202020;--orange-2:#535353}
body,.panel{background:#fff}
.nav{background:rgba(255,255,255,.96)}
.nav-in{max-width:1320px}.nav-links a{font-size:13px}
.btn{background:#202020;color:#fff;border-radius:10px;font-size:14px;box-shadow:0 4px 9px #0000000c}
.btn:hover{background:#383838}
.btn-ghost{background:#fff;color:#242424;border:1px solid #e3e3e3;box-shadow:none}
.btn-ghost:hover{background:#f5f5f5}
.hero{padding-top:74px}
.hero-grid{display:flex;flex-direction:column;gap:54px}
.hero-grid>div:first-child{width:100%;text-align:center;max-width:820px}
.chip{border:1px solid #e5e5e5;border-radius:30px;padding:7px 13px;font-size:10px;letter-spacing:.06em;margin-bottom:25px;color:#626262}
.hero h1{font-size:clamp(36px,4.5vw,60px);font-weight:500;letter-spacing:-.055em;line-height:1.08}
.hero h1 .or{color:#191919;font-weight:600}
.hero-sub{margin:22px auto 0;max-width:570px;font-size:15px;line-height:1.7}
.hero-cta{justify-content:center;margin-top:26px}
.hero-media{width:100%;max-width:920px}
.hero-videos{display:flex;align-items:center;justify-content:center;gap:0;padding:18px 0 25px;isolation:isolate}
.hv{width:220px;flex:none;border-radius:16px;background:#eee;overflow:hidden;box-shadow:0 8px 25px #00000012}
.hv:first-child{transform:translateX(22px) rotate(-5deg);z-index:1}
.hv:last-child{transform:translateX(-22px) rotate(5deg);z-index:1}
.hv:nth-child(2){width:264px;z-index:2;border:5px solid #202020;box-shadow:0 18px 35px #00000028}
.hv video{border-radius:0;box-shadow:none}
.hv figcaption{position:absolute;bottom:10px;background:#17171799;color:white;border-radius:7px;font-size:10px}
.hero-media-note{font-size:12px;margin-top:12px}
.feats{margin-top:64px;border:0;background:#f7f7f7;border-radius:12px}
.feat{border-color:#e7e7e7}.feat b{font-size:13px}.feat span{font-size:12px}
.work{background:#f7f7f7;color:#252525;padding:90px 0}
.work>.wrap>.eyebrow,.work>.wrap>h2,.work .demo-intro{text-align:center}
.work h2,.work h3,.work h4,.video-group-heading h3,.demo-grid-five .demo h4,.travel-demo h3{color:#202020}
.work .eyebrow-d{color:#747474}
.work .demo-intro{margin:22px auto 32px}
.work .demo-intro,.work .demo p,.work .video-group-heading p,.work .travel-demo p,.work-note{color:#686868}
.gallery-links{justify-content:center;margin-bottom:50px}
.gallery-links a{background:white;color:#333;border:1px solid #e3e3e3;border-radius:30px;font-size:13px}
.gallery-links a:hover{background:#222;color:white}
.video-group-heading h3{font-size:clamp(23px,2.4vw,29px);font-weight:500}
.video-group + .video-group,.travel-demo,.posts-gallery{border-color:#dedede}
.demo-label{color:#666;border-color:#ddd;background:white}
.post-slot{background:#fff;border-color:#ddd;color:#888}.post-slot span{color:#aaa}
.formats-new{background:#fff}.method{background:#fafafa}
.method h2,.sec-head h2,.formats-new h2{font-weight:500;letter-spacing:-.04em}
.angle{background:transparent}.problem strong{color:#202020}
.price-card{border:1px solid #e6e6e6}.price-card.featured{border-color:#999;background:#fafafa}
.price-num{font-weight:500}.price-card .btn{background:#222;color:white}.price-card .btn-ghost{background:white;color:#222}
.about{background:#fafafa}.about-card{border:0}.final{padding-top:50px}.foot{background:#fafafa}
@media(max-width:700px){.hero{padding-top:45px}.hero-grid{gap:30px}.hero-media{max-width:100%}.hv{width:27%;border-radius:10px}.hv:nth-child(2){width:36%;border-width:3px}.hv:first-child{transform:translateX(10px) rotate(-5deg)}.hv:last-child{transform:translateX(-10px) rotate(5deg)}.hv figcaption{left:4px;right:4px;bottom:4px;font-size:8px;padding:4px 2px}.hero-sub{font-size:14px}.feats{margin-top:35px}.hero-media-note{font-size:11px}.gallery-links{gap:7px}.gallery-links a{font-size:11px;padding:9px 12px}.work{padding:60px 0}}