:root{
  --bg: oklch(0.972 0.01 80);
  --bg-2: oklch(0.94 0.018 75);
  --sand: oklch(0.88 0.035 70);
  --ink: oklch(0.18 0.012 255);
  --ink-2: oklch(0.36 0.012 255);
  --ink-3: oklch(0.5 0.012 255);
  --line: oklch(0.18 0.012 255 / 0.12);
  --blue: #3b70ab;
  --blue-2: #2c5a8f;
  --blue-soft: oklch(0.9 0.04 250);
  --on-blue: oklch(0.98 0.008 80);
  --panel: oklch(0.18 0.012 255);
  --on-panel: oklch(0.96 0.01 80);
  --display: "Outfit", "Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --r: clamp(1rem, 2vw, 1.75rem);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: oklch(0.165 0.012 255);
    --bg-2: oklch(0.205 0.014 255);
    --sand: oklch(0.3 0.025 70);
    --ink: oklch(0.95 0.01 80);
    --ink-2: oklch(0.8 0.01 80);
    --ink-3: oklch(0.64 0.01 80);
    --line: oklch(0.95 0.01 80 / 0.1);
    --blue: #6a9bd6;
    --blue-2: #8ab3e3;
    --blue-soft: oklch(0.3 0.05 250);
    --on-blue: oklch(0.15 0.012 255);
    --panel: oklch(0.22 0.016 255);
    --on-panel: oklch(0.95 0.01 80);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: oklch(0.165 0.012 255);
    --bg-2: oklch(0.205 0.014 255);
    --sand: oklch(0.3 0.025 70);
    --ink: oklch(0.95 0.01 80);
    --ink-2: oklch(0.8 0.01 80);
    --ink-3: oklch(0.64 0.01 80);
    --line: oklch(0.95 0.01 80 / 0.1);
    --blue: #6a9bd6;
    --blue-2: #8ab3e3;
    --blue-soft: oklch(0.3 0.05 250);
    --on-blue: oklch(0.15 0.012 255);
    --panel: oklch(0.22 0.016 255);
    --on-panel: oklch(0.95 0.01 80);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 5rem);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--display);font-weight:400;font-size:clamp(1rem,0.35vw + 0.92rem,1.15rem);line-height:1.55;letter-spacing:-0.011em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:60;background:var(--bg)}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:var(--on-blue)}
img{max-width:100%;display:block}
.wrap{padding-inline:var(--pad)}
.label{font-family:var(--display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em}
.blue{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* logo light / dark */
.lg-d{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lg-l{display:none}:root:not([data-theme="light"]) .lg-d{display:block}}
:root[data-theme="dark"] .lg-l{display:none}
:root[data-theme="dark"] .lg-d{display:block}

/* ---------- PHOTO (avec repli si l’image ne charge pas) ---------- */
.ph{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 20% 15%, oklch(0.8 0.08 65 / .9), transparent 55%),
  radial-gradient(90% 80% at 85% 90%, color-mix(in oklch, var(--blue) 70%, transparent), transparent 60%),
  linear-gradient(160deg, oklch(0.62 0.07 55), oklch(0.32 0.04 250));}
.ph::after{content:attr(data-cap);position:absolute;left:1rem;bottom:.9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:oklch(0.98 0.01 80 / .85);z-index:2;pointer-events:none}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.ph img.ok{opacity:1}
.ph img.ko{display:none}
.ph .tint{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,oklch(0.15 0.02 255 / .55));z-index:1;pointer-events:none}

