/* ==========================================================================
   Hero · Ticker · Philosophie · Créations · Lab
   ========================================================================== */

/* ---------- HERO : la brèche ---------- */
.hero{--x:50%;--y:46%;--r:150vmax;--hs:clamp(3.6rem,min(11.8vw,21vh),12.5rem);--hsa:var(--hs);position:relative;height:100svh;min-height:660px;overflow:hidden;background:#e4e3df}
.hero__stage{position:absolute;inset:0}
.layer{position:absolute;inset:0;padding:calc(6rem + var(--bar-h)) var(--gutter) 11.5rem;display:flex;flex-direction:column;justify-content:center}
.layer .fig{position:absolute;left:var(--gutter);top:calc(5.6rem + var(--bar-h));font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.layer--a{background:#e4e3df;color:#b4b3ae;font-family:Arial,Helvetica,sans-serif}
.layer--a .fig{color:#9a9994}
.hl{font-size:var(--hs);line-height:.9;letter-spacing:-.05em;font-weight:700}
.strike{text-decoration:line-through;text-decoration-color:var(--sig);text-decoration-thickness:.07em}
.crea__note{margin-top:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-d);opacity:.8}
.hl--a{font-size:var(--hsa);font-weight:400;letter-spacing:-.03em;color:#bdbcb7}
.layer--b{background:radial-gradient(55% 70% at 72% 45%,rgba(255,77,31,.2),transparent 70%),linear-gradient(rgba(239,236,228,.05) 1px,transparent 1px) 0 0/100% 7rem,linear-gradient(90deg,rgba(239,236,228,.05) 1px,transparent 1px) 0 0/7rem 100%,var(--ink);color:var(--bone);clip-path:circle(var(--r) at var(--x) var(--y))}
.hl--b{position:relative;z-index:2;font-size:calc(var(--hs)*1.3);line-height:.86}
.layer--b .fig{color:var(--sig)}
.hl--b em{color:var(--sig);font-weight:400;letter-spacing:-.04em;padding-right:.08em}
.hl--b .ln{padding-bottom:.12em;margin-bottom:-.12em}
.lens{position:absolute;left:var(--x);top:var(--y);width:calc(var(--r)*2);height:calc(var(--r)*2);translate:-50% -50%;border:1px solid rgba(255,77,31,.65);border-radius:50%;pointer-events:none;z-index:3;display:none}
.hero.has-lens .lens{display:block}

.fk{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;width:min(27vw,380px);display:grid;gap:.9rem}
.fk-card{background:#d7d6d1;border-radius:6px;padding:1.2rem;display:grid;gap:.6rem}
.fk-card i{width:2.2rem;height:2.2rem;border-radius:50%;background:#c4c3be}
.fk-card b{height:.55rem;border-radius:3px;background:#c4c3be}.fk-card b.s{width:55%}
.fk-btn{justify-self:start;background:#c4c3be;color:#e9e8e4;padding:.7rem 1.2rem;border-radius:4px;font-size:.85rem}
.orbit{position:absolute;right:calc(var(--gutter) + 2vw);top:50%;translate:0 -50%;width:min(27vw,400px);aspect-ratio:1;display:grid;place-items:center}
.orbit__disc{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ff8a5c,var(--sig) 45%,#b82a05);animation:float 7s ease-in-out infinite}
.orbit__ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(239,236,228,.4);animation:spin 40s linear infinite}
.orbit__ring--2{inset:-9%;border-style:solid;border-color:rgba(239,236,228,.12);animation-duration:70s;animation-direction:reverse}
.orbit__tag{position:absolute;right:-4%;bottom:6%;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:var(--bone);color:var(--ink);padding:.5rem .8rem;border-radius:99px;font-weight:600}
@keyframes spin{to{rotate:360deg}}
@keyframes float{50%{transform:translateY(-4%) scale(1.03)}}

.hero__fg{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 var(--gutter) clamp(1.4rem,3.4vh,2.6rem);display:grid;grid-template-columns:1fr auto;gap:1.2rem 2rem;align-items:end;pointer-events:none}
.hero__fg>*{pointer-events:auto}
.hero__lede{max-width:38ch;font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.35;font-weight:500;color:var(--ink);background:var(--bone);padding:1rem 1.3rem;border-radius:1.2rem;box-shadow:0 12px 40px -18px rgba(13,13,11,.35)}
.hero__kw{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sig-d);font-weight:600;margin-bottom:.45rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
.hero__ghost{background:var(--bone);color:var(--ink);border-color:var(--ink)}
.hero__hint{grid-column:1/-1;justify-self:start;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--bone);padding:.5rem .9rem;border-radius:99px}
.hint-t{display:none}

/* ---------- TICKER ---------- */
.ticker{background:var(--sig);color:var(--ink);overflow:hidden;padding:clamp(.7rem,1.6vw,1.2rem) 0;transform:rotate(-1.6deg);margin:-1.2rem -2vw 0;position:relative;z-index:6}
.ticker__track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker__row{display:flex;align-items:center;gap:clamp(1.2rem,2.5vw,2.4rem);padding-right:clamp(1.2rem,2.5vw,2.4rem);font-size:clamp(2.2rem,6vw,5.6rem);font-weight:650;letter-spacing:-.045em;line-height:1.1;white-space:nowrap}
.ticker s{text-decoration-thickness:.07em;opacity:.5}
.ticker b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em}
.ticker i{font-style:normal;font-size:.5em}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- PHILOSOPHIE ---------- */
.nous{background:var(--bone);padding-top:clamp(7rem,14vw,13rem)}
.nous__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.nous__side{position:sticky;top:6.5rem;display:grid;gap:2.5rem}
.dial{position:relative;width:min(100%,210px);aspect-ratio:1}
.dial svg{width:100%;height:100%;overflow:visible}
.dial line{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;opacity:.16;transition:opacity .3s,stroke .3s}
.dial line.on{opacity:1;stroke:var(--sig)}
.dial__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.dial__c b{font-size:3.6rem;font-weight:700;letter-spacing:-.06em}
.dial__c span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.4rem;color:var(--mute)}
.manifest{font-size:clamp(2rem,4.7vw,4.7rem);font-weight:620;line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.manifest .w{display:inline-block;margin-right:.24em;white-space:nowrap}
html.anim .manifest .w{opacity:.13}
.nous__sub{max-width:54ch;margin-top:3rem;font-size:1.2rem;color:var(--mute)}
.nous__sub strong{color:var(--ink);font-weight:600}
.nous__sub--end{margin-top:clamp(2.5rem,5vw,4rem);font-size:clamp(1.15rem,1.7vw,1.5rem);max-width:60ch;line-height:1.5}
.roles{margin-top:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line)}
.role{position:relative;display:grid;grid-template-columns:3rem 1.3fr 1fr;gap:1.5rem;align-items:baseline;padding:1.9rem 1.1rem;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate;transition:color .4s}
.role::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.role:hover::before{transform:scaleY(1)}
.role:hover{color:var(--bone)}
.role__n{font-family:var(--mono);font-size:.78rem;color:var(--mute);transition:color .3s}
.role:hover .role__n{color:var(--sig)}
.role__t{font-size:clamp(1.7rem,3.3vw,3.1rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.role__d{color:var(--mute);transition:color .3s;max-width:36ch}
.role:hover .role__d{color:var(--mute-d)}

.duo{margin-top:clamp(4rem,8vw,7rem);padding:clamp(1.6rem,3vw,2.6rem);border-radius:1.8rem;background:var(--ink);color:var(--bone);display:grid;gap:1.3rem}
.duo__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
.duo__t{font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:640;letter-spacing:-.045em;line-height:1;max-width:18ch}
.duo__t em{color:var(--sig)}
.duo__cards{display:grid;grid-template-columns:minmax(0,30rem);gap:1rem;margin-top:.6rem}
.duo__c{display:grid;grid-template-columns:auto 1fr;gap:.1rem 1rem;align-items:center;padding:1rem 1.2rem;border:1px solid var(--line-d);border-radius:1.2rem}
.duo__m{grid-row:span 2;display:grid;place-items:center;width:3.6rem;aspect-ratio:1;border-radius:50%;background:var(--sig);color:var(--ink);font-weight:700;letter-spacing:-.03em}
.duo__c b{font-size:1.2rem;letter-spacing:-.03em;font-weight:620}.duo__c small{color:var(--mute-d)}
.duo__p{color:var(--mute-d);max-width:52ch}
@media (max-width:700px){.duo__cards{grid-template-columns:1fr}}

/* ---------- CRÉATIONS ---------- */
.creations{overflow:hidden}
.creations__title{margin-top:1.4rem}
.crea{display:grid;grid-template-columns:minmax(260px,.85fr) 2.2fr;gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.5rem,6vw,5rem);align-items:start}
.crea__list{display:flex;flex-direction:column}
.crea__item{display:flex;align-items:baseline;gap:1rem;width:100%;text-align:left;padding:.95rem 0;border-bottom:1px solid var(--line-d);font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:550;letter-spacing:-.03em;color:var(--mute-d);transition:color .3s,padding .5s var(--ease-out)}
.crea__item small{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--mute-d);transition:color .3s}
.crea__item:hover,.crea__item[aria-selected="true"]{color:var(--bone)}
.crea__item[aria-selected="true"]{padding-left:1rem}
.crea__item[aria-selected="true"] small{color:var(--sig)}
.crea__view{position:sticky;top:5.5rem;perspective:1400px}
.browser{container-type:inline-size;background:var(--ink-2);border:1px solid var(--line-d);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);will-change:transform}
.browser__bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;background:var(--ink-3)}
.browser__bar i{width:.65rem;height:.65rem;border-radius:50%;background:#3b3a35}
.browser__url{margin-left:.8rem;flex:1;max-width:22rem;font-family:var(--mono);font-size:.68rem;color:var(--mute-d);background:var(--ink);padding:.3rem .8rem;border-radius:99px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__view{position:relative;aspect-ratio:16/10;overflow:hidden}
.crea__desc{margin-top:1.4rem;display:grid;grid-template-columns:1fr 1.3fr;gap:1.5rem;min-height:5.5rem}
.crea__for{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sig)}
.crea__what{color:var(--mute-d)}

/* ---------- LAB ---------- */
.lab{background:var(--bone)}
.lab__head{display:grid;gap:1.4rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.lab__head .lede{margin-top:.6rem}
.lab__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.4vw,1.2rem)}
.tile{position:relative;grid-column:span 4;min-height:22rem;padding:1.5rem;border-radius:1.6rem;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:1rem;overflow:hidden}
.tile__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.tile__d{font-size:.95rem;opacity:.75;max-width:30ch}
.tile--tilt,.tile--goo{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.tile--text{background:var(--sig);border-color:var(--sig)}
.tile--compare{grid-column:span 7}
.tile--goo{grid-column:span 5}
.tile--count{grid-column:span 12;min-height:0;padding-block:2rem}
.tile--magnet{place-items:center}
.magnet{align-self:center;position:relative;width:9.5rem;height:9.5rem;border-radius:50%;background:var(--ink);color:var(--bone);font-weight:600;display:grid;place-items:center;transition:background .4s}
.magnet:hover{background:var(--sig);color:var(--ink)}
.magnet span{display:block;pointer-events:none}
.tilt{align-self:center;perspective:700px;padding:.5rem}
.tilt__card{position:relative;width:11rem;height:14rem;border-radius:1.2rem;background:linear-gradient(145deg,var(--sig),#ffa24d);color:var(--ink);padding:1.1rem;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;overflow:hidden;box-shadow:0 30px 50px -20px rgba(255,77,31,.5)}
.tilt__card b{font-size:4rem;letter-spacing:-.06em;line-height:1;transform:translateZ(40px)}
.tilt__card span{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;transform:translateZ(24px)}
.tilt__glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light;pointer-events:none}
.scramble{font-size:clamp(2.4rem,4.4vw,4rem);font-weight:700;letter-spacing:-.05em;line-height:1;min-height:1.1em;word-break:break-word}
.scramble__w{font-variant-ligatures:none}
.tile__btn{align-self:flex-start;font-weight:600;border-bottom:2px solid currentColor;padding-bottom:.1rem}
.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.counts dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);order:2}
.counts div{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:1.2rem}
.counts dd{font-size:clamp(2.8rem,6vw,5.6rem);font-weight:650;letter-spacing:-.06em;line-height:1}
.counts dd b{font-weight:inherit}
.compare{position:relative;flex:1;min-height:17rem;border-radius:1rem;overflow:hidden;background:#e9e8e4;touch-action:pan-y}
.compare__a,.compare__b{position:absolute;inset:0;padding:1.4rem 1.6rem}
.compare__a{font-family:Arial,Helvetica,sans-serif;color:#9a9994;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.compare__a h4{font-size:1.5rem;font-weight:400;color:#8d8c87}
.compare__a p{font-size:.9rem}
.cmp-g{display:flex;gap:.5rem}.cmp-g b{width:3.2rem;height:.6rem;background:#cfcec9;border-radius:3px}
.cmp-gb{background:#c9c8c3;color:#e9e8e4;padding:.55rem 1rem;border-radius:3px;font-size:.8rem}
.compare__b{background:var(--ink);color:var(--bone);clip-path:inset(0 0 0 var(--p));display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem}
.compare__b small{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sig)}
.compare__b h4{font-size:clamp(2rem,4.4vw,3.6rem);line-height:.95;letter-spacing:-.05em;font-weight:700;max-width:8ch}
.compare__b em{color:var(--sig)}
.cmp-disc{position:absolute;right:8%;top:12%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff8a5c,var(--sig) 50%,#b82a05)}
.cmp-bb{align-self:flex-start;background:var(--sig);color:var(--ink);padding:.7rem 1.2rem;border-radius:99px;font-weight:600;font-size:.9rem}
.compare__bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--sig);pointer-events:none}
.compare__bar span{position:absolute;top:50%;left:50%;width:2.6rem;height:2.6rem;translate:-50% -50%;border-radius:50%;background:var(--sig);display:grid;place-items:center}
.compare__bar span::before{content:"◂ ▸";font-size:.7rem;letter-spacing:.1em;color:var(--ink);font-weight:700}
.compare__r{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:focus-within{outline:2px solid var(--sig);outline-offset:3px}
.goo{position:relative;flex:1;min-height:13rem;filter:url(#goo)}
.goo i{position:absolute;left:0;top:0;border-radius:50%;background:var(--sig);will-change:transform}
.goo i:nth-child(1){width:6.5rem;height:6.5rem}
.goo i:nth-child(2){width:4.6rem;height:4.6rem;background:var(--bone)}
.goo i:nth-child(3){width:3.4rem;height:3.4rem}
.goo i:nth-child(4){width:2.2rem;height:2.2rem;background:var(--bone)}
.lab__foot{margin-top:2.2rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);max-width:60ch}

/* ---------- Responsive A ---------- */
@media (max-width:960px){
  .crea{grid-template-columns:1fr}
  .crea__list{flex-direction:row;overflow-x:auto;gap:.5rem;scroll-snap-type:x proximity;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scrollbar-width:none}
  .crea__list::-webkit-scrollbar{display:none}
  .crea__item{width:auto;flex:none;border:1px solid var(--line-d);border-radius:99px;padding:.65rem 1.1rem;font-size:1rem;scroll-snap-align:start}
  .crea__item small{display:none}
  .crea__item[aria-selected="true"]{padding-left:1.1rem;background:var(--sig);color:var(--ink);border-color:var(--sig)}
  .crea__view{position:static}
  .crea__desc{grid-template-columns:1fr;gap:.4rem}
  .tile,.tile--compare,.tile--goo{grid-column:span 6}
  .tile--compare{grid-column:span 12}
  .counts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hero{--hs:clamp(3.8rem,min(22vw,15vh),9rem);--hsa:calc(var(--hs)*.66)}
  .layer{padding-bottom:13.5rem;justify-content:flex-start;padding-top:calc(5.6rem + 6vh + var(--bar-h))}
  .layer .fig{top:calc(5rem + var(--bar-h))}
  .hl--b{font-size:calc(var(--hs)*.95)}
  .fk{display:none}
  .orbit{width:60vw;right:-14vw;top:auto;bottom:9rem;translate:0 0;opacity:.95}
  .hero__fg{grid-template-columns:1fr;gap:.8rem}
  .hero__lede{padding:.8rem 1rem;font-size:.98rem}
  .layer .fig{right:var(--gutter);font-size:.62rem}
  .hero__cta{justify-content:flex-start}
  .hero__hint{padding-top:.7rem}
  .hint-d{display:none}.hint-t{display:inline}
  .nous__grid{grid-template-columns:1fr}
  .nous__side{position:static;grid-template-columns:1fr auto;align-items:center}
  .dial{width:84px}.dial__c b{font-size:1.4rem}.dial__c span{display:none}
  .role{grid-template-columns:2rem 1fr;gap:.4rem 1rem;padding-inline:.2rem}
  .role__d{grid-column:2}
  .mk-body{grid-template-columns:1fr}.mk-vis{display:none}
  .tile,.tile--goo{grid-column:span 12;min-height:18rem}
  .mk-txt h4{font-size:3.4em}
}
@media (hover:none){
  .tile:hover{transform:none}
}