/* Signature est appliquée par défaut ; Architecture et Immersion restent des aperçus. */
.concept-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 4%;background:#171717;border-bottom:1px solid #444;font-size:11px;line-height:1.5;color:#bcbcbc;position:relative;z-index:15}.concept-bar>div{display:flex;gap:8px}.concept-bar a{padding:7px 10px;border:1px solid transparent;border-radius:20px;white-space:nowrap}.concept-bar a[aria-current]{border-color:#898989;background:#353535;color:white}.concept-bar a span{font-size:9px;color:#aaa;margin-right:5px}.concept-bar a:hover{color:white;border-color:#aaa}.concept-bar a:focus-visible{outline:2px solid white;outline-offset:3px}
:root[data-concept] .hero-actions{gap:12px;flex-wrap:wrap}
:root[data-concept] .hero-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:47px;border:1px solid #777;padding:14px 21px;border-radius:30px;font-size:11px;background:#171717b8;backdrop-filter:blur(10px);text-decoration:none;transition:box-shadow .25s,border-color .25s,background .25s}
:root[data-concept] .hero-actions a:first-child{background:linear-gradient(125deg,#f6f6f6,#b8b8b8);color:#111;border-color:#eee}
:root[data-concept] .hero-actions a:hover{border-color:#fff;box-shadow:inset 0 0 0 1px #fff,0 0 18px #ffffff15}
:root[data-concept] .hero-actions a:active{background:#444;color:white}
:root[data-concept] .hero-actions a:focus-visible{outline:2px solid white;outline-offset:4px}
/* 01 — SIGNATURE : argent brossé, lignes souples, lumière contenue. */
:root[data-concept=signature] body{background:#0b0b0c}
:root[data-concept=signature] .hero{height:610px;margin:12px 4% 0;border-radius:40px;border-color:#5a5a5f;background:#111113;box-shadow:inset 0 1px #ffffff20}
:root[data-concept=signature] .hero-content{padding-top:48px}
:root[data-concept=signature] .hero h1{font-size:clamp(45px,5.2vw,76px);max-width:880px;font-weight:300;line-height:1.04;letter-spacing:-3px}
:root[data-concept=signature] .hero h1 em{background:linear-gradient(105deg,#fff,#a9aaae 55%,#ececee);background-clip:text;-webkit-text-fill-color:transparent}
:root[data-concept=signature] .hero-description{font-size:13px;margin-top:20px}
:root[data-concept=signature] .hero-actions{margin-top:26px}
:root[data-concept=signature] .hero-image{height:45%;object-position:center 30%}
:root[data-concept=signature] .hero:after{background:linear-gradient(180deg,#111113 0%,#111113 39%,#111113cc 48%,transparent 78%)}
:root[data-concept=signature] .section-heading h2{font-size:50px;font-weight:300}
:root[data-concept=signature] .universe{border-color:#404045;padding:22px 0}
:root[data-concept=signature] .universe-visual{background:#151517;border-color:#4a4a50;border-radius:24px}
:root[data-concept=signature] .page-intro{padding:50px 6% 40px;background:radial-gradient(ellipse at 50% -80%,#45454b,transparent 72%)}
:root[data-concept=signature] .page-intro h1{font-size:64px;letter-spacing:-2.8px}
:root[data-concept=signature] .category-aside{border:1px solid #49494e;border-radius:26px;padding:24px 12px;background:#121214;align-self:start}
:root[data-concept=signature] .category-label{padding-left:15px}
:root[data-concept=signature] .category-button[aria-pressed=true]{background:linear-gradient(120deg,#e4e4e6,#adadb2);color:#111;border-color:#ededed}
:root[data-concept=signature] .product-card{padding:28px;border-radius:32px;border-color:#606066;background:radial-gradient(ellipse at 20% 0,#303035,#121214 75%)}
:root[data-concept=signature] .product-card .visual{border-radius:22px;aspect-ratio:1.2}
:root[data-concept=signature] .product-card h3{font-weight:300;font-size:30px}
:root[data-concept=signature] .footer{border-top:1px solid #4b4b50;background:#121214}
/* 02 — ARCHITECTURE : composition asymétrique, grille et précision. */
:root[data-concept=architecture] body{background:#0b0c0d}
:root[data-concept=architecture] .eyebrow,:root[data-concept=architecture] .category-label,:root[data-concept=architecture] .range{font-family:'Courier New',monospace;letter-spacing:1.3px}
:root[data-concept=architecture] .hero{height:630px;margin:20px 4% 0;border-radius:4px;border-color:#555;background:#131516}
:root[data-concept=architecture] .hero-content{text-align:left;margin:0;padding:58px 4%;max-width:64%;height:100%}
:root[data-concept=architecture] .hero h1{font-size:clamp(48px,5.4vw,76px);line-height:1.01;letter-spacing:-3px;font-weight:400;margin:0;max-width:650px}
:root[data-concept=architecture] .hero h1 br{display:block}
:root[data-concept=architecture] .hero h1 em{color:#a9b0b5}
:root[data-concept=architecture] .hero-description{font-size:13px;margin:26px 0 0;max-width:370px}
:root[data-concept=architecture] .hero-description br{display:block}
:root[data-concept=architecture] .hero-image{left:52%;width:48%;height:100%;object-position:58% center;filter:saturate(.55)}
:root[data-concept=architecture] .hero:after{background:linear-gradient(90deg,#131516 0%,#131516 43%,#13151680 60%,transparent 90%)}
:root[data-concept=architecture] .hero-actions{justify-content:flex-start;max-width:520px;margin-top:28px}
:root[data-concept=architecture] .hero-actions a{border-radius:4px;padding:14px 17px;font-size:10px;gap:12px}
:root[data-concept=architecture] .hero-bottom{left:4%;right:4%;padding-top:16px;border-top:1px solid #ffffff45;font-family:monospace;bottom:23px}
:root[data-concept=architecture] .button,:root[data-concept=architecture] input,:root[data-concept=architecture] select,:root[data-concept=architecture] textarea,:root[data-concept=architecture] .contact-form,:root[data-concept=architecture] .account-panel,:root[data-concept=architecture] .led-stage{border-radius:4px}
:root[data-concept=architecture] .section{padding:75px 6%}
:root[data-concept=architecture] .section-heading h2{font-size:48px;font-weight:400;letter-spacing:-1.8px}
:root[data-concept=architecture] .universes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;border:1px solid #474b4e;background:#474b4e}
:root[data-concept=architecture] .universe,:root[data-concept=architecture] .universe:last-child{display:block;padding:20px 16px 25px;border:0;background:#131516}
:root[data-concept=architecture] .universe-visual{width:100%;border:0;border-radius:0;background:transparent}
:root[data-concept=architecture] .universe h3{font-size:17px;margin:20px 0 12px;line-height:1.4}
:root[data-concept=architecture] .universe>p{text-align:left;font-size:8px}
:root[data-concept=architecture] .page-intro{text-align:left;margin:22px 4% 30px;padding:35px 3%;border:1px solid #50565a;background:linear-gradient(115deg,#20252a,#101213)}
:root[data-concept=architecture] .page-intro h1{font-size:58px;font-weight:400;margin:18px 0;letter-spacing:-2px}
:root[data-concept=architecture] .page-intro>p:last-child{margin-left:0}
:root[data-concept=architecture] .catalogue-shell{grid-template-columns:230px minmax(0,1fr);gap:28px;padding-left:4%;padding-right:4%}
:root[data-concept=architecture] .category-aside{border:1px solid #50565a;background:#141719;padding:24px 12px;align-self:start}
:root[data-concept=architecture] .category-button{border-radius:0;padding:20px 13px;border-bottom:1px solid #333a3e}
:root[data-concept=architecture] .category-button[aria-pressed=true]{background:#343b40;border:1px solid #a2acb3;box-shadow:inset 3px 0 #e7edf1}
:root[data-concept=architecture] .catalogue-topbar{padding:17px;border:1px solid #444b50;background:#181c1f}
:root[data-concept=architecture] .catalogue-disclaimer{border-radius:0;background:#111416}
:root[data-concept=architecture] .product-card{border-radius:0;background:#171b1e;border-color:#505b62;padding:22px}
:root[data-concept=architecture] .product-open{grid-template-columns:1.2fr 1fr;gap:27px}
:root[data-concept=architecture] .product-card .visual{border-radius:0;background:#101315;aspect-ratio:1.25}
:root[data-concept=architecture] .product-card h3{font-size:29px;font-weight:400}
:root[data-concept=architecture] .example{border-radius:0}
:root[data-concept=architecture] .company-experience article,:root[data-concept=architecture] .company-erp,:root[data-concept=architecture] .footer{border-radius:0;background:#131719}
/* 03 — IMMERSION : photographie panoramique et contraste cinématographique. */
:root[data-concept=immersion] body{background:#050709}
:root[data-concept=immersion] .hero{height:690px;margin:0;border:0;border-radius:0;background:#050709}
:root[data-concept=immersion] .hero-image{height:100%;width:100%;object-position:center 40%;filter:saturate(.6)}
:root[data-concept=immersion] .hero:after{background:linear-gradient(90deg,#03080dec 0%,#03080da3 42%,#03080d22 80%),linear-gradient(0deg,#050709,transparent 40%)}
:root[data-concept=immersion] .hero-content{text-align:left;margin:0;padding:95px 7% 0;max-width:900px}
:root[data-concept=immersion] .hero .eyebrow{color:#d5dae0;letter-spacing:2px}
:root[data-concept=immersion] .hero h1{font-size:clamp(52px,6.6vw,94px);font-weight:300;letter-spacing:-4px;line-height:1.02;margin:0;max-width:850px}
:root[data-concept=immersion] .hero h1 br{display:block}
:root[data-concept=immersion] .hero h1 em{color:#c1cbd4}
:root[data-concept=immersion] .hero-description{font-size:14px;max-width:500px;margin:28px 0 0;color:#d1d6db}
:root[data-concept=immersion] .hero-actions{justify-content:flex-start;margin-top:30px}
:root[data-concept=immersion] .hero-bottom{left:7%;right:7%;bottom:28px;font-size:9px}
:root[data-concept=immersion] .section{padding:85px 7%}
:root[data-concept=immersion] .section-heading h2{font-size:55px;font-weight:300}
:root[data-concept=immersion] .universes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
:root[data-concept=immersion] .universe,:root[data-concept=immersion] .universe:last-child{display:grid;position:relative;grid-template-columns:1fr;gap:0;padding:0;border:1px solid #36414a;border-radius:20px;overflow:hidden;background:#10161b}
:root[data-concept=immersion] .universe-visual{width:100%;aspect-ratio:1.8;border:0;border-radius:0;background:#0b1117;grid-column:1;grid-row:1}
:root[data-concept=immersion] .universe h3{font-size:24px;padding:22px 24px 8px;grid-row:2;grid-column:1}
:root[data-concept=immersion] .universe>p{text-align:left;padding:0 24px 24px;grid-row:3;grid-column:1;font-size:9px}
:root[data-concept=immersion] .universe-index{top:16px;left:18px}
:root[data-concept=immersion] .page-intro{text-align:left;padding:50px 6% 42px;position:relative;border-bottom:1px solid #36414a;margin-bottom:35px;background:linear-gradient(90deg,#070d13 35%,#070d1360),url('assets/hero-industriel.jpg') center 38%/cover}
:root[data-concept=immersion] .page-intro h1{font-size:66px;font-weight:300;letter-spacing:-3px}
:root[data-concept=immersion] .page-intro>p:last-child{margin-left:0;color:#d0d5da}
:root[data-concept=immersion] .catalogue-shell{grid-template-columns:210px minmax(0,1fr);gap:44px}
:root[data-concept=immersion] .category-button{border-radius:8px;border-bottom:1px solid #283039}
:root[data-concept=immersion] .category-button[aria-pressed=true]{background:#26313b;border:1px solid #a1aeba}
:root[data-concept=immersion] .product-card{background:radial-gradient(ellipse at 40% 0,#283642,#10161c 70%);border-color:#465967;border-radius:20px;padding:24px}
:root[data-concept=immersion] .product-open{display:block}
:root[data-concept=immersion] .product-card .visual{width:100%;aspect-ratio:2.1;background:#0c1218;border-radius:12px}
:root[data-concept=immersion] .product-card .visual img{object-fit:contain}
:root[data-concept=immersion] .product-card .range{margin-top:24px}
:root[data-concept=immersion] .product-card h3{font-size:34px;font-weight:300;margin-top:12px}
:root[data-concept=immersion] .product-open>p:last-child{max-width:600px;margin-top:15px}
:root[data-concept=immersion] .footer{background:#0d1319;border-top:1px solid #39444e}
@media(max-width:1100px){.concept-bar{flex-wrap:wrap;gap:4px 10px;padding:8px 4%}.concept-bar>a{font-size:10px}.concept-bar>div{order:3;width:100%;justify-content:center}.concept-bar a{padding:6px 9px}:root[data-concept=architecture] .hero-content{max-width:72%}:root[data-concept=architecture] .hero-actions{max-width:390px}:root[data-concept=architecture] .universes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
.concept-bar{font-size:10px}.concept-bar>div{justify-content:space-between;gap:2px}.concept-bar>div a{padding:8px 9px}.concept-bar a span{display:none}
:root[data-concept] .hero-actions{gap:12px;align-items:stretch}:root[data-concept] .hero-actions a{font-size:11px;min-height:46px;justify-content:center;padding:13px 16px;width:100%}
:root[data-concept] .page-intro h1{font-size:42px;letter-spacing:-1.7px}:root[data-concept] .catalogue-shell{display:block;padding-left:5%;padding-right:5%}:root[data-concept] .category-aside{padding:0;border:0;background:none;border-radius:0}:root[data-concept] .product-card{padding:18px}:root[data-concept] .product-open{display:block}:root[data-concept] .product-card h3{font-size:27px}:root[data-concept] .product-card .visual{aspect-ratio:1.3}:root[data-concept] .catalogue-topbar{gap:16px}
:root[data-concept=signature] .hero{margin:6px 4% 0;border-radius:26px;height:690px}:root[data-concept=signature] .hero-content{padding:36px 7% 0}:root[data-concept=signature] .hero h1{font-size:46px;letter-spacing:-2.3px}:root[data-concept=signature] .hero-description{font-size:12px;line-height:1.85}:root[data-concept=signature] .hero-actions{margin-top:23px}:root[data-concept=signature] .hero-image{height:34%}:root[data-concept=signature] .hero:after{background:linear-gradient(180deg,#111113 0%,#111113 60%,#11111388 73%,transparent 90%)}:root[data-concept=signature] .page-intro{padding:39px 5% 32px}:root[data-concept=signature] .section-heading h2{font-size:37px}
:root[data-concept=architecture] .hero{height:750px;margin:8px 4% 0}:root[data-concept=architecture] .hero-content{max-width:none;padding:33px 7% 0;height:auto}:root[data-concept=architecture] .hero h1{font-size:46px;letter-spacing:-2px;max-width:320px}:root[data-concept=architecture] .hero .eyebrow{font-size:7px;letter-spacing:.6px;line-height:1.7}:root[data-concept=architecture] .hero-description{font-size:12px;max-width:300px;margin-top:23px}:root[data-concept=architecture] .hero-image{left:0;width:100%;height:33%;object-position:63% center}:root[data-concept=architecture] .hero:after{background:linear-gradient(180deg,#131516 0%,#131516 62%,#13151688 75%,transparent 95%)}:root[data-concept=architecture] .hero-actions{margin-top:23px;max-width:none}:root[data-concept=architecture] .hero-bottom{font-size:6px}:root[data-concept=architecture] .universes{grid-template-columns:repeat(2,minmax(0,1fr))}:root[data-concept=architecture] .universe h3{font-size:15px;margin:18px 0 10px}:root[data-concept=architecture] .universe-visual{width:100%;grid-row:auto;grid-column:auto}:root[data-concept=architecture] .universe>p{font-size:7px}:root[data-concept=architecture] .section-heading h2{font-size:37px}:root[data-concept=architecture] .page-intro{margin:12px 4% 24px;padding:30px 6%}
:root[data-concept=immersion] .hero{height:740px}:root[data-concept=immersion] .hero-content{padding:56px 7% 0;max-width:none}:root[data-concept=immersion] .hero h1{font-size:51px;letter-spacing:-2.5px}:root[data-concept=immersion] .hero-image{object-position:59% center}:root[data-concept=immersion] .hero:after{background:linear-gradient(90deg,#03080de8,#03080d70),linear-gradient(0deg,#050709,transparent 55%)}:root[data-concept=immersion] .hero-description{font-size:13px;margin-top:25px}:root[data-concept=immersion] .hero-actions{margin-top:28px}:root[data-concept=immersion] .hero-bottom{font-size:7px}:root[data-concept=immersion] .universes{grid-template-columns:1fr}:root[data-concept=immersion] .universe-visual,:root[data-concept=immersion] .universe:last-child .universe-visual{width:100%;grid-row:1;grid-column:1;aspect-ratio:1.8}:root[data-concept=immersion] .universe h3,:root[data-concept=immersion] .universe:last-child h3{grid-row:2;grid-column:1;font-size:24px;margin:0;padding:22px 24px 8px}:root[data-concept=immersion] .universe>p,:root[data-concept=immersion] .universe:last-child>p{grid-row:3;grid-column:1;padding:0 24px 24px;font-size:9px}:root[data-concept=immersion] .section-heading h2{font-size:39px}:root[data-concept=immersion] .page-intro{padding:40px 6% 32px}
}
@media(prefers-reduced-motion:reduce){:root[data-concept] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}