/* Page d'accueil · « le mur qui danse » */
.home{overflow:hidden}
.home .wrap{max-width:1240px;padding:0 24px}
.u{font-family:Unbounded,Manrope,sans-serif}
.home header.top .wrap{height:68px}
.home .brand{font-family:Unbounded,Manrope,sans-serif;font-size:19px}
.home nav.links{font-size:15px;gap:22px}
.home nav.links a.go{color:#04211d;background:var(--tide);padding:9px 14px;border-radius:12px;font-weight:800}
.home nav.links a.go:hover{background:#5fd6c5;color:#04211d}
.pill{display:inline-block;padding:7px 14px;border-radius:999px;border:1.5px solid var(--amber);color:var(--amber);font:700 13px/18px Manrope,sans-serif}
.btn.big{padding:16px 24px;border-radius:16px;font-size:17px;font-weight:800}
.btn.big.primary{color:#04211d}
/* héros */
.h-hero{padding:56px 0 72px}
.h-hero .wrap{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end}
.h-copy{flex:1 1 480px;display:flex;flex-direction:column;gap:22px;text-align:left}
.h-copy h1{font-family:Unbounded,Manrope,sans-serif;font-weight:900;font-size:clamp(40px,6.4vw,74px);line-height:1.06;letter-spacing:-.02em;margin:0;max-width:none}
.h-copy h1 em{font-style:normal;color:var(--tide)}
.h-copy h1 em+em{color:var(--amber)}
.h-copy .lead{margin:0;text-align:left;font-size:clamp(17px,2vw,20px);line-height:1.55;color:#c9cbd1;max-width:560px}
.h-copy .cta{justify-content:flex-start;margin-top:4px}
.h-copy .small{font-size:14px;color:var(--muted)}
.eq{flex:1 1 520px;position:relative;height:460px;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.eq span.b{width:72px;border-radius:36px;overflow:hidden;flex:none;transform-origin:50% 100%;animation:eq 1.8s ease-in-out infinite;box-shadow:0 0 0 3px var(--c),0 20px 40px rgba(0,0,0,.5)}
.eq span.b img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.74)}}
.stk{position:absolute;padding:12px 16px;border-radius:16px;font:800 15px/1 Manrope,sans-serif;box-shadow:0 14px 30px rgba(0,0,0,.4);white-space:nowrap}
.stk.s1{left:0;top:30px;background:var(--amber);color:#1e1400;transform:rotate(-7deg)}
.stk.s2{right:6px;top:0;background:var(--blue);color:#fff;transform:rotate(6deg)}
.stk.s3{right:36px;bottom:-22px;background:var(--ink);color:#0d0e11;transform:rotate(-4deg)}
/* défilé des styles */
.mq-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden}
.mq{display:flex;gap:14px;width:max-content;animation:mq 34s linear infinite}
.mq span{padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);font:700 17px/1.2 Unbounded,Manrope,sans-serif;color:#c9cbd1;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
.home section{padding:90px 0 40px}
.sec-head{display:flex;flex-direction:column;gap:12px;max-width:780px;margin-bottom:34px}
.sec-head .kick{font:700 13px/1 Manrope,sans-serif;letter-spacing:.14em;color:var(--amber);text-transform:uppercase}
.sec-head h2{font-family:Unbounded,Manrope,sans-serif;font-weight:900;font-size:clamp(30px,4.2vw,48px);line-height:1.12;margin:0}
.sec-head p{margin:0;font-size:18px;line-height:1.55;color:var(--muted)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
/* kit */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.k{background:var(--s1);border:1px solid var(--line);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:12px;min-height:300px;overflow:hidden}
.k.w2{grid-column:span 2}
.k .vis{flex:1;display:flex;align-items:center;justify-content:center;min-height:180px}
.k h3{font:700 21px/1.3 Unbounded,Manrope,sans-serif;margin:0}
.k p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.meter{display:flex;align-items:flex-end;gap:18px}
.meter .v{display:flex;flex-direction:column;align-items:center;gap:6px}
.meter .v b{font:500 44px/1 "JetBrains Mono","SF Mono",Menlo,monospace;color:var(--tide)}
.meter .v.s b{font-size:30px;color:var(--amber)}
.meter .v i{font:700 11px/1 Manrope,sans-serif;font-style:normal;letter-spacing:.12em;color:var(--muted)}
.meter .bars{display:flex;gap:4px;align-items:flex-end}
.meter .bars span{width:10px;border-radius:3px;background:var(--tide)}
.meter .bars span.h{background:var(--amber)}
.covers{position:relative;width:230px;height:220px}
.covers img{position:absolute;border-radius:10px;object-fit:cover}
.covers img:first-child{left:0;top:18px;width:170px;height:170px;transform:rotate(-8deg);filter:grayscale(1);opacity:.55}
.covers img:last-child{right:0;top:0;width:195px;height:195px;transform:rotate(5deg);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.phone{width:140px;height:280px;border-radius:26px;border:6px solid #262a31;overflow:hidden;transform:rotate(-6deg);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.ytp{width:100%;max-width:420px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;position:relative;background:#000}
.ytp .bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(10px) brightness(.4)}
.ytp .cv{position:absolute;left:7%;top:16%;width:38%;border-radius:6px}
.ytp .t{position:absolute;left:52%;top:28%;font:700 clamp(14px,2vw,22px)/1 Unbounded,sans-serif;color:#deb878}
.ytp .sp{position:absolute;left:52%;top:50%;display:flex;gap:3px;align-items:center}
.ytp .sp span{width:3px;border-radius:2px;background:#deb878}
.ytp .badge{position:absolute;left:12px;bottom:10px;padding:5px 10px;border-radius:999px;background:#ff4e45;color:#fff;font:700 11px/1.2 Manrope,sans-serif}
.chat{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.chat span{padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.4;max-width:88%}
.chat .l{align-self:flex-start;background:#262a31;border-bottom-left-radius:4px}
.chat .r{align-self:flex-end;background:#123a35;color:#7fdccd;font-weight:600;border-bottom-right-radius:4px}
.lp{width:170px;padding:16px 12px;border-radius:22px;background:#f4f2ee;color:#15161a;display:flex;flex-direction:column;gap:8px;align-items:center;transform:rotate(4deg);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.lp img{width:70px;height:70px;border-radius:10px}
.lp b{font:700 13px/1.2 Unbounded,sans-serif}
.lp span{width:100%;padding:7px 0;border-radius:9px;background:#15161a;color:#f4f2ee;text-align:center;font:700 11px/1.2 Manrope,sans-serif}
/* identité visuelle */
.ident{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:28px;align-items:center}
.ident .side{display:flex;flex-direction:column;gap:18px}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatches span{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 12px/1 "JetBrains Mono",monospace;color:var(--muted)}
.swatches i{width:52px;height:52px;border-radius:14px;border:1px solid var(--line);display:block}
.looks{display:flex;gap:8px;flex-wrap:wrap}
.looks span{padding:8px 13px;border-radius:999px;border:1px solid #737a86;font:600 13px/1 Manrope,sans-serif}
.looks span.on{border-color:var(--tide);background:#123a35}
.typo{display:flex;flex-direction:column;gap:2px}
.typo div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid #23262d;font-size:13px;color:var(--muted)}
.typo div b{color:var(--ink);font-family:Unbounded,sans-serif;font-size:20px}
.formats{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.fmt{display:flex;flex-direction:column;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.fmt .f{position:relative;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 14px 34px rgba(0,0,0,.5);outline:1px solid var(--line)}
.fmt .f img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.3) saturate(.85)}
.fmt .f .ttl{position:absolute;left:0;right:0;text-align:center;font:700 18px/1 Unbounded,sans-serif;color:#deb878;letter-spacing:.03em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.fmt .f .ttl small{display:block;font:400 8px/1.6 Manrope,sans-serif;letter-spacing:.3em;color:#e1dace}
/* étapes */
.steps3{display:flex;flex-wrap:wrap;gap:40px}
.steps3 div{flex:1 1 260px;display:flex;flex-direction:column;gap:12px}
.steps3 .n{font:900 92px/1 Unbounded,sans-serif;color:transparent;-webkit-text-stroke:2px var(--c)}
.steps3 b{font:700 23px/1.3 Unbounded,sans-serif}
.steps3 p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
/* youtube */
.yt-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.yt-row div{background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:20px;color:var(--muted);line-height:1.55}
.yt-row b{display:block;color:var(--ink);margin-bottom:6px;font-size:17px}
/* tarifs */
.prices{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.p{flex:1 1 230px;padding:26px 22px;border-radius:24px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;position:relative}
.p.hot{background:var(--tide);color:#04211d;border-color:var(--tide);transform:translateY(-12px);box-shadow:0 24px 50px rgba(69,201,182,.22)}
.p .tag{position:absolute;top:-13px;right:18px;padding:5px 12px;border-radius:999px;background:var(--amber);color:#1e1400;font:800 12px/1.2 Manrope,sans-serif;transform:rotate(4deg)}
.p h3{margin:0;font:700 18px/1.2 Unbounded,sans-serif}
.p .amt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.p .amt b{font:900 40px/1 Unbounded,sans-serif;white-space:nowrap}
.p .amt span{font-size:14px;opacity:.8}
.p ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.p li{font-size:14.5px;line-height:1.45;padding-left:24px;position:relative}
.p li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;border-left:2px solid var(--tide);border-bottom:2px solid var(--tide);transform:rotate(-45deg)}
.p.hot li::before{border-color:#04211d}
.p a{text-align:center;padding:13px;border-radius:14px;border:1.5px solid #737a86;color:var(--ink);font-weight:700;text-decoration:none}
.p.hot a{background:#04211d;border-color:#04211d;color:var(--ink)}
.price-note{margin:22px 0 0;color:var(--muted);font-size:14px;text-align:center}
/* appel final */
.final{border-radius:32px;background:var(--amber);color:#1e1400;padding:54px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;position:relative;overflow:hidden}
.final h2{font:900 clamp(30px,4.4vw,50px)/1.1 Unbounded,sans-serif;margin:0}
.final p{margin:10px 0 0;font-size:18px}
.final .grow{flex:1 1 480px}
.final a{position:relative;z-index:1;background:#0d0e11;color:var(--ink);padding:18px 26px;border-radius:18px;font-weight:800;font-size:17px;text-decoration:none}
.final .deco{position:absolute;right:-24px;bottom:-40px;display:flex;gap:12px;align-items:flex-end;opacity:.22}
.final .deco span{width:40px;border-radius:20px;background:#1e1400}
@media (max-width:900px){.bento{grid-template-columns:1fr}.k.w2{grid-column:auto}.ident{grid-template-columns:1fr}.yt-row{grid-template-columns:1fr}.eq{height:360px;gap:10px}.eq span.b{width:52px}.p.hot{transform:none}.final{padding:34px}}
@media (max-width:560px){.meter{gap:10px}.meter .v b{font-size:28px}.meter .v.s b{font-size:20px}.meter .bars span{width:6px}.h-copy .cta .btn{width:100%;justify-content:center}.home nav.links a:not(.go){display:none}.eq span.b{width:38px}.stk{font-size:13px;padding:9px 12px}.eq{height:300px}}
@media (prefers-reduced-motion:reduce){.eq span.b,.mq{animation:none}}