/* ---------- LOADER ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--panel);color:var(--on-panel);display:grid;place-items:center;transition:transform 1s var(--ease-io)}
.loader.out{transform:translateY(-100%)}
.loader svg{width:min(46vw,260px)}
.loader-logo{width:min(60vw,340px);height:auto;opacity:0;transform:translateY(12px) scale(.96);animation:logoIn 1.2s var(--ease) .15s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
.loader path{fill:none;stroke:#3b70ab;stroke-width:14;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s var(--ease-io) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.loader .count{position:absolute;bottom:calc(2rem + env(safe-area-inset-bottom, 0px));right:var(--pad);font-family:var(--display);font-weight:300;font-size:clamp(3rem,10vw,8rem);letter-spacing:-.05em;line-height:.8}
.loader .tag{position:absolute;bottom:calc(2.4rem + env(safe-area-inset-bottom, 0px));left:var(--pad);color:oklch(0.96 0.01 80 / .6)}

/* ---------- CURTAIN (transition entre pages) ---------- */
.curtain{position:fixed;inset:0;z-index:150;background:#3b70ab;transform:translateY(100%);display:grid;place-items:center;pointer-events:none}
.curtain-logo{width:min(44vw,220px);height:auto;opacity:.95}
.curtain.in{transition:transform .6s var(--ease-io);transform:translateY(0)}
.curtain.out{transition:transform .7s var(--ease-io);transform:translateY(-100%)}
.curtain .pname{position:absolute;bottom:calc(2rem + env(safe-area-inset-bottom, 0px));left:var(--pad);color:oklch(0.98 0.01 80);font-size:clamp(2rem,6vw,5rem);font-weight:600;letter-spacing:-.04em}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(env(safe-area-inset-top, 0px) + .9rem) var(--pad) .9rem;transition:background .4s var(--ease),border-color .4s,transform .5s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in oklch, var(--bg) 84%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
/* bouton thème */
.theme{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden;background:color-mix(in oklch,var(--bg) 70%,transparent);transition:background .3s,color .3s}
.theme svg{position:absolute;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s var(--ease),opacity .4s}
.theme .moon{transform:translateY(130%) rotate(-60deg);opacity:0}
.theme[data-mode="dark"] .sun{transform:translateY(-130%) rotate(90deg);opacity:0}
.theme[data-mode="dark"] .moon{transform:none;opacity:1}
@media (hover:hover){.theme:hover{background:var(--ink);color:var(--bg)}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:9999}

/* retour en haut : sablier */
.msw,.dock{display:none !important}
.gotop{position:fixed;right:var(--pad);bottom:calc(env(safe-area-inset-bottom, 0px) + 1.25rem);z-index:49;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--bg);border:1px solid var(--line);box-shadow:0 14px 40px -16px oklch(0.1 0.02 255 / .45);display:grid;place-items:center;opacity:0;transform:translateY(1rem) scale(.8);pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease),bottom .6s var(--ease),background .3s}
.gotop.show{opacity:1;transform:none;pointer-events:auto}
.gotop{border-color:transparent}
.gotop svg.ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);overflow:visible;pointer-events:none}
.gotop .rt{fill:none;stroke:var(--line);stroke-width:2.5}
.gotop .rp{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.gotop.done .rp{stroke:var(--blue-2)}
.gotop svg{width:1.6rem;height:2.25rem;overflow:visible;transition:transform .8s var(--ease)}
.gotop .frame{fill:var(--ink)}
.gotop .glass{fill:color-mix(in oklch,var(--blue) 8%,transparent);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.hs-sticky{cursor:grab;-webkit-user-select:none;user-select:none}
.hs.dragging .hs-sticky{cursor:grabbing}
.hs-track .ph{transition:transform .5s var(--ease)}
.hs.dragging .hs-track .ph{transform:scale(.965)}
.hs-hint{display:inline-flex;align-items:center;gap:.6rem;margin-top:.4rem}
.hs-hint i{display:inline-block;width:2.2rem;height:1px;background:currentColor;position:relative;animation:hint 1.8s var(--ease-io) infinite alternate}
@keyframes hint{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
.gotop .sand{fill:var(--blue)}
.gotop .stream{stroke:var(--blue);stroke-width:1.4;stroke-dasharray:2 2.5;opacity:0;transition:opacity .25s}
.gotop.flow .stream{opacity:1;animation:fall .5s linear infinite}
.gotop.back .stream{opacity:1;animation:rise .35s linear infinite}
@keyframes fall{to{stroke-dashoffset:-9}}
@keyframes rise{to{stroke-dashoffset:9}}
.gotop .pct{position:absolute;right:calc(100% + .6rem);top:50%;transform:translate(.4rem,-50%);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.3rem .55rem;opacity:0;transition:opacity .3s,transform .4s var(--ease);white-space:nowrap;pointer-events:none}
.gotop.back svg.hg{animation:wob .5s var(--ease) infinite alternate}
@keyframes wob{from{transform:rotate(-8deg) translateY(-2px)}to{transform:rotate(8deg) translateY(2px)}}
@media (hover:hover){.gotop:hover .pct{opacity:1;transform:translate(0,-50%)}.gotop:hover{background:var(--bg-2)}}
@media (max-width:640px){.gotop{right:.9rem;bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);width:3.2rem;height:3.2rem}}
@media (max-width:1100px){body[data-menu="dock"] .gotop{bottom:calc(env(safe-area-inset-bottom, 0px) + 9.4rem)}}
.gotop .hg{transition:opacity .45s var(--ease),transform .7s var(--ease)}
.gotop svg.up{position:absolute;width:1.35rem;height:1.35rem;fill:none;stroke:var(--on-blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateY(70%) scale(.5);transition:opacity .45s var(--ease),transform .7s var(--ease)}
.gotop.done{background:var(--blue);border-color:transparent}
.gotop.done .hg{opacity:0;transform:translateY(-50%) scale(.5) rotate(180deg)}
.gotop.done svg.up{opacity:1;transform:none}
@keyframes bob{50%{transform:translateY(-4px)}}
@media (hover:hover){.gotop.done:hover{background:var(--blue-2)}.gotop.done:hover svg.up{animation:bob .8s ease-in-out infinite}}
.brand img{height:clamp(22px,2.4vw,28px);width:auto}
.nav-links{display:flex;gap:.4rem;padding:.3rem;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklch,var(--bg) 70%,transparent)}
.nav-links a{position:relative;padding:.45rem .95rem;border-radius:999px;font-size:.92rem;color:var(--ink-2);transition:color .3s var(--ease),background .3s var(--ease)}
.nav-links a[aria-current="page"]{background:var(--ink);color:var(--bg)}
@media (hover:hover){.nav-links a:not([aria-current="page"]):hover{color:var(--ink);background:var(--bg-2)}}
.nav-right{display:flex;align-items:center;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.25rem;border-radius:999px;background:var(--blue);color:var(--on-blue);font-weight:500;font-size:.95rem;position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease);z-index:-1}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost::before{background:var(--blue)}
@media (hover:hover){
  .btn:hover{color:var(--bg)}
  .btn.ghost:hover{color:var(--on-blue)}
  .btn:hover::before{transform:translateY(0)}
  .btn:hover .arr{transform:translateX(4px) rotate(-45deg)}
}
.burger{display:none;align-items:center;justify-content:center;gap:.65rem;height:2.75rem;min-width:2.75rem;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklch,var(--bg) 70%,transparent);transition:background .3s,color .3s}
.burger .bi{position:relative;width:1rem;height:.7rem;display:block}
.burger i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger i:first-child{top:10%}.burger i:last-child{top:80%}
.menu-open .burger i:first-child{top:45%;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:45%;transform:rotate(-45deg)}
.burger .bl{display:none;font-size:.92rem;font-weight:500}
@media (hover:hover){.burger:hover{background:var(--ink);color:var(--bg)}}
@media (max-width:1100px){.nav-links,.nav-right .btn{display:none}.burger{display:inline-flex}}
body[data-menu="full"] .nav-links{display:flex}
.nav-links a{padding:.45rem .8rem}
@media (max-width:1180px){body[data-menu="full"] .nav-links{display:none}}
body[data-menu="full"] .burger{display:inline-flex;padding:0 1.15rem}
body[data-menu="full"] .burger .bl{display:inline}
body[data-menu="dock"] .nav-links,body[data-menu="dock"] .burger{display:none !important}

