@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#172129;--muted:#566168;--paper:#f5f6f4;--accent:#d9ef72;--line:#d8ddda}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.65 'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible{outline:3px solid #75931b;outline-offset:6px}header{min-height:100px;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:15px;line-height:1.2}.brand>strong{font:800 43px/1 'Manrope',sans-serif;letter-spacing:-3px}.brand strong span{color:#71881c;padding-left:4px}.brand>span{font-weight:700;font-size:16px;letter-spacing:2px}.brand small{display:block;font-size:10px;letter-spacing:1.1px;font-weight:500;margin-top:5px}nav{display:flex;align-items:center;gap:30px;font-size:14px}.nav-contact{border:1px solid var(--ink);padding:11px 18px}.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:690px}.hero-copy{padding:65px 9.5% 24px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:700;margin:0 0 25px}h1,h2,h3{font-family:'Manrope',Arial,sans-serif;font-weight:500}h1{font-size:clamp(44px,4.6vw,76px);letter-spacing:-3px;line-height:1.09;margin:0 0 27px}em{font-style:normal;color:#697e25}.intro{max-width:440px;color:var(--muted);font-size:18px;line-height:1.7;margin-bottom:32px}.button{display:inline-block;padding:14px 23px;background:var(--ink);color:white;font-weight:500;font-size:14px;transition:background .2s}.button:hover{background:#34434d;text-decoration:none}.hero-foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;font-size:12px}.hero-foot>span{letter-spacing:1px;color:var(--muted)}.hero-foot a{font-size:14px}.hero-image{margin:0;position:relative;min-height:100%;overflow:hidden;background:#26343e}.hero-image img{width:100%;height:100%;position:absolute;object-fit:cover}.hero-image figcaption{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:60px 32px 25px;color:white;display:flex;justify-content:space-between;gap:20px;font-size:14px}.hero-image figcaption span{font-size:12px;opacity:.8}.scope{padding:26px 5%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px}.scope span:before{content:'+';margin-right:18px;color:#6e822d}.section{padding:100px 7%;scroll-margin-top:20px}.section-heading{display:grid;grid-template-columns:1fr 1.3fr;gap:20px 75px;margin-bottom:52px}.section-heading .eyebrow{grid-column:1/-1;margin:0}h2{font-size:clamp(34px,3.6vw,56px);letter-spacing:-2px;line-height:1.15;margin:0}.section-heading>p:last-child{max-width:490px;margin:4px 0 0;color:var(--muted);font-size:18px}.services{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.services article{padding:32px 25px 10px 0;margin-right:25px;display:flex;flex-direction:column;align-items:start}.services article:last-child{margin-right:0}.number{font-size:14px;color:#718126;margin-bottom:30px}h3{font-size:22px;line-height:1.35;letter-spacing:-.6px;margin:0 0 16px}.services p{color:var(--muted);margin:0 0 28px;font-size:16px}.tags{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);font-size:12px;width:100%;line-height:1.8}.approach{background:var(--ink);color:#f5f6f4}.approach .eyebrow{color:var(--accent)}.approach .section-heading>p:last-child{color:#b4bdc3}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.steps article{border-top:1px solid #52606a;padding-top:24px}.steps span{font-size:12px;letter-spacing:1px;color:var(--accent)}.steps h3{margin-top:24px}.steps p{color:#b4bdc3;margin-bottom:0}.office{display:grid;grid-template-columns:1fr 1.3fr;gap:75px}.office-text p{color:var(--muted)}.office-text .large{color:var(--ink);font-size:24px;line-height:1.5;margin-top:0}.office-stats{display:flex;gap:75px;border-top:1px solid var(--line);margin-top:35px;padding-top:25px}.office-stats strong{display:block;font-size:36px;letter-spacing:-1px;font-weight:500}.office-stats span{display:block;color:var(--muted);font-size:14px}.contact{background:var(--accent);display:grid;grid-template-columns:1.3fr 1fr;gap:100px}.contact h2{font-size:clamp(42px,4.5vw,68px)}.contact em{color:#485619}.contact>div>p:not(.eyebrow){max-width:430px;margin:27px 0}.contact-details{padding-top:30px}.contact-details>div{padding:0 0 25px;margin-bottom:24px;border-bottom:1px solid #afc254}.contact-details span{font-size:12px;letter-spacing:1.5px}.contact-details h3{margin:12px 0 5px;font-size:27px}.contact-details p{margin:8px 0}.contact-details a{display:block;font-size:22px;overflow-wrap:anywhere}.contact-details .map{font-size:14px;text-decoration:underline;margin-top:16px}footer{padding:28px 5%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.footer-brand{font-weight:700;color:var(--ink);letter-spacing:1px}.skip{position:absolute;top:-100px;left:10px;background:var(--accent);padding:12px;z-index:10}.skip:focus{top:10px}@media(max-width:1100px){nav{gap:18px}.hero-copy{padding:50px 8% 25px}.hero-foot{margin-top:35px}.services{grid-template-columns:repeat(2,1fr);gap:30px}.steps{grid-template-columns:repeat(2,1fr)}.section{padding:75px 6%}.section-heading,.office{gap:35px}.contact{gap:50px}}@media(max-width:760px){header{padding:20px 6%;flex-wrap:wrap;gap:20px}.brand>strong{font-size:36px}nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.nav-contact{padding:7px 10px}nav a:nth-child(2){display:none}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:40px 6% 25px}h1{font-size:50px;letter-spacing:-2px}.intro{font-size:17px}.hero-image{min-height:380px}.hero-image img{object-position:center 55%}.scope{padding:24px 6%;display:grid;grid-template-columns:1fr 1fr;font-size:13px;gap:14px}.scope span:before{margin-right:8px}.section{padding:58px 6%}.section-heading,.office,.contact{grid-template-columns:1fr;gap:28px}.section-heading{margin-bottom:35px}.section-heading>p:last-child{font-size:17px}.services{gap:20px}.services article{margin:0;padding:22px 8px 5px 0}.services h3{font-size:20px}.services p{font-size:15px}.number{margin-bottom:20px}.steps{gap:28px}.steps h3{font-size:20px}.steps p{font-size:15px}.office-text .large{font-size:22px}.office-stats{gap:45px}.contact{gap:35px}.contact-details{padding-top:0}.contact h2{font-size:48px}footer{display:grid;grid-template-columns:1fr 1fr;font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.brand img{display:block;object-fit:contain;width:165px;height:78px}.key-figures{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:45px;padding:45px 7%;border-bottom:1px solid var(--line);background:white}.key-figures strong{font:500 clamp(52px,6vw,90px)/1 'Manrope',sans-serif;letter-spacing:-4px}.key-figures strong span{color:#697e25;letter-spacing:-2px}.key-figures p{margin:14px 0 0;color:var(--muted)}.figures-note{border-left:1px solid var(--line);padding-left:35px}.figures-note .eyebrow{color:var(--ink);margin:0;font-size:12px}.references{background:#e9eeeb}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.project{background:var(--paper)}.project figure{margin:0;position:relative;height:330px;overflow:hidden}.project img{height:100%;width:100%;object-fit:cover}.project figcaption{position:absolute;bottom:0;right:0;background:#172129db;color:white;padding:5px 12px;font-size:12px}.project-body{padding:30px}.project-body .eyebrow{display:block;font-size:12px;margin-bottom:13px}.project-body h3{font-size:30px}.project-body p{color:var(--muted)}.industrial-title{height:330px;background:var(--ink);color:white;display:flex;flex-direction:column;justify-content:center;align-items:center}.industrial-title strong{font:700 100px/1.2 'Manrope',sans-serif;letter-spacing:-5px;color:var(--accent)}.industrial-title>span:last-child{font-size:14px}.team{background:white}.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.team-grid article{border-top:1px solid var(--line);padding:25px 0}.initials{width:62px;height:62px;background:#edf1e8;color:#677d26;display:flex;align-items:center;justify-content:center;font:500 23px 'Manrope',sans-serif;margin-bottom:25px}.team-grid h3{font-size:25px;margin-bottom:8px}.role{font-size:14px;font-weight:500}.team-grid p{color:var(--muted);font-size:15px;max-width:290px}@media(max-width:760px){.brand img{width:140px;height:65px}.key-figures{grid-template-columns:1fr 1fr;padding:35px 6%;gap:28px}.key-figures strong{font-size:58px}.figures-note{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:20px 0 0}.key-figures p{font-size:14px}.project-grid{grid-template-columns:1fr;gap:25px}.project figure,.industrial-title{height:280px}.team-grid{grid-template-columns:1fr 1fr;gap:25px}.team-grid h3{font-size:23px}.role{font-size:13px}}@media(max-width:390px){.team-grid{grid-template-columns:1fr}}

