<script>
(function () {
const PATH = () => location.pathname.replace(/\/+$/,'').toLowerCase();
const ALLOWED = () => /^\/series(\/|$)/.test(PATH());
function cleanupIfNotAllowed(){
if (ALLOWED()) return;
document.querySelectorAll('.swws-series-nav__wrap, .swws-backcat__wrap').forEach(n=>n.remove());
}
const ROOT = () => '/series';
const TABS = [
{ label:"Panels Series", href: () => ${ROOT()}/panels },
{ label:"Public Furniture", href: () => ${ROOT()}/public-furniture },
{ label:"Craftlab", href: () => ${ROOT()}/craftlab },
{ label:"Onsite", href: () => ${ROOT()}/onsite },
{ label:"Proposals", href: () => ${ROOT()}/proposals },
{ label:"R&D", href: () => ${ROOT()}/r-d }, /* ✅ correct /
{ label:"Explorations", href: () => ${ROOT()}/explorations },
{ label:"All", href: () => ${ROOT()}/all } / ✅ correct */
];
function getMountPoint(){
return (
document.querySelector('.notion-header, .notion-header__content, .notion-header__title') ||
document.querySelector('.notion-collection__header-wrapper') ||
document.querySelector('.notion-page-content') ||
document.body
);
}
function isActive(href){
const p = PATH();
const clean = href.replace(/\/+$/,'');
return p === clean || p.startsWith(clean + '/');
}
function buildNav(){
const wrap = document.createElement('div'); wrap.className = 'swws-series-nav__wrap';
const nav = document.createElement('nav'); nav.className = 'swws-series-nav';
const rail = document.createElement('div'); rail.className = 'swws-series-nav__rail';
TABS.forEach(t=>{
const a = document.createElement('a');
const href = t.href();
a.className = 'swws-tab';
a.href = href;
a.textContent = t.label;
if (isActive(href)) a.setAttribute('aria-current','page');
rail.appendChild(a);
});
nav.appendChild(rail); wrap.appendChild(nav); return wrap;
}
function isProjectPage(){
const parts = PATH().split('/').filter(Boolean); // ["series","cat","slug"]
return parts.length >= 3;
}
function currentCategory(){
const parts = PATH().split('/').filter(Boolean);
return parts[1] || null;
}
function buildBack(){
if (!isProjectPage()) return null;
const cat = currentCategory();
const href = cat ? ${ROOT()}/${cat} : ${ROOT()}/all;
const w = document.createElement('div'); w.className='swws-backcat__wrap';
const a = document.createElement('a'); a.className='swws-backcat'; a.href = href;
a.innerHTML = <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"> <path d="M15 6l-6 6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span>Back to ${cat ? cat.replace(/-/g,' ') : 'series'}</span>;
w.appendChild(a); return w;
}
function injectWithRetry(maxTries=160){
if (!ALLOWED()) return;
let tries=0;
(function loop(){
const mount = getMountPoint();
if (mount){
document.querySelectorAll('.notion-dropdown__menu-wrapper').forEach(el => el.style.display='none');
if (!document.querySelector('.swws-series-nav__wrap')){
const nav = buildNav();
mount.parentElement ? mount.parentElement.insertBefore(nav, mount.nextSibling)
: document.body.prepend(nav);
} else {
document.querySelectorAll('.swws-tab').forEach(a=>{
a.removeAttribute('aria-current');
if (isActive(a.getAttribute('href'))) a.setAttribute('aria-current','page');
});
}
if (isProjectPage() && !document.querySelector('.swws-backcat__wrap')){
const back = buildBack();
const m = getMountPoint();
if (back) (m.parentElement ? m.parentElement.insertBefore(back, m.nextSibling)
: document.body.prepend(back));
}
return;
}
if (++tries < maxTries) setTimeout(loop,50);
})();
}
function watchNav(){
const fire = () => { cleanupIfNotAllowed(); if (ALLOWED()) injectWithRetry(); };
window.addEventListener('pageshow', fire);
window.addEventListener('popstate', fire);
const _ps=history.pushState, _rs=history.replaceState;
history.pushState=function(){const r=_ps.apply(this,arguments);window.dispatchEvent(new Event('swws:navigate'));return r;};
history.replaceState=function(){const r=_rs.apply(this,arguments);window.dispatchEvent(new Event('swws:navigate'));return r;};
window.addEventListener('swws:navigate', fire);
new MutationObserver(fire).observe(document.documentElement,{childList:true,subtree:true});
}
(function boot(){ cleanupIfNotAllowed(); if (!ALLOWED()) return; injectWithRetry(); watchNav(); })();
})();
</script>
<!-- ✅ Mobile : centrage auto de l’onglet actif -->
<script>
(function(){
const MOBILE = () => window.innerWidth <= 720;
const rail = () => document.querySelector('.swws-series-nav__rail');
const active = () => document.querySelector('.swws-tab[aria-current="page"]');
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function center(el, smooth=true){
const r = rail(); if (!r || !el) return;
const target = el.offsetLeft - (r.clientWidth - el.clientWidth)/2;
const max = Math.max(0, r.scrollWidth - r.clientWidth);
r.scrollTo({ left: Math.max(0, Math.min(target, max)), behavior: (smooth && !reduced) ? 'smooth' : 'auto' });
}
function run(initial=false){ if (!MOBILE()) return; center(active(), !initial); }
addEventListener('DOMContentLoaded', ()=>run(true));
addEventListener('load', ()=>run(true));
addEventListener('pageshow', ()=>run(true));
let t; addEventListener('resize', ()=>{ clearTimeout(t); t=setTimeout(()=>run(true),120); });
new MutationObserver(()=>run(true)).observe(document.documentElement,{childList:true,subtree:true});
const _ps=history.pushState,_rs=history.replaceState;
history.pushState=function(){const r=_ps.apply(this,arguments);dispatchEvent(new Event('swws:navigate'));return r;};
history.replaceState=function(){const r=_rs.apply(this,arguments);dispatchEvent(new Event('swws:navigate'));return r;};
addEventListener('swws:navigate', ()=>run(true));
addEventListener('popstate', ()=>run(true));
})();
</script>
/* === SWWS — Series Nav (responsive + hover + mobile rail) =========== / .swws-series-nav{ --pill-bg:#fff; --pill-fg:#111; --pill-bd:rgba(0,0,0,.18); --active-bg:#feedcf; --active-fg:#111; --active-bd:rgba(0,0,0,.25); --hover-bg:rgba(254,237,207,.6); --hover-bd:rgba(0,0,0,.2); margin:18px auto 22px; padding:10px 12px; } .swws-series-nav__rail{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; overflow:visible; } @media (max-width:720px){ .swws-series-nav__rail{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 4px; scroll-snap-type:x mandatory; scroll-behavior:smooth; mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); -webkit-mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); } .swws-series-nav__rail::-webkit-scrollbar{ display:none; } .swws-tab{ flex:0 0 auto; scroll-snap-align:center; } } .swws-tab{ display:inline-flex; align-items:center; justify-content:center; font:600 18px/1 "Space Grotesk", ui-sans-serif, system-ui; letter-spacing:.02em; color:var(--pill-fg); background:var(--pill-bg); border:1px solid var(--pill-bd); border-radius:0; padding:10px 16px; text-decoration:none; cursor:pointer; transition:background .2s, border-color .2s, transform .12s; } .swws-tab:hover{ background:var(--hover-bg); border-color:var(--hover-bd); transform:translateY(-1px); } .swws-tab[aria-current="page"]{ background:var(--active-bg); border-color:var(--active-bd); color:var(--active-fg); } .swws-backcat__wrap{ display:flex; justify-content:flex-start; margin:12px 0 18px; } @media (max-width:640px){ .swws-backcat__wrap{ justify-content:center; } } .swws-backcat{ display:inline-flex; align-items:center; gap:.55rem; padding:.75rem 1.1rem; border-radius:999px; background:#111; color:#fff; text-decoration:none; font:600 14px/1 "Space Grotesk",ui-sans-serif,system-ui; border:1px solid rgba(255,255,255,.14); box-shadow:0 6px 18px rgba(0,0,0,.25); transition:transform .15s, box-shadow .2s, background .2s; } .swws-backcat:hover{ transform:translateY(-1px); background:#000; box-shadow:0 10px 26px rgba(0,0,0,.32); } .swws-backcat svg{ width:18px; height:18px; } / --- Masonry plein écran pour la page ALL projects --- / @media (min-width: 1024px) { / Étendre la galerie sur toute la largeur / #block-series-all { max-width: 100vw !important; padding-left: 3vw; padding-right: 3vw; } / Masonry columns : 3 sur desktop / #block-series-all .notion-collection-gallery { display: block !important; / On casse le grid natif de Super / column-count: 3 !important; / Force 3 colonnes / column-gap: 1.2rem !important; } / Chaque carte = brique masonry / #block-series-all .notion-collection-card { display: inline-block !important; width: 100% !important; max-width: 100% !important; flex: none !important; margin-bottom: 1.8rem !important; break-inside: avoid; overflow: hidden; border-radius: 0px; transition: transform 0.25s ease, opacity 0.3s ease; } / Effet au survol / #block-series-all .notion-collection-card:hover { transform: translateY(-4px); opacity: 0.95; } / Images fluides / #block-series-all img.notion-collection-card__cover { width: 100% !important; height: auto !important; display: block; border-radius: 0px; } / Texte sous l’image / #block-series-all .notion-collection-card__property-list { padding: 0.6rem 0.4rem 1rem 0.4rem; } } / Écrans très larges (≥1600px) : 4 colonnes / @media (min-width: 1600px) { #block-series-all .notion-collection-gallery { column-count: 4 !important; } } / Tablette : 2 colonnes masonry / @media (min-width: 768px) and (max-width: 1023px) { #block-series-all { max-width: 100vw !important; padding-left: 4vw; padding-right: 4vw; } #block-series-all .notion-collection-gallery { display: block !important; column-count: 2 !important; column-gap: 1.4rem !important; } #block-series-all .notion-collection-card { display: inline-block !important; width: 100% !important; max-width: 100% !important; flex: none !important; margin-bottom: 1.4rem !important; break-inside: avoid; } } / Mobile : une seule colonne, grille native de Super */