/* menu plein écran */
.mmenu{position:fixed;inset:0;z-index:45;background:var(--bg);padding:calc(env(safe-area-inset-top, 0px) + 6.5rem) var(--pad) calc(env(safe-area-inset-bottom, 0px) + 2rem);clip-path:circle(0% at calc(100% - 3rem) 2.6rem);transition:clip-path .9s var(--ease-io),visibility 0s .9s;visibility:hidden;overflow-y:auto}
.menu-open .mmenu{clip-path:circle(150% at calc(100% - 3rem) 2.6rem);visibility:visible;transition:clip-path .9s var(--ease-io),visibility 0s}
.mm-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);min-height:100%;align-items:center}
.mm-links{display:flex;flex-direction:column}
.mmenu a.big{display:flex;align-items:baseline;gap:1rem;overflow:hidden;font-size:clamp(2.6rem,6.6vw,6.4rem);font-weight:600;letter-spacing:-.05em;line-height:1.02;padding:.1rem 0;transition:opacity .4s var(--ease)}
.mmenu a.big .mn{color:var(--ink-3);font-family:var(--mono);font-size:.8rem;font-weight:400;letter-spacing:.06em;flex:0 0 auto}
.mmenu a.big .mt{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease),color .3s;transition-delay:calc(.25s + var(--i) * .05s)}
.menu-open .mmenu a.big .mt{transform:none}
.mmenu a.big[aria-current="page"] .mt{color:var(--blue)}
@media (hover:hover){
  .mm-links:hover a.big{opacity:.3}
  .mm-links a.big:hover{opacity:1}
  .mm-links a.big:hover .mt{transform:translateX(.6rem);transition-delay:0s}
}
.mm-side{display:grid;gap:1.5rem;align-content:center}
.mm-prev{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden}
.mm-prev .ph{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .6s var(--ease),transform 1s var(--ease)}
.mm-prev .ph.on{opacity:1;transform:none}
.mm-info{display:flex;gap:2rem;flex-wrap:wrap}
.mm-info b{display:block;font-weight:500;margin-top:.25rem}
@media (max-width:900px){.mm-grid{grid-template-columns:1fr;align-items:start}.mm-prev{display:none}}

/* dock */
.dock{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);z-index:48;display:flex;gap:.15rem;padding:.4rem;border-radius:999px;background:color-mix(in oklch,var(--panel) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 50px -18px oklch(0.1 0.02 255 / .55);transform:translate(-50%,180%);transition:transform .8s var(--ease)}
body[data-menu="dock"] .dock{transform:translate(-50%,0)}
.dock a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .95rem;border-radius:999px;color:color-mix(in oklch,var(--on-panel) 62%,transparent);font-size:.72rem;font-weight:500;letter-spacing:.01em;transition:color .35s var(--ease),transform .35s var(--ease)}
.dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dock a[aria-current="page"]{color:var(--on-blue)}
.dock .ind{position:absolute;top:.4rem;bottom:.4rem;left:0;width:0;border-radius:999px;background:var(--blue);transition:transform .6s var(--ease),width .6s var(--ease);z-index:0}
@media (hover:hover){.dock a:not([aria-current="page"]):hover{color:var(--on-panel);transform:translateY(-3px)}}
@media (max-width:640px){.dock{left:.6rem;right:.6rem;transform:translateY(180%);justify-content:space-between}body[data-menu="dock"] .dock{transform:none}.dock a{flex:1;padding:.5rem .1rem;font-size:.62rem}}
body[data-menu="dock"] .legal{padding-bottom:6.5rem}

/* sélecteur de menu (outil de choix) */
.msw{position:fixed;right:var(--pad);bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);z-index:49;display:flex;align-items:center;gap:.35rem;padding:.35rem .35rem .35rem .9rem;border-radius:999px;background:var(--bg);border:1px solid var(--line);box-shadow:0 12px 40px -16px oklch(0.1 0.02 255 / .4);font-size:.82rem;transition:bottom .6s var(--ease)}
.msw .label{margin-right:.3rem}
.msw button{padding:.45rem .8rem;border-radius:999px;color:var(--ink-2);transition:background .3s,color .3s}
.msw button[aria-checked="true"]{background:var(--blue);color:var(--on-blue)}
@media (hover:hover){.msw button:not([aria-checked="true"]):hover{background:var(--bg-2);color:var(--ink)}}
@media (max-width:1100px){body[data-menu="dock"] .msw{bottom:calc(env(safe-area-inset-bottom, 0px) + 5.6rem)}}
@media (max-width:640px){.msw{left:.6rem;right:.6rem;justify-content:space-between}.msw .label{display:none}.msw button{flex:1}}