.spark{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.spark .project-body{display:flex;flex-direction:column;justify-content:center}.project-link{font-size:14px;text-decoration:underline;margin-top:20px}.spark figure{height:350px}@media(max-width:760px){.spark{grid-template-columns:1fr}.spark figure{height:280px}}

.spark{grid-column:auto;display:block}.spark figure{height:330px}@media(max-width:760px){.spark figure{height:280px}}

.heritage{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr}.heritage .project-body{display:flex;flex-direction:column;justify-content:center}.heritage figure{height:360px}@media(max-width:760px){.heritage{grid-template-columns:1fr}.heritage figure{height:280px}}

.heritage{grid-column:auto;display:block}.heritage figure{height:330px}.project-facts{display:flex;flex-wrap:wrap;gap:20px;margin:6px 0 22px;font-size:12px;color:var(--muted)}.project-facts strong{display:block;color:var(--ink);font:500 30px/1.3 Manrope,Arial,sans-serif}@media(max-width:760px){.heritage figure{height:280px}}

.saint-germain{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.saint-germain figure{height:100%;min-height:360px}.saint-germain .project-body{display:flex;flex-direction:column;justify-content:center}@media(max-width:760px){.saint-germain{grid-template-columns:1fr}.saint-germain figure{height:280px;min-height:0}}

.saint-germain{grid-column:auto;display:block}.saint-germain figure{height:330px;min-height:0}@media(max-width:760px){.saint-germain figure{height:280px}}

.sakara{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.sakara figure{height:100%;min-height:360px}.sakara .project-body{display:flex;flex-direction:column;justify-content:center}@media(max-width:760px){.sakara{grid-template-columns:1fr}.sakara figure{height:280px;min-height:0}}

.sakara{grid-column:auto;display:block}.sakara figure{height:330px;min-height:0}@media(max-width:760px){.sakara figure{height:280px}}

.rlc{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.rlc figure{height:100%;min-height:360px}.rlc .project-body{display:flex;flex-direction:column;justify-content:center}@media(max-width:760px){.rlc{grid-template-columns:1fr}.rlc figure{height:280px;min-height:0}}

/* Corrections de présentation validées sur les captures annotées. */
header{flex-direction:column;justify-content:center;align-items:center;gap:20px}
.brand{justify-content:center}
.brand img{width:214.5px;height:101.4px}
header nav{justify-content:center;flex-wrap:wrap}
.key-figures{grid-template-columns:1fr 1fr;gap:35px 45px}
.figures-note{grid-column:1/-1;border:0;padding:0;max-width:760px}
.figures-note .eyebrow{margin:0}
.figures-note p:last-child{font-size:18px}
@media(max-width:760px){
 .brand img{width:182px;height:84.5px}
 header nav{justify-content:space-between}
 .key-figures{gap:28px}
 .figures-note{border:0;padding:0}
 .figures-note p:last-child{font-size:16px}
}

/* Écran d’accueil et chiffres au défilement. */
.welcome-open{overflow:hidden}
.welcome{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:var(--paper);color:var(--ink);overflow:hidden;opacity:1;transition:opacity .45s ease;perspective:1000px}
.welcome[open]{display:grid;place-items:center}
.welcome::backdrop{background:var(--paper)}
.welcome-enter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:38px;background:none;border:0;color:inherit;cursor:pointer;padding:35px 12px;font:inherit;max-width:100%;-webkit-tap-highlight-color:transparent}
.welcome-enter:focus-visible{outline:2px solid #697e25;outline-offset:12px}
.welcome-logo{display:block;width:min(430px,76vw);height:auto;object-fit:contain;animation:welcome-arrive 5s cubic-bezier(.22,.65,.3,1) both;will-change:transform,opacity}
.welcome-hint{font-size:14px;letter-spacing:1.2px;border-bottom:1px solid #697e25;padding-bottom:8px;animation:welcome-hint .9s ease 4.4s both}
.welcome.is-leaving{opacity:0;pointer-events:none}
.key-figures strong{font-variant-numeric:tabular-nums}
.key-figures strong .count-value{color:var(--ink);letter-spacing:inherit;display:inline-block;min-width:2ch}
.key-figures strong [data-count="350"]{min-width:3ch}
@keyframes welcome-arrive{0%{opacity:0;transform:translateZ(-650px) scale(.3);filter:blur(12px)}70%{opacity:1;transform:translateZ(35px) scale(1.025);filter:blur(0)}100%{opacity:1;transform:translateZ(0) scale(1);filter:blur(0)}}
@keyframes welcome-hint{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.welcome-logo,.welcome-hint{animation:none}.welcome{transition:none}}

/* Sommaire des cinq chapitres et chiffres sur une ligne. */
header{align-items:flex-start}
header .brand{justify-content:flex-start}
header nav.chapter-nav{width:100%;display:flex;justify-content:flex-start;gap:12px 32px;flex-wrap:wrap;padding-top:5px}
header .chapter-nav a,header .chapter-nav a:nth-child(2){display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:8px 0;font-size:14px;line-height:1.5}
.chapter-nav a span{color:#697e25;font-size:12px;font-weight:700;letter-spacing:1px}
.key-figures>div{min-width:0}
.key-figures strong{display:inline-flex;align-items:baseline;white-space:nowrap;gap:.08em;max-width:100%;letter-spacing:-.055em}
.key-figures strong span{white-space:nowrap;letter-spacing:inherit}
.key-figures strong .count-value{min-width:0}
.key-figures strong [data-count="350"]{min-width:0}
@media(max-width:760px){
 header nav.chapter-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
 .key-figures strong{font-size:clamp(32px,10.5vw,52px)}
}

/* Navigation éditoriale : numéros fins, repère actif et défilement tactile. */
header{gap:25px;padding-bottom:0}
header nav.chapter-nav{display:flex;flex-wrap:nowrap;gap:0;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#aeb6a9 transparent;border-top:1px solid var(--line);padding:0;scroll-snap-type:x proximity}
header .chapter-nav a,header .chapter-nav a:nth-child(2){display:flex;position:relative;flex:1 0 auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-height:86px;padding:18px 26px 19px 0;margin-right:24px;scroll-snap-align:start;text-decoration:none;transition:color .2s ease}
header .chapter-nav a:last-child{margin-right:0;padding-right:0}
.chapter-nav a .chapter-index{font:500 12px/1 Manrope,Arial,sans-serif;letter-spacing:1px;color:#78836c}
.chapter-nav a .chapter-label{font:500 16px/1.4 Manrope,Arial,sans-serif;letter-spacing:-.2px;color:var(--ink);white-space:nowrap}
.chapter-nav a::after{content:'';position:absolute;bottom:0;left:0;right:24px;height:3px;background:#697e25;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.chapter-nav a[aria-current]::after,.chapter-nav a:hover::after{transform:scaleX(1)}
.chapter-nav a[aria-current] .chapter-label,.chapter-nav a:hover .chapter-label{color:#697e25}
@media(max-width:760px){
 header{gap:22px}
 header nav.chapter-nav{display:flex;gap:0}
 header .chapter-nav a,header .chapter-nav a:nth-child(2){flex:0 0 auto;min-height:82px;margin-right:22px;padding:17px 16px 18px 0}
 .chapter-nav a .chapter-label{font-size:15px}
 .chapter-nav a::after{right:16px}
}

/* Présentation uniforme et épurée des références. */
.project-grid>.project{grid-column:auto;display:flex;flex-direction:column;min-width:0}
.project-grid>.project figure{height:330px;min-height:0;flex-shrink:0}
.project-grid>.project .project-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;padding:30px}
.project-body>p{margin:0 0 24px}
.project-body .project-facts{margin:0 0 24px}
.project-body .project-link{margin-top:auto;padding-top:8px;line-height:1.6}
@media(max-width:760px){.project-grid>.project figure{height:280px}}

/* Palette commune : graphite, blanc minéral et accent citron vert. */
:root{--paper:#f5f6f4;--ink:#172129;--muted:#566168;--line:#d8ddda;--accent:#d9ef72}
.references{background:#edf0ed}
.office{background:#fff}
.team{background:#f5f6f4}
.initials{background:#e7ecdf;color:#53691e}
.section>.section-heading>.eyebrow,.office>div>.eyebrow{display:flex;align-items:center;gap:12px}
.section>.section-heading>.eyebrow::before,.office>div>.eyebrow::before{content:'';width:24px;height:2px;background:#697e25;flex-shrink:0}
.approach .section-heading>.eyebrow::before{background:var(--accent)}
.contact{background:var(--ink);color:var(--paper)}
.contact em{color:var(--accent)}
.contact .eyebrow,.contact-details span{color:var(--accent)}
.contact>div>p:not(.eyebrow),.contact-details p{color:#c5cdd1}
.contact-details>div{border-color:#465159}
.contact .button{background:var(--accent);color:var(--ink)}
.contact .button:hover{background:#e6f5a6}

.hero-image img{object-position:center center}
.visual-note{font-size:12px;color:var(--muted);margin:-5px 0 18px;letter-spacing:.2px}
.client-ribbon{padding:32px 0 36px;background:#fff;border-bottom:1px solid var(--line);overflow:hidden}
.ribbon-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 7%;margin-bottom:22px}
.ribbon-heading .eyebrow{margin:0;color:var(--muted)}
.ribbon-viewport{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;width:max-content;animation:client-marquee 130s linear infinite;will-change:transform}
.logo-group{display:flex;align-items:center;gap:60px;padding-right:60px;flex-shrink:0}
.client-logo{display:flex;align-items:center;justify-content:center;width:155px;height:75px;flex-shrink:0}
.client-logo img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.68;mix-blend-mode:multiply}
.ribbon-viewport:hover .logo-track,.ribbon-viewport:focus-within .logo-track{animation-play-state:paused}
@keyframes client-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.ribbon-heading{padding:0 6%}.ribbon-heading .eyebrow{font-size:11px}.client-logo{width:130px;height:66px}.logo-group{gap:42px;padding-right:42px}.client-logo img{max-height:55px}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;transform:none;width:100%;will-change:auto}.logo-clone{display:none}.logo-group{width:100%;justify-content:center;flex-wrap:wrap;padding:0 6%;gap:25px}.ribbon-viewport{mask-image:none}}

.project img[src="spark-wide.webp"]{object-position:center 80%}

/* En-tête compact et menu à droite du logo. */
header{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:15px 5%;gap:20px;min-height:100px}
header .brand img{width:185px;height:auto}
.menu-toggle{display:inline-flex;align-items:center;gap:14px;min-height:46px;padding:10px 0 10px 14px;border:0;background:transparent;color:var(--ink);font:500 15px/1.4 Manrope,Arial,sans-serif;cursor:pointer}
.menu-icon{position:relative;width:22px;height:14px;display:block;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
/* Le sommaire se déploie dans le flux de la page, sans panneau. */
header{flex-wrap:wrap;column-gap:20px;row-gap:0}
.site-menu{display:grid;grid-template-rows:0fr;flex-basis:100%;width:100%;background:transparent;transition:grid-template-rows .45s cubic-bezier(.22,.65,.3,1);overflow:hidden}
.menu-nav{display:flex;min-height:0;overflow:hidden;width:100%;flex-direction:row;align-items:center;justify-content:flex-end;gap:clamp(20px,3vw,44px);padding:0;visibility:hidden;transition:visibility 0s .45s}
.menu-nav a,.menu-nav a:nth-child(2){display:block;flex:none;min-height:44px;padding:12px 0;text-decoration:none;border:0;opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .3s ease,color .2s ease}
.menu-nav .chapter-label{font:500 clamp(17px,1.6vw,23px)/1.4 Manrope,Arial,sans-serif;letter-spacing:-.5px}
.menu-nav a[aria-current] .chapter-label,.menu-nav a:hover .chapter-label{color:#697e25}
.has-open-menu .site-menu{grid-template-rows:1fr}
.has-open-menu .menu-nav{visibility:visible;padding:22px 0 12px;transition:visibility 0s}
.has-open-menu .menu-nav a{opacity:1;transform:translateY(0);transition-delay:calc(var(--menu-order,0)*55ms + 90ms)}
.menu-nav a:nth-child(2){--menu-order:1}.menu-nav a:nth-child(3){--menu-order:2}.menu-nav a:nth-child(4){--menu-order:3}.menu-nav a:nth-child(5){--menu-order:4}
.menu-icon{border:0}
.menu-icon::before,.menu-icon::after{content:'';position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform .3s ease,top .3s ease}
.menu-icon::before{top:2px}.menu-icon::after{top:12px}
.has-open-menu .menu-icon::before{top:7px;transform:rotate(45deg)}
.has-open-menu .menu-icon::after{top:7px;transform:rotate(-45deg)}
@media(max-width:760px){
 .menu-nav{flex-direction:column;align-items:flex-end;gap:0}
 .has-open-menu .menu-nav{padding:22px 0 14px}
 .menu-nav a,.menu-nav a:nth-child(2){padding:8px 0;min-height:44px}
 .menu-nav .chapter-label{font-size:26px;line-height:1.3;letter-spacing:-.7px}
}
@media(prefers-reduced-motion:reduce){.site-menu,.menu-nav,.menu-nav a,.menu-icon::before,.menu-icon::after{transition:none!important;transform:none}}
@media(max-width:760px){
 header{padding:13px 6%;min-height:88px}
 header .brand img{width:150px;height:auto}
 .hero-copy{padding:28px 6% 24px}
 .hero-copy>.eyebrow{font-size:10px;letter-spacing:1.3px;margin-bottom:20px}
 .hero h1{font-size:clamp(32px,8.5vw,44px);line-height:1.12;letter-spacing:-1.4px;margin-bottom:20px}
 .hero h1 em{white-space:nowrap}
 .hero .intro{font-size:16px;line-height:1.6;margin:0 0 22px;max-width:36ch}
 .hero-foot{margin-top:24px;padding-top:16px;gap:10px}
 .hero-image{min-height:330px}
}

.approach .section-heading h2{grid-column:1/-1}.figures-note p.eyebrow{font-size:12px}

.client-logo img.logo-darken{filter:brightness(0);opacity:.68}.client-wordmark span{font:500 22px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.7px;color:#606564;white-space:nowrap}

.client-ribbon:not(.is-running) .logo-track{animation-play-state:paused}

/* Composition alignée et focus réservé aux éléments interactifs. */
.welcome:focus,.hero h1[tabindex="-1"]:focus{outline:none}
.welcome-logo,.brand img{background:transparent}
.key-figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 40px}
.key-figures strong{font-size:clamp(42px,5.8vw,86px)}
.client-ribbon{padding-bottom:76px}
.steps article{display:grid;grid-template-rows:auto auto 1fr;align-content:start;align-items:start}
.steps h3{min-height:2.7em;margin:24px 0 16px;max-width:20ch}
.steps p{margin:0;max-width:28ch}
.office{row-gap:26px;align-items:start}
.office>.eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0}
.office>.eyebrow::before{content:'';width:24px;height:2px;background:#697e25;flex-shrink:0}
.office-heading h2{margin:0}
.office-text .large{margin:0 0 24px}
@media(max-width:760px){
 .key-figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
 .key-figures strong{font-size:clamp(27px,7.6vw,50px)}
 .key-figures p{font-size:13px;line-height:1.5}
 .client-ribbon{padding-bottom:58px}
 .office{row-gap:24px}
}

/* Signatures typographiques des bureaux d’architecture. */
.client-mba>span{font:400 29px/1 Arial,sans-serif;letter-spacing:.02em;color:#606564;white-space:nowrap}
.client-mba small{font-size:17.4px}
.client-r2a>span{font:400 33px/1 Arial,sans-serif;letter-spacing:-1px;color:#606564}
.client-r2a small{display:block;font-size:12px;letter-spacing:.15px;margin-top:6px}

/* Trois centres régulièrement espacés dans la largeur de la page. */
.key-figures{column-gap:0;row-gap:38px}
.key-figures>div:not(.figures-note){text-align:center;padding-inline:8px}
.key-figures .figures-note{text-align:center;max-width:none;width:100%}
.key-figures strong{justify-content:center}
.key-figures>div:not(.figures-note)>p{max-width:24ch;margin-inline:auto}
@media(max-width:760px){
 .key-figures{column-gap:0}
 .key-figures>div:not(.figures-note){padding-inline:5px}
}

/* Le bureau et ses collaborateurs forment un seul chapitre. */
.office-chapter{background:#fff}
.office-team{margin-top:64px;padding-top:38px;border-top:1px solid var(--line);scroll-margin-top:30px}
.office-team .team-title{font:500 28px/1.35 Manrope,Arial,sans-serif;letter-spacing:-.7px;margin:0 0 26px}
.office-team .team-grid h3{font-family:Manrope,Arial,sans-serif;font-weight:500;line-height:1.35;letter-spacing:-.6px;margin:0 0 8px}
.office-team .initials{background:var(--ink);color:var(--accent)}
@media(max-width:760px){.office-team{margin-top:42px;padding-top:28px}.office-team .team-title{font-size:25px}}

/* Chapitre 03 : séparations effacées sans déplacer les éléments. */
#bureau .office-team,#bureau .team-grid article{border-top-color:transparent}
#bureau .office>.eyebrow::before{visibility:visible}
/* Même espace au-dessus et au-dessous de l’axe des logos. */
.client-ribbon{padding-block:54px}
@media(max-width:760px){.client-ribbon{padding-block:45px}}

/* Repères de chapitres cohérents et collaborateurs centrés. */
#contact>div>.eyebrow{display:flex;align-items:center;gap:12px}
#contact>div>.eyebrow::before{content:'';width:24px;height:2px;background:var(--accent);flex-shrink:0}
.office-team .team-grid article{text-align:center}
.office-team .initials{margin-inline:auto}
.office-team .team-grid p{margin-inline:auto}

/* Ajustement optique des signatures DBS et NM Concept dans le ruban. */
.client-logo img[src="logos/dbs-architectes.png"],.client-logo img[src="logos/nm-concept.svg"]{transform:scale(.5);transform-origin:center}

/* Les chiffres concluent Notre approche sur le même fond graphite. */
.approach .key-figures{background:transparent;color:var(--paper);padding:40px 0 0;margin-top:64px;border-top:1px solid #465159;border-bottom:0;row-gap:32px}
.approach .key-figures strong,.approach .key-figures strong .count-value{color:var(--paper)}
.approach .key-figures strong>span:not(.count-value){color:var(--accent)}
.approach .key-figures p{color:#c5cdd1}
.approach .key-figures .figures-note .eyebrow{color:var(--accent)}
.hero .button{font-size:13px;padding:10px 17px;min-height:44px}
@media(max-width:760px){
 .approach .key-figures{margin-top:42px;padding-top:30px;row-gap:26px}
}

/* Refined opening headline and supplied hotel photographs — October 24. */
.hero h1 em{white-space:normal}
.hero-image img{object-position:center}

/* Subtle project link, fluorescent chapter accents and persistent mobile menu. */
.hero .button{background:transparent;color:var(--muted);padding:8px 0;min-height:44px;font-size:13px;text-decoration:underline;text-decoration-color:#aeb7b2;text-underline-offset:5px}
.hero .button:hover{color:var(--ink);background:transparent;text-decoration-color:currentColor}
.section>.section-heading>.eyebrow::before,#bureau .office>.eyebrow::before,#contact>div>.eyebrow::before{background:var(--accent)}
#references .section-heading h2 em,#bureau .office-heading h2 em{color:var(--accent)}
@media(max-width:760px){
 header{position:sticky;top:0;z-index:30;background:rgba(245,246,244,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-height:70px;padding-top:8px;padding-bottom:8px}
 header .brand img{width:125px}
 .site-menu{max-height:calc(100dvh - 70px);overflow-y:auto}
 .approach .key-figures>div:last-child p{max-width:14ch;text-wrap:balance}
}

/* Original olive green for headline emphasis and main chapter markers. */
.hero h1 em,#references .section-heading h2 em,#bureau .office-heading h2 em{color:#697e25}
.section>.section-heading>.eyebrow::before,#bureau .office>.eyebrow::before,#contact>div>.eyebrow::before{background:#697e25}

/* Balanced editorial hero and chapter marker colour matching. */
#approche>.section-heading>.eyebrow::before,#contact>div>.eyebrow::before{background:currentColor}
.hero{min-height:0;align-items:center;grid-template-columns:1fr 1fr;gap:5%;padding:48px 5%}
.hero-copy{padding:0}
.hero-image{min-height:0;width:100%;aspect-ratio:4/3;background:#03091c}
.hero-image img{object-position:center}
@media(max-width:760px){
 .hero{grid-template-columns:1fr;gap:28px;padding:28px 6% 36px}
 .hero-copy{padding:0}
 .hero-image{min-height:0;aspect-ratio:3/2}
}

/* Mobile full-bleed hero and discreet return-to-top control. */
.back-to-top{display:none}
@media(max-width:760px){
 header{position:relative;top:auto;z-index:1;backdrop-filter:none;-webkit-backdrop-filter:none}
 .hero{padding-left:0;padding-right:0;padding-bottom:0;gap:30px}
 .hero-copy{padding-left:6%;padding-right:6%}
 .hero-image{width:100%;min-height:0;aspect-ratio:4/3}
 .back-to-top{display:flex;position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid #465159;border-radius:50%;background:rgba(23,33,41,.94);color:var(--accent);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
 .back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
 .back-to-top:hover{text-decoration:none;background:var(--ink)}
}

/* Logo centred on the page axis, menu kept at the right. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:20px}
header .brand{grid-column:2;grid-row:1;justify-self:center}
header .menu-toggle{grid-column:3;grid-row:1;justify-self:end}
header .site-menu{grid-column:1/-1;grid-row:2}
@media(max-width:760px){header{column-gap:12px}.menu-toggle{gap:9px;padding-left:0;font-size:13px}}

/* Return-to-top on all screens; a larger opening image on desktop. */
.back-to-top{display:flex;position:fixed;right:24px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:40;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid #465159;border-radius:50%;background:rgba(23,33,41,.94);color:var(--accent);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.back-to-top:hover{text-decoration:none;background:var(--ink)}
@media(min-width:761px){.hero{grid-template-columns:.95fr 1.05fr;gap:4%;padding:40px 4%}.hero-image{aspect-ratio:6/5}}
@media(max-width:760px){.back-to-top{right:18px;bottom:calc(18px + env(safe-area-inset-bottom))}}

/* Return to left-aligned logo and the previous desktop hero proportions. */
header .brand{grid-column:1;justify-self:start}
@media(min-width:761px){.hero{grid-template-columns:1fr 1fr;gap:5%;padding:48px 5%}.hero-image{aspect-ratio:4/3}}

/* Transparent architectural cutout blends into the page background. */
.hero-image{background:transparent;border:0;box-shadow:none;overflow:visible;aspect-ratio:auto;min-height:0}
.hero-image img{display:block;position:static;width:100%;height:auto;object-fit:contain}
@media(min-width:761px){.hero{grid-template-columns:.95fr 1.05fr;gap:3%;padding:48px 4%}.hero-image{aspect-ratio:auto}}
@media(max-width:760px){.hero{padding-bottom:24px}.hero-image{aspect-ratio:auto;padding-inline:3%}}

/* Approved white-to-photo transition: one continuous editorial hero. */
.hero{display:block;position:relative;isolation:isolate;overflow:hidden;min-height:610px;padding:64px 5%;background:var(--paper)}
.hero-copy{position:relative;z-index:2;width:46%;padding:0}
.hero-image{position:absolute;z-index:0;inset:0 0 0 27%;width:73%;height:100%;min-height:0;margin:0;padding:0;aspect-ratio:auto;overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 10%,rgba(0,0,0,.55) 27%,#000 48%);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 10%,rgba(0,0,0,.55) 27%,#000 48%)}
.hero-image img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
@media(min-width:1600px){.hero{min-height:690px;padding-block:80px}}
@media(max-width:1000px) and (min-width:761px){.hero{min-height:560px;padding-block:48px}.hero-copy{width:49%}.hero h1{font-size:clamp(38px,4.6vw,48px)}.hero .intro{font-size:16px;max-width:34ch}}
@media(max-width:760px){
 .hero{padding:28px 0 0;min-height:0;display:flex;flex-direction:column;gap:0}
 .hero-copy{width:100%;padding:0 6%;z-index:2}
 .hero-image{position:relative;inset:auto;z-index:0;width:100%;height:360px;min-height:0;margin-top:-5px;padding:0;aspect-ratio:auto;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 10%,#000 31%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 10%,#000 31%)}
 .hero-image img{object-position:68% center}
}

/* Slight rightward shift of the blended photograph on larger screens. */
@media(min-width:761px){.hero-image{left:calc(27% + clamp(32px,4.5vw,72px));right:auto}}

/* Full-width section backgrounds and more generous reference photographs. */
body{max-width:none;margin:0}
.project-grid>.project figure{height:auto;aspect-ratio:4/3}
.project figure img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.project figure img[src="sallaz.webp"]{object-position:center top}
.project figure img[src="richemond.webp"]{object-position:35% center}
.industrial-title{height:auto;aspect-ratio:4/3}
@media(max-width:760px){.project-grid>.project figure,.industrial-title{height:auto;aspect-ratio:4/3}}

/* Compact totals keep equal emphasis on all three counters. */
.approach .key-figures strong>span.count-unit:not(.count-value){color:var(--paper);margin-left:-.08em}

/* A quiet link to the verified Google rating, without a third-party widget. */
.contact .google-rating{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;width:fit-content;max-width:100%;min-height:44px;margin-top:22px;color:var(--paper);text-decoration:none;font-size:13px;line-height:1.5}
.google-rating-stars{position:relative;display:inline-block;flex:none;font-size:17px;letter-spacing:2px;line-height:1;color:#657078}
.google-rating-stars>span:first-child{display:block}
.google-rating-stars>span:last-child{position:absolute;inset:0 auto 0 0;width:98%;overflow:hidden;white-space:nowrap;color:var(--accent)}
.google-rating-score{font-weight:600;white-space:nowrap}
.google-rating-caption{color:#c5cdd1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#68747c}
.google-rating:hover .google-rating-caption{color:var(--accent);text-decoration-color:currentColor}
.google-rating:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:760px){.contact .google-rating{gap:8px 10px;margin-top:18px;font-size:12px}}

/* Give the four chapter headings the same scale on phones. */
@media(max-width:760px){#approche h2,#references h2,#bureau h2,#contact h2{font-size:34px;line-height:1.15;letter-spacing:-2px}}

/* A shorter project selection, with the rest available inline. */
.more-references{margin-top:40px}
.more-references>summary,.references-collapse{display:flex;align-items:center;justify-content:center;gap:14px;width:fit-content;max-width:100%;min-height:48px;margin-inline:auto;padding:8px 4px;color:var(--ink);font:500 15px/1.5 'DM Sans',sans-serif;cursor:pointer;list-style:none;background:transparent;border:0}
.more-references>summary::-webkit-details-marker{display:none}
.more-references>summary>span:first-child,.references-hide,.references-collapse{text-decoration:underline;text-underline-offset:6px;text-decoration-color:#9ba78a}
.more-references .references-hide{display:none}
.more-references[open] .references-show{display:none}
.more-references[open] .references-hide{display:inline}
.references-toggle-icon{position:relative;display:block;width:16px;height:16px;flex:none;color:#697e25}
.references-toggle-icon:before,.references-toggle-icon:after{content:'';position:absolute;background:currentColor;left:1px;right:1px;top:7px;height:2px}
.references-toggle-icon:after{transform:rotate(90deg)}
.more-references[open] .references-toggle-icon:after{display:none}
.more-references[open]>summary{margin-bottom:32px}
.references-collapse{margin-top:32px}
.more-references>summary:hover,.references-collapse:hover{color:#697e25}
.more-references>summary:focus-visible,.references-collapse:focus-visible{outline:2px solid #697e25;outline-offset:5px}
.hero .button{font-size:15px;font-weight:600;color:var(--ink);text-decoration-color:#697e25;text-decoration-thickness:2px;text-underline-offset:7px}
@media(max-width:760px){.more-references{margin-top:28px}.more-references>summary,.references-collapse{font-size:14px}}

/* A quiet invitation beneath the team leads to the recruitment page. */
.careers-invitation{margin-top:64px;text-align:center}.careers-invitation p{font:500 clamp(22px,2.2vw,30px)/1.35 Manrope,Arial,sans-serif;letter-spacing:-.6px;margin:0 0 16px}.careers-invitation a{display:inline-flex;align-items:center;gap:8px;padding:8px 0;min-height:44px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}.careers-invitation a:hover{text-decoration:none}.careers-invitation .invitation-label{text-decoration:underline;text-decoration-color:#697e25;text-decoration-thickness:2px;text-underline-offset:7px}.careers-invitation a:hover .invitation-label{text-decoration-color:currentColor}.careers-invitation .invitation-arrow{text-decoration:none}
@media(max-width:760px){.careers-invitation{margin-top:44px}.careers-invitation p{font-size:24px}}