https://www.dkfpompe.fr/designs/modern-details.js

1function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function useSeo(title,desc,faqs){React.useEffect(()=>{const prevTitle=document.title;if(title)document.title=title;let meta=document.querySelector("meta[name=\"description\"]");let metaCreated=false;if(!meta){meta=document.createElement("meta");meta.setAttribute("name","description");document.head.appendChild(meta);metaCreated=true}const prevDesc=meta.getAttribute("content");if(desc)meta.setAttribute("content",desc);let script=null;if(faqs&&faqs.length){script=document.createElement("script");script.type="application/ld+json";script.setAttribute("data-faq-jsonld","1");script.textContent=JSON.stringify({"@context":"https://schema.org","@type":"FAQPage",mainEntity:faqs.map(f=>({"@type":"Question",name:f.q,acceptedAnswer:{"@type":"Answer",text:f.a}}))});document.head.appendChild(script)}return()=>{document.title=prevTitle;if(metaCreated&&meta.parentNode)meta.parentNode.removeChild(meta);else if(meta&&prevDesc!=null)meta.setAttribute("content",prevDesc);if(script&&script.parentNode)script.parentNode.removeChild(script)}},[title,desc,faqs])}function FAQItem({q,a,open,onToggle}){return React.createElement("div",{style:{borderBottom:`1px solid ${M.border}`}},React.createElement("button",{onClick:onToggle,style:{width:"100%",background:"transparent",border:0,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,padding:"26px 4px",textAlign:"left",fontFamily:mFont,color:M.ink,fontSize:20,fontWeight:500,letterSpacing:-0.3}},React.createElement("span",null,q),React.createElement("span",{style:{flexShrink:0,width:28,height:28,borderRadius:99,border:`1px solid ${M.border2}`,color:M.accent,display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,lineHeight:1,transform:open?"rotate(45deg)":"none",transition:"transform 220ms"}},"+")),React.createElement("div",{style:{maxHeight:open?800:0,overflow:"hidden",transition:"max-height 320ms ease, opacity 220ms",opacity:open?1:0}},React.createElement("p",{style:{fontSize:16,lineHeight:1.65,color:M.muted,margin:0,padding:"0 4px 30px",maxWidth:860}},a)))}function FAQList({items}){const[open,setOpen]=React.useState(0);if(!items||!items.length)return null;return React.createElement("section",{style:{padding:"96px 48px",background:M.bg2,borderBottom:`1px solid ${M.border}`}},React.createElement("div",{style:{maxWidth:1100,margin:"0 auto"}},React.createElement(SectionHead,{label:"Questions / r\xE9ponses"}),React.createElement("div",{style:{borderTop:`1px solid ${M.border}`}},items.map((it,i)=>React.createElement(FAQItem,{key:i,q:it.q,a:it.a,open:open===i,onToggle:()=>setOpen(open===i?-1:i)})))))}function DetailHero({crumbLabel,crumbKey,kicker,title,tagline,lead,image}){const{go}=React.useContext(NavCtx);return React.createElement("section",{style:{position:"relative",overflow:"hidden",padding:"64px 48px 72px",borderBottom:`1px solid ${M.border}`}},React.createElement("div",{style:{position:"absolute",inset:0,backgroundImage:`linear-gradient(${M.border} 1px, transparent 1px), linear-gradient(90deg, ${M.border} 1px, transparent 1px)`,backgroundSize:"80px 80px",opacity:0.4,maskImage:"radial-gradient(ellipse at top right, black 15%, transparent 60%)"}}),React.createElement("div",{style:{position:"relative",maxWidth:1320,margin:"0 auto"}},React.createElement("div",{style:{display:"flex",alignItems:"center",gap:10,fontFamily:mMono,fontSize:12.5,color:M.muted,marginBottom:40,letterSpacing:0.4}},React.createElement("a",_extends({},linkTo(go,crumbKey),{style:{color:M.muted,cursor:"pointer",fontFamily:mMono,fontSize:12.5,padding:0,textDecoration:"none"}}),crumbLabel),React.createElement("span",{style:{color:M.faint}},"/"),React.createElement("span",{style:{color:M.ink}},kicker)),React.createElement("h1",{style:{lineHeight:1.03,letterSpacing:-2.4,fontWeight:500,margin:0,color:M.ink,fontFamily:mFont,fontSize:64,maxWidth:1000,overflowWrap:"anywhere"}}

1,title),tagline&&React.createElement("p",{style:{fontFamily:mSerif,fontStyle:"italic",fontWeight:400,color:M.accent,fontSize:32,letterSpacing:-0.5,margin:"24px 0 0"}},tagline),lead&&React.createElement("p",{style:{fontSize:19,lineHeight:1.6,color:M.muted,margin:"32px 0 0",maxWidth:760}},lead),image&&React.createElement("div",{style:{marginTop:56,height:460,borderRadius:8,overflow:"hidden",border:`1px solid ${M.border2}`,position:"relative"}},React.createElement("img",{src:asset(image),alt:kicker,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}),React.createElement("div",{style:{position:"absolute",inset:0,background:"linear-gradient(180deg, rgba(11,16,28,0) 55%, rgba(11,16,28,0.35) 100%)"}}))))}function DetailSections({sections,side,image,imageFit,images}){const gallery=images&&images.length?images:image?[{src:image,fit:imageFit}]:[];return React.createElement("section",{style:{padding:"88px 48px",borderBottom:`1px solid ${M.border}`}},React.createElement("div",{style:{maxWidth:1320,margin:"0 auto",display:"grid",gridTemplateColumns:"1.4fr 0.85fr",gap:80,alignItems:"start"}},React.createElement("div",null,sections.map((sec,si)=>React.createElement("div",{key:si,style:{marginBottom:si<sections.length-1?52:0}},React.createElement("h2",{style:{fontSize:13,fontFamily:mMono,fontWeight:500,color:M.muted,textTransform:"uppercase",letterSpacing:1.4,margin:"0 0 20px",paddingBottom:16,borderBottom:`1px solid ${M.border}`,display:"flex",alignItems:"center",gap:12}},React.createElement("span",{style:{color:M.accent}},String(si+1).padStart(2,"0")),sec.h),sec.body.map((p,pi)=>React.createElement("p",{key:pi,style:{fontSize:18,lineHeight:1.7,color:pi===0?M.ink:M.muted,margin:"0 0 18px"}},p))))),React.createElement("div",{style:{position:"sticky",top:110,display:"flex",flexDirection:"column",gap:16}},gallery.length?React.createElement("div",{className:"m-side-gallery",style:{display:"flex",flexDirection:"column",gap:12}},React.createElement("div",{style:{aspectRatio:gallery[0].ratio||"3/2",borderRadius:6,overflow:"hidden",border:`1px solid ${M.border2}`,background:gallery[0].fit==="contain"?"#f2f4f7":M.bg2}},React.createElement("img",{src:asset(gallery[0].src),alt:gallery[0].alt||side||"visuel",loading:"lazy",style:{width:"100%",height:"100%",objectFit:gallery[0].fit||"cover",display:"block"}})),gallery.length>1&&React.createElement("div",{style:{display:"grid",gridTemplateColumns:gallery.length>2?"repeat(2, 1fr)":"1fr",gap:12,alignItems:"start"}},gallery.slice(1).map((g,gi)=>React.createElement("div",{key:gi,style:{aspectRatio:g.ratio||"3/2",borderRadius:6,overflow:"hidden",border:`1px solid ${M.border2}`,background:g.fit==="contain"?"#f2f4f7":M.bg2}},React.createElement("img",{src:asset(g.src),alt:g.alt||side||"visuel",loading:"lazy",style:{width:"100%",height:"100%",objectFit:g.fit||"cover",display:"block"}}))))):side?React.createElement(Placeholder,{label:side,bg:"#141C2D",

1stripe:"rgba(255,255,255,0.05)",fg:M.faint,style:{height:300,border:`1px solid ${M.border2}`,borderRadius:6}}):null,React.createElement("div",{style:{padding:"24px 26px",background:M.card,border:`1px solid ${M.border}`,borderRadius:6}},React.createElement("div",{style:{fontFamily:mMono,fontSize:12,color:M.muted,letterSpacing:1,textTransform:"uppercase",marginBottom:10}},"Besoin pr\xE9cis ?"),React.createElement("p",{style:{fontSize:14.5,lineHeight:1.55,color:M.muted,margin:"0 0 18px"}},"Envoyez votre cahier des charges, un ing\xE9nieur dimensionne la solution."),React.createElement(BodyCTA,null)))))}function BodyCTA(){const{go}=React.useContext(NavCtx);return React.createElement("a",_extends({},linkTo(go,"contact"),{className:"m-cta-primary",style:{background:M.accent,color:M.bg,border:0,padding:"13px 20px",borderRadius:999,fontFamily:mFont,fontWeight:600,fontSize:14.5,cursor:"pointer",textDecoration:"none",display:"inline-flex",alignItems:"center",gap:10}}),"D\xE9crire mon projet ",React.createElement(ArrowRight,{size:14}))}function DetailPoints({label,points}){if(!points||!points.length)return null;return React.createElement("section",{style:{padding:"96px 48px 0",background:M.bg2}},React.createElement("div",{style:{maxWidth:1100,margin:"0 auto"}},React.createElement(SectionHead,{label:label||"Points cl\xE9s"}),React.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:0,borderTop:`1px solid ${M.border}`}},points.map((p,i)=>React.createElement("div",{key:i,style:{padding:"34px 36px 38px",borderBottom:`1px solid ${M.border}`,borderRight:i%2===0&&i!==points.length-1?`1px solid ${M.border}`:0,gridColumn:i===points.length-1&&i%2===0?"1 / -1":"auto",display:"flex",flexDirection:"column",gap:12}},React.createElement("div",{style:{fontFamily:mMono,fontSize:12,color:M.accent,letterSpacing:1}},String(i+1).padStart(2,"0")),React.createElement("div",{style:{fontSize:22,fontWeight:500,letterSpacing:-0.4}},p.t),React.createElement("p",{style:{fontSize:15.5,lineHeight:1.6,color:M.muted,margin:0}},p.d))))))}function DetailFamilies({label,items}){if(!items||!items.length)return null;return React.createElement("section",{style:{padding:"96px 48px 0",background:M.bg2}},React.createElement("div",{style:{maxWidth:1100,margin:"0 auto"}},React.createElement(SectionHead,{label:label||"Produits & fluides concern\xE9s"}),React.createElement("ul",{style:{display:"flex",flexWrap:"wrap",gap:12,listStyle:"none",margin:0,padding:0}},items.map(it=>React.createElement("li",{key:it,style:{background:M.card,border:`1px solid ${M.accent}`,borderRadius:999,padding:"11px 18px",fontSize:14.5,color:M.ink}},it)))))}function RelatedCards({title,items,prefix}){const{go}=React.useContext(NavCtx);const rowRef=React.useRef(null);const[page,setPage]=React.useState(0);const[atEnd,setAtEnd]=React.useState(false);const[atStart,setAtStart]=React.useState(true);const[pages,setPages]=React.useState(1);const measure=()=>{const el=rowRef.current;if(!el)return;setPages(Math.max(1,Math.ceil(el.scrollWidth/el.clientWidth)))};React.useEffect(()=>{measure();window.addEventListener("resize",measure);return()=>window.removeEventListener("resize",measure)},[]);React.useEffect(()=>{const el=rowRef.current;if(el)el.scrollLeft=0;setPage(0);setAtStart(true);setAtEnd(false)},[prefix,(items||[]).map(x=>x.slug).join("|")]);const onScroll=()=>{const el=rowRef.current;if(!el)return;const max=el.scrollWidth-el.clientWidth;setPage(max<=0?0:Math.round(el.scrollLeft/el.clientWidth));setAtEnd(max<=0||el.scrollLeft>=max-32);setAtStart(el.scrollLeft<=32)};const goToPage=i=>{const el=rowRef.current;if(!el)return;const max=el.scrollWidth-el.clientWidth;el.scrollTo({left:i>=pages-1?max:Math.min(i*el.clientWidth,max),behavior:"smooth"})};if(!items||!items.length)return null;return React.createElement("section",{style:{padding:"96px 48px",borderBottom:`1px solid ${M.border}`}},React.createElement("style",null,`
2        .m-rel-card { transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
3        .m-rel-card:hover { border-color: ${M.accent}; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(37,169,225,0.28), 0 0 0 1px ${M.accent}; }
4        .m-rel-img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
5        .m-rel-card:hover .m-rel-img { transform: scale(1.05); }
6        .m-rel-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 20px 22px 48px; margin: -20px -22px 0; scroll-padding-inline: 22px; scrollbar-width: none; -ms-overflow-style: none; }
7        .m-rel-row::-webkit-scrollbar { display: none; }
8        .m-rel-row > * { flex: 0 0 max(196px, calc((100% - 64px) / 5)); scroll-snap-align: start; }
9        @media (max-width: 1100px) { .m-rel-row > * { flex: 0 0 max(180px, calc((100% - 48px) / 4)); } }
10        @media (max-width: 820px) { .m-rel-row > * { flex: 0 0 max(170px, calc((100% - 32px) / 3)); } }
11        @media (max-width: 620px) { .m-rel-row > * { flex: 0 0 calc((100% - 16px) / 2); } }
12        .m-rel-nav { position: absolute; top: calc(50% - 46px); width: 44px; height: 44px; border-radius: 999px; border: 1px solid ${M.accent}; background: ${M.card}; color: ${M.accent}; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 250ms ease, background 200ms ease; z-index: 3; }
13        .m-rel-nav:hover { background: ${M.accent}; color: #fff; }
14        .m-rel-dot { width: 7px; height: 7px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; transition: background 200ms ease, width 200ms ease; }
15        @media (max-width: 620px) { .m-rel-fade, .m-rel-nav { display: none !important; } .m-rel-row { padding: 20px 20px 40px !important; margin: -20px -20px 0 !important; scroll-padding-inline: 20px; } }
16      `),React.createElement("div",{style:{maxWidth:1320,margin:"0 auto"}},React.createElement(SectionHead,{label:title}),React.createElement("div",{style:{position:"relative"}}

16,React.createElement("div",{ref:rowRef,className:"m-rel-row",onScroll:onScroll},items.map(it=>React.createElement("a",_extends({key:it.slug},linkTo(go,prefix+it.slug),{className:"m-rel-card",style:{background:M.card,border:`1px solid ${M.border}`,borderRadius:5,overflow:"hidden",cursor:"pointer",display:"block",textDecoration:"none",color:"inherit"}}),React.createElement("div",{style:{position:"relative",height:116,overflow:"hidden",background:M.bg2}},it.img&&React.createElement("img",{src:asset(it.img),alt:it.name,loading:"lazy",className:"m-rel-img",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}),React.createElement("div",{style:{position:"absolute",inset:0,background:"linear-gradient(180deg, rgba(11,16,28,0) 45%, rgba(11,16,28,0.55) 100%)"}})),React.createElement("div",{style:{padding:"16px 16px 18px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:10}},React.createElement("span",{style:{fontSize:16,fontWeight:500,letterSpacing:-0.2,lineHeight:1.25,minWidth:0,overflowWrap:"anywhere"}},it.name),React.createElement("span",{style:{color:M.accent,flexShrink:0}},React.createElement(ArrowRight,{size:14})))))),pages>1&&React.createElement(React.Fragment,null,React.createElement("div",{className:"m-rel-fade",style:{position:"absolute",top:0,bottom:48,left:-24,width:174,pointerEvents:"none",zIndex:2,background:`linear-gradient(270deg, rgba(11,16,28,0) 0%, rgba(11,16,28,0.72) 45%, ${M.bg} 88%)`,opacity:atStart?0:1,transition:"opacity 250ms ease"}}),React.createElement("div",{className:"m-rel-fade",style:{position:"absolute",top:0,bottom:48,right:-28,width:178,pointerEvents:"none",zIndex:2,background:`linear-gradient(90deg, rgba(11,16,28,0) 0%, rgba(11,16,28,0.72) 45%, ${M.bg} 88%)`,opacity:atEnd?0:1,transition:"opacity 250ms ease"}}),React.createElement("button",{className:"m-rel-nav",onClick:()=>goToPage(Math.max(page-1,0)),"aria-label":"Voir les pr\xE9c\xE9dentes",style:{left:10,opacity:atStart?0:1,pointerEvents:atStart?"none":"auto",transform:"rotate(180deg)"}},React.createElement(ArrowRight,{size:16})),React.createElement("button",{className:"m-rel-nav",onClick:()=>goToPage(Math.min(page+1,pages-1)),"aria-label":"Voir les suivantes",style:{right:10,opacity:atEnd?0:1,pointerEvents:atEnd?"none":"auto"}},React.createElement(ArrowRight,{size:16})))),pages>1&&React.createElement("div",{style:{display:"flex",justifyContent:"center",gap:9,marginTop:6,position:"relative",zIndex:4}},Array.from({length:pages}).map((_,i)=>React.createElement("button",{key:i,className:"m-rel-dot",onClick:()=>goToPage(i),"aria-label":`Page ${i+1}`,style:{background:i===page?M.accent:M.border2,width:i===page?22:7}})))))}function RelatedStrip({title,items,prefix}){const{go}=React.useContext(NavCtx);return React.createElement("section",{style:{padding:"72px 48px",borderBottom:`1px solid ${M.border}`}},React.createElement("div",{style:{maxWidth:1320,margin:"0 auto"}},React.createElement(SectionHead,{label:title}),React.createElement("div",{style:{display:"flex",flexWrap:"wrap",gap:12}},items.map(it=>React.createElement("a",_extends({key:it.slug},linkTo(go,prefix+it.slug),{className:"m-cta-ghost",style:{background:M.card,border:`1px solid ${M.border}`,borderRadius:999,padding:"12px 20px",cursor:"pointer",fontFamily:mFont,textDecoration:"none",fontSize:14.5,color:M.ink,display:"inline-flex",alignItems:"center",gap:10}}),it.name," ",React.createElement(ArrowRight,{size:13}))))))}function ApplicationDetailPage({slug}){const d=APP_DETAILS[slug];useSeo(d&&d.seoTitle,d&&d.seoDesc,d&&d.faqs);if(!d)return React.createElement(ApplicationsPage,null);const sector=(window.APP_SECTORS||[]).find(s=>s.slug===slug);const related=APP_SECTORS.filter(s=>s.slug!==slug);return React.createElement("div",{"data-screen-label":"02 Moderne \u2014 Application \xB7 "+d.kicker,style:{width:"100%",minHeight:"100%",background:M.bg,color:M.ink,fontFamily:mFont,fontSize:16,lineHeight:1.5}},React.createElement(ModernNav,null),React.createElement(DetailHero,{crumbLabel:"Applications",crumbKey:"applications",kicker:d.kicker,title:d.title,tagline:d.tagline,lead:d.lead}),React.createElement(DetailSections,{sections:d.sections,side:d.kicker,image:sector&&sector.img}),React.createElement(DetailPoints,{label:"Points cl\xE9s",points:d.points}),React.createElement(DetailFamilies,{items:d.families}),React.createElement(FAQList,{items:d.faqs}),React.createElement(RelatedCards,{title:"Autres applications",items:related,prefix:"app:"}),React.createElement(CTABand,null),React.createElement(ModernFooter,null))}function PumpDetailPage({slug}){const d=PUMP_DETAILS[slug];useSeo(d&&d.seoTitle,d&&d.seoDesc,d&&d.faqs);if(!d)return React.createElement(PumpsPage,null);const cat=PUMP_CATS.find(p=>p.slug===slug);const related=PUMP_CATS.filter(p=>p.slug!==slug).map(p=>({slug:p.slug,name:p.name}));return React.createElement("div",{"data-screen-label":"02 Moderne \u2014 Pompe \xB7 "+d.kicker,style:{width:"100%",minHeight:"100%",background:M.bg,color:M.ink,fontFamily:mFont,fontSize:16,lineHeight:1.5}},React.createElement(ModernNav,null),React.createElement(DetailHero,{crumbLabel:"Nos solutions",crumbKey:"pumps",kicker:d.kicker,title:d.title,tagline:d.tagline,lead:d.lead}),React.createElement(DetailSections,{sections:d.sections,side:d.kicker,image:cat&&cat.img,imageFit:"cover",images:d.images}),React.createElement(DetailPoints,{label:"Points cl\xE9s",points:d.points}),React.createElement(FAQList,{items:d.faqs}),React.createElement(RelatedStrip,{title:"Autres solutions",items:related,prefix:"pump:"}),React.createElement(CTABand,null),React.createElement(ModernFooter,null))}Object.assign(window,{ApplicationDetailPage,PumpDetailPage,RelatedCards,DetailPoints,DetailFamilies,DetailSections,useSeo

16});