/* Inouï Studio — shared header + footer, loaded on every page after the page's own styles.
   Header: Ben's Header-Menu-Final.html. Footer: homepage. Markup lives in COMPONENTS/. */
/* ======================================================================
   HEADER + MEGA-MENU — from Ben's Header-Menu-Final.html (V6 + Inouï.studio logo)
   Only header rules are taken; hero/references/cursor rules of the demo page are not.
   ====================================================================== */
:where(#haut){line-height:normal;letter-spacing:normal;--ink:#121210;--orange:#ff3b0a;--paper:#f5f2eb;--cream:#fffdf8;--muted:#716e69;--mono:'JetBrains Mono',monospace;--serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;font-family:var(--sans);color:var(--ink)}
:where(#haut), :where(#haut) *, :where(#haut) *::before, :where(#haut) *::after{box-sizing:border-box}
:where(#haut) a{color:inherit;text-decoration:none}
:where(#haut) button{font:inherit;cursor:pointer}
:where(#haut) :is(h1,h2,h3,p){margin-block:0}
@media(prefers-reduced-motion:reduce){#haut, #haut *, #haut *::before, #haut *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.site-header{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--cream);border-bottom:1px solid rgba(255,255,255,.17)}
.header-row{min-height:76px;max-width:2000px;margin:auto;padding:0 clamp(24px,3.4vw,68px);display:grid;grid-template-columns:1fr auto 1fr;gap:36px;align-items:center}
.brand{font:normal 38px/.9 var(--serif);letter-spacing:-.065em;justify-self:start}
.brand span{color:var(--orange)}
.nav{display:flex;align-items:center;gap:clamp(20px,2.7vw,48px)}
.nav a{position:relative;padding:12px 0;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.nav a:after{content:'';position:absolute;left:0;right:100%;height:1px;bottom:7px;background:var(--orange);transition:right .25s}
.nav a:hover:after, .nav a:focus-visible:after{right:0}
.header-actions{justify-self:end;display:flex;align-items:center;gap:15px}
.status{display:flex;align-items:center;gap:9px;font:500 9px var(--mono);letter-spacing:.08em;white-space:nowrap;color:#c5c0b9}
.status-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 4px rgba(255,59,10,.16)}
.header-cta{border-radius:100px;padding:15px 22px;background:var(--orange);color:#fffdf8;font:600 11px var(--mono);white-space:nowrap;transition:background .2s,transform .2s}
.header-cta:hover{background:#ff673c;transform:translateY(-2px)}
.header-cta span{font-size:18px;margin-left:15px;vertical-align:-1px}
.menu-button{display:none;width:40px;height:40px;border:1px solid #5d5c58;border-radius:50%;background:transparent;color:var(--cream);font-size:21px;line-height:1}
@media(max-width:1180px){
  .header-row{grid-template-columns:1fr auto}
  .nav{grid-column:1/-1;grid-row:2;justify-content:center;border-top:1px solid #393935;padding:0 0 4px}
  .header-row{padding-top:14px;min-height:102px}
  .status{display:none}
}
@media(max-width:760px){
  .header-row{min-height:68px;padding:0 20px;display:flex;justify-content:space-between;gap:12px}
  .brand{font-size:34px}
  .header-cta{padding:12px 14px;font-size:0}
  .header-cta span{font-size:20px;margin:0}
  .menu-button{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;grid-row:auto;background:var(--ink);border-top:1px solid #393935;padding:20px;flex-direction:column;align-items:stretch;gap:6px}
  .site-header.menu-open .nav{display:flex}
  .nav a{font-size:13px;padding:12px}
}
.site-header .header-row{min-height:76px;padding:0 clamp(24px,3.4vw,68px);display:flex;justify-content:space-between;gap:24px;position:relative}
.site-header .header-actions{margin-left:auto}
.site-header .menu-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:55px;height:43px;padding:0;border:1px solid #66635d;border-radius:100px;background:transparent;color:var(--cream);transition:border-color .25s,background .25s}
.site-header .menu-button span{width:19px;height:1.5px;background:currentColor;display:block;transition:transform .25s,width .25s}
.site-header .menu-button span:last-child{width:14px}
.site-header .menu-button:hover, .site-header.menu-open .menu-button{border-color:var(--orange);background:var(--orange);color:var(--ink)}
.site-header.menu-open .menu-button span:first-child{transform:translateY(3.75px) rotate(45deg)}
.site-header.menu-open .menu-button span:last-child{width:19px;transform:translateY(-3.75px) rotate(-45deg)}
.site-header .nav{display:none;position:absolute;top:calc(100% + 1px);right:clamp(24px,3.4vw,68px);width:min(440px,calc(100vw - 40px));padding:27px 30px 21px;background:var(--ink);border:1px solid #4b4843;box-shadow:0 25px 50px rgba(0,0,0,.22);flex-direction:column;align-items:stretch;gap:0;z-index:10}
.site-header.menu-open .nav{display:flex}
.site-header .nav a:after{display:none}
.menu-head, .menu-foot{display:flex;justify-content:space-between;gap:12px;color:#99938a;font:500 9px var(--mono);letter-spacing:.11em}
.menu-head{padding-bottom:20px}
.menu-foot{padding-top:25px}
.site-header .menu-main, .menu-group summary{display:grid;grid-template-columns:33px 1fr 24px;align-items:baseline;gap:12px;width:100%;padding:17px 0;border-top:1px solid #4b4843;font:normal 37px/.95 var(--serif);letter-spacing:-.035em;text-transform:none;color:var(--cream);cursor:pointer;list-style:none}
.menu-group summary::-webkit-details-marker{display:none}
.site-header .menu-main>span:first-child, .menu-group summary>span:first-child{font:500 10px var(--mono);letter-spacing:0;color:#928d85}
.site-header .menu-main>span:last-child, .menu-chevron{font:normal 20px var(--sans);color:var(--orange);justify-self:end}
.menu-group[open] .menu-chevron{transform:rotate(90deg)}
.site-header .menu-main:hover, .menu-group summary:hover{color:var(--orange)}
.menu-sub{padding:0 0 20px 45px}
.site-header .menu-sub a{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #373430;font:500 12px var(--mono);letter-spacing:0;text-transform:none}
.menu-sub a:hover{color:var(--orange)}
.menu-sub a span{color:#918b84;font-size:10px}
@media(max-width:1180px){
  .site-header .header-row{min-height:76px;padding-top:0}
  .site-header .nav{grid-row:auto;padding:27px 30px 21px}
}
@media(max-width:760px){
  .site-header .header-row{min-height:68px;padding:0 20px}
  .site-header .nav{top:68px;left:0;right:0;width:100%;padding:25px 20px;border-left:0;border-right:0}
  .site-header .menu-main, .menu-group summary{font-size:34px}
}
.site-header.menu-open{background:transparent}
.site-header.menu-open .brand, .site-header.menu-open .header-actions{position:relative;z-index:3}
.site-header.menu-open .status{visibility:hidden}
.site-header .mega-nav{display:block;position:fixed;inset:0;top:0;right:0;left:0;width:100%;height:100dvh;max-height:100dvh;padding:0;overflow:auto;border:0;box-shadow:none;background:radial-gradient(circle at 82% 19%,rgba(255,59,10,.085),transparent 28%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),#141412;background-size:auto,80px 80px,80px 80px,auto;color:var(--cream);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .38s ease,transform .38s ease,visibility .38s;z-index:2}
.site-header.menu-open .mega-nav{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
body.menu-is-open{overflow:hidden}
.mega-shell{max-width:1640px;min-height:100%;margin:0 auto;padding:112px clamp(24px,4vw,70px) 28px;display:flex;flex-direction:column}
.mega-top, .mega-bottom{display:flex;justify-content:space-between;gap:20px;font:500 10px var(--mono);letter-spacing:.12em;color:#a39e96}
.mega-top{padding:16px 0;border-top:1px solid rgba(255,255,255,.22)}
.mega-bottom{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.mega-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(45px,7vw,130px);padding:clamp(36px,5vh,70px) 0 clamp(45px,6vh,85px)}
.menu-primary{display:flex;flex-direction:column;min-width:0}
.primary-item{width:100%;display:grid;grid-template-columns:32px 1fr 32px;align-items:baseline;gap:14px;text-align:left;padding:clamp(13px,2vh,24px) 0;border:0;border-bottom:1px solid rgba(255,255,255,.16);background:none;color:var(--cream);transition:color .25s,padding-left .3s}
.primary-item:first-child{border-top:1px solid rgba(255,255,255,.16)}
.primary-item small{font:500 10px var(--mono);color:#8d8983}
.primary-item span{font:normal clamp(55px,5.8vw,100px)/.82 var(--serif);letter-spacing:-.06em}
.primary-item i{font:normal 22px var(--sans);color:#77736d;justify-self:end;transition:transform .25s,color .25s}
.primary-item:hover, .primary-item:focus-visible, .primary-item.is-active{color:var(--orange);padding-left:8px}
.primary-item:hover i, .primary-item.is-active i{color:var(--orange);transform:translate(3px,-3px)}
.primary-item:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.mega-right{display:flex;flex-direction:column;gap:36px;min-width:0}
.menu-panel{min-height:260px}
.menu-panel[hidden]{display:none}
.panel-kicker{font:500 10px var(--mono);letter-spacing:.14em;color:#a49e96}
.menu-panel h2{margin:24px 0 26px;font:normal clamp(42px,4vw,68px)/.9 var(--serif);letter-spacing:-.05em}
.menu-panel h2 em{color:var(--orange);font-weight:normal}
.panel-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.panel-list>*{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid rgba(255,255,255,.16);font:500 12px/1.4 var(--mono);color:#c4beb6}
.panel-links a:hover, .panel-links a:focus-visible{color:var(--orange)}
.panel-links a span{font-size:11px;color:var(--orange)}
.mega-card{margin-top:auto;padding:22px 25px 21px;background:#eee9df;color:var(--ink);border-radius:2px;max-width:440px}
.mega-card-label{display:flex;align-items:center;gap:10px;font:500 9px var(--mono);letter-spacing:.12em}
.mega-card p{font:normal 31px/.95 var(--serif);letter-spacing:-.03em;margin:22px 0 20px}
.mega-card p em{color:var(--orange)}
.mega-card a{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(0,0,0,.25);padding-top:13px;font:600 10px var(--mono);letter-spacing:.06em}
.mega-card a:hover{color:var(--orange)}
@media(max-width:900px){
  .mega-layout{gap:40px}
  .primary-item span{font-size:clamp(52px,6vw,70px)}
  .menu-panel h2{font-size:clamp(42px,4vw,55px)}
  .panel-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .site-header .mega-nav{inset:0;top:0;width:100%;height:100dvh;padding:0;overflow:auto}
  .mega-shell{padding:88px 20px 25px}
  .mega-top span:last-child{display:none}
  .mega-layout{display:block;padding:27px 0 35px}
  .primary-item{padding:10px 0;grid-template-columns:24px 1fr 23px}
  .primary-item span{font-size:clamp(42px,11vw,65px)}
  .primary-item i{font-size:18px}
  .mega-right{gap:20px;margin-top:26px}
  .menu-panel{min-height:0}
  .menu-panel h2{font-size:45px;margin:15px 0 17px}
  .panel-list{grid-template-columns:1fr 1fr;gap:0 16px}
  .panel-list>*{font-size:10px;padding:10px 0}
  .mega-card{display:none}
  .mega-bottom{font-size:8px;line-height:1.5}
}
@media(max-width:420px){
  .panel-list{grid-template-columns:1fr}
  .primary-item span{font-size:45px}
}
@media(prefers-reduced-motion:reduce){
  .site-header .mega-nav{transition:none}
  .primary-item{transition:none}
}
.status{transition:background .25s,opacity .4s,visibility .4s;border-radius:100px;padding:8px 10px;margin-right:-10px}
.status:hover{background:rgba(255,59,10,.12)}
.status-dot{flex:none;animation:statusPulse 2s ease-out infinite}
.site-header:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:center;transition:transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
@media(min-width:760px) and (pointer:fine){
  .site-header .mega-nav{clip-path:inset(0 0 100% 0);opacity:1;transform:none;transition:clip-path .8s cubic-bezier(.16,1,.3,1),visibility 0s .8s}
  .site-header.menu-open .mega-nav{clip-path:inset(0 0 0 0);opacity:1;transform:none;transition:clip-path .8s cubic-bezier(.16,1,.3,1),visibility 0s}
  .mega-nav:before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");opacity:.09;mix-blend-mode:soft-light;pointer-events:none}
  .mega-nav:after{content:'';position:fixed;inset:0;background:radial-gradient(400px circle at var(--halo-x,70%) var(--halo-y,35%),rgba(255,59,10,.06),transparent 75%);pointer-events:none}
  .mega-shell{position:relative;z-index:1}
  .primary-item{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),color .25s,padding-left .3s}
  .site-header.menu-open .primary-item{opacity:1;transform:translateY(0)}
  .site-header.menu-open .primary-item:nth-child(1){transition-delay:.10s}
  .site-header.menu-open .primary-item:nth-child(2){transition-delay:.18s}
  .site-header.menu-open .primary-item:nth-child(3){transition-delay:.26s}
  .site-header.menu-open .primary-item:nth-child(4){transition-delay:.34s}
  .site-header.menu-open .menu-panel:not([hidden]){animation:panelArrive .65s cubic-bezier(.16,1,.3,1) .38s both}
  .site-header .header-row{transition:min-height .5s cubic-bezier(.16,1,.3,1)}
  .site-header .brand{transition:font-size .5s cubic-bezier(.16,1,.3,1)}
  .site-header.is-scrolled .header-row{min-height:60px}
  .site-header.is-scrolled .brand{font-size:42px}
  .site-header.is-scrolled .status{opacity:0;visibility:hidden}
  .site-header.is-scrolled:after{transform:scaleX(1)}
}
@media(max-width:759px){
  .site-header .status{display:flex;padding:4px;gap:7px;margin-right:0}
  .status-label{display:none}
}
.site-header{background:#121210}
.site-header .header-row{max-width:1640px;padding-inline:clamp(20px,2.8vw,40px)}
.site-header .brand{font-size:38px}
.site-header .status{height:34px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);padding:0 12px;margin:0;color:rgba(255,253,248,.8)}
.site-header .menu-button{border-color:#666;background:transparent;transition:all .45s cubic-bezier(.16,1,.3,1)}
.site-header .menu-button span{transition:all .55s cubic-bezier(.16,1,.3,1)}
.menu-scroll-track{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.1);pointer-events:none}
.menu-scroll-track span{display:block;height:100%;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.site-header:after{display:none}
.site-header .source-menu{background:radial-gradient(600px circle at var(--halo-x,50%) var(--halo-y,40%),rgba(255,59,10,.12),transparent 70%),linear-gradient(rgba(255,255,255,.01),rgba(255,255,255,.01)),#0f0e0c}
.source-menu:before{opacity:.06}
.source-menu:after{opacity:.4}
.source-menu .mega-shell{padding:112px clamp(20px,4vw,70px) 28px}
.source-menu .mega-top{border-top:0;border-bottom:1px solid rgba(255,255,255,.1);padding:0 0 14px;color:rgba(255,255,255,.4)}
.source-menu .mega-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,100px);padding:clamp(36px,5vh,60px) 0;flex:1}
.source-menu .mega-left{min-width:0}
.source-menu .primary-item{position:relative;align-items:center;padding:clamp(12px,2vh,20px) 0;grid-template-columns:32px minmax(0,1fr) 34px;border-color:rgba(255,255,255,.14)}
.source-menu .primary-item small{align-self:start;padding-top:10px;letter-spacing:.12em}
.source-menu .primary-item span{font-size:clamp(42px,6.2vw,84px);line-height:.82}
.source-menu .primary-item i{width:32px;height:32px;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:grid;place-items:center;font:normal 14px var(--mono);opacity:.45;color:var(--cream);transition:transform .55s,opacity .3s,background .3s,border-color .3s}
.source-menu .primary-item.is-active, .source-menu .primary-item:hover{padding-left:12px}
.source-menu .primary-item.is-active i, .source-menu .primary-item:hover i{background:rgba(255,59,10,.12);border-color:rgba(255,59,10,.35);color:var(--orange);opacity:1;transform:translate(4px,-2px) rotate(12deg)}
.source-menu .primary-item:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.source-menu .primary-item.is-active:after{transform:scaleX(1)}
.source-menu .menu-preview{position:relative;overflow:hidden;width:min(440px,100%);height:300px;margin-top:36px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#151412}
.source-menu .preview-glow{position:absolute;inset:0;transition:background .5s}
.source-menu .menu-preview[data-preview=solutions] .preview-glow{background:radial-gradient(120% 120% at 20% 20%,#ff3b0a,#121210 60%)}
.source-menu .menu-preview[data-preview=projets] .preview-glow{background:radial-gradient(120% 120% at 80% 30%,#ff3b0a,#1a1815 55%)}
.source-menu .menu-preview[data-preview=studio] .preview-glow{background:radial-gradient(120% 120% at 50% 80%,#f5f2eb,#121210 70%)}
.source-menu .menu-preview[data-preview=contact] .preview-glow{background:radial-gradient(120% 120% at 30% 70%,#ff3b0a,#0f0e0c 60%)}
.source-menu .menu-preview:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 80px rgba(0,0,0,.6);pointer-events:none}
.source-menu .preview-meta{position:absolute;left:18px;right:18px;bottom:15px;display:flex;justify-content:space-between;align-items:end;color:rgba(255,255,255,.65);font:500 10px var(--mono);letter-spacing:.15em}
.source-menu .preview-number{font:normal 88px/.75 var(--serif);color:rgba(255,255,255,.15);letter-spacing:-.06em}
.source-menu .mega-right{gap:36px;min-height:420px}
.source-menu .menu-panel{min-height:0;flex:1}
.source-menu .panel-kicker{letter-spacing:.18em;margin-bottom:18px}
.source-menu .menu-panel h2{font-size:clamp(42px,4vw,64px);line-height:.88;margin:0 0 32px}
.source-menu .menu-services{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;border-top:1px solid rgba(255,255,255,.1);padding-top:17px}
.source-menu .menu-services>:is(div,a){display:flex;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.source-menu .menu-services b{font:normal 18px var(--mono);color:var(--orange)}
.source-menu .menu-services strong{display:block;font:500 12px var(--mono);letter-spacing:.05em;color:#eee}
.source-menu .menu-services small{display:block;font:400 11px/1.45 var(--sans);color:#a39e96;margin-top:5px}
.source-menu .menu-projects{display:flex;flex-direction:column;gap:12px}
.source-menu .menu-projects a{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:90px;padding:16px 20px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.02);transition:border .35s,background .35s}
.source-menu .menu-projects a:hover{border-color:rgba(255,59,10,.45);background:rgba(255,255,255,.045)}
.source-menu .menu-projects small{display:block;font:500 9px var(--mono);letter-spacing:.13em;color:rgba(255,255,255,.5)}
.source-menu .menu-projects strong{display:block;margin-top:5px;font:normal clamp(30px,3vw,48px)/.9 var(--serif);letter-spacing:-.04em}
.source-menu .menu-project-stat{margin-left:auto;border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:6px 10px;font:500 9px var(--mono);white-space:nowrap;color:rgba(255,255,255,.55)}
.source-menu .menu-project-arrow{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;transition:transform .4s,background .4s,color .4s}
.source-menu .menu-projects a:hover .menu-project-arrow{transform:rotate(45deg);background:var(--orange);color:var(--ink)}
.source-menu .menu-manifesto{border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.source-menu .menu-manifesto p{display:flex;gap:12px;margin:0 0 15px;color:rgba(255,255,255,.75);font-size:14px}
.source-menu .menu-manifesto span{font:500 10px var(--mono);color:var(--orange)}
.source-menu .menu-contact{display:grid;gap:17px}
.source-menu .menu-contact>a{font:normal clamp(25px,3vw,36px) var(--serif);border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:12px}
.source-menu .menu-contact>a:hover{color:var(--orange)}
.source-menu .menu-contact>span{font:500 10px var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.5)}
.source-menu .mega-card{max-width:none;border:1px solid rgba(0,0,0,.05);border-radius:18px;padding:22px 25px;margin-top:auto}
.source-menu .mega-card p{line-height:1.05}
.source-menu .mega-bottom{color:rgba(255,255,255,.35);padding-top:14px}
@media(max-width:1050px){
  .source-menu .menu-preview{height:240px}
  .source-menu .menu-services{grid-template-columns:1fr}
  .source-menu .menu-project-stat{display:none}
}
@media(max-width:760px){
  .source-menu .mega-shell{padding:88px 20px 28px}
  .source-menu .mega-layout{display:block;padding:27px 0 35px}
  .source-menu .primary-item{padding:12px 0}
  .source-menu .primary-item span{font-size:clamp(42px,11vw,65px)}
  .source-menu .menu-preview{display:none}
  .source-menu .mega-right{min-height:0;gap:20px;margin-top:26px}
  .source-menu .menu-panel h2{font-size:45px;margin-bottom:18px}
  .source-menu .menu-projects a{min-height:72px;padding:12px 14px}
  .source-menu .menu-projects strong{font-size:31px}
  .source-menu .menu-project-arrow{width:32px;height:32px}
  .source-menu .mega-card{display:none}
}
@media(prefers-reduced-motion:reduce){
  .source-menu .preview-glow, .source-menu .menu-project-arrow{transition:none}
}
.site-header{background:linear-gradient(180deg,#141412 0%,#0f0e0c 100%)!important;
  position:sticky;
  overflow:visible;}
.site-header::before{content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:0;}
.site-header::after{content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(300px circle at var(--halo-x,50%) var(--halo-y,50%), rgba(255,59,10,0.14), transparent 70%);
  z-index:1;}
.site-header:hover::after{opacity:0.06;}
.header-row, .brand, .header-actions{position:relative;z-index:2;}
.header-cta{border-radius:100px!important;
  padding:12px 22px!important;
  background:var(--orange)!important;
  color:#fffdf8!important;
  font:600 11px var(--mono)!important;
  letter-spacing:.1em!important;
  white-space:nowrap;
  transition:background .2s,transform .2s,box-shadow .2s,padding .35s cubic-bezier(.16,1,.3,1)!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  text-decoration:none;
  line-height:1;}
.header-cta .cta-arrow{display:inline-block;
  font-size:14px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  margin:0!important;}
.header-cta:hover{background:#ff673c!important;
  transform:translateY(-2px)!important;
  box-shadow:0 8px 24px rgba(255,59,10,.3)!important;}
.header-cta:hover .cta-arrow{transform:translate(3px,-3px) rotate(12deg)!important;}
.site-header.is-scrolled .header-cta{padding:10px 18px!important;}
.brand{position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1)!important;}
.brand:hover{transform:translateX(2px);}
.brand span{display:inline-block;
  transition:color .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)!important;}
.brand:hover span{color:var(--orange)!important;
  transform:scale(1.4);}
.brand::after{content:'_';
  position:absolute;
  left:0;
  bottom:2px;
  font-family:var(--mono);
  font-size:18px;
  color:var(--orange);
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .2s,transform .2s;}
.brand:hover::after{animation:brand-underscore 0.6s cubic-bezier(.16,1,.3,1) forwards;}
.status{display:flex!important;
  align-items:center!important;
  gap:9px!important;
  font:500 9px var(--mono)!important;
  letter-spacing:.08em!important;
  white-space:nowrap;
  color:#c5c0b9!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  padding:6px 14px!important;
  border-radius:100px!important;
  transition:padding .35s cubic-bezier(.16,1,.3,1),border-color .35s,opacity .35s!important;}
.status:hover{padding-right:18px!important;
  border-color:var(--orange)!important;}
.status-sep{color:rgba(255,255,255,.3)!important;}
.status-time{opacity:.85;}
.status-dot{width:7px!important;
  height:7px!important;
  background:var(--orange)!important;
  border-radius:50%!important;
  box-shadow:0 0 0 4px rgba(255,59,10,.16)!important;
  animation:status-pulse 2s infinite!important;}
.status.status-idle .status-dot{background:transparent!important;
  border:1.5px solid var(--orange);
  box-shadow:none!important;
  animation:none!important;}
.status.status-idle .status-label{opacity:0.9;}
.menu-button{display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:40px!important;
  height:40px!important;
  border:1px solid #5d5c58!important;
  border-radius:50%!important;
  background:transparent!important;
  color:var(--cream)!important;
  transition:border-color .25s,background .25s,gap .25s!important;}
.menu-button span{width:18px!important;
  height:1px!important;
  background:currentColor!important;
  display:block!important;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s,background .25s!important;}
.menu-button:hover{gap:3px!important;
  border-color:var(--orange)!important;}
.site-header.menu-open .menu-button{border-color:var(--orange)!important;
  background:var(--orange)!important;
  color:#fffdf8!important;}
.site-header.menu-open .menu-button span:nth-child(1){transform:rotate(45deg) translateY(5.5px)!important;}
.site-header.menu-open .menu-button span:nth-child(2){opacity:0!important;
  transform:scaleX(0)!important;}
.site-header.menu-open .menu-button span:nth-child(3){transform:rotate(-45deg) translateY(-5.5px)!important;}
.header-acid-line{position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--orange) 50%,transparent 100%);
  box-shadow:0 0 12px rgba(255,59,10,.35);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:5;}
.site-header.is-scrolled .header-acid-line{transform:scaleX(1);}
.header-row{transition:min-height .55s cubic-bezier(.16,1,.3,1),padding .55s cubic-bezier(.16,1,.3,1)!important;
  min-height:76px;}
.site-header .brand{transition:font-size .55s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)!important;}
.site-header.is-scrolled .header-row{min-height:60px!important;
  padding:0 clamp(20px,3vw,60px)!important;}
.site-header.is-scrolled .brand{font-size:40px!important;}
.site-header.is-scrolled .status{opacity:0.6!important;}
.site-header.is-scrolled .status:hover{opacity:1!important;}
@media(max-width:760px){
  .header-cta{width:40px!important;
    height:40px!important;
    padding:0!important;
    justify-content:center!important;
    border-radius:50%!important;}
  .header-cta .cta-text{display:none!important;}
  .header-cta .cta-arrow{font-size:18px!important;margin:0!important;}
  .status .status-label, .status .status-sep{display:none!important;}
  .status{padding:6px 10px!important;}
  .header-actions{gap:10px!important;}
}
.mega-layout{display:grid!important;
  grid-template-columns: 1.15fr 0.85fr!important;
  gap: clamp(32px, 5vw, 96px)!important;
  align-items:start!important;}
.mega-left{display:flex!important;
  flex-direction:column!important;
  min-height: calc(100dvh - 220px)!important;}
.menu-primary{flex:1;}
.menu-preview{position:relative!important;
  left:auto!important; bottom:auto!important; top:auto!important;
  width:100%!important; max-width:380px!important; height:200px!important;
  margin-top:32px!important;
  transform:none!important; opacity:1!important;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.10)!important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02))!important;}
.menu-panel{display:none!important;
  opacity:0;
  transform: translateY(12px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);}
.menu-panel:not([hidden]){display:block!important;
  opacity:1!important;
  transform: translateY(0)!important;
  animation: panelIn .5s cubic-bezier(.16,1,.3,1);}
.panel-kicker{color: rgba(255,255,255,.45)!important;
  font: 600 10px var(--mono)!important;
  letter-spacing:.14em!important;
  margin-bottom:20px!important;
  display:block!important;}
.menu-panel h2{color:#fffdf8!important;
  font-size: clamp(38px, 3.5vw, 62px)!important;
  line-height:.9!important;
  letter-spacing:-.04em!important;
  margin:0 0 32px!important;}
.menu-panel h2 em{color:var(--orange); font-style:italic;}
.menu-services :is(div,a){min-height:72px!important;
  padding:18px 0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  display:flex!important;
  gap:14px!important;
  align-items:flex-start!important;
  transition: all .3s;}
.menu-services :is(div,a):hover{background: rgba(255,255,255,.04);
  padding-left:12px!important; padding-right:12px!important;
  border-radius:8px;
  transform: translateX(4px);}
.menu-services :is(div,a) b{color:var(--orange)!important; font-size:13px!important; margin-top:3px;}
.menu-services :is(div,a) strong{color:#fffdf8!important; font-size:15px!important; font-weight:600!important;}
.menu-services :is(div,a) small{color: rgba(255,255,255,.55)!important; font-size:13px!important; line-height:1.4; display:block; margin-top:4px;}
.menu-projects a{display:flex!important; justify-content:space-between; align-items:center;
  padding:18px 0!important; border-bottom:1px solid rgba(255,255,255,.08)!important;
  color:#fffdf8!important;}
.menu-projects a small{color: rgba(255,255,255,.45)!important;}
.menu-projects a strong{color:#fffdf8!important; font-size:18px!important;}
.next-avail{margin-top:32px; padding:14px 16px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; font: 500 10px var(--mono); letter-spacing:.08em;
  color: rgba(255,255,255,.7); display:flex; align-items:center; gap:10px;}
.next-avail .dot{width:6px; height:6px; background:var(--orange); border-radius:50%; box-shadow:0 0 0 4px rgba(255,59,10,.15);}
.next-avail strong{color:var(--cream);}
.header-cta{color:#fffdf8!important; background:var(--orange)!important; border:1px solid rgba(255,255,255,.12)!important;}
.brand{display:inline-flex!important;
  align-items:baseline;
  gap:0;
  font-size:34px!important;}
.brand-dot{color:var(--orange)!important;
  margin:0 1px;}
.brand-studio{font-size:0.62em!important;
  font-weight:400!important;
  letter-spacing:-.02em;
  opacity:.85;
  margin-left:1px;
  font-family:var(--serif)!important;}
.brand:hover .brand-studio{opacity:1;
  color: var(--cream);}
.brand:hover .brand-dot{transform: scale(1.3);
  display:inline-block;}
/* Service items are links here (divs in the source): keep the source typography, not the generic .nav a style */
#haut .source-menu .menu-services>a{font:inherit;text-transform:none;letter-spacing:normal;position:static}
/* Same for the 5 categories (buttons in the source, page links here) */
#haut .source-menu a.primary-item{font:inherit;text-transform:none;letter-spacing:normal;position:static;padding:clamp(13px,2vh,24px) 0}
@media(max-width:760px){#haut .source-menu a.primary-item{padding:10px 0}}
#haut .source-menu a.primary-item:is(:hover,:focus-visible,.is-active){padding-left:8px}
/* Page behind the open menu must not scroll (some pages force overflow:auto on body) */
html.menu-is-open, html.menu-is-open body{overflow:hidden!important}
/* Mobile: Ben's own mobile layout stacks the menu (list, then panel). His V6 grid rule (!important) overrode it and
   pushed the panel off-screen on phones — restore the stacking below 760px. */
@media(max-width:760px){#haut .mega-layout{display:block!important}#haut .mega-left{min-height:0!important}#haut .menu-services strong{overflow-wrap:anywhere}}
/* Menu links jump to page sections: keep the section title below the sticky header */
section[id], article[id]{scroll-margin-top:92px}
/* 5th menu item (Contact) joins the stagger sequence (+80ms) */
@media(min-width:760px) and (pointer:fine){.site-header.menu-open .primary-item:nth-child(5){transition-delay:.42s}}
@keyframes brand-underscore{
  0%{opacity:0;transform:translateY(4px);}
  30%{opacity:1;transform:translateY(0);}
  70%{opacity:1;}
  100%{opacity:0;transform:translateY(-2px);}
}
@keyframes panelArrive{from{opacity:0;transform:scale(.98) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes panelIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
@keyframes status-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,10,.5);}
  70%{box-shadow:0 0 0 10px rgba(255,59,10,0);}
  100%{box-shadow:0 0 0 0 rgba(255,59,10,0);}
}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(255,59,10,.5)}70%,100%{box-shadow:0 0 0 8px rgba(255,59,10,0)}}

/* ======================================================================
   FOOTER — from the homepage (01-HOMEPAGE-VRAI-LOGO/index.html)
   ====================================================================== */
:where(#site-footer){--ink:#0a0a0a;--ink-soft:#181815;--paper:#f3f0e8;--paper-2:#e8e3d8;--paper-3:#fffaf0;--acid:#ff3b00;--orange:var(--acid);--acid-soft:rgba(255,59,0,.12);--line:rgba(10,10,10,.10);--line-strong:rgba(10,10,10,.16);--muted:rgba(10,10,10,.56);--muted-2:rgba(10,10,10,.38);--ease:cubic-bezier(.16,1,.3,1);--halo-acid:radial-gradient(58% 72% at 88% 18%,rgba(255,59,0,.045),transparent 72%);font-family:"Inter Tight",system-ui,sans-serif;line-height:1.5;letter-spacing:-.01em;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:where(#site-footer), :where(#site-footer) *, :where(#site-footer) *::before, :where(#site-footer) *::after{box-sizing:border-box}
:where(#site-footer) a{color:inherit;text-decoration:none}
:where(#site-footer) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(#site-footer) img{display:block;max-width:100%}
:where(#site-footer) :focus-visible{outline:2px solid var(--acid);outline-offset:3px}
:where(#site-footer) :is(h1,h2,h3,h4,h5,h6){margin-block:0}
:where(#site-footer) p{margin-block:1em}
:where(#site-footer) input{font:revert}
.site-footer-wrap{width:min(1480px,calc(100% - 48px));margin-inline:auto}
@media(max-width:900px){
  .site-footer-wrap{width:min(100% - 24px,1480px)}
}
@media(min-width:901px){
  #site-footer .footer-top{grid-template-columns:1.3fr repeat(4,.7fr)}
}
.footer.footer-in .footer-top>div:nth-child(5){transition-delay:.32s}
.footer{padding:56px 0 28px;background:var(--paper);border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:32px}
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr}
}
.footer h5{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin:0 0 12px}
.footer a{font-size:14px;line-height:2;position:relative}
.footer a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.footer a:hover:after{transform:scaleX(1)}
.newsletter{display:flex;gap:8px;margin-top:10px}
.newsletter input{flex:1;padding:12px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--paper-3);outline:none;transition:border-color .35s, box-shadow .35s}
.newsletter input:focus{border-color:var(--acid);box-shadow:0 0 0 3px var(--acid-soft)}
.newsletter button{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:transform .5s var(--ease), background .35s}
.newsletter button:hover{transform:rotate(90deg);background:var(--acid)}
.footer-bottom{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:"JetBrains Mono";font-size:10px;opacity:.5}
.footer-toggles{display:flex;gap:10px;align-items:center}
html.dark .footer{background:var(--ink);color:var(--paper);border-color:rgba(243,240,232,.12)}
.footer{position:relative;isolation:isolate;padding:84px 0 34px;border-top:0;background:linear-gradient(145deg,var(--paper-3) 0%,var(--paper) 48%,var(--paper-2) 100%);overflow:hidden}
.footer:before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;z-index:2;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease);box-shadow:0 0 12px rgba(255,59,0,.18)}
.footer.footer-in:before{transform:scaleX(1)}
.footer:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.72;background:radial-gradient(56% 82% at 100% 0%,rgba(255,59,0,.04),transparent 70%),radial-gradient(circle,rgba(10,10,10,.14) .45px,transparent .7px)}
.footer-top{grid-template-columns:1.35fr .65fr .65fr .65fr;gap:clamp(36px,5vw,78px)}
.footer-top>div{transition:transform .65s var(--ease),opacity .8s var(--ease);will-change:transform,opacity}
.motion-ready .footer:not(.footer-in) .footer-top>div{opacity:0;transform:translateY(24px)}
.footer.footer-in .footer-top>div{opacity:1;transform:translateY(0)}
.footer.footer-in .footer-top>div:nth-child(1){transition-delay:0s}
.footer.footer-in .footer-top>div:nth-child(2){transition-delay:.08s}
.footer.footer-in .footer-top>div:nth-child(3){transition-delay:.16s}
.footer.footer-in .footer-top>div:nth-child(4){transition-delay:.24s}
.footer.footer-in .footer-top>div:hover{transform:translateY(-2px)}
.footer-top>div:first-child h5{font:400 clamp(32px,3.2vw,44px)/.9 "Instrument Serif",serif;letter-spacing:-.045em;text-transform:none;opacity:1;margin-bottom:22px;font-size:0}
.footer-top>div:first-child h5:before{content:"Inouï";font-size:clamp(32px,3.2vw,44px)}
.footer-top>div:first-child h5:after{content:".";display:inline-block;font-size:clamp(32px,3.2vw,44px);color:var(--acid)}
.footer-top>div:first-child>p{max-width:380px!important;line-height:1.7!important;color:var(--muted)}
.footer-top>div:not(:first-child) h5{display:flex;align-items:center;gap:8px;font:500 9px/1 "JetBrains Mono",monospace;letter-spacing:.18em;opacity:.42;margin-bottom:18px}
.footer-top>div:not(:first-child) h5:before{content:"";width:12px;height:1px;background:var(--acid)}
.footer-top>div:not(:first-child) p{line-height:2.2}
.footer a{line-height:2.2;padding-left:0;transition:color .35s var(--ease),padding-left .55s var(--ease)}
.footer a:before{content:"·";position:absolute;left:0;color:var(--acid);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .55s var(--ease)}
.footer a:hover{color:var(--acid);padding-left:11px}
.footer a:hover:before{opacity:1;transform:translateX(0)}
.footer a:after{background:var(--acid);transition:transform .55s var(--ease)}
.newsletter{position:relative;gap:0;margin-top:22px;padding-bottom:24px;filter:drop-shadow(0 5px 16px rgba(10,10,10,.035))}
.newsletter:after{content:"Journal — 1 email / mois, zéro spam";position:absolute;left:4px;bottom:0;font:400 9px/1 "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--muted-2)}
.newsletter input{min-width:0;padding:14px 18px;border-radius:18px 0 0 18px;border-right:0;box-shadow:inset 0 1px 5px rgba(10,10,10,.06)}
.newsletter button{flex:0 0 48px;width:48px;height:48px;border-radius:0 18px 18px 0;transition:transform .55s var(--ease),background .35s,color .35s}
.newsletter button:hover{transform:rotate(90deg) scale(1.08);background:var(--acid)}
.newsletter button:focus-visible{background:var(--acid)}
.newsletter:focus-within{filter:drop-shadow(0 0 8px rgba(255,59,0,.14))}
.newsletter.is-sent button{background:var(--acid);transform:rotate(0) scale(1.04);animation:sentCheck 1.2s var(--ease) both}
.footer-bottom{position:relative;margin-top:62px;padding-top:26px;border-top:.5px solid rgba(10,10,10,.14);gap:22px;align-items:center;opacity:1}
.footer-bottom>span:first-child{font:400 10px/1.5 "JetBrains Mono",monospace;opacity:.5}
.footer-bottom:after{content:"●  Système opérationnel — Paris / Bordeaux";font:400 9px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--muted);margin-left:auto;animation:footerStatus 2.4s ease-in-out infinite}
.footer-toggles{gap:8px;flex-wrap:wrap}
.footer-toggles>span{display:none}
html.dark .footer{background:linear-gradient(145deg,#151513 0%,var(--ink) 52%,#11110f 100%)}
html.dark .footer-top>div:first-child>p, html.dark .footer-bottom:after{color:rgba(243,240,232,.56)}
html.dark .footer a:after{background:var(--acid)}
html.dark .footer-bottom{border-top-color:rgba(243,240,232,.14)}
@media(max-width:900px){
  .footer-top{grid-template-columns:repeat(2,1fr);gap:42px 24px}
  .footer-top>div:first-child{grid-column:1/-1}
  .newsletter{width:100%}
}
@media(max-width:640px){
  .footer{padding-top:64px}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 20px}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}
  .footer-bottom:after{margin-left:0}
  .footer-toggles{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .footer-top>div, .footer:before, .newsletter{animation:none!important;transition:none!important}
}
.footer{border-top:.5px solid var(--line)}
.footer:after{background-image:var(--halo-acid),radial-gradient(circle,rgba(10,10,10,.14) .45px,transparent .7px)}
.footer-top>div:first-child h5:after, .newsletter:focus-within{animation:none}
.footer-top>div{will-change:auto}
.footer{position:relative}
.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--acid),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.footer.footer-in:before{transform:scaleX(1)}
.footer{background:#0a0a0a;color:#f3f0e8;position:relative;overflow:hidden;padding:0}
.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#ff3b00,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.footer.footer-in:before{transform:scaleX(1)}
.footer-top{display:grid;grid-template-columns:1.3fr .7fr .7fr .7fr;gap:32px;padding:64px 0 36px;border-bottom:1px solid rgba(243,240,232,.08)}
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr}
}
.footer-top h5{font-family:JetBrains Mono;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin:0 0 14px}
.footer-top a{color:rgba(243,240,232,.7);transition:color .3s, transform .3s;display:inline-block}
.footer-top a:hover{color:#fff;transform:translateX(3px)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0 22px;font-family:JetBrains Mono;font-size:10px;opacity:.6;flex-wrap:wrap}
.footer-toggles{display:flex;gap:12px;align-items:center}
.footer{position:relative;overflow:hidden;background:radial-gradient(800px 400px at 20% 0%, rgba(255,59,0,.14), transparent 60%),radial-gradient(600px 300px at 80% 100%, rgba(243,240,232,.06), transparent 60%),var(--ink);border-top:1px solid rgba(243,240,232,.08)}
.footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;background-image:radial-gradient(circle,rgba(10,10,10,.14) .45px,transparent .7px);mix-blend-mode:overlay}
.live-logo{display:inline-flex;align-items:flex-end;gap:.18em;color:currentColor;white-space:nowrap;line-height:1;transition:transform .5s var(--ease)}
.live-logo:hover{transform:scale(1.02)}
.live-logo__name{font-family:"Instrument Serif",Georgia,serif;font-size:34px;font-weight:400;line-height:.78;letter-spacing:-.055em}
.live-logo__dot{display:inline-block;color:var(--acid);font-style:normal;margin-left:-.055em}
.site-header .brand .live-logo__name{color:var(--cream)}
.site-header .brand .live-logo__dot{color:var(--acid)}
.live-logo__studio{font-family:"JetBrains Mono",monospace;font-size:8px;font-weight:500;line-height:1;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.08em;opacity:.82}
.footer-brand-logo{display:inline-flex;color:currentColor;background:transparent;box-shadow:none;margin-bottom:20px}
.footer-brand-logo .live-logo__name{font-size:clamp(42px,4.2vw,58px)}
.footer-brand-logo .live-logo__studio{font-size:10px;margin-bottom:.16em;opacity:.82}
#haut.is-scrolled .live-logo__name{font-size:28px}
@media(max-width:760px){
  .live-logo__name{font-size:30px}
  .live-logo__studio{font-size:6px}
}
@keyframes footerStatus{0%,100%{text-shadow:0 0 0 rgba(255,59,0,0)}50%{text-shadow:-1.25em 0 8px rgba(255,59,0,.42)}}
@keyframes sentCheck{0%{transform:scale(.92)}55%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Footer is always dark: use the design's own dark-mode colour for these two texts (they were dark grey on black) */
#site-footer .footer-top>div:first-child>p, #site-footer .footer-bottom:after{color:rgba(243,240,232,.56)}

/* ======================================================================
   PAGE ANIMATIONS — from Ben's Header-Menu-Final.html, applied on every page
   (desktop with a real mouse only, exactly like the source: min-width 760px + pointer:fine)
   ====================================================================== */
@media(min-width:760px) and (pointer:fine){
  /* Premium cursor */
  body.custom-cursor-on,body.custom-cursor-on a,body.custom-cursor-on button,body.custom-cursor-on summary{cursor:none}
  .premium-cursor{--ink:#121210;--cream:#fffdf8;--orange:#ff3b0a;--mono:'JetBrains Mono',monospace;position:fixed;top:0;left:0;z-index:100;display:grid;place-items:center;width:10px;height:10px;border-radius:50%;background:var(--ink);color:var(--ink);mix-blend-mode:normal;pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0) translate(-50%,-50%);transition:width .28s,height .28s,background .28s,border-radius .28s,opacity .2s;will-change:transform}
  .premium-cursor.visible{opacity:1}.premium-cursor.on-dark{background:var(--cream)}.premium-cursor.on-reference,.premium-cursor.on-menu,.premium-cursor.on-cta{background:var(--orange)}.premium-cursor.on-reference{width:90px;height:90px}.premium-cursor.on-menu{width:60px;height:60px}.premium-cursor.on-cta{width:100px;height:100px}.premium-cursor.on-nav{width:30px;height:1.5px;border-radius:0;background:var(--orange)}.premium-cursor span{display:none;white-space:nowrap;font:600 10px var(--mono)}.premium-cursor.on-reference span,.premium-cursor.on-menu span,.premium-cursor.on-cta span{display:block}.premium-cursor.on-menu span{font-size:9px}
  /* One cursor only: the pages' previous custom cursors are replaced by Ben's */
  body.custom-cursor-on :is(.cursor,#cursor,.cursor-dot,#cursorDot){display:none!important}
  /* Form fields keep the text cursor and hide the dot (contact bug fix: nothing covers NOM / PRÉNOM) */
  body.custom-cursor-on :is(input,textarea,select,[contenteditable]){cursor:auto}
  .premium-cursor.on-field{opacity:0}
  /* Modal dialogs sit above everything (top layer): keep the normal pointer there */
  body.custom-cursor-on dialog[open]{cursor:auto}body.custom-cursor-on dialog[open] :is(a,button,summary){cursor:pointer}

  /* Headline: word-by-word reveal (masks slightly widened so serif descenders are not clipped) */
  .ben-words .word-mask{display:inline-block;vertical-align:baseline;clip-path:inset(-.25em -.12em 100% -.12em);animation:benWordReveal 1s cubic-bezier(.16,1,.3,1) var(--word-delay) forwards}
  .ben-words .word-inner{display:inline-block;transform:translateY(20px);animation:wordRise 1s cubic-bezier(.16,1,.3,1) var(--word-delay) forwards}
  @keyframes benWordReveal{to{clip-path:inset(-.25em -.12em -.4em -.12em)}}@keyframes wordRise{to{transform:translateY(0)}}

  /* Reference cards (homepage "Des preuves"): Ben's hover — orange edge, name slides, arrow turns */
  .fh-reference{position:relative;transition:background .35s,clip-path 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
  .fh-reference:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--fh-orange,#ff3b0a);transform:scaleY(0);transform-origin:center;transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .fh-reference:hover{background:rgba(255,59,10,.04)}.fh-reference:hover:before{transform:scaleY(1)}
  .fh-reference:hover .fh-ref-name{transform:translateX(12px);color:var(--fh-orange,#ff3b0a)}
  .fh-reference:hover .fh-circle{background:var(--fh-orange,#ff3b0a);border-color:var(--fh-orange,#ff3b0a);color:var(--fh-ink,#121210);transform:rotate(45deg)}
  .fh-ref-bottom .fh-circle{transition:background .3s,color .3s,transform .4s}
  .fh-reference:hover .fh-ref-bottom>span:first-child{color:var(--fh-orange,#ff3b0a);font-weight:600}
}
@media(prefers-reduced-motion:reduce){.ben-words .word-mask{clip-path:none!important;animation:none!important}.ben-words .word-inner{transform:none!important;animation:none!important}}
/* Triple-click on the logo: acid mode for 3s (Ben's easter egg) */
body.acid-mode{background:#ff3b0a;color:#fffdf8;transition:background .6s,color .6s}
body.acid-mode :is(.site-header,.fh-hero-copy,.fh-hero-art,.fh-references){background:#ff3b0a!important;color:#121210;transition:background .6s,color .6s}
body.acid-mode :is(.fh-ref-intro h2,.fh-ref-intro p,.fh-ref-meta,.fh-ref-bottom,.status-time){color:#121210}

/* ======================================================================
   PHONE + TABLET DESIGN (≤1024px) — from the client's mobile reference
   Translucent cream header that hides on scroll, orange scroll progress,
   full-screen dark accordion menu, floating bottom tab bar, safe areas
   (iPhone notch), 44px touch targets. Desktop (>1024px) is untouched.
   Shared kit for the pages: --m-* tokens and .m-kicker / .m-card.
   ====================================================================== */
:root{
  --m-paper:#f3f0e8; --m-card:#fffaf0; --m-ink:#0a0a0a; --m-acid:#ff3b00; --m-acid-text:#c93000;
  --m-line:rgba(10,10,10,.10); --m-line-2:rgba(10,10,10,.08); --m-muted:rgba(10,10,10,.64);
  --m-ease:cubic-bezier(.25,1,.5,1); --m-radius:20px; --m-header:60px;
  --m-sat:env(safe-area-inset-top,0px); --m-sab:env(safe-area-inset-bottom,0px);
  --m-sal:env(safe-area-inset-left,0px); --m-sar:env(safe-area-inset-right,0px);
  --m-max:480px; --m-pad:24px;
}
.m-progress, .m-tabbar, .m-menu-acc{display:none}

@media (max-width:1024px){
  :root{--m-max:480px}
  html{scroll-padding-top:calc(var(--m-header) + var(--m-sat) + 8px);-webkit-text-size-adjust:100%}
  section[id], article[id]{scroll-margin-top:calc(var(--m-header) + var(--m-sat) + 8px)}
  body{-webkit-tap-highlight-color:transparent;padding-top:calc(var(--m-header) + var(--m-sat));padding-bottom:calc(92px + var(--m-sab))}

  /* --- Header: cream, blurred, 60px + notch; hides when scrolling down --- */
  #haut.site-header{position:fixed!important;top:0;left:0;right:0;z-index:60;height:calc(var(--m-header) + var(--m-sat));
    padding:var(--m-sat) 0 0;background:transparent!important;color:var(--m-ink);border-bottom:.5px solid var(--m-line)!important;
    overflow:visible;transform:none;transition:transform .6s var(--m-ease)}
  #haut.site-header.m-hidden:not(.menu-open){transform:translateY(-100%)}
  /* the blur lives on a pseudo-element: on the header itself it would trap the fixed menu inside it */
  #haut.site-header::before{content:'';position:absolute;inset:0;z-index:0;opacity:1!important;mix-blend-mode:normal!important;
    background:rgba(243,240,232,.88)!important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);pointer-events:none}
  #haut.site-header::after, #haut .header-acid-line, #haut .menu-scroll-track{display:none!important}
  #haut .header-row{position:relative;z-index:2;max-width:var(--m-max);height:var(--m-header);min-height:0!important;margin:0 auto;
    padding:0 max(16px,var(--m-sal)) 0 max(16px,var(--m-sar))!important;display:flex;align-items:center;justify-content:space-between;gap:10px}
  #haut .brand{font-size:28px!important;color:var(--m-ink)!important;line-height:1;letter-spacing:-.02em;transform:none!important}
  #haut .brand-studio{color:var(--m-acid-text)!important;opacity:1}
  #haut .header-actions{gap:10px!important;margin-left:auto}
  #haut .status{display:inline-flex!important;align-items:center;gap:7px!important;min-height:36px;padding:0 12px!important;border-radius:999px!important;
    background:rgba(255,255,255,.8)!important;border:1px solid var(--m-line)!important;box-shadow:0 2px 10px rgba(0,0,0,.06);color:rgba(10,10,10,.66)!important;opacity:1!important;visibility:visible!important}
  #haut .status-dot{width:6px!important;height:6px!important;box-shadow:0 0 0 3px rgba(255,59,0,.15)!important}
  #haut .status-label{display:inline!important;font:700 0/1 'JetBrains Mono',monospace!important;letter-spacing:.1em}
  #haut .status-label::after{content:'DISPONIBLE';font-size:11px}
  #haut .status.status-idle .status-label::after{content:'À VOTRE RYTHME'}
  #haut .status-sep, #haut .status-time{display:none!important}
  #haut .header-cta{display:none!important}
  #haut .menu-button{display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:44px;padding:0;border-radius:50%!important;
    background:#fff!important;border:1px solid var(--m-line)!important;box-shadow:0 2px 12px rgba(0,0,0,.06);color:var(--m-ink)!important;gap:0!important;position:relative}
  #haut .menu-button span{position:absolute;left:13px;width:16px!important;height:1.8px!important;background:var(--m-ink)!important;transition:transform .5s var(--m-ease),opacity .3s!important}
  #haut .menu-button span:nth-child(1){top:15px}#haut .menu-button span:nth-child(2){top:21px}#haut .menu-button span:nth-child(3){top:27px}
  #haut.site-header.menu-open .menu-button{background:#fff!important;border-color:var(--m-line)!important}
  #haut.site-header.menu-open .menu-button span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
  #haut.site-header.menu-open .menu-button span:nth-child(2){opacity:0!important;transform:scaleX(0)!important}
  #haut.site-header.menu-open .menu-button span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}

  /* --- Menu: full-height dark panel under the header, accordion of the 5 categories --- */
  #haut .mega-nav{position:fixed!important;inset:auto 0 0 0!important;top:calc(var(--m-header) + var(--m-sat))!important;height:auto!important;max-height:none!important;
    display:flex!important;flex-direction:column;background:#121210!important;color:#f3f0e8;padding:0 0 var(--m-sab)!important;overflow:hidden!important;
    clip-path:none!important;opacity:1!important;visibility:hidden;transform:translateY(-105%)!important;transition:transform .55s var(--m-ease),visibility 0s .55s!important;z-index:55}
  #haut.site-header.menu-open .mega-nav{visibility:visible;transform:translateY(0)!important;transition:transform .55s var(--m-ease),visibility 0s!important}
  #haut .mega-nav::before, #haut .mega-nav::after{display:none!important}
  #haut .mega-nav .mega-shell{display:none!important}
  #haut .m-menu-acc{display:flex;flex-direction:column;flex:1;min-height:0}
  .m-acc-top{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);font:500 11px 'JetBrains Mono',monospace;letter-spacing:.18em;color:rgba(255,255,255,.62)}
  .m-acc-top span+span{color:rgba(255,255,255,.4)}
  .m-acc-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 16px calc(24px + var(--m-sab))}
  .m-acc-inner{max-width:var(--m-max);margin:0 auto}
  .m-acc-item{border-bottom:1px solid rgba(255,255,255,.08)}
  .m-acc-row{display:flex;width:100%;min-height:72px;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;background:none;border:0;color:#f3f0e8;text-align:left;cursor:pointer;font:inherit}
  .m-acc-row:active{transform:scale(.98)}
  .m-acc-name{display:flex;align-items:baseline;gap:12px}
  .m-acc-num{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;color:rgba(255,255,255,.4)}
  .m-acc-title{font:400 26px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.02em}
  .m-acc-kicker{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;color:rgba(255,255,255,.45)}
  .m-acc-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12);font-size:14px;transition:transform .4s var(--m-ease),background .3s,color .3s}
  .m-acc-item.is-open .m-acc-ico{transform:rotate(45deg);background:var(--m-acid);border-color:var(--m-acid);color:#fff}
  .m-acc-item.is-current .m-acc-title{color:var(--m-acid)}
  .m-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--m-ease)}
  .m-acc-item.is-open .m-acc-panel{grid-template-rows:1fr}
  .m-acc-panel>div{overflow:hidden}
  .m-acc-links{display:flex;flex-direction:column;gap:8px;padding:2px 0 20px}
  .m-acc-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:14px 16px;border-radius:14px;border:1px solid transparent;
    background:rgba(255,255,255,.03);color:#f3f0e8;text-decoration:none;transition:background .3s,border-color .3s}
  .m-acc-link:hover, .m-acc-link:focus-visible{background:rgba(255,59,0,.08);border-color:rgba(255,59,0,.2)}
  .m-acc-link b{font:400 14px 'JetBrains Mono',monospace;color:var(--m-acid);flex:none}
  .m-acc-link span{flex:1;min-width:0;display:flex;flex-direction:column}
  .m-acc-link strong{font:500 15px/1.15 'Inter Tight','DM Sans',system-ui,sans-serif;letter-spacing:-.01em}
  .m-acc-link small{font:400 12px/1.25 'JetBrains Mono',monospace;color:rgba(255,255,255,.55);margin-top:4px}
  .m-acc-link i{font-style:normal;color:var(--m-acid);font-size:12px}
  .m-acc-link.is-all{background:var(--m-acid);color:#121210}
  .m-acc-link.is-all b, .m-acc-link.is-all i{color:#121210}
  .m-acc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:28px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:rgba(255,255,255,.4)}
  .m-acc-foot a{color:rgba(255,255,255,.72);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
  /* Ben's '.nav a' (mono, uppercase, padding) must not reach the accordion links */
  #haut .m-menu-acc a{position:relative;font:inherit;letter-spacing:normal;text-transform:none}
  #haut .m-menu-acc a::after{display:none!important}
  #haut .m-menu-acc .m-acc-link{padding:14px 16px}
  #haut .m-menu-acc .m-acc-foot a{padding:0;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.06em}
  .m-acc-foot{gap:16px;flex-wrap:wrap;line-height:1.5}

  /* --- Scroll progress (outside the header so it stays when the header hides) --- */
  .m-progress{display:block;position:fixed;left:0;right:0;top:var(--m-sat);z-index:80;height:2px;pointer-events:none}
  .m-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--m-acid),#ff7a00);transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
  .m-notch{position:fixed;left:0;right:0;top:0;height:var(--m-sat);z-index:61;background:rgba(243,240,232,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:none}

  /* --- Bottom tab bar --- */
  .m-tabbar{display:flex;position:fixed;z-index:70;left:12px;right:12px;bottom:calc(12px + var(--m-sab));max-width:380px;margin:0 auto;padding:8px;gap:4px;
    border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(10,10,10,.92);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:0 16px 40px rgba(0,0,0,.28);transition:transform .45s var(--m-ease)}
  html.menu-is-open .m-tabbar{transform:translateY(160%)}
  .m-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.62)}
  .m-tab:active{transform:scale(.94)}
  .m-tab-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);transition:background .35s,transform .35s}
  .m-tab-ico svg{width:17px;height:17px}
  .m-tab-lbl{font:700 9px 'JetBrains Mono',monospace;letter-spacing:.14em}
  .m-tab[aria-current="page"]{color:#fff}
  .m-tab[aria-current="page"] .m-tab-ico{background:var(--m-acid);transform:scale(1.05);box-shadow:0 4px 12px rgba(255,59,0,.4)}
  .m-tab:focus-visible{outline:2px solid var(--m-acid);outline-offset:2px}

  /* --- The pages' own fixed cursors / loaders never show on touch layouts --- */
  .premium-cursor, #cursor, #cursorDot, .cursor, .cursor-dot{display:none!important}

  /* --- Shared kit for page sections --- */
  .m-kicker{display:flex;align-items:center;gap:8px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.6)}
  .m-kicker::after{content:'';flex:1;height:1px;background:var(--m-line-2)}
  .m-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:var(--m-radius);box-shadow:0 2px 12px rgba(0,0,0,.04)}
}

/* Projets panel cards (desktop menu): restore the original card look that Ben's V6 rules
   (padding:18px 0; strong 18px) flattened — inner padding, large serif project names. */
#haut .source-menu .menu-projects a{padding:16px 20px!important;min-height:90px;border:1px solid rgba(255,255,255,.1)!important;border-radius:16px}
#haut .source-menu .menu-projects a strong{font:normal clamp(30px,3vw,48px)/.9 'Instrument Serif',Georgia,serif!important;letter-spacing:-.04em;margin-top:5px;text-transform:uppercase}
#haut .source-menu .menu-projects a small{letter-spacing:.13em}

/* --- FOOTER (phone + tablet): light, card-based, as in the mobile reference --- */
@media (max-width:1024px){
  #site-footer.footer{background:var(--m-paper)!important;color:var(--m-ink)!important;border-top:1px solid var(--m-line);padding:40px 0 0!important;overflow:hidden}
  #site-footer.footer::before, #site-footer.footer::after{display:none!important}
  #site-footer .site-footer-wrap{max-width:var(--m-max);margin:0 auto;padding:0 var(--m-pad)!important}
  #site-footer .footer-top{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important;padding:0!important;border:0!important}
  #site-footer .footer-top>div:first-child{grid-column:1/-1;padding-bottom:12px}
  #site-footer .footer-top>div:not(:first-child){background:var(--m-card);border:1px solid var(--m-line);border-radius:16px;padding:16px!important;box-shadow:0 2px 12px rgba(0,0,0,.03)}
  #site-footer .live-logo, #site-footer .live-logo__name, #site-footer .live-logo__studio{color:var(--m-ink)!important}
  #site-footer .live-logo__dot{color:var(--m-acid)!important}
  #site-footer .footer-top>div:first-child>p{color:var(--m-muted)!important;font-size:14px!important;margin:14px 0 18px!important}
  #site-footer .newsletter{display:flex!important;gap:8px;max-width:420px;background:var(--m-card)!important;border:1px solid var(--m-line)!important;border-radius:999px!important;padding:4px!important}
  #site-footer .newsletter input{flex:1;min-width:0;min-height:44px;border:0!important;background:transparent!important;color:var(--m-ink)!important;padding:0 14px!important;font-size:14px!important}
  #site-footer .newsletter input::placeholder{color:rgba(10,10,10,.5)}
  #site-footer .newsletter button{flex:none;width:44px!important;height:44px!important;border-radius:50%!important;background:var(--m-ink)!important;color:#fff!important}
  #site-footer h2{margin:0 0 8px!important;font:500 10px 'JetBrains Mono',monospace!important;letter-spacing:.14em!important;text-transform:uppercase;color:rgba(10,10,10,.6)!important}
  #site-footer .footer-top p{margin:0!important;font-size:13px!important;line-height:1.3!important;color:rgba(10,10,10,.72)!important}
  #site-footer .footer-top p a{display:inline-flex;align-items:center;min-height:32px;color:rgba(10,10,10,.78)!important;text-decoration:underline;text-decoration-color:rgba(10,10,10,.18);text-underline-offset:4px;overflow-wrap:anywhere}
  #site-footer .footer-top p a[aria-current="page"]{color:var(--m-acid-text)!important}
  #site-footer .footer-top p br{display:block;content:'';margin:0}
  #site-footer .footer-top>div:last-child p{line-height:2!important}
  #site-footer .footer-top>div:last-child span{color:var(--m-acid-text)!important}
  #site-footer .footer-bottom{display:flex!important;flex-direction:column;align-items:flex-start;gap:6px;margin-top:24px!important;padding:20px 0 24px!important;border-top:1px solid var(--m-line)!important;
    font:500 10px 'JetBrains Mono',monospace!important;letter-spacing:.08em;color:rgba(10,10,10,.55)!important}
  #site-footer .footer-bottom::after{margin-left:0!important;color:rgba(10,10,10,.55)!important}
  #site-footer .footer-toggles, #site-footer .footer-toggles *{color:rgba(10,10,10,.55)!important}
  #site-footer .newsletter{position:relative;margin-bottom:26px}
  #site-footer .newsletter::after{left:16px!important;bottom:-20px!important;font-size:10px!important;color:rgba(10,10,10,.6)!important}
  #site-footer .footer-top>div:nth-child(4), #site-footer .footer-top>div:nth-child(5){grid-column:1/-1}
  #site-footer .footer-top>div:nth-child(4) p{display:flex;flex-wrap:wrap;gap:0 18px}
  #site-footer .footer-top>div:nth-child(4) p br{display:none}
  #site-footer .footer-top>div:nth-child(5) p{line-height:1.9!important}
  #site-footer .footer-top p a{overflow-wrap:normal}
  #site-footer .footer-bottom{opacity:1!important}
  #site-footer .footer-bottom>span:first-child{opacity:1!important;color:rgba(10,10,10,.64)!important}
  #site-footer .footer-bottom::after{animation:none!important;opacity:1!important;color:rgba(10,10,10,.6)!important}
}
/* Tablet: same design, roomier column */
@media (min-width:761px) and (max-width:1024px){
  :root{--m-max:720px;--m-pad:32px}
  #haut .header-cta{display:inline-flex!important;width:auto!important;height:40px!important;padding:0 16px!important;border-radius:999px!important;font-size:11px!important;color:#121210!important}
  #haut .header-cta *{color:#121210!important}
  #haut .header-cta .cta-text{display:inline!important;font-size:11px!important;letter-spacing:.06em}
  #haut .header-cta .cta-arrow{font-size:13px!important}
  #haut .status-label{font-size:0!important}
  #haut .status-label::after{content:'DISPONIBLE POUR UN PROJET'}
  .m-acc-inner{max-width:640px}
  .m-acc-title{font-size:32px}
  .m-tabbar{max-width:440px}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  #haut.site-header, #haut .mega-nav, .m-acc-panel, .m-tabbar, .m-acc-ico{transition:none!important}
}