/* équipe */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
.member{position:relative}
.member:nth-child(3n+2){margin-top:clamp(0rem,6vw,5rem)}
.member .ph{aspect-ratio:4/5;border-radius:var(--r)}
.member .ph img{filter:saturate(.85);transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter .6s}
.member .over{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.4rem;color:oklch(0.98 0.01 80);transform:translateY(calc(100% - 4.6rem));transition:transform .7s var(--ease)}
.member .over::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,color-mix(in oklch,#3b70ab 92%,transparent) 30%);opacity:0;transition:opacity .6s var(--ease);z-index:-1;border-radius:0 0 var(--r) var(--r)}
.member h3{font-size:1.45rem;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.member .r{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-top:.3rem;display:block}
.member p{margin-top:1rem;font-size:.95rem;opacity:.92}
.member ul{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}
.member li{font-size:.75rem;padding:.25rem .6rem;border:1px solid oklch(0.98 0.01 80 / .5);border-radius:999px}
@media (hover:hover){
  .member:hover .over{transform:none}
  .member:hover .over::before{opacity:1}
  .member:hover .ph img{transform:scale(1.06);filter:saturate(1.05)}
}
@media (hover:none){.member .over{transform:none}.member .over::before{opacity:1}}
@media (max-width:900px){.team{grid-template-columns:1fr 1fr}.member:nth-child(3n+2){margin-top:0}.member:nth-child(even){margin-top:3rem}}
@media (max-width:540px){.team{grid-template-columns:1fr}.member:nth-child(even){margin-top:0}}
.quote{font-size:clamp(1.9rem,4.4vw,4.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;max-width:20ch}
.quote em{color:var(--blue)}
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;border-radius:calc(var(--r)*1.4);background:var(--bg-2);padding:clamp(1.5rem,4vw,3.5rem);border:1px solid var(--line)}
.join h2{font-size:clamp(2.2rem,5vw,5rem);font-weight:600;letter-spacing:-.05em;line-height:.95}
.join p{color:var(--ink-2);margin:1.2rem 0 2rem;max-width:40ch}
.join .ph{aspect-ratio:4/3;border-radius:var(--r)}
@media (max-width:860px){.join{grid-template-columns:1fr}}

/* ---------- PAGES ---------- */
.page{display:none}
.page.active{display:block}

/* ---------- HERO ---------- */
.hero{min-height:100svh;padding-top:calc(env(safe-area-inset-top, 0px) + 7.5rem);padding-bottom:3rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;align-items:end;position:relative}
.hero-txt{grid-column:1/8;align-self:center}
.hero h1{font-weight:600;font-size:clamp(3.2rem,8.6vw,10.5rem);line-height:.9;letter-spacing:-0.055em}
.split .ln{display:block;overflow:hidden;padding-bottom:.08em}
.split .ln>span{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:left bottom;transition:transform 1.2s var(--ease)}
.split.on .ln>span{transform:none}
.split .ln:nth-child(2)>span{transition-delay:.08s}
.split .ln:nth-child(3)>span{transition-delay:.16s}
.inf{display:inline-block;width:1.25em;height:.62em;vertical-align:baseline;margin-left:.04em}
.inf path{fill:none;stroke:var(--blue);stroke-width:15;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.split.on .inf path{transition:stroke-dashoffset 2s .6s var(--ease-io);stroke-dashoffset:0}
.hero-sub{display:flex;gap:2rem;align-items:flex-end;flex-wrap:wrap;margin-top:2.5rem}
.hero-sub p{max-width:34ch;color:var(--ink-2);font-size:clamp(1.05rem,1vw + .6rem,1.3rem)}
.hero-media{grid-column:8/13;align-self:stretch;position:relative;min-height:22rem}
.hero-media .ph{position:absolute;inset:0;border-radius:var(--r);clip-path:inset(100% 0 0 0 round var(--r));transition:clip-path 1.4s .25s var(--ease-io)}
.hero-media.on .ph{clip-path:inset(0 0 0 0 round var(--r))}
.hero-media .ph img{transform:scale(1.25)}
.hero-media.on .ph img{transform:scale(1.08)}
.badge{position:absolute;left:-2.2rem;bottom:2.2rem;z-index:3;width:7.5rem;height:7.5rem;border-radius:50%;background:var(--blue);color:var(--on-blue);display:grid;place-items:center}
.badge svg{position:absolute;inset:0;will-change:transform}
.badge text{font-family:var(--mono);font-size:9.4px;letter-spacing:2.6px;fill:currentColor;text-transform:uppercase}
.badge b{font-size:1.6rem;font-weight:400}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-meta{position:absolute;top:calc(env(safe-area-inset-top, 0px) + 5.5rem);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;align-items:start}
  .hero-txt,.hero-media{grid-column:1/-1}
  .hero-media{min-height:62vw}
  .badge{left:auto;right:1rem;bottom:-2.5rem;width:6rem;height:6rem}
}

/* ---------- HERO DIAPORAMA ---------- */
.hero{--hl:oklch(0.97 0.01 80);color:var(--hl);overflow:hidden;isolation:isolate;align-items:end;padding-bottom:2.2rem}
.hero-bg{position:absolute;inset:0;z-index:-1;background:#0d1a2c}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hslide.on{opacity:1}
.hslide::after{display:none}
.hslide img{transition:opacity 1s var(--ease),transform 8s linear;transform:scale(1.3);filter:blur(26px) saturate(1.15)}
.hslide.on img{transform:scale(1.18)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,17,30,.82) 0%,rgba(9,17,30,.55) 45%,rgba(9,17,30,.2) 100%),linear-gradient(0deg,rgba(9,17,30,.7) 0%,transparent 40%),linear-gradient(180deg,rgba(9,17,30,.55) 0%,transparent 25%)}
.hero .label{color:rgba(240,238,232,.7)}
.hero-txt{grid-column:1/8;grid-row:1;align-self:end;display:grid;position:relative;z-index:1}
.hmsg{grid-area:1/1;visibility:hidden}
.hmsg.on,.hmsg.out{visibility:visible}
.hero .ht{font-weight:600;font-size:clamp(3.2rem,8.6vw,10.5rem);line-height:.9;letter-spacing:-0.055em;color:var(--hl)}
.hero .ht em{color:#8ab3e3}
.hsplit .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hsplit .ln>span{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:left bottom}
.hmsg:not(.on):not(.out) .hsplit .ln>span{transition:none}
.hmsg.on .hsplit .ln>span{transform:none;transition:transform 1.15s var(--ease)}
.hmsg.on .hsplit .ln:nth-child(2)>span{transition-delay:.08s}
.hmsg.on .hsplit .ln:nth-child(3)>span{transition-delay:.16s}
.hmsg.out .hsplit .ln>span{transform:translateY(-110%) rotate(-3deg);transition:transform .75s var(--ease-io)}
.hero .inf path{stroke:#8ab3e3}
.hmsg.on .inf path{transition:stroke-dashoffset 2s .6s var(--ease-io);stroke-dashoffset:0}
.hmsg .hero-sub{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.hmsg.on .hero-sub{opacity:1;transform:none;transition-delay:.45s}
.hero .hero-sub p{color:rgba(240,238,232,.84)}
.hero .btn.ghost{color:var(--hl);border-color:rgba(240,238,232,.35)}
.hcard{grid-column:8/13;grid-row:1;align-self:stretch;position:relative;z-index:1;min-height:24rem;margin-top:calc(env(safe-area-inset-top, 0px) + 3rem)}
.hcard .cs{position:absolute;inset:0;border-radius:var(--r);clip-path:inset(100% 0 0 0 round var(--r));transition:clip-path 1.1s var(--ease-io)}
.hcard .cs:not(.on):not(.out){transition:none}
.hcard .cs.on{clip-path:inset(0 0 0 0 round var(--r));z-index:1}
.hcard .cs.out{clip-path:inset(0 0 100% 0 round var(--r))}
.hcard .cs img{transform:scale(1.15);transition:opacity 1s var(--ease),transform 1.8s var(--ease)}
.hcard .cs.on img{transform:scale(1.02)}
.hcard .ph::after{left:auto;right:1rem}
.hcard .badge{z-index:3}
.hero-ctrl{grid-column:1/-1;grid-row:2;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-top:clamp(2rem,6vh,3.5rem);position:relative;z-index:1}
.hdots{display:flex;gap:clamp(.75rem,2vw,1.75rem);flex:1;max-width:44rem}
.hdot{flex:1;display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;text-align:left;color:rgba(240,238,232,.55);padding:.4rem 0;transition:color .4s}
.hdot .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.hdot .t{font-size:.9rem;font-weight:500}
.hdot .bar{grid-column:1/-1;height:2px;background:rgba(240,238,232,.22);border-radius:2px;overflow:hidden;margin-top:.45rem}
.hdot .bar i{display:block;height:100%;background:#8ab3e3;transform-origin:left;transform:scaleX(0)}
.hdot.on{color:var(--hl)}
.hdot.on .bar i{animation:hprog 7s linear forwards}
.hero.paused .hdot.on .bar i{animation-play-state:paused}
@keyframes hprog{to{transform:scaleX(1)}}
@media (hover:hover){.hdot:not(.on):hover{color:var(--hl)}}
.hplay{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(240,238,232,.35);display:grid;place-items:center;color:var(--hl);flex:0 0 auto;transition:background .3s}
.hplay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.hplay .iy{display:none;fill:currentColor}
.hero.paused .hplay .ip{display:none}
.hero.paused .hplay .iy{display:block}
@media (hover:hover){.hplay:hover{background:rgba(240,238,232,.14)}}
@media (max-width:900px){.hero{align-items:end}.hero-txt{grid-column:1/-1;grid-row:auto}.hero-ctrl{grid-row:auto}.hcard{grid-column:1/-1;grid-row:auto;min-height:0;aspect-ratio:4/3;margin-top:1rem}}
@media (max-width:640px){.hero .badge{display:none}.hdot .t{display:none}}
body.hero-top:not(.menu-open) .nav{color:oklch(0.97 0.01 80)}
body.hero-top:not(.menu-open) .brand .lg-l{display:none}
body.hero-top:not(.menu-open) .brand .lg-d{display:block}
body.hero-top:not(.menu-open) .burger,body.hero-top:not(.menu-open) .theme{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:oklch(0.97 0.01 80)}

/* ---------- MARQUEE ---------- */
.mq{border-block:1px solid var(--line);padding-block:1.5rem;overflow:hidden;display:flex;gap:1rem;align-items:center}
.mq .label{flex:0 0 auto;padding-left:var(--pad);padding-right:1rem;border-right:1px solid var(--line)}
.mq-in{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq-track span{font-size:clamp(1.3rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap;padding-inline:1.6rem;color:var(--ink-2);display:flex;align-items:center;gap:3.2rem}
.mq-track span::after{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--blue);display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- SECTION HEADS ---------- */
.sec{padding-block:clamp(5rem,13vh,10rem)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;align-items:end;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.head .label{grid-column:1/-1}
.head h2{grid-column:1/9;font-size:clamp(2.4rem,5.6vw,6.2rem);font-weight:600;line-height:.95;letter-spacing:-.045em}
.head p{grid-column:9/13;color:var(--ink-2);max-width:36ch}
@media (max-width:900px){.head h2,.head p{grid-column:1/-1}}

/* ---------- MANIFESTO ---------- */
.mani p{font-size:clamp(1.8rem,3.8vw,3.9rem);line-height:1.1;letter-spacing:-.035em;font-weight:500;max-width:22ch}
.mani .w{opacity:.14;transition:opacity .45s var(--ease)}
.mani .w.on{opacity:1}
.mani .w.b{color:var(--blue)}
.mani-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem}
.mani-grid .label{grid-column:1/4;padding-top:1rem}
.mani-grid p{grid-column:4/13}
@media (max-width:900px){.mani-grid .label,.mani-grid p{grid-column:1/-1}}
.mani-img{align-items:center}
.mani-img .mani-side{grid-column:1/5;display:flex;flex-direction:column;gap:1.2rem}
.mani-img .mani-side .ph{aspect-ratio:4/5;border-radius:var(--r)}
.mani-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.mani-side .ph.vid-on .mani-vid{opacity:1}
.mani-img p{grid-column:6/13}
@media (max-width:900px){.mani-img .mani-side,.mani-img p{grid-column:1/-1}.mani-img .mani-side .ph{aspect-ratio:16/10}}

/* ---------- EXPERTISES ---------- */
.exp{--cols:4;display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.exp li{list-style:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.6rem 1.4rem 1.8rem;position:relative;overflow:hidden;isolation:isolate;min-height:15rem;display:flex;flex-direction:column;gap:.8rem}
.exp li::before{content:"";position:absolute;inset:0;background:color-mix(in oklch,var(--blue) 35%,transparent);clip-path:circle(0% at var(--mx,50%) var(--my,50%));transition:clip-path .7s var(--ease);z-index:-1}
.exp .n{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.06em}
.exp h3{font-size:1.4rem;font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-top:auto}
.exp p{font-size:.95rem;color:var(--ink-2);line-height:1.45}
.exp li *{transition:color .4s var(--ease)}
.exp h3,.exp p{transform-origin:left bottom;transition:color .4s var(--ease),transform .8s cubic-bezier(0.22, 1, 0.36, 1),letter-spacing .8s cubic-bezier(0.22, 1, 0.36, 1);will-change:transform}
.exp p{transform-origin:left top;transition-delay:0s,.05s,0s}
.exp li{min-height:17rem;color:#f4f2ec}
.exp-bg{position:absolute;inset:0;z-index:-2}
.exp-bg::after{display:none}
.exp-bg img{transform:scale(1.02);transition:opacity 1s var(--ease),transform 1.4s cubic-bezier(0.22, 1, 0.36, 1)}
.exp-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,14,26,.42) 0%,rgba(8,14,26,.62) 45%,rgba(8,14,26,.9) 100%)}
.exp li .n{color:rgba(244,242,236,.78)}
.exp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.exp li.vid-on .exp-vid{opacity:1}
.exp li.has-vid .n::after{content:"  ▶ vidéo";letter-spacing:.06em;opacity:.85}
.exp li.has-vid{cursor:pointer}
.exp li h3{color:#ffffff;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.exp li p{color:rgba(244,242,236,.9)}
@media (hover:hover){.exp li:hover .exp-bg img{transform:scale(1.1)}}
@media (hover:hover){
  .exp li:hover::before{clip-path:circle(150% at var(--mx,50%) var(--my,50%))}
  .exp li:hover .n,.exp li:hover h3,.exp li:hover p{color:var(--on-blue)}
  .exp li:hover h3{transform:scale(1.1) translateY(-4px);letter-spacing:-.03em}
  .exp li:hover p{transform:scale(1.05) translateY(2px)}
}
@media (max-width:1100px){.exp{--cols:3}}
@media (max-width:760px){.exp{--cols:2}.exp li{min-height:13rem;padding:1.2rem 1rem}}
@media (max-width:460px){.exp{--cols:1}.exp li{min-height:auto}.exp h3{margin-top:.4rem}}

/* ---------- PROJET CARDS ---------- */
.pgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
.pcard{grid-column:span 6;display:block;cursor:pointer}
.pcard:nth-child(3n+1){grid-column:span 7}
.pcard:nth-child(3n+2){grid-column:span 5;margin-top:clamp(0rem,8vw,7rem)}
.pcard:nth-child(3n){grid-column:3/span 8}
.pcard .ph{aspect-ratio:4/3;border-radius:var(--r)}
.pcard:nth-child(3n) .ph{aspect-ratio:16/9}
.pcard .ph img{transform:scale(1.04)}
.pcard .meta{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-top:1.1rem}
.pcard h3{font-size:clamp(1.4rem,2.2vw,2.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.pcard .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.tag{font-size:.78rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.pcard .ph .veil{position:absolute;inset:0;background:color-mix(in oklch,var(--blue) 35%,transparent);opacity:0;transition:opacity .5s var(--ease);z-index:1}
@media (hover:hover){
  .pcard:hover .ph img{transform:scale(1.1)}
  .pcard:hover .ph .veil{opacity:1}
}
@media (max-width:760px){.pcard,.pcard:nth-child(3n+1),.pcard:nth-child(3n+2),.pcard:nth-child(3n){grid-column:1/-1;margin-top:0}}

/* ---------- HORIZONTAL GALLERY ---------- */
.hs{position:relative}
.hs-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2rem}
.hs-track{display:flex;gap:clamp(1rem,2vw,1.75rem);padding-inline:var(--pad);will-change:transform;width:max-content}
.hs-track .ph{flex:0 0 auto;width:clamp(16rem,34vw,32rem);aspect-ratio:3/4;border-radius:var(--r)}
.hs-track .ph:nth-child(even){aspect-ratio:4/5;margin-top:4rem}
.hs-track .intro{flex:0 0 auto;width:clamp(16rem,30vw,28rem);display:flex;flex-direction:column;justify-content:center;gap:1.2rem}
.hs-track .intro h2{font-size:clamp(2.2rem,4.5vw,4.6rem);font-weight:600;letter-spacing:-.045em;line-height:.95}
.hs-track .intro p{color:var(--ink-2)}
.hs-bar{margin-inline:var(--pad);height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.hs-bar i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){
  .hs{height:auto !important}
  .hs-sticky{position:relative;height:auto;padding-block:4rem}
  .hs-track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;transform:none !important;padding-bottom:1rem}
  .hs-track>*{scroll-snap-align:start}
  .hs-track .ph{width:78vw}
  .hs-track .ph:nth-child(even){margin-top:0}
  .hs-bar{display:none}
}

/* ---------- SOLUTIONS STACK ---------- */
.stack{display:grid;gap:1.5rem}
.scard{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 6rem + var(--i) * 1.1rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,3rem);padding:clamp(1.25rem,3vw,2.5rem);border-radius:calc(var(--r) * 1.3);background:var(--bg-2);border:1px solid var(--line);min-height:min(78vh,40rem);transform-origin:center top;will-change:transform}
.scard:nth-child(even){background:var(--panel);color:var(--on-panel);border-color:transparent}
.scard:nth-child(even) .label,.scard:nth-child(even) p{color:color-mix(in oklch,var(--on-panel) 70%,transparent)}
.scard:nth-child(3n){background:var(--blue);color:var(--on-blue)}
.scard:nth-child(3n) .label,.scard:nth-child(3n) p{color:color-mix(in oklch,var(--on-blue) 78%,transparent)}
.scard .txt{display:flex;flex-direction:column;gap:1.2rem}
.scard h3{font-size:clamp(2.4rem,5.4vw,5.6rem);font-weight:600;letter-spacing:-.05em;line-height:.9;margin-top:auto}
.scard h3 em{font-weight:400}
.scard p{max-width:42ch;color:var(--ink-2)}
.scard ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.scard li{font-size:.82rem;padding:.35rem .8rem;border-radius:999px;border:1px solid currentColor;opacity:.75}
.scard .ph{border-radius:var(--r);min-height:16rem}
@media (max-width:860px){.scard{grid-template-columns:1fr;min-height:auto}.scard .ph{aspect-ratio:16/10;min-height:0;order:-1}}

/* ---------- FILTERS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.chip{font-size:.88rem;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);transition:all .3s var(--ease)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (hover:hover){.chip:not([aria-pressed="true"]):hover{border-color:var(--ink);color:var(--ink)}}
.pcard.hidden{display:none}

/* ---------- CASE DETAIL ---------- */
.case-hero{padding-top:calc(env(safe-area-inset-top, 0px) + 7.5rem)}
.back{display:inline-flex;gap:.5rem;align-items:center;margin-bottom:2rem;color:var(--ink-2)}
.case-hero h1{font-size:clamp(3rem,9vw,10rem);font-weight:600;letter-spacing:-.055em;line-height:.9}
.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-block:3rem;border-top:1px solid var(--line);padding-top:1.5rem}
.case-meta b{display:block;font-weight:500;margin-top:.4rem}
.case-img{border-radius:var(--r);aspect-ratio:16/8;margin-inline:var(--pad)}
.case-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;padding-block:clamp(4rem,10vh,7rem)}
.case-body .label{grid-column:1/4}
.case-body .c{grid-column:4/12;display:grid;gap:2.5rem}
.case-body h2,.case-body h3{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:.8rem}
.case-body p{color:var(--ink-2);max-width:58ch;font-size:1.1rem}
.next{display:block;border-top:1px solid var(--line);padding-block:3rem 4rem}
.next .t{font-size:clamp(2.4rem,7vw,7rem);font-weight:600;letter-spacing:-.05em;line-height:.95;display:inline-block;transition:transform .6s var(--ease),color .4s}
@media (hover:hover){.next:hover .t{transform:translateX(1.5rem);color:var(--blue)}}
@media (max-width:860px){.case-meta{grid-template-columns:1fr 1fr}.case-body .label,.case-body .c{grid-column:1/-1}.case-img{aspect-ratio:4/3}}

/* ---------- PAGE HERO (interne) ---------- */
.phero{padding-top:calc(env(safe-area-inset-top, 0px) + 8rem);padding-bottom:clamp(3rem,8vh,6rem)}
.phero h1{font-size:clamp(3.2rem,10vw,12rem);font-weight:600;letter-spacing:-.06em;line-height:.88}
.phero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-top:2.5rem}
.phero .row p{max-width:40ch;color:var(--ink-2);font-size:1.15rem}

/* ---------- AGENCE ---------- */
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(6rem,12vw,11rem);gap:clamp(.75rem,1.5vw,1.25rem)}
.collage .ph{border-radius:var(--r)}
.collage .a{grid-column:1/8;grid-row:span 3}
.collage .b{grid-column:8/13;grid-row:span 2}
.collage .c{grid-column:8/11;grid-row:span 2}
.collage .d{grid-column:2/8;grid-row:span 2}
.collage .e{grid-column:11/13;grid-row:span 1;background:var(--blue);display:grid;place-items:center;color:var(--on-blue);font-size:clamp(2rem,4vw,3.5rem)}
@media (max-width:760px){.collage{grid-template-columns:1fr 1fr;grid-auto-rows:9rem}.collage .a{grid-column:1/-1;grid-row:span 2}.collage .b,.collage .c{grid-column:span 1;grid-row:span 2}.collage .d{grid-column:1/-1;grid-row:span 2}.collage .e{display:none}}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.val{border-top:2px solid var(--ink);padding-top:1.4rem}
.val .k{font-family:var(--serif);font-style:italic;font-size:clamp(2.6rem,4vw,4rem);line-height:1;color:var(--blue)}
.val h3{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;margin:1rem 0 .5rem}
.val p{color:var(--ink-2)}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.clients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.clients span{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:2rem 1rem;text-align:center;font-weight:600;font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:-.02em;color:var(--ink-2);transition:background .4s var(--ease),color .4s}
@media (hover:hover){.clients span:hover{background:var(--blue);color:var(--on-blue)}}
@media (max-width:760px){.clients{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s}
.step{padding:1.8rem 1.5rem 2rem 0;border-top:1px solid var(--line)}
.step+.step{padding-left:1.5rem;border-left:1px solid var(--line)}
.step .k{font-family:var(--serif);font-style:italic;font-size:3.6rem;line-height:1;color:var(--blue)}
.step h3{font-size:1.35rem;font-weight:600;margin:1rem 0 .5rem;letter-spacing:-.02em}
.step p{color:var(--ink-2);font-size:.98rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:540px){.steps{grid-template-columns:1fr}.step,.step+.step{padding-left:0;border-left:0}}

/* ---------- CTA ---------- */
.cta{background:var(--panel);color:var(--on-panel);border-radius:0;margin-inline:0;padding:clamp(4rem,10vh,7rem) var(--pad);position:relative;overflow:hidden}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start;position:relative;z-index:1;max-width:90rem;margin-inline:auto}
.cta-txt p{color:color-mix(in oklch,var(--on-panel) 75%,transparent);max-width:38ch;font-size:1.1rem}
.cta-info{display:grid;gap:1.2rem;margin-top:2.5rem}
.cta-info b{display:block;font-weight:500;margin-top:.3rem}
.cta-info a{color:inherit;border-bottom:1px solid #6a9bd6}
.qform{display:grid;gap:1.8rem;background:color-mix(in oklch,var(--on-panel) 5%,transparent);border:1px solid color-mix(in oklch,var(--on-panel) 14%,transparent);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.5rem)}
.cta .field input,.cta .field textarea,.cta .field select{font:inherit;font-size:1.05rem;color:var(--on-panel);background:transparent;border:0;border-bottom:1px solid color-mix(in oklch,var(--on-panel) 25%,transparent);padding:.75rem 0;transition:border-color .3s;width:100%;border-radius:0}
.cta .field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.cta .field select option{color:#111}
.cta .field input:focus,.cta .field textarea:focus,.cta .field select:focus{outline:none;border-color:#6a9bd6}
.cta .field input[aria-invalid="true"]{border-color:#e98b7d}
.qform-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.qerr{font-size:.9rem;color:#f0a99e}
.cta .sent{background:color-mix(in oklch,#6a9bd6 22%,transparent);color:var(--on-panel)}
@media (max-width:900px){.cta-grid{grid-template-columns:minmax(0,1fr)}}
.cta .label{color:color-mix(in oklch,var(--on-panel) 60%,transparent)}
.cta h2{font-size:clamp(2.6rem,6vw,6.5rem);font-weight:600;letter-spacing:-.055em;line-height:.9;margin:1.2rem 0 1.5rem;max-width:12ch}
.cta h2 em{color:#6a9bd6}
.cta .bg-inf{position:absolute;right:-6%;top:50%;width:min(60vw,46rem);transform:translateY(-50%);opacity:.18;pointer-events:none}
.cta .bg-inf path{fill:none;stroke:#6a9bd6;stroke-width:6}
.cta .btn{background:#6a9bd6;color:oklch(0.15 0.012 255)}
.cta .btn::before{background:oklch(0.96 0.01 80)}

/* ---------- CONTACT ---------- */
.cform{display:grid;gap:2.5rem;max-width:60rem}
.cform fieldset{border:0;display:grid;gap:1rem}
.cform legend{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.03em;margin-bottom:1rem}
.cform .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.field{display:grid;gap:.5rem}
.field input,.field textarea{font:inherit;font-size:1.15rem;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:.8rem 0;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:640px){.two{grid-template-columns:1fr}}
.cinfo{display:grid;gap:1.6rem;align-content:start}
.cinfo b{display:block;font-weight:500;font-size:1.2rem;margin-top:.3rem}
.contact-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.sent{display:none;padding:1.2rem 1.4rem;border-radius:1rem;background:var(--blue-soft);color:var(--ink)}
.sent.on{display:block}

/* ---------- FOOTER ---------- */
footer{--fbg:#132a4a;background:var(--fbg);color:oklch(0.95 0.01 80);margin-top:0;padding-top:clamp(3.5rem,9vh,6rem);border-radius:0;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;right:-10%;top:-30%;width:min(70vw,48rem);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(106,155,214,.22),transparent 65%);pointer-events:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) footer{--fbg:#0e1f38}}
:root[data-theme="dark"] footer{--fbg:#0e1f38}
footer .label{color:rgba(240,238,232,.55)}
.foot-logo{height:clamp(30px,3vw,38px);width:auto;margin-bottom:1.2rem}
footer .foot,footer .legal{position:relative}
.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;padding-bottom:3rem}
.foot .col{grid-column:span 3;display:grid;gap:.5rem;align-content:start}
.foot .col:first-child{grid-column:span 6}
.foot a{color:rgba(240,238,232,.75);width:fit-content;transition:color .3s}
@media (hover:hover){.foot a:hover{color:#8ab3e3}}
.foot p{color:rgba(240,238,232,.75);max-width:32ch}
@media (max-width:760px){.foot .col,.foot .col:first-child{grid-column:1/-1}}
.giant{padding-inline:var(--pad);overflow:hidden}
.giant img{width:100%;height:auto;opacity:.95}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:1.5rem;border-top:1px solid rgba(240,238,232,.14)}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(12% 6% 12% 6% round var(--r));transition:clip-path 1.2s var(--ease-io)}
.rv-img.in{clip-path:inset(0 0 0 0 round var(--r))}

/* ---------- CURSOR ---------- */
.cur{position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:12px;height:12px;border-radius:50%;background:var(--blue);display:grid;place-items:center;transform:translate(-50%,-50%);transition:width .45s var(--ease),height .45s var(--ease),opacity .3s,background .3s;opacity:0}
.cur span{font-size:.78rem;font-weight:500;color:var(--on-blue);opacity:0;transition:opacity .3s;white-space:nowrap}
.cur.on{opacity:1}
.cur.link{width:44px;height:44px;background:color-mix(in oklch,var(--blue) 30%,transparent)}
.cur.view{width:92px;height:92px;background:var(--blue)}
.cur.view span{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important}
  .rv{opacity:1;transform:none}
  .rv-img{clip-path:none}
  .split .ln>span{transform:none}
  .inf path{stroke-dashoffset:0 !important}
  .hero-media .ph{clip-path:inset(0 round var(--r))}
  .mani .w{opacity:1}
  .mq-track,.badge svg{animation:none}
  .cur{display:none}
  .scard{transform:none !important}
  .mmenu a.big .mt{transform:none}
  .gotop svg{animation:none !important}
  .member .over{transform:none}
}

/* ---------- PAGES SÉPARÉES : loader seulement à la 1re visite, rideau à l'arrivée ---------- */
.no-loader .loader{display:none}
.from-nav .curtain,.curtain.cover{transform:translateY(0);transition:none}

/* ---------- Vidéos gérées depuis le backoffice ---------- */
/* hero de l'accueil : la vidéo remplace le fond flouté quand elle joue */
.hslide .hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.hslide.vid-on .hvid{opacity:1}
/* visuels de page, solutions, projets, équipe : la vidéo recouvre l'image une fois lancée */
.auto-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.ph.vid-on .auto-vid{opacity:1}
/* visuel optionnel sous le titre des pages intérieures */
.phero-media{margin-bottom:clamp(3rem,8vh,6rem)}
@media (prefers-reduced-motion: reduce){.hvid,.auto-vid{display:none}}

/* ---------- Fond des cartes Solutions (réglé dans le backoffice) ---------- */
.scard.bg-light{background:var(--bg-2);color:var(--ink);border-color:var(--line)}
.scard.bg-light .label,.scard.bg-light p{color:var(--ink-2)}
.scard.bg-dark{background:var(--panel);color:var(--on-panel);border-color:transparent}
.scard.bg-dark .label,.scard.bg-dark p{color:color-mix(in oklch,var(--on-panel) 70%,transparent)}
.scard.bg-blue{background:var(--blue);color:var(--on-blue);border-color:transparent}
.scard.bg-blue .label,.scard.bg-blue p{color:color-mix(in oklch,var(--on-blue) 78%,transparent)}
.scard.bg-custom{background:var(--card-bg);border-color:transparent}
.scard.bg-image{background:linear-gradient(rgba(6,12,22,var(--card-veil,.55)),rgba(6,12,22,var(--card-veil,.55))),var(--card-img) center/cover no-repeat,var(--card-bg,#0d1a2c);border-color:transparent}
.scard.tone-light{color:#f4f2ec}
.scard.tone-light .label,.scard.tone-light p{color:rgba(244,242,236,.78)}
.scard.tone-dark{color:#12161d}
.scard.tone-dark .label,.scard.tone-dark p{color:rgba(18,22,29,.72)}

/* ---------- Expertises : élargissement au survol ---------- */
.exp li{flex:0 0 calc(100% / var(--cols));min-width:0;transition:flex-basis .75s cubic-bezier(0.22, 1, 0.36, 1)}
.exp li.grow{flex-basis:calc(100% / var(--cols) * 1.3)}
.exp li.shrink{flex-basis:calc(100% / var(--cols) * (1 - .3 / (var(--rown) - 1)))}
.exp li.shrink .exp-bg img{filter:saturate(.7) brightness(.85);transition:filter .75s var(--ease),transform 1.4s cubic-bezier(0.22, 1, 0.36, 1)}
@media (prefers-reduced-motion: reduce){.exp li{transition:none}}

/* ---------- Écran de chargement par page ---------- */
.loader,.curtain{overflow:hidden;isolation:isolate}
.ld-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transform:scale(1.06);transition:opacity .5s var(--ease),transform 1.6s var(--ease)}
.has-img>.ld-bg,.curtain[data-img]>.ld-bg{opacity:1;transform:none}
.has-img::before,.curtain[data-img]::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,12,22,.35),rgba(6,12,22,.65))}
.loader.has-img .tag{color:rgba(244,242,236,.8)}

/* ---------- Logos clients ---------- */
.mq-track span.has-logo img{height:clamp(1.8rem,3vw,2.6rem);width:auto;max-width:9rem;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s}
.mq-track span.has-logo:hover img{filter:none;opacity:1}
.clients span.has-logo{display:grid;place-items:center}
.clients span.has-logo img{height:clamp(2rem,3.4vw,3rem);width:auto;max-width:80%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s}
@media (hover:hover){.clients span.has-logo:hover img{filter:none;opacity:1}}
[data-theme="dark"] .clients span.has-logo img,[data-theme="dark"] .mq-track span.has-logo img{filter:grayscale(1) invert(1) brightness(1.4)}

/* ---------- Bloc « Un projet ? » de l'accueil (modèle .join) ---------- */
.join .join-info{margin:1.6rem 0 0;color:var(--ink-3)}
.join .join-info a{color:inherit;border-bottom:1px solid currentColor}
.join h2 em{white-space:nowrap}