/* ELIEL POSTER — accueil. Fond noir, faisceaux rouges, texte blanc ; un interrupteur passe en clair (fond blanc).
   Outfit pour l’interface et les titres (gras + fin incliné), Anton pour les affiches et le bandeau. */
@font-face{font-family:Poster;src:url('../fonts/anton.woff2') format('woff2');font-display:swap}
@font-face{font-family:Studio;src:url('../fonts/outfit.woff2') format('woff2');font-display:swap;font-weight:100 900}
:root{--red:#ce2923;--glow:#ff3b2f;--bg:#000;--fg:#fff;--muted:#9a9a9a;--dim:#5f5f5f;--hair:#ffffff1c;--surface:#0b0b0b;--surface-2:#151515;--chip:#1c1c1c;--pad:clamp(18px,2.4vw,32px);--wrap:1380px;--side:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));--ease:cubic-bezier(.22,1,.36,1);color-scheme:dark}
[data-theme=light]{--bg:#fff;--fg:#0c0c0c;--muted:#6a6a6a;--dim:#a6a6a6;--hair:#0000001f;--surface:#f6f6f6;--surface-2:#efefef;--chip:#e9e9e9;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 Studio,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .5s var(--ease),color .5s var(--ease)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,dl,dd,figure,table{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-weight:600;text-wrap:balance}
em{font-style:italic;font-weight:200;letter-spacing:-.045em}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
::selection{background:var(--red);color:#fff}
.skip{position:fixed;z-index:300;top:8px;left:8px;padding:12px 18px;background:var(--red);color:#fff;transform:translateY(-200%)}
.skip:focus{transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mark{display:inline-block;flex:none;width:15px;height:19px;background:currentColor;-webkit-mask:url('../img/brand-mark.svg') center/contain no-repeat;mask:url('../img/brand-mark.svg') center/contain no-repeat}

/* Boutons : pilules, le libellé roule au survol */
.btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 17px;border-radius:999px;border:1px solid #0000;font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),scale .3s var(--ease)}
.btn span{display:block;text-shadow:0 2.8em 0 currentColor;transition:transform .5s var(--ease)}
.btn:hover span{transform:translateY(-2.8em)}
.btn:active{scale:.97}
.btn-solid{background:var(--fg);color:var(--bg)}
.btn-ghost{background:var(--surface-2);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{height:36px;font-size:13px}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* En-tête : pleine largeur en haut de page, puis pilule flottante */
.top{position:fixed;z-index:200;inset:0 0 auto;padding-top:0;transition:padding .5s var(--ease)}
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:var(--wrap);margin:auto;padding:16px var(--pad);border:1px solid #0000;border-radius:16px;transition:max-width .6s var(--ease),padding .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.top.stuck{padding-top:10px}
.top.stuck .top-in{max-width:760px;padding:8px 10px 8px 18px;background:color-mix(in srgb,var(--surface) 82%,#0000);border-color:var(--hair);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand{white-space:nowrap;display:flex;align-items:center;gap:9px;justify-self:start;font-size:18px;font-weight:600;letter-spacing:-.03em}
.top-nav{display:flex;gap:28px;font-size:15px;letter-spacing:-.01em}
.top-nav a{color:var(--muted);transition:color .3s}
.top-nav a:hover,.top-nav .on{color:var(--fg)}
.top-nav .on{font-weight:500}
.top-end{display:flex;align-items:center;gap:14px;justify-self:end}
.top.stuck .top-nav{gap:20px;font-size:14px}
.switch{position:relative;width:46px;height:24px;border-radius:99px;background:var(--chip);border:1px solid var(--hair)}
.switch i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--fg);transition:translate .4s var(--ease)}
[data-theme=light] .switch i{translate:22px 0}
.burger{display:none;width:36px;height:36px;border-radius:50%;background:var(--chip)}
.burger i,.burger i:before{display:block;width:14px;height:1.5px;margin:auto;background:var(--fg)}
.burger i:before{content:'';translate:0 5px}

/* Hero */
.hero{position:relative;isolation:isolate;padding:140px var(--side) 0;text-align:center;overflow:hidden}
/* Barres lumineuses : hautes sur les bords, basses au centre, elles respirent en décalé */
.bars{position:absolute;z-index:-1;inset:0;display:flex;align-items:flex-end;pointer-events:none}
.bars i{flex:1;height:var(--h);background:linear-gradient(0deg,var(--glow),color-mix(in srgb,var(--glow) 38%,#0000) 52%,#0000);opacity:.82;transform-origin:bottom;animation:bar 2.6s ease-in-out infinite alternate;animation-delay:var(--d)}
[data-theme=light] .bars i{opacity:.32}
@keyframes bar{to{transform:scaleY(.7);opacity:.45}}
.tag{display:inline-flex;align-items:center;height:32px;padding:0 15px;border-radius:99px;background:var(--surface);border:1px solid var(--hair);font-size:12px;font-weight:600;letter-spacing:.02em}
.hero h1{margin:26px 0 22px;font-size:clamp(40px,6.4vw,92px);line-height:1;letter-spacing:-.06em}
.hero h1 span,.cta h2 span{display:block}
.hero h1 em{font-size:1.02em}
.lead{max-width:560px;margin-inline:auto;font-size:clamp(16px,1.25vw,18px);color:var(--muted)}
.hero .actions,.cta .actions{justify-content:center;margin-top:28px}

/* Éditeur */
.editor{position:relative;margin-top:60px;border:1px solid var(--hair);border-bottom:0;border-radius:16px 16px 0 0;background:var(--bg);box-shadow:0 -1px 0 0 var(--glow),0 -18px 70px -10px color-mix(in srgb,var(--glow) 60%,#0000);text-align:left;font-size:12.5px;overflow:hidden}
.ed-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;padding:0 16px;border-bottom:1px solid var(--hair)}
.ed-file{display:flex;align-items:center;gap:8px;width:fit-content;padding:7px 10px;border-radius:8px;background:var(--surface-2)}
.ed-file b{font-weight:400;color:var(--muted)}
.ed-mid{display:flex;gap:8px}
.ed-seg{display:flex;padding:3px;border-radius:9px;border:1px solid var(--hair)}
.ed-seg i{width:66px;height:26px;border-radius:6px}
.ed-seg i.on{background:var(--chip)}
.ed-size{display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:9px;border:1px solid var(--hair);font-weight:600;font-variant-numeric:tabular-nums}
.ed-size small{font-weight:400;color:var(--muted)}
.ed-size u{text-decoration:none;color:var(--dim)}
.ed-users{display:flex;justify-self:end}
.ed-users i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);border:2px solid var(--bg);font:600 11px/1 Studio;font-style:normal;color:#fff}
.ed-users i+i{margin-left:-8px;background:var(--chip);color:var(--fg)}
.ed-body{display:grid;grid-template-columns:290px 1fr 300px;height:clamp(420px,46vw,620px)}
.ed-left{padding:14px 18px;border-right:1px solid var(--hair);-webkit-mask-image:linear-gradient(#000 70%,#0000);mask-image:linear-gradient(#000 70%,#0000)}
.ed-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:10px;background:var(--surface-2);text-align:center;color:var(--muted)}
.ed-tabs span{padding:7px 0;border-radius:8px}
.ed-tabs .on{background:var(--chip);color:var(--fg);font-weight:600}
.ed-select{margin:14px 0 10px;padding:10px 12px;border-radius:9px;background:var(--surface-2);font-weight:600}
.ed-layers{padding-top:8px;border-top:1px solid var(--hair)}
.ed-layers li{position:relative;padding:9px 10px 9px 44px;border-radius:8px;color:var(--muted)}
.ed-layers li:before{content:'';position:absolute;left:24px;top:50%;width:9px;height:7px;margin-top:-4px;border-top:2px solid;border-bottom:2px solid;opacity:.8}
.ed-layers .on{background:var(--red);color:#fff;font-weight:600}
.ed-canvas{position:relative;overflow:hidden;background:var(--surface)}
.ed-boards{position:absolute;inset:0 auto 0 0;display:flex;gap:16px;padding:14px 16px 0;animation:boards 34s linear infinite alternate}
.board{flex:none;height:100%;border-radius:10px 10px 0 0;overflow:hidden;background:var(--surface-2)}
.board img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.board-web{aspect-ratio:1.5}
.board-film{aspect-ratio:1.3}
.board-film img{object-position:center}
.board-poster{aspect-ratio:.72;display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:var(--pb,var(--red));color:var(--pf,#fff);transition:background .4s var(--ease),color .4s var(--ease)}
.board-poster[data-ink=white]{--pb:#fff;--pf:var(--red)}
.board-poster[data-ink=black]{--pb:#0c0c0c;--pf:#fff}
.po-top,.po-foot{display:flex;align-items:flex-end;justify-content:space-between;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.12em}
.po-type{font:400 var(--fit,96px)/.95 Poster,sans-serif;text-transform:uppercase;white-space:nowrap}
.po-type span{display:block}
.po-type span:nth-child(2){-webkit-text-stroke:1.3px currentColor;-webkit-text-fill-color:transparent}
.po-foot .mark{width:28px;height:36px}
@keyframes boards{to{transform:translateX(-34%)}}
.ed-tools{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;align-items:center;gap:4px;padding:5px;border-radius:12px;background:var(--surface-2);border:1px solid var(--hair);box-shadow:0 14px 30px -10px #000c}
.ed-tools i{width:34px;height:34px;border-radius:8px;background:radial-gradient(circle,var(--fg) 2.5px,#0000 3px)}
.ed-tools i.on{background:var(--red) radial-gradient(circle,#fff 2.5px,#0000 3px)}
.ed-tools b{padding:0 8px;font-size:12px}
.ed-right{border-left:1px solid var(--hair);overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,#0000);mask-image:linear-gradient(#000 78%,#0000)}
.ed-prop{padding:15px 18px;border-bottom:1px solid var(--hair)}
.ed-prop h2{margin-bottom:12px;font-size:13px;font-weight:600}
.ed-prop input{width:100%;height:36px;padding:0 12px;border:1px solid var(--hair);border-radius:8px;background:var(--surface-2);font-size:14px;font-weight:500}
.inks{display:flex;gap:8px}
.inks button{width:36px;height:36px;border-radius:8px;border:1px solid var(--hair);transition:scale .3s var(--ease)}
.inks button:hover{scale:1.08}
.inks [data-ink=red]{background:var(--red)}
.inks [data-ink=white]{background:#fff}
.inks [data-ink=black]{background:#0c0c0c}
.inks [aria-pressed=true]{outline:2px solid var(--fg);outline-offset:2px}
.ed-prop dl div{display:flex;align-items:center;justify-content:space-between;padding:4px 0;color:var(--muted)}
.ed-prop dd{width:150px;padding:7px 10px;border-radius:7px;background:var(--surface-2);color:var(--fg)}

/* Petits pictogrammes géométriques */
.g{display:inline-block;flex:none;width:18px;height:18px;color:var(--fg)}
.g1{border:2.5px solid;border-radius:50%}
.g2{border:2.5px solid;border-radius:3px}
.g3{border:2.5px solid;border-radius:4px;border-bottom-width:6px}
.g4{background:currentColor;clip-path:polygon(15% 0,100% 50%,15% 100%)}
.g5{background:currentColor;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.g6{width:14px;border:2.5px solid;border-top-width:7px;border-radius:2px}
.g7{border:2.5px solid;border-top-width:6px;border-radius:4px}
.g8{background:radial-gradient(circle,currentColor 2.6px,#0000 3px) 0 0/9px 9px}

/* Disciplines */
.fields{padding:44px var(--side) 30px;border-top:1px solid var(--hair)}
.fields ul{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:22px clamp(34px,6vw,90px);max-width:900px;margin:auto}
.fields li{display:flex;align-items:center;gap:10px;font-size:clamp(16px,1.5vw,21px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;opacity:.92}

/* Introduction + mur de projets */
.intro{position:relative;display:grid;grid-template-columns:minmax(300px,31%) 1fr;align-items:center;gap:30px;padding:70px 0 70px var(--side);overflow:hidden}
.intro h2,.head-split h2,.span-copy h3{font-size:clamp(26px,2.5vw,36px);line-height:1.12;letter-spacing:-.045em}
.intro-copy{position:relative;z-index:2}
.intro-copy p{margin:14px 0 22px;color:var(--muted);line-height:1.55}
.intro-copy b,.span-copy b,.bento p b,.lead b{font-weight:500;color:var(--fg)}
.wall{display:grid;gap:10px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 34%);mask-image:linear-gradient(90deg,#0000,#000 34%)}
.wall-row{overflow:hidden}
.wall-track{display:flex;gap:10px;width:max-content;animation:wall 60s linear infinite}
.wall-row.rev .wall-track{animation-direction:reverse}
.wall-row:nth-child(1) .wall-track{margin-left:-90px}
.wall-row:nth-child(3) .wall-track{margin-left:-190px;animation-duration:74s}
.tile{flex:none;width:clamp(210px,23vw,330px);aspect-ratio:1.55;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.tile-masterclass img{object-position:50% 12%}
.tile-motion img{object-position:center}
.tile-poster{display:grid;place-items:center;font:400 clamp(40px,5vw,74px)/1 Poster,sans-serif;text-transform:uppercase}
.tile-poster-red{background:var(--red);color:#fff}
.tile-poster-white{background:#fff;color:var(--red)}
.tile-poster-black{background:#111;color:#fff;-webkit-text-stroke:1.2px #fff;-webkit-text-fill-color:transparent}
@keyframes wall{to{transform:translateX(-50%)}}

/* Projets : anneau 3D */
.works{position:relative}
.works-pin{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;padding:110px var(--side) 40px;overflow:hidden;background:radial-gradient(#ffffff0d 1px,#0000 1px) 0 0/6px 6px}
.neon{position:absolute;inset:0;z-index:0;pointer-events:none}
.neon svg{width:100%;height:100%;fill:none;stroke:var(--glow);stroke-width:2;filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 26px var(--glow));opacity:.6}
.works h2{position:absolute;z-index:0;top:50%;left:0;right:0;translate:0 -70%;text-align:center;font-size:clamp(60px,10vw,150px);letter-spacing:-.06em;line-height:1}
.ring-view{position:relative;z-index:1;width:100%;height:min(62vh,560px);perspective:1500px}
.ring{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateZ(-9deg) rotateX(-9deg) rotateY(var(--spin,0deg))}
.panel{position:absolute;left:50%;top:50%;width:clamp(200px,24vw,350px);aspect-ratio:1.55;margin:calc(clamp(200px,24vw,350px)/-3.1) 0 0 calc(clamp(200px,24vw,350px)/-2);border-radius:12px;overflow:hidden;background:var(--surface-2);transform:rotateY(calc(var(--i)*40deg)) translateZ(clamp(300px,36vw,520px)) translateY(calc((var(--i) - 4)*26px));box-shadow:0 20px 50px -20px #000}
.panel img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.panel-print img{object-position:50% 12%}
.panel span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:99px;background:#000b;color:#fff;font-size:12px;font-weight:500;opacity:0;transition:opacity .3s}
.panel:hover span,.panel:focus-visible span{opacity:1}
.works-foot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;width:100%;margin-top:30px}
.works-foot h3{font-size:clamp(22px,2.2vw,32px);letter-spacing:-.04em}
.works-foot p{max-width:52ch;margin-top:8px;color:var(--muted)}
.motion .works{height:260vh}
.motion .works-pin{position:sticky;top:0;height:100svh}

/* Métiers et services */
.services,.approach,.faq{padding:clamp(80px,9vw,130px) var(--side)}
.head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:36px}
.head-split h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02}
.cells{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.cells li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:190px;padding:20px;border:1px solid var(--hair);border-radius:12px;background:var(--surface);text-align:center;font-size:14px;line-height:1.3;color:var(--muted);transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.cells li:hover{background:var(--surface-2);border-color:var(--muted);color:var(--fg)}
.cells-4{grid-template-columns:repeat(4,1fr)}
.cells-4 li{align-items:flex-start;justify-content:flex-end;gap:8px;min-height:230px;padding:22px;text-align:left}
.cells-4 .g{margin-bottom:auto}
.cells-4 b{font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--fg)}
.span-card{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.span-copy{position:relative;overflow:hidden;padding:34px;border:1px solid var(--hair);border-radius:12px;background:var(--surface) radial-gradient(#fff 1px,#0000 1.4px) 0 0/90px 70px,var(--surface) radial-gradient(#fff9 .8px,#0000 1.2px) 30px 40px/130px 110px}
[data-theme=light] .span-copy{background:var(--surface)}
.span-copy p{max-width:44ch;margin:12px 0 20px;color:var(--muted)}
.span-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.span-grid li{display:grid;place-items:center;min-height:104px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);font:400 clamp(18px,1.9vw,27px)/1 Poster,sans-serif;text-transform:uppercase;letter-spacing:.01em;transition:color .3s,background .3s}
.span-grid li:nth-child(4n){border-right:0}
.span-grid li:nth-child(n+5){border-bottom:0}
.span-grid li:hover{background:var(--red);color:#fff}

/* Bandeau */
.ticker{overflow:hidden;padding:22px 0;background:var(--surface-2);white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000)}
.ticker-track{display:inline-flex;align-items:center;animation:wall 44s linear infinite}
.ticker-track span{padding:0 20px;font-size:19px;letter-spacing:-.02em}
.ticker-track i{font-style:normal;color:var(--muted)}

/* Approche */
.approach>h2,.faq>h2{margin-bottom:34px;font-size:clamp(36px,4.6vw,62px);letter-spacing:-.05em;line-height:1.04}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.bento article{position:relative;overflow:hidden;display:flex;flex-direction:column;grid-column:span 4;min-height:380px;padding:28px 28px 0;border:1px solid var(--hair);border-radius:14px;background:var(--surface)}
.bento .b-wide{grid-column:span 7;min-height:520px}
.bento .b-tall{grid-column:span 5;min-height:520px}
.bento h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.04em}
.bento p{max-width:46ch;margin-top:8px;color:var(--muted)}
.b-shots{display:flex;gap:14px;margin:auto -90px 0;padding-top:30px}
.b-shots img{flex:1;min-width:0;height:300px;border-radius:10px 10px 0 0;object-fit:cover;object-position:0 0}
.b-shots img:nth-child(2){flex:2.4}
.b-shots img:nth-child(odd){object-position:center}
.b-posters{position:relative;flex:1;margin-top:20px;min-height:300px;background:radial-gradient(60% 60% at 50% 100%,color-mix(in srgb,var(--glow) 70%,#0000),#0000)}
.b-posters i{position:absolute;bottom:-40px;left:14%;width:42%;aspect-ratio:.72;display:grid;place-items:center;border-radius:10px;background:var(--red);color:#fff;font:400 clamp(34px,3.6vw,56px)/1 Poster,sans-serif;font-style:normal;text-transform:uppercase;rotate:-7deg;box-shadow:0 30px 50px -20px #000}
.b-posters i+i{left:48%;bottom:-70px;background:#fff;color:var(--red);rotate:6deg}
.b-dots{flex:1;margin:24px -28px 0;background:radial-gradient(circle,var(--dim) 3px,#0000 3.5px) 0 0/26px 26px;-webkit-mask-image:radial-gradient(70% 90% at 50% 100%,#000,#0000);mask-image:radial-gradient(70% 90% at 50% 100%,#000,#0000)}
.b-dots:after{content:'';display:block;width:14px;height:14px;margin:60px auto 0;border-radius:50%;background:var(--red);box-shadow:0 0 0 8px color-mix(in srgb,var(--glow) 30%,#0000),0 0 40px 10px var(--glow)}
.b-axis{position:relative;flex:1;margin-top:24px;border-top:1px solid var(--hair);background:linear-gradient(90deg,#0000 calc(50% - .5px),var(--hair) 0,var(--hair) calc(50% + .5px),#0000 0)}
.b-axis i{position:absolute;left:68%;top:32%;width:16px;height:16px;border-radius:50%;background:var(--red);box-shadow:0 0 30px 6px var(--glow)}
.b-rise{flex:1;display:flex;align-items:flex-end;gap:8px;margin-top:24px}
.b-rise i{flex:1;border-radius:6px 6px 0 0;background:var(--chip)}
.b-rise i:nth-child(1){height:22%}.b-rise i:nth-child(2){height:38%}.b-rise i:nth-child(3){height:55%}.b-rise i:nth-child(4){height:74%}
.b-rise i:nth-child(5){height:96%;background:var(--red);box-shadow:0 0 50px -6px var(--glow)}
.b-table{width:100%;margin-top:26px;border-collapse:collapse;font-size:14px}
.b-table th{padding:12px 14px;border-bottom:1px solid var(--hair);text-align:left;font-size:12px;font-weight:400;color:var(--muted)}
.b-table td{padding:15px 14px;border-bottom:1px solid var(--hair);font-weight:500}
.b-table td+td{font-weight:400;color:var(--muted)}
.b-table i{display:block;width:26px;height:16px;border-radius:4px;background:var(--red)}
.bento .btn{align-self:flex-start;margin:22px 0 28px}

/* Questions */
.faq{max-width:calc(900px + var(--side)*2);margin:auto}
.faq>h2{text-align:center}
.faq details{margin-bottom:8px;border:1px solid var(--hair);border-radius:12px;background:var(--surface)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;list-style:none;cursor:pointer;font-size:17px;font-weight:500;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';flex:none;font-size:22px;font-weight:300;line-height:1;color:var(--muted);transition:rotate .45s var(--ease)}
.faq details[open] summary:after{rotate:45deg}
.faq details p{padding:0 22px 22px;max-width:64ch;color:var(--muted)}
.faq a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}

/* Appel final + grand symbole */
.cta{position:relative;isolation:isolate;padding:clamp(90px,10vw,150px) var(--side) 0;text-align:center;overflow:hidden}
.cta h2{font-size:clamp(34px,5.2vw,76px);line-height:1.04;letter-spacing:-.055em}
.cta .lead{margin-top:20px}
.note{margin-top:18px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.bigmark{display:grid;place-items:start center;height:clamp(200px,26vw,360px);margin-top:60px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 20%,#0000 96%);mask-image:linear-gradient(#000 20%,#0000 96%)}
.bigmark svg{width:clamp(240px,31vw,440px);overflow:visible;fill:var(--fg);stroke:var(--fg);stroke-width:0;filter:blur(2.5px) drop-shadow(0 0 40px color-mix(in srgb,var(--glow) 60%,#0000));translate:0 calc((1 - var(--e,1))*60px)}
.motion .bigmark svg{fill:#0000;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.motion .bigmark.in svg{animation:draw 1.8s var(--ease) forwards,fill-in .9s ease 1.5s forwards}

/* Pied de page */
.foot{position:relative;padding:0 var(--side) 26px;font-size:14px}
.foot-social{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.foot-social a{display:flex;justify-content:space-between;padding:22px 18px;font-weight:500;transition:background .3s,color .3s}
.foot-social li+li{border-left:1px solid var(--hair)}
.foot-social i{font-style:normal;color:var(--muted);transition:translate .4s var(--ease)}
.foot-social a:hover{background:var(--surface)}
.foot-social a:hover i{translate:5px 0;color:var(--glow)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr)}
.foot-cols div{display:grid;align-content:start;gap:12px;padding:30px 18px 40px}
.foot-cols div+div{border-left:1px solid var(--hair)}
.foot-cols h2{margin-bottom:6px;font-size:13px;font-weight:400;color:var(--muted)}
.foot-cols a,.foot-cols span{width:fit-content;font-weight:500;transition:color .3s}
.foot-cols a:hover{color:var(--glow)}
.foot-end{padding-top:22px;border-top:1px solid var(--hair);text-align:center;font-size:13px;color:var(--muted)}

/* Apparitions */
.motion [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.motion [data-reveal].in{opacity:1;transform:none}
.motion .hero>:not(.bars){animation:rise 1s var(--ease) backwards}
.motion .hero h1{animation-delay:.08s}
.motion .hero .lead{animation-delay:.16s}
.motion .hero .actions{animation-delay:.24s}
.motion .editor{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

@media(max-width:1100px){
.ed-body{grid-template-columns:1fr 270px}
.ed-left{display:none}
.cells{grid-template-columns:repeat(3,1fr)}
.cells-4{grid-template-columns:repeat(2,1fr)}
.bento article,.bento .b-wide,.bento .b-tall{grid-column:span 6}
}
@media(max-width:980px){
.top-in{grid-template-columns:1fr auto}
.burger{display:block}
.top-nav{position:absolute;top:calc(100% + 8px);left:var(--pad);right:var(--pad);display:grid;gap:0;padding:8px 18px;border:1px solid var(--hair);border-radius:16px;background:var(--surface);font-size:20px;visibility:hidden;opacity:0;translate:0 -8px;transition:opacity .35s var(--ease),translate .35s var(--ease),visibility 0s .35s}
.top-nav.open{visibility:visible;opacity:1;translate:none;transition-delay:0s}
.top-nav a{padding:12px 0;color:var(--fg)}
.top-nav a+a{border-top:1px solid var(--hair)}
.top.stuck .top-in{max-width:calc(100% - 20px)}
.top-end .btn{display:none}
}
@media(max-width:760px){
.hero{padding-top:120px}
.editor{margin-top:44px}
.ed-top{grid-template-columns:auto 1fr}
.ed-mid{display:none}
.ed-body{grid-template-columns:1fr;height:auto}
.ed-canvas{height:340px}
.ed-right{display:grid;grid-template-columns:1fr 1fr;border-left:0;border-top:1px solid var(--hair);-webkit-mask-image:none;mask-image:none}
.ed-right .ed-prop[aria-hidden]{display:none}
.po-type{font-size:calc(var(--fit,96px)*.62)}
.fields ul{grid-template-columns:repeat(2,auto);gap:18px 30px}
.intro{grid-template-columns:1fr;padding:60px 0}
.intro-copy{padding:0 var(--pad)}
.wall{-webkit-mask-image:none;mask-image:none}
.works h2{translate:0 -160%}
.works-foot{flex-direction:column;align-items:flex-start}
.cells{grid-template-columns:repeat(2,1fr)}
.cells li{min-height:140px}
.cells-4{grid-template-columns:1fr}
.cells-4 li{min-height:170px}
.span-card{grid-template-columns:1fr}
.span-grid{grid-template-columns:repeat(2,1fr)}
.span-grid li{border-bottom:1px solid var(--hair)!important;border-right:1px solid var(--hair)!important}
.bento{grid-template-columns:1fr}
.bento article,.bento .b-wide,.bento .b-tall{grid-column:auto;min-height:340px}
.b-shots{margin-inline:-40px}
.b-shots img{height:200px}
.foot-social,.foot-cols{grid-template-columns:1fr 1fr}
.foot-social li:nth-child(3),.foot-cols div:nth-child(3){border-left:0}
.foot-social li:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Logo : il se dessine à l’ouverture, se retourne au survol */
.brand .mark{transition:color .3s}
.brand:hover .mark{animation:flip .9s var(--ease);color:var(--glow)}
@keyframes flip{to{transform:rotateY(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fill-in{to{fill:var(--fg);stroke-width:0}}
@keyframes show{to{opacity:1;transform:none}}
.opening{display:none}
.opening-on .opening{position:fixed;z-index:400;inset:0;display:grid;place-items:center;overflow:hidden;background:#000;color:#fff;--fg:#fff;animation:open-out 1s var(--ease) 2.3s forwards}
.opening-rows{position:absolute;inset:-10% -10%;display:grid;align-content:center;gap:10px;rotate:-7deg;opacity:0;animation:rows 2.6s ease forwards}
.opening-logo{position:relative;display:grid;justify-items:center;gap:22px}
.opening-logo svg{width:86px;overflow:visible;fill:#0000;stroke:#fff;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 26px var(--glow));animation:draw 1.3s var(--ease) .15s forwards,fill-in .5s ease 1.25s forwards}
.opening-logo b{font-size:22px;font-weight:600;letter-spacing:-.03em;opacity:0;transform:translateY(14px);animation:show .7s var(--ease) 1.3s forwards}
@keyframes rows{30%{opacity:.26}100%{opacity:.14}}
@keyframes open-out{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.opening-on.motion .hero>:not(.bars){animation-delay:2.5s}
.opening-on{--hold:2500ms}

/* Titres : les lettres arrivent floues puis se posent */
.motion .wd{display:inline-block;white-space:nowrap}
.motion .ch{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.18em);animation:show 1s var(--ease) forwards,unblur 1s var(--ease) forwards;animation-delay:calc(var(--n)*24ms + var(--hold,0ms) + 120ms)}
@keyframes unblur{to{filter:none}}

/* Menu plein écran */
.nav-cta{display:none}
.burger i,.burger i:before{transition:rotate .4s var(--ease),translate .4s var(--ease)}
.burger[aria-expanded=true] i{rotate:45deg}
.burger[aria-expanded=true] i:before{translate:0;rotate:90deg}
html:has(.top-nav.open){overflow:hidden}
@media(max-width:980px){
.top.menu-open .top-in{max-width:var(--wrap);background:none;border-color:#0000;backdrop-filter:none;-webkit-backdrop-filter:none}
.top-nav{position:fixed;z-index:-1;inset:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding:110px var(--pad) 40px;border:0;border-radius:0;background:var(--bg);font-size:clamp(34px,9vw,56px);font-weight:600;letter-spacing:-.05em;line-height:1.16;opacity:1;translate:none;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
.top-nav.open{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease),visibility 0s}
.top-nav a{padding:5px 0;border:0!important;color:var(--muted);opacity:0;translate:0 26px;transition:opacity .5s var(--ease),translate .7s var(--ease),color .3s}
.top-nav a:hover,.top-nav .on{color:var(--fg)}
.top-nav.open a{opacity:1;translate:none}
.top-nav.open a:nth-child(1){transition-delay:.16s}.top-nav.open a:nth-child(2){transition-delay:.22s}.top-nav.open a:nth-child(3){transition-delay:.28s}.top-nav.open a:nth-child(4){transition-delay:.34s}.top-nav.open a:nth-child(5){transition-delay:.4s}.top-nav.open a:nth-child(6){transition-delay:.48s}
.top-nav .nav-cta{display:inline-flex;align-items:center;align-self:flex-start;height:52px;margin-top:28px;padding:0 26px;border-radius:99px;background:var(--fg);color:var(--bg);font-size:17px;font-weight:500;letter-spacing:-.01em}
}

/* Pictogrammes vivants et halo qui suit le pointeur */
.cells .g{animation:g-float 4.6s ease-in-out infinite}
.cells li:nth-child(even) .g{animation-direction:reverse;animation-duration:5.4s}
.cells li:nth-child(3n) .g{animation-name:g-turn;animation-duration:7s}
.cells li:hover .g{animation:g-pop .7s var(--ease)}
@keyframes g-float{50%{transform:translateY(-5px)}}
@keyframes g-turn{50%{transform:rotate(45deg) scale(.9)}}
@keyframes g-pop{40%{transform:scale(1.35) rotate(-8deg)}}
.cells li,.faq details,.span-copy,.stats li{position:relative;overflow:hidden}
.cells li:after,.bento article:after,.faq details:after,.stats li:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--glow) 24%,#0000),#0000 70%);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.cells li:hover:after,.bento article:hover:after,.faq details:hover:after,.stats li:hover:after{opacity:1}

/* Le studio en chiffres */
.stats{padding:0 var(--side) clamp(40px,5vw,70px)}
.stats ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats li{display:flex;flex-direction:column;gap:6px;padding:30px 28px;border:1px solid var(--hair);border-radius:14px;background:var(--surface)}
.stats b{font-size:clamp(56px,7.6vw,112px);font-weight:600;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.stats b i{font-style:normal;font-weight:200;color:var(--glow)}
.stats span{color:var(--muted)}
@media(max-width:760px){.stats ul{grid-template-columns:1fr}}

/* Réalisations réelles */
.board-apa{aspect-ratio:1.5}
.board-square{aspect-ratio:1}
.board-square img{object-position:50% 20%}
.tile-octobre img,.panel-print img{object-position:50% 16%}
.tile-film img{object-position:center}
.panel video{width:100%;height:100%;object-fit:cover;background:#fff}
.b-shots img:nth-child(odd){object-position:50% 14%}
.b-posters img{position:absolute;bottom:-46px;left:12%;width:44%;aspect-ratio:.82;border-radius:10px;object-fit:cover;object-position:50% 10%;rotate:-7deg;box-shadow:0 30px 50px -20px #000}
.b-posters img+img{left:47%;bottom:-74px;rotate:6deg;aspect-ratio:1}
.b-img{flex:1;min-height:210px;margin:24px -28px 0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 34%);mask-image:linear-gradient(#0000,#000 34%)}
.b-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bento article:hover .b-img img{transform:scale(1.05)}

/* Pictogrammes */
.ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.fields .ic{width:22px;height:22px;color:var(--glow)}
.cells .ic{width:26px;height:26px;color:var(--fg);animation:g-float 4.6s ease-in-out infinite}
.cells li:nth-child(even) .ic{animation-direction:reverse;animation-duration:5.4s}
.cells li:hover .ic{animation:g-pop .7s var(--ease);color:var(--glow)}
.cells-4 .ic{margin-bottom:auto;width:30px;height:30px}
.ed-tools i{display:grid;place-items:center;background:none!important;font-style:normal;color:var(--muted)}
.ed-tools i.on{background:var(--red)!important;color:#fff}
.ed-tools .ic{width:17px;height:17px}
.foot-social span{display:flex;align-items:center;gap:10px}
.foot-social .ic{width:18px;height:18px}

/* Fond : grille de points, aurores lentes, grain */
body:before{content:'';position:fixed;z-index:-3;inset:0;background:radial-gradient(color-mix(in srgb,var(--fg) 9%,#0000) 1px,#0000 1.3px) 0 0/24px 24px;-webkit-mask-image:radial-gradient(130% 90% at 50% 0,#000 20%,#0000 90%);mask-image:radial-gradient(130% 90% at 50% 0,#000 20%,#0000 90%);pointer-events:none}
body:after{content:'';position:fixed;z-index:290;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.aurora{position:fixed;z-index:-2;inset:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:52vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--glow),#0000 66%);filter:blur(70px);opacity:.2;animation:aurora 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){left:-18vw;top:22vh}
.aurora i:nth-child(2){right:-20vw;top:55vh;animation-duration:34s;animation-delay:-9s;opacity:.16}
.aurora i:nth-child(3){left:30vw;top:-34vw;width:40vw;opacity:.1;animation-duration:40s;animation-delay:-20s}
[data-theme=light] .aurora i{opacity:.12}
@keyframes aurora{to{transform:translate(9vw,-12vh) scale(1.18)}}
.editor,.ed-canvas,.ticker{position:relative}

/* Verre liquide */
:root{--glass:linear-gradient(135deg,#ffffff1c,#ffffff08 42%,#ffffff12);--glass-line:#ffffff26;--glass-hi:inset 0 1px 0 #ffffff47,inset 0 -1px 0 #ffffff12,inset 0 0 22px #ffffff0a;--glass-drop:0 22px 46px -26px #000}
[data-theme=light]{--glass:linear-gradient(135deg,#ffffffd9,#ffffff8c 42%,#ffffffbf);--glass-line:#00000017;--glass-hi:inset 0 1px 0 #fff,inset 0 -1px 0 #0000000a,inset 0 0 22px #ffffff80;--glass-drop:0 22px 46px -28px #00000059}
.top.stuck .top-in,.tag,.eyebrow,.btn-ghost,.text-link,.ed-tools,.panel span,.switch,.burger{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--glass-drop);backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7)}
.liquid .top.stuck .top-in{backdrop-filter:url(#liquid) blur(14px) saturate(1.8)}
.top.menu-open .top-in{box-shadow:none}
.cells li,.bento article,.faq details,.stats li,.span-copy,.project,.brief-form,.case-art{background:var(--glass);border-color:var(--glass-line);box-shadow:var(--glass-hi)}
.btn-solid{box-shadow:inset 0 1px 0 #fff,inset 0 -6px 12px -6px #00000040,0 10px 26px -12px color-mix(in srgb,var(--fg) 60%,#0000)}
/* Reflet qui traverse le verre */
.top-in,.btn-ghost,.text-link,.tag,.eyebrow{position:relative;overflow:hidden}
.top.stuck .top-in:before,.btn-ghost:before,.text-link:before,.tag:before,.eyebrow:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,#0000 38%,#ffffff40 50%,#0000 62%) -120% 0/250% 100% no-repeat;pointer-events:none;transition:background-position 1s var(--ease)}
.btn-ghost:hover:before,.text-link:hover:before,.top.stuck .top-in:hover:before{background-position:220% 0}
.tag:before,.eyebrow:before{animation:sheen 5.5s var(--ease) infinite}
@keyframes sheen{0%,55%{background-position:-120% 0}100%{background-position:220% 0}}
.top-in>.brand,.top-in>.top-end{position:relative}
.top.menu-open .top-in{overflow:visible;background:none!important;border-color:#0000!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.top.menu-open .top-in:before{display:none}
@media(max-width:980px){.top .top-nav,.top.stuck .top-nav{gap:0;font-size:clamp(34px,9vw,56px)}}
[data-theme=light]{--glass:linear-gradient(135deg,#fff,#f4f4f4 60%,#fafafa);--glass-drop:0 18px 40px -26px #00000066}
[data-theme=light] .cells li,[data-theme=light] .bento article,[data-theme=light] .faq details,[data-theme=light] .stats li,[data-theme=light] .project,[data-theme=light] .brief-form{box-shadow:var(--glass-hi),var(--glass-drop)}

/* Projets : fond animé */
.works-pin{background:radial-gradient(color-mix(in srgb,var(--fg) 14%,#0000) 1px,#0000 1.4px) 0 0/26px 26px;animation:dots 9s linear infinite}
@keyframes dots{to{background-position:26px 52px}}
.works-pin:before,.works-pin:after{content:'';position:absolute;z-index:0;width:46vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--glow),#0000 64%);filter:blur(60px);opacity:.3;pointer-events:none;animation:orbit 17s ease-in-out infinite alternate}
.works-pin:before{left:-12vw;top:-12vh}
.works-pin:after{right:-14vw;bottom:-16vh;animation-duration:23s;animation-direction:alternate-reverse}
@keyframes orbit{to{transform:translate(20vw,16vh) scale(1.3)}}
.neon svg{animation:sway 15s ease-in-out infinite alternate}
@keyframes sway{to{transform:scale(1.1) rotate(2.5deg)}}
.neon path{stroke-linecap:round}
.neon .base{opacity:.3}
.neon .run{stroke-width:3.2;stroke-dasharray:110 890;animation:flow 6s linear infinite}
.neon .run:nth-of-type(7){animation-duration:8.5s;animation-direction:reverse}
.neon .run:nth-of-type(8){animation-duration:11s;animation-delay:-3s}
.neon .run:nth-of-type(9){animation-duration:7.5s;animation-direction:reverse;animation-delay:-2s}
.neon .run:nth-of-type(10){animation-duration:9.5s;animation-delay:-5s}
@keyframes flow{to{stroke-dashoffset:-1000}}
.panel span{display:inline-flex;align-items:center;gap:7px}
.panel span .ic{width:14px;height:14px}
.foot-cols span{display:flex;align-items:center;gap:9px}
.foot-cols .ic{width:17px;height:17px;color:var(--glow)}
.top.stuck .top-in{background:var(--glass),color-mix(in srgb,var(--bg) 66%,#0000)}
.liquid .top.stuck .top-in{backdrop-filter:url(#liquid) blur(22px) saturate(1.8)}

/* Fondus et performance */
.sprite{pointer-events:none}
/* a. Ce qui coûtait cher */
body:after{mix-blend-mode:normal;opacity:.035}
.aurora i{filter:none;animation:none;opacity:.16;background:radial-gradient(circle,var(--glow),color-mix(in srgb,var(--glow) 30%,#0000) 38%,#0000 70%)}
.aurora i:nth-child(1){left:-22vw;top:16vh}
.aurora i:nth-child(2){right:-24vw;top:62vh}
.liquid .top.stuck .top-in,.top.stuck .top-in{backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6)}
.cells li,.bento article,.faq details,.stats li,.span-copy{backdrop-filter:none}
.cells .ic,.cells li:nth-child(even) .ic,.cells .g{animation:none}
.panel{box-shadow:none}
.is-off,.is-off *{animation-play-state:paused!important}
.services,.approach,.stats,.faq,.foot{content-visibility:auto;contain-intrinsic-size:auto 900px}
.ring{will-change:transform}
/* b. Section projets : canevas + halo qui suit le pointeur */
.works-pin{background:none;animation:none}
.works-pin:before,.works-pin:after{display:none}
.works-bg{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(color-mix(in srgb,var(--fg) 12%,#0000) 1px,#0000 1.4px) 0 0/26px 26px;-webkit-mask-image:linear-gradient(#0000,#000 18%,#000 82%,#0000);mask-image:linear-gradient(#0000,#000 18%,#000 82%,#0000)}
.flow{position:absolute;inset:0;width:100%;height:100%}
.works-spot{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 34%,#0000),#0000 66%);transform:translate3d(50vw,50vh,0);transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
/* c. Fondus : plus de coupes nettes entre les blocs */
.fields{border-top:0}
.hero:after,.page-hero:after{content:'';position:absolute;z-index:1;inset:auto 0 0;height:clamp(90px,14vw,190px);background:linear-gradient(#0000,var(--bg));pointer-events:none}
.hero>*:not(.bars):not(.editor),.page-hero>*:not(.bars){position:relative;z-index:2}
.page-hero{border-bottom:0}
.bars{-webkit-mask-image:linear-gradient(#000 70%,#0000);mask-image:linear-gradient(#000 70%,#0000)}
.editor{border-radius:16px;border-bottom:1px solid var(--hair);-webkit-mask-image:linear-gradient(#000 72%,#0000);mask-image:linear-gradient(#000 72%,#0000)}
.ticker{padding:44px 0;background:linear-gradient(#0000,var(--surface-2) 34%,var(--surface-2) 66%,#0000)}
.intro{-webkit-mask-image:linear-gradient(#0000,#000 12%,#000 88%,#0000);mask-image:linear-gradient(#0000,#000 12%,#000 88%,#0000)}
.caps,.cta{border:0}
.foot-social{border-top-color:#0000;background:linear-gradient(90deg,#0000,var(--hair),#0000) top/100% 1px no-repeat}
.foot-end{border-top:0;background:linear-gradient(90deg,#0000,var(--hair),#0000) top/100% 1px no-repeat}
.cells li,.bento article,.faq details,.stats li,.span-copy,.span-grid,.plan{border-radius:20px}
.tile,.panel{border-radius:14px}
@media(hover:none){.works-spot{display:none}.wall-track{animation-duration:90s}}
@media(max-width:760px){.editor{-webkit-mask-image:none;mask-image:none}.hero:after{height:50px}.hero{padding-bottom:40px}}

/* Éditeur manipulable */
.editor{z-index:2;-webkit-mask-image:none;mask-image:none;border-radius:18px}
.hero{padding-bottom:clamp(60px,7vw,110px)}
.ed-left,.ed-right{-webkit-mask-image:none;mask-image:none;overflow:auto}
button.ed-file{cursor:pointer;transition:background .3s}
button.ed-file:hover{background:var(--chip)}
.ed-seg button{display:grid;place-items:center;width:66px;height:26px;border-radius:6px;color:var(--muted);transition:background .3s,color .3s}
.ed-seg button[aria-pressed=true]{background:var(--chip);color:var(--fg)}
.ed-seg .ic{width:16px;height:16px}
.ed-tabs button{padding:7px 0;border-radius:8px;color:var(--muted);transition:background .3s,color .3s}
.ed-tabs button:hover{color:var(--fg)}
.ed-tabs button[aria-pressed=true]{background:var(--chip);color:var(--fg);font-weight:600}
.ed-layers li{padding:0}
.ed-layers li:before{pointer-events:none}
.ed-layers li>*{display:block;width:100%;padding:9px 10px 9px 44px;border-radius:8px;text-align:left;color:var(--muted);transition:background .3s,color .3s}
.ed-layers li>*:hover{background:var(--surface-2);color:var(--fg)}
.ed-layers li>.on{background:var(--red);color:#fff;font-weight:600}
.ed-fonds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-fonds button{display:grid;gap:8px;padding:8px;border-radius:10px;border:1px solid var(--hair);font-weight:500;color:var(--muted);transition:border-color .3s,color .3s}
.ed-fonds i{display:block;height:54px;border-radius:6px;background:#000;border:1px solid var(--hair)}
.ed-fonds [data-theme-set=light] i{background:#fff}
.ed-fonds button[aria-pressed=true]{border-color:var(--glow);color:var(--fg)}
.ed-hint{margin-top:12px;font-size:12px;line-height:1.45;color:var(--muted)}
.ed-open{margin-top:12px;width:100%}
.ed-canvas{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:default;outline-offset:-2px}
.ed-canvas[data-tool=pan]{cursor:grab}
.ed-canvas[data-tool=zoom]{cursor:zoom-in}
.ed-canvas.dragging{cursor:grabbing}
.ed-boards{transform-origin:0 50%}
.ed-boards.free{animation:none;transition:transform .5s var(--ease)}
.ed-canvas.dragging .ed-boards{transition:none}
.board{position:relative;cursor:pointer;outline-offset:-2px;transition:box-shadow .3s,aspect-ratio .6s var(--ease)}
.board img{pointer-events:none}
.board:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--glow) 55%,#0000)}
.board.sel{box-shadow:inset 0 0 0 3px var(--glow),0 0 50px -6px var(--glow)}
.board.sel:after{content:attr(data-name);position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:6px;background:var(--glow);color:#fff;font:600 11px/1.2 Studio,sans-serif;letter-spacing:.02em;text-transform:none;-webkit-text-fill-color:#fff;-webkit-text-stroke:0}
.board:hover img,.board.sel img{filter:none}
.is-mobile .board-web,.is-mobile .board-apa,.is-mobile .board-square{aspect-ratio:.5}
.ed-tools button{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--muted);transition:background .3s,color .3s,scale .2s}
.ed-tools button:hover{color:var(--fg);background:var(--chip)}
.ed-tools button:active{scale:.92}
.ed-tools button[aria-pressed=true]{background:var(--red);color:#fff}
.ed-tools .ed-reset{width:auto;padding:0 9px;font-size:12px;font-weight:600;color:var(--fg)}
.editor.no-left .ed-body{grid-template-columns:1fr 300px}
.editor.no-left .ed-left{display:none}
@media(max-width:1100px){.editor.no-left .ed-body{grid-template-columns:1fr 270px}}
@media(max-width:760px){.editor.no-left .ed-body{grid-template-columns:1fr}.ed-right .ed-prop[aria-live]{display:block;grid-column:1/-1}.ed-seg button{width:44px}}
.ed-tools{background:var(--glass),color-mix(in srgb,var(--bg) 72%,#0000)}

/* Pied de page en verre liquide : une plaque translucide qui se fond dans la page par le haut */
/* Pied de page en verre liquide */
.foot{position:relative;isolation:isolate;content-visibility:visible;margin:0 max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));padding:clamp(40px,5vw,70px) clamp(10px,1.6vw,22px) 26px;border-radius:32px 32px 0 0}
.foot:before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--glass),color-mix(in srgb,var(--bg) 46%,#0000);box-shadow:inset 0 0 0 1px var(--glass-line),var(--glass-hi);backdrop-filter:blur(16px) saturate(1.7);-webkit-backdrop-filter:blur(16px) saturate(1.7);-webkit-mask-image:linear-gradient(#0000,#000 150px);mask-image:linear-gradient(#0000,#000 150px)}
.foot:after{content:'';position:absolute;z-index:-2;left:10%;right:10%;bottom:0;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 60%,#0000),#0000);opacity:.55;pointer-events:none}
main:has(.cta)+.foot{margin-top:clamp(-170px,-12vw,-90px)}
main:has(.contact-section)+.foot,main:has(.inquiry)+.foot{margin-top:-40px}
.foot-social{border:0;background:none;gap:8px;padding:0 clamp(6px,1vw,12px)}
.foot-social li+li{border:0}
.foot-social a{position:relative;overflow:hidden;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line),var(--glass-hi);transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.foot-social a:before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#0000 38%,#ffffff38 50%,#0000 62%) -130% 0/260% 100% no-repeat;transition:background-position 1s var(--ease);pointer-events:none}
.foot-social a:hover{translate:0 -3px;background:var(--glass);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow) 60%,var(--glass-line)),var(--glass-hi),0 18px 40px -22px var(--glow)}
.foot-social a:hover:before{background-position:230% 0}
.foot-cols div+div{border-left:0;background:linear-gradient(var(--hair),#0000) left/1px 100% no-repeat}
.cta{padding-bottom:0}
@media(max-width:760px){.foot{margin-inline:8px;border-radius:24px 24px 0 0}.foot-social li:nth-child(n+3){border-top:0}main:has(.cta)+.foot{margin-top:-70px}}

/* Outils */
.tools{padding-top:26px}
.tools h2{margin-bottom:26px;text-align:center;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.tools ul{gap:26px clamp(34px,6vw,84px)}
.tools li{gap:12px;transition:translate .5s var(--ease),opacity .4s}
.tools img{width:auto;height:30px;border-radius:5px;transition:scale .5s var(--ease)}
.tools li:hover{translate:0 -3px;opacity:1}
.tools li:hover img{scale:1.14}
@media(max-width:760px){.tools img{height:24px}}

/* Outils en noir et blanc (adaptés au thème), défilement continu sur mobile */
.tools img{filter:grayscale(1) invert(1) contrast(1.15) brightness(1.12)}
[data-theme=light] .tools img{filter:grayscale(1) contrast(1.12)}
.tools li:hover img{filter:grayscale(1) invert(1) contrast(1.3) brightness(1.3)}
[data-theme=light] .tools li:hover img{filter:grayscale(1) contrast(1.4) brightness(.8)}
.tools li[aria-hidden]{display:none}
@media(max-width:760px){
.tools{padding-inline:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14%,#000 86%,#0000);mask-image:linear-gradient(90deg,#0000,#000 14%,#000 86%,#0000)}
.tools.run ul{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;max-width:none;margin:0;animation:wall 26s linear infinite}
.tools.run li{flex:none;padding:0 20px}
.tools.run li[aria-hidden]{display:flex}
}

/* Curseur : une flèche arrondie rouge, fin liseré blanc pour rester visible sur le rouge */
:root{--cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M7 6 25 16 16 18.5 11.5 26z' fill='none' stroke='%23fff' stroke-width='5.4' stroke-linejoin='round'/%3E%3Cpath d='M7 6 25 16 16 18.5 11.5 26z' fill='%23ce2923' stroke='%23ce2923' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") 5 4}
html,.ed-canvas[data-tool=select]{cursor:var(--cur),auto}
a,button,summary,label,select,[role=button],.board,.panel,.project-image,.faq summary{cursor:var(--cur),pointer}

/* Logo dans l’en-tête */
.brand img{display:block;width:auto;height:46px;transition:height .5s var(--ease),scale .5s var(--ease)}
.brand:hover img{scale:1.05}
.top.stuck .brand img{height:38px}
@media(max-width:980px){.brand img{height:40px}.top.stuck .brand img{height:36px}}
.brand img{filter:brightness(0) invert(1)}
[data-theme=light] .brand img{filter:brightness(0)}
.ed-file img{display:block;width:auto;height:26px;filter:brightness(0) invert(1)}
[data-theme=light] .ed-file img{filter:brightness(0)}
.ed-file{padding:6px 10px}

/* Éditeur : animations */
.ed-boards,.ed-boards.free{animation:none;transition:none;will-change:transform}
.ed-boards.glide{transition:transform .55s var(--ease)}
.ed-canvas.dragging .ed-boards{transition:none}
/* Les plans arrivent l’un après l’autre quand la fenêtre entre à l’écran */
.motion .ed-canvas .board{opacity:0;translate:0 34px;transition:opacity .8s var(--ease),translate .9s var(--ease),box-shadow .3s,aspect-ratio .6s var(--ease)}
.motion .ed-canvas.seen .board{opacity:1;translate:none}
.motion .ed-canvas.seen .board:nth-child(2){transition-delay:.1s,.1s,0s,0s}
.motion .ed-canvas.seen .board:nth-child(3){transition-delay:.2s,.2s,0s,0s}
.motion .ed-canvas.seen .board:nth-child(4){transition-delay:.3s,.3s,0s,0s}
.motion .ed-canvas.seen .board:nth-child(5){transition-delay:.4s,.4s,0s,0s}
.motion .ed-tools{opacity:0;translate:-50% 20px;transition:opacity .7s var(--ease) .5s,translate .8s var(--ease) .5s}
.motion .ed-canvas.seen .ed-tools{opacity:1;translate:-50% 0}
/* Survol et sélection : un cadre posé par-dessus l’image (l’ancien passait dessous), poignées aux angles */
.board:hover,.board.sel{box-shadow:none}
.board:before{content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;border:2px solid #0000;pointer-events:none;transition:border-color .3s}
.board:hover:before{border-color:color-mix(in srgb,var(--glow) 60%,#0000)}
.board.sel:before{border-color:var(--glow);background:linear-gradient(#fff,#fff) 0 0/9px 9px no-repeat,linear-gradient(#fff,#fff) 100% 0/9px 9px no-repeat,linear-gradient(#fff,#fff) 0 100%/9px 9px no-repeat,linear-gradient(#fff,#fff) 100% 100%/9px 9px no-repeat;box-shadow:0 0 0 1px var(--glow),0 0 46px -4px var(--glow);animation:sel-pulse 2.2s ease-in-out infinite}
.board.sel:after{z-index:3;animation:rise .45s var(--ease)}
@keyframes sel-pulse{50%{box-shadow:0 0 0 1px var(--glow),0 0 70px 2px var(--glow)}}
/* Petits retours : outil choisi, panneau qui change, sélection qui s’inscrit, avatars « en ligne » */
.ed-tools button[aria-pressed=true]{animation:ed-pop .45s var(--ease)}
@keyframes ed-pop{40%{scale:1.22}}
.ed-pane:not([hidden]){animation:rise .45s var(--ease)}
.ed-prop.flash dd,.ed-prop.flash .ed-open{animation:ed-flash .7s var(--ease)}
@keyframes ed-flash{from{background:var(--glow);color:#fff}}
.ed-users i:first-child{animation:ed-ping 2.6s ease-out infinite}
@keyframes ed-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--glow) 70%,#0000)}70%,100%{box-shadow:0 0 0 9px #0000}}
.ed-size span{display:inline-block;min-width:2.6em;text-align:right}
/* Pointeurs des collaborateurs */
.ed-cursor{position:absolute;z-index:3;left:30%;top:40%;width:22px;height:22px;background:var(--cur-shape) 0 0/22px no-repeat;pointer-events:none;transition:opacity .4s;--cur-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 6 25 16 16 18.5 11.5 26z' fill='none' stroke='%23fff' stroke-width='5.4' stroke-linejoin='round'/%3E%3Cpath d='M7 6 25 16 16 18.5 11.5 26z' fill='%23ce2923' stroke='%23ce2923' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ed-cursor b{position:absolute;left:18px;top:18px;padding:3px 8px;border-radius:4px 10px 10px 10px;background:var(--red);color:#fff;font:600 11px/1.3 Studio,sans-serif;white-space:nowrap}
.ed-cursor.c1{animation:cur-a 15s var(--ease) infinite}
.ed-cursor.c2{filter:grayscale(1) brightness(2.4);animation:cur-b 19s var(--ease) infinite}
.ed-cursor.c2 b{background:#fff;color:#111}
@keyframes cur-a{0%,8%{left:18%;top:28%}26%,34%{left:44%;top:58%}52%,60%{left:70%;top:24%}78%,86%{left:36%;top:72%}100%{left:18%;top:28%}}
@keyframes cur-b{0%,10%{left:78%;top:66%}30%,40%{left:56%;top:30%}58%,68%{left:24%;top:62%}84%,92%{left:62%;top:74%}100%{left:78%;top:66%}}
.ed-canvas:hover .ed-cursor,.ed-canvas:focus-within .ed-cursor{opacity:0}
@media(max-width:760px){.ed-cursor.c2{display:none}}

/* Panneau gauche de l’éditeur : il se referme en glissant, et le petit chevron se retourne */
.ed-file b{display:inline-block;rotate:180deg;transition:rotate .6s var(--ease),translate .6s var(--ease)}
.editor.no-left .ed-file b{rotate:0deg}
.ed-file:hover b{translate:-2px 0}
.editor.no-left .ed-file:hover b{translate:2px 0}
@media(min-width:1101px){
.ed-body{transition:grid-template-columns .65s var(--ease)}
.ed-left{min-width:0;overflow:hidden;white-space:nowrap;transition:opacity .35s var(--ease),padding .65s var(--ease),border-color .4s,visibility 0s}
.editor.no-left .ed-body{grid-template-columns:0px 1fr 300px}
.editor.no-left .ed-left{display:block;opacity:0;padding-inline:0;border-right-color:#0000;visibility:hidden;transition:opacity .25s var(--ease),padding .65s var(--ease),border-color .4s,visibility 0s .65s}
}

/* Contours animés au survol des cadres de projet : un trait de lumière fait le tour */
@property --turn{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes turn{to{--turn:360deg}}
.project:after,.case-art:after,.panel:before{content:'';position:absolute;z-index:5;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--turn),#0000 0 55%,var(--glow) 72%,#fff 82%,var(--glow) 91%,#0000 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.project:hover:after,.project:focus-within:after,.case-art:hover:after,.panel:hover:before,.panel:focus-visible:before{opacity:1;animation:turn 2.4s linear infinite}
.case-art,.tile{position:relative}

/* Fenêtre du hero : refermer replie les deux panneaux, gauche et droite */
.ed-right{min-width:0;transition:opacity .35s var(--ease),border-color .4s,visibility 0s}
.ed-right>*{min-width:240px}
.editor.no-left .ed-right{opacity:0;border-left-color:#0000;visibility:hidden;overflow:hidden;transition:opacity .25s var(--ease),border-color .4s,visibility 0s .65s}
@media(min-width:1101px){.editor.no-left .ed-body{grid-template-columns:0px 1fr 0px}}
@media(max-width:1100px){.ed-body{transition:grid-template-columns .65s var(--ease)}.editor.no-left .ed-body{grid-template-columns:1fr 0px}}
@media(max-width:760px){.editor.no-left .ed-body{grid-template-columns:1fr}.editor.no-left .ed-right{display:none}.ed-right>*{min-width:0}}

/* Projets : en fin de défilement, un voile flou recouvre l’anneau et « Voir plus » apparaît */
.works-more{position:absolute;z-index:6;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;color:var(--fg);background:color-mix(in srgb,var(--bg) 58%,#0000);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s var(--ease),visibility 0s .6s}
.works.more-on .works-more{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s var(--ease),visibility 0s}
.works-more span{font:italic 500 clamp(54px,9vw,140px)/1 Studio,sans-serif;letter-spacing:-.05em;translate:0 26px;transition:translate .8s var(--ease)}
.works-more i{display:inline-block;font-style:normal;font-size:.5em;color:var(--glow);transition:translate .4s var(--ease)}
.works-more small{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.works.more-on .works-more span{translate:0}
.works-more:hover i{translate:6px -6px}

/* Flèches : une icône dessinée, à la taille du texte qui la porte */
svg.ar{flex:none;display:inline-block;width:.78em;height:.78em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.04em;overflow:visible}
.contact-title svg.ar,.works-more svg.ar{stroke-width:1.3}