/* ============================================================
   ATELIER WEYER — « Pierre & Cuivre »
   Design system partagé — toutes les pages
   ============================================================ */
:root{
  /* Colors */
  --color-bg:#F3EFE7;
  --color-surface:#EAE4D6;
  --color-surface-2:#E2DBCA;
  --color-fg:#26211A;
  --color-fg-muted:#6F6656;
  --color-line:rgba(38,33,26,.14);
  --color-dark:#211C15;
  --color-dark-2:#2B251C;
  --color-on-dark:#F0EADC;
  --color-on-dark-muted:#A99D88;
  --color-line-dark:rgba(240,234,220,.14);
  --color-accent:#A6572A;
  --color-accent-hover:#8A441D;
  --color-accent-soft:rgba(166,87,42,.12);
  --color-accent-dark:#C98A5E;
  /* Energy classes */
  --cls-a:#3E7C4F; --cls-b:#6FA05E; --cls-c:#A3A353; --cls-d:#C9A94E;
  --cls-e:#C9884E; --cls-f:#BE6A44; --cls-g:#A84A3A;
  /* Typography */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',Verdana,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  /* Spacing */
  --space:.5rem;
  --section-pad:clamp(4.5rem,10vw,8.5rem);
  --gutter:clamp(1.25rem,4.5vw,3rem);
  --container-max:1220px;
  --nav-h:4.5rem;
  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.4,.42,1);
  --dur:.55s;
  --dur-slow:1s;
  /* Radius */
  --radius:2px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-fg);
  line-height:1.6;
  font-size:1rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
::selection{background:var(--color-accent);color:var(--color-bg)}
img{max-width:100%;display:block}
a{color:inherit}
section[id],footer[id],main[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{position:absolute;left:-999px;top:0;background:var(--color-accent);color:#fff;padding:.6rem 1rem;z-index:10000;font-weight:600}
.skip-link:focus{left:.5rem;top:.5rem}

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
em,.em-it{font-style:italic;font-weight:340}
.h-accent{color:var(--color-accent)}

.label{
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--color-accent);
  display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1.4rem;
}
.label::before{
  content:"";width:.5rem;height:.5rem;background:var(--color-accent);
  transform:rotate(45deg);flex:none;
}
.label::after{content:"";width:3rem;height:1px;background:linear-gradient(to right,var(--color-accent),transparent)}
.on-dark .label{color:var(--color-accent-dark)}
.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.section-head p{color:var(--color-fg-muted);margin-top:1.1rem;font-size:1.06rem;max-width:38rem}
.on-dark .section-head p{color:var(--color-on-dark-muted)}

.divider{border:none;height:1px;background:linear-gradient(to right,transparent,var(--color-line) 20%,var(--color-line) 80%,transparent);position:relative;max-width:var(--container-max);margin:0 auto}
.divider::after{content:"";position:absolute;left:50%;top:50%;width:.45rem;height:.45rem;background:var(--color-accent);transform:translate(-50%,-50%) rotate(45deg)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:.95rem 1.7rem;min-height:44px;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-primary{background:var(--color-accent);color:#FBF7EF}
.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--color-fg);border-color:var(--color-line);position:relative}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-ghost .arrow{transition:transform var(--dur) var(--ease)}
.btn-ghost:hover .arrow{transform:translateX(4px)}
.on-dark .btn-ghost{color:var(--color-on-dark);border-color:var(--color-line-dark)}
.on-dark .btn-ghost:hover{color:var(--color-accent-dark);border-color:var(--color-accent-dark)}

.link-line{
  font-weight:600;text-decoration:none;position:relative;padding-bottom:.15rem;
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
}
.link-line::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--color-accent);transition:width var(--dur) var(--ease)}
.link-line:hover::after{width:100%}
.link-line .arrow{transition:transform var(--dur) var(--ease)}
.link-line:hover .arrow{transform:translateX(4px)}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.22s}
.reveal.d3{transition-delay:.34s}

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{background:rgba(243,239,231,.92);backdrop-filter:blur(12px);border-bottom-color:var(--color-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{font-family:var(--font-display);font-size:1.3rem;text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem;min-height:44px}
.nav-logo .mark{width:.55rem;height:.55rem;background:var(--color-accent);transform:rotate(45deg);flex:none}
.nav-logo strong{font-weight:600}
.nav-links{display:none;align-items:center;gap:2rem;list-style:none}
.nav-links a:not(.btn){text-decoration:none;font-size:.93rem;font-weight:500;position:relative;padding:.4rem 0;min-height:auto}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--color-accent);transition:width var(--dur) var(--ease)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links a:not(.btn)[aria-current="page"]{color:var(--color-accent)}
.nav-links a:not(.btn)[aria-current="page"]::after{width:100%}
.nav-links .btn{padding:.6rem 1.2rem}
.nav-burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px;z-index:1002;
}
.nav-burger span{display:block;height:2px;width:100%;background:var(--color-fg);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-burger.is-open span{background:var(--color-on-dark)}

.mobile-menu{
  position:fixed;inset:0;z-index:1001;background:var(--color-dark);color:var(--color-on-dark);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.mobile-menu.is-open{opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease)}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.mobile-menu a{
  font-family:var(--font-display);font-size:clamp(1.7rem,7.5vw,2.8rem);text-decoration:none;
  display:inline-flex;align-items:center;gap:1rem;
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
.mobile-menu.is-open a{opacity:1;transform:none}
.mobile-menu.is-open li:nth-child(1) a{transition-delay:.06s}
.mobile-menu.is-open li:nth-child(2) a{transition-delay:.12s}
.mobile-menu.is-open li:nth-child(3) a{transition-delay:.18s}
.mobile-menu.is-open li:nth-child(4) a{transition-delay:.24s}
.mobile-menu.is-open li:nth-child(5) a{transition-delay:.3s}
.mobile-menu.is-open li:nth-child(6) a{transition-delay:.36s}
.mobile-menu.is-open li:nth-child(7) a{transition-delay:.42s}
.mobile-menu a:hover{color:var(--color-accent-dark)}
.mobile-menu a .idx{font-family:var(--font-mono);font-size:.8rem;color:var(--color-accent-dark)}
.mobile-menu-foot{margin-top:2.5rem;font-family:var(--font-mono);font-size:.75rem;color:var(--color-on-dark-muted);letter-spacing:.1em}

/* ============================================================
   Hero (accueil)
   ============================================================ */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(2rem,6vw,4.5rem));padding-bottom:clamp(2.5rem,6vw,5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60rem 30rem at 85% -10%,rgba(166,87,42,.07),transparent 60%),
    linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 55%);
  z-index:-1;
}
.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
.hero-copy .label{margin-bottom:1.8rem}
.hero-copy h1 .line{display:block}
.hero-sub{margin-top:1.6rem;color:var(--color-fg-muted);font-size:1.08rem;max-width:34rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.2rem,3.5vw,2.6rem);
  margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:1.6rem;border-top:1px solid var(--color-line);
  justify-content:start;
}
.hero-stat .num{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;display:flex;align-items:baseline;gap:.15rem}
.hero-stat .num sup{font-size:.9rem;color:var(--color-accent)}
.hero-stat .cap{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-fg-muted);margin-top:.45rem;display:block}
.on-dark .hero-stat .cap{color:var(--color-on-dark-muted)}

/* Before/after slider */
.hero-media{position:relative}
.corners::before,.corners::after{
  content:"";position:absolute;width:2.2rem;height:2.2rem;z-index:5;pointer-events:none;
}
.corners::before{top:-.8rem;left:-.8rem;border-top:1px solid var(--color-accent);border-left:1px solid var(--color-accent)}
.corners::after{bottom:-.8rem;right:-.8rem;border-bottom:1px solid var(--color-accent);border-right:1px solid var(--color-accent)}

.ba{
  --pos:55%;
  position:relative;width:100%;height:clamp(340px,52vw,600px);
  overflow:hidden;border-radius:var(--radius);isolation:isolate;
  background:var(--color-surface-2);
  cursor:col-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:4;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--color-accent)}
.ba-grip{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg);
  width:2.6rem;height:2.6rem;background:var(--color-accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(33,28,21,.35);
}
.ba-grip svg{transform:rotate(-45deg);display:block}
.ba input[type="range"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:col-resize;z-index:6;margin:0}
.ba-tag{
  position:absolute;bottom:1rem;z-index:5;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;pointer-events:none;
  background:rgba(33,28,21,.72);color:var(--color-on-dark);backdrop-filter:blur(4px);
}
.ba-tag-before{left:1rem}
.ba-tag-after{right:1rem;background:rgba(166,87,42,.85)}
.ba-hint{
  margin-top:.9rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-fg-muted);display:flex;align-items:center;gap:.6rem;
}
.ba-hint::before{content:"";width:2rem;height:1px;background:var(--color-line)}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{border-block:1px solid var(--color-line);padding-block:1.05rem;overflow:hidden;background:var(--color-bg)}
.marquee-track{display:flex;gap:3.5rem;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-fg-muted);display:flex;align-items:center;gap:3.5rem;white-space:nowrap;
}
.marquee-track span::after{content:"";width:.4rem;height:.4rem;background:var(--color-accent);transform:rotate(45deg);opacity:.6}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   Transformation (accueil)
   ============================================================ */
.transform-wrap{position:relative;height:340vh;background:var(--color-dark)}
.transform-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  color:var(--color-on-dark);padding-block:calc(var(--nav-h) + .5rem) 1.5rem;
}
.transform-sticky::before{
  content:"1904 → A";position:absolute;top:2%;right:-2%;z-index:0;
  font-family:var(--font-display);font-size:clamp(8rem,20vw,19rem);font-style:italic;
  color:var(--color-on-dark);opacity:.035;white-space:nowrap;pointer-events:none;line-height:1;
}
.transform-head{position:relative;z-index:2;margin-bottom:clamp(1.2rem,2.5vh,2.4rem)}
.transform-head h2{max-width:34ch}
.transform-stage{
  position:relative;z-index:2;display:grid;gap:clamp(1.2rem,2.5vw,2.5rem);
  grid-template-columns:1fr;align-items:stretch;flex:0 1 auto;min-height:0;
}
.transform-media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  height:clamp(230px,38vh,560px);background:var(--color-dark-2);
}
.transform-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.transform-media .t-after{clip-path:inset(0 100% 0 0)}
.t-line{position:absolute;top:0;bottom:0;left:0%;width:2px;background:var(--color-accent);z-index:3;box-shadow:0 0 14px rgba(166,87,42,.55)}
.t-line::after{
  content:"";position:absolute;top:50%;left:50%;width:.7rem;height:.7rem;
  background:var(--color-accent);transform:translate(-50%,-50%) rotate(45deg);
}
.t-caption{
  position:absolute;left:1rem;bottom:1rem;z-index:4;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(33,28,21,.75);color:var(--color-on-dark);padding:.45rem .75rem;backdrop-filter:blur(4px);
}
.t-caption b{color:var(--color-accent-dark);font-weight:500}
.transform-data{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;align-content:center}
.energy-scale{display:flex;flex-direction:column;gap:.32rem;grid-row:span 2}
.energy-scale .cls{
  display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.66rem;
  color:var(--color-on-dark-muted);transition:opacity var(--dur) var(--ease);opacity:.4;
}
.energy-scale .cls i{display:block;height:.55rem;border-radius:1px;background:var(--c);width:var(--w);transition:transform var(--dur) var(--ease)}
.energy-scale .cls.active{opacity:1}
.energy-scale .cls.active i{transform:scaleX(1.18);transform-origin:left}
.energy-scale .cls.active::after{content:"◂";color:var(--color-on-dark);font-size:.7rem}
.t-class{display:flex;align-items:baseline;gap:1rem;line-height:1}
.t-class .letter{
  font-family:var(--font-display);font-size:clamp(4rem,9vw,7.5rem);font-weight:500;
  color:var(--cls-g);transition:color .4s var(--ease);
}
.t-class .from{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-dark-muted)}
.t-kwh{font-family:var(--font-mono);font-size:.85rem;color:var(--color-on-dark-muted)}
.t-kwh b{color:var(--color-on-dark);font-weight:500;font-size:1.15rem}
.t-steps{list-style:none;grid-column:1/-1;display:grid;gap:.5rem;margin-top:.4rem}
.t-steps li{
  display:flex;gap:.8rem;align-items:baseline;font-size:.92rem;color:var(--color-on-dark-muted);
  transition:color var(--dur) var(--ease);padding-left:1rem;position:relative;
}
.t-steps li::before{
  content:"";position:absolute;left:0;top:.5em;width:.4rem;height:.4rem;
  background:var(--color-line-dark);transform:rotate(45deg);transition:background var(--dur) var(--ease);
}
.t-steps li .n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;flex:none}
.t-steps li.done{color:var(--color-on-dark)}
.t-steps li.done::before{background:var(--color-accent)}
.t-progress{
  position:relative;z-index:2;margin-top:clamp(1rem,2.5vh,2rem);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-on-dark-muted);display:flex;align-items:center;gap:1rem;
}
.t-progress .bar{flex:1;height:1px;background:var(--color-line-dark);position:relative}
.t-progress .bar i{position:absolute;inset:0;right:auto;width:0%;background:var(--color-accent)}

/* ============================================================
   Expertise (accueil + page)
   ============================================================ */
.expertise{padding-block:var(--section-pad);position:relative;overflow:clip}
.expertise::before{
  content:"Depuis 2008";position:absolute;bottom:-1.5rem;left:-1rem;z-index:0;
  font-family:var(--font-display);font-style:italic;font-size:clamp(6rem,16vw,15rem);
  color:var(--color-fg);opacity:.03;white-space:nowrap;pointer-events:none;line-height:1;
}
.expertise-grid{display:grid;gap:clamp(2.5rem,5vw,5rem);position:relative;z-index:1}
.expertise-side{align-self:start}
.expertise-side p{color:var(--color-fg-muted);margin-top:1.1rem;max-width:30rem}
.expertise-side .link-line{margin-top:1.6rem;color:var(--color-accent)}
.expertise-items{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.exp-item{
  border-top:1px solid var(--color-line);padding-top:1.6rem;
  display:grid;gap:1rem;grid-template-columns:1fr;position:relative;
  transition:transform var(--dur) var(--ease);
}
.exp-item:hover{transform:translateX(6px)}
.exp-item .n{
  font-family:var(--font-mono);font-size:.72rem;color:var(--color-accent);letter-spacing:.14em;
  display:flex;align-items:center;gap:.55rem;
}
.exp-item .n::before{content:"";width:.4rem;height:.4rem;background:var(--color-accent);transform:rotate(45deg)}
.exp-item h3{margin-top:.2rem}
.exp-item p{color:var(--color-fg-muted);font-size:.97rem;max-width:36rem}
.exp-item .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.exp-item .tags span{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--color-line);padding:.32rem .6rem;color:var(--color-fg-muted);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.exp-item:hover .tags span{border-color:rgba(166,87,42,.4);color:var(--color-accent)}
.exp-media{overflow:hidden;border-radius:var(--radius);height:220px;position:relative}
.exp-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.exp-item:hover .exp-media img{filter:saturate(1);transform:scale(1.04)}

/* ============================================================
   Projets
   ============================================================ */
.projects{background:var(--color-surface);padding-block:var(--section-pad);border-block:1px solid var(--color-line)}
.projects .section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;max-width:none}
.projects-grid{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.proj{position:relative;text-decoration:none;display:block;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.proj.is-hidden{display:none}
.proj-media{position:relative;overflow:hidden;border-radius:var(--radius);height:clamp(260px,34vw,400px);background:var(--color-surface-2)}
.proj-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform var(--dur-slow) var(--ease)}
.proj-media .before{opacity:0}
.proj:hover .proj-media .before,.proj:focus-visible .proj-media .before{opacity:1}
.proj:hover .proj-media img{transform:scale(1.03)}
.proj-media .state{
  position:absolute;top:1rem;left:1rem;z-index:3;font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.38rem .65rem;
  background:rgba(166,87,42,.88);color:#FBF7EF;transition:opacity .4s var(--ease);
}
.proj-media .state-before{background:rgba(33,28,21,.8);opacity:0}
.proj:hover .state-after{opacity:0}
.proj:hover .state-before{opacity:1}
.proj-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.1rem}
.proj-meta h3{font-size:1.25rem}
.proj-meta .loc{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-fg-muted);margin-top:.3rem;display:block}
.badge-pair{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.78rem;flex:none}
.badge-pair .arrow{color:var(--color-fg-muted)}
.badge{
  width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center;
  color:#FBF7EF;font-weight:500;clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%);padding-right:.35rem;
}
.proj-note{
  margin-top:clamp(2rem,4vw,3rem);font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-fg-muted);
  display:flex;align-items:center;gap:.7rem;
}
.proj-note::before{content:"";width:.45rem;height:.45rem;background:var(--color-accent);transform:rotate(45deg);flex:none}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.chip{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--color-line);background:none;color:var(--color-fg-muted);
  padding:.55rem .95rem;min-height:44px;border-radius:var(--radius);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.chip.is-active{background:var(--color-accent);border-color:var(--color-accent);color:#FBF7EF}

/* ============================================================
   Méthode
   ============================================================ */
.method{padding-block:var(--section-pad)}
.method-grid{display:grid;gap:0;border-top:1px solid var(--color-line)}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  padding-block:1.7rem;border-bottom:1px solid var(--color-line);position:relative;
  transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.step:hover{background:var(--color-surface);padding-left:.8rem}
.step .n{
  font-family:var(--font-mono);font-size:.75rem;color:var(--color-accent);letter-spacing:.1em;
  display:flex;align-items:center;gap:.5rem;
}
.step .n::after{content:"";width:.38rem;height:.38rem;background:var(--color-accent);transform:rotate(45deg);opacity:0;transition:opacity var(--dur) var(--ease)}
.step:hover .n::after{opacity:1}
.step h3{font-size:1.25rem}
.step p{color:var(--color-fg-muted);font-size:.96rem;margin-top:.4rem;max-width:44rem}
.step .dur-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-fg-muted);margin-top:.6rem;display:inline-block}
.step .deliver{
  margin-top:.9rem;padding:.8rem 1rem;background:var(--color-accent-soft);
  border-left:2px solid var(--color-accent);font-size:.9rem;max-width:44rem;
}
.step .deliver b{font-weight:600}

/* ============================================================
   Témoignages
   ============================================================ */
.quotes{background:var(--color-dark);color:var(--color-on-dark);padding-block:var(--section-pad);position:relative;overflow:hidden}
.quotes::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(50rem 26rem at 12% 110%,rgba(166,87,42,.1),transparent 65%);
}
.quotes-grid{display:grid;gap:clamp(2rem,4vw,3rem);position:relative;z-index:1}
.quote{
  background:var(--color-dark-2);border:1px solid var(--color-line-dark);border-radius:var(--radius);
  padding:clamp(1.6rem,3.5vw,2.6rem);position:relative;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.quote:hover{transform:translateY(-5px);border-color:rgba(201,138,94,.4)}
.quote .qmark{
  font-family:var(--font-display);font-style:italic;font-size:5rem;line-height:0;color:var(--color-accent);
  display:block;height:2.2rem;
}
.quote blockquote{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.45;font-weight:340}
.quote figcaption{margin-top:1.4rem;display:flex;align-items:center;gap:.8rem}
.quote figcaption::before{content:"";width:2rem;height:1px;background:var(--color-accent)}
.quote .who{font-weight:600;font-size:.92rem}
.quote .what{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-on-dark-muted);display:block;margin-top:.2rem}
.quote .badge-pair{margin-top:1rem}
/* Variante claire (pages intérieures) */
.quote-light{background:var(--color-surface);border-color:var(--color-line);color:var(--color-fg)}
.quote-light .what{color:var(--color-fg-muted)}

/* ============================================================
   Contact
   ============================================================ */
.contact{padding-block:var(--section-pad);position:relative;overflow:clip}
.contact-grid{display:grid;gap:clamp(2.5rem,5vw,5rem)}
.contact-info h2{max-width:14ch}
.contact-info>p{color:var(--color-fg-muted);margin-top:1.2rem;max-width:30rem}
.contact-facts{margin-top:2.2rem;display:grid;gap:1.3rem}
.fact{display:grid;gap:.15rem}
.fact .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent)}
.fact .v{font-size:1rem}
.fact .v a{text-decoration:none;position:relative}
.fact .v a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--color-accent);transition:width var(--dur) var(--ease)}
.fact .v a:hover::after{width:100%}
.contact-aid{
  margin-top:2.2rem;padding:1.2rem 1.4rem;background:var(--color-accent-soft);
  border-left:2px solid var(--color-accent);font-size:.95rem;max-width:30rem;
}
.contact-aid b{font-weight:600}
.contact-aid a{color:var(--color-accent);font-weight:600}

.form{display:grid;gap:1.3rem;background:var(--color-surface);border:1px solid var(--color-line);padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:var(--radius);position:relative}
.form .row{display:grid;gap:1.3rem}
.field{display:grid;gap:.45rem}
.field label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-fg-muted)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--color-fg);
  background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius);
  padding:.85rem 1rem;min-height:44px;width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field textarea{resize:vertical;min-height:7.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.form .btn{justify-self:start}
.form-note{font-size:.85rem;color:var(--color-fg-muted)}
.form-success{
  display:none;padding:1rem 1.2rem;background:rgba(62,124,79,.12);border-left:2px solid var(--cls-a);font-size:.95rem;
}
.form.is-sent .form-success{display:block}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--color-dark);color:var(--color-on-dark);padding-top:clamp(3.5rem,7vw,5.5rem)}
.footer-grid{display:grid;gap:2.5rem;padding-bottom:3rem}
.footer-brand .nav-logo{color:var(--color-on-dark);font-size:1.4rem}
.footer-brand p{color:var(--color-on-dark-muted);font-size:.93rem;margin-top:1rem;max-width:20rem}
.footer h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent-dark);font-weight:500;margin-bottom:1.1rem}
.footer ul{list-style:none;display:grid;gap:.6rem}
.footer ul a{color:var(--color-on-dark-muted);text-decoration:none;font-size:.93rem;transition:color var(--dur) var(--ease)}
.footer ul a:hover{color:var(--color-on-dark)}
.footer address{font-style:normal;color:var(--color-on-dark-muted);font-size:.93rem;line-height:1.8}
.footer-hours li{display:flex;justify-content:space-between;gap:1rem;color:var(--color-on-dark-muted);font-size:.9rem}
.footer-hours li span:last-child{font-family:var(--font-mono);font-size:.8rem}
.footer-bar{
  border-top:1px solid var(--color-line-dark);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--color-on-dark-muted);
}
.footer-bar a{color:inherit;text-decoration:none}
.footer-bar a:hover{color:var(--color-on-dark)}
.footer-bar .diamond{display:inline-block;width:.4rem;height:.4rem;background:var(--color-accent);transform:rotate(45deg);margin-inline:.6rem;vertical-align:middle}

/* ============================================================
   Pages intérieures — composants
   ============================================================ */
/* Page hero */
.page-hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(2.5rem,7vw,5rem));
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(55rem 26rem at 90% -10%,rgba(166,87,42,.07),transparent 60%),
    linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 60%);
}
.page-hero h1{max-width:22ch}
.page-hero .intro{margin-top:1.5rem;color:var(--color-fg-muted);font-size:1.08rem;max-width:38rem}
.page-hero-meta{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin-top:2rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-fg-muted);
}
.page-hero-meta span{display:flex;align-items:center;gap:.55rem}
.page-hero-meta span::before{content:"";width:.4rem;height:.4rem;background:var(--color-accent);transform:rotate(45deg);flex:none}

/* Breadcrumb */
.breadcrumb{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-fg-muted);display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:2rem;
  list-style:none;
}
.breadcrumb a{text-decoration:none;transition:color var(--dur) var(--ease)}
.breadcrumb a:hover{color:var(--color-accent)}
.breadcrumb li:not(:last-child)::after{
  content:"";display:inline-block;width:.32rem;height:.32rem;background:var(--color-accent);
  transform:rotate(45deg);margin-left:.7rem;vertical-align:middle;
}
.breadcrumb [aria-current]{color:var(--color-fg)}

/* Fiche technique */
.fiche{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--color-line);border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden;
}
.fiche>div{background:var(--color-bg);padding:1.1rem 1.2rem}
.fiche .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-fg-muted);display:block;margin-bottom:.3rem}
.fiche .v{font-family:var(--font-display);font-size:1.15rem}
.fiche .v .badge-pair{display:inline-flex;vertical-align:middle}

/* Chapitres narratifs */
.chapters{display:grid;gap:clamp(3rem,7vw,5.5rem);padding-block:var(--section-pad)}
.chapter{display:grid;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.chapter .chapter-copy .n{
  font-family:var(--font-mono);font-size:.72rem;color:var(--color-accent);letter-spacing:.14em;
  display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;
}
.chapter .chapter-copy .n::before{content:"";width:.4rem;height:.4rem;background:var(--color-accent);transform:rotate(45deg)}
.chapter h2{font-size:clamp(1.6rem,3.2vw,2.4rem);max-width:24ch}
.chapter p{color:var(--color-fg-muted);margin-top:1rem;max-width:36rem}
.chapter ul{margin-top:1.2rem;list-style:none;display:grid;gap:.55rem}
.chapter ul li{padding-left:1.1rem;position:relative;font-size:.96rem}
.chapter ul li::before{content:"";position:absolute;left:0;top:.55em;width:.4rem;height:.4rem;background:var(--color-accent);transform:rotate(45deg)}
.chapter-media{position:relative;overflow:hidden;border-radius:var(--radius)}
.chapter-media img{width:100%;height:clamp(260px,38vw,460px);object-fit:cover;filter:saturate(.88);transition:filter var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.chapter-media:hover img{filter:saturate(1);transform:scale(1.03)}

/* Galerie asymétrique */
.gallery{display:grid;gap:clamp(1rem,2.5vw,1.6rem);padding-block:clamp(2rem,5vw,3.5rem)}
.gallery figure{position:relative;overflow:hidden;border-radius:var(--radius);margin:0}
.gallery img{width:100%;height:100%;object-fit:cover;min-height:220px;filter:saturate(.88);transition:filter var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.gallery figure:hover img{filter:saturate(1);transform:scale(1.03)}
.gallery figcaption{
  position:absolute;left:1rem;bottom:1rem;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;background:rgba(33,28,21,.75);color:var(--color-on-dark);
  padding:.4rem .7rem;backdrop-filter:blur(4px);
}

/* FAQ */
.faq{border-top:1px solid var(--color-line);max-width:46rem}
.faq details{border-bottom:1px solid var(--color-line)}
.faq summary{
  cursor:pointer;padding-block:1.25rem;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;
  font-family:var(--font-display);font-size:1.12rem;line-height:1.3;list-style:none;
  transition:color var(--dur) var(--ease);min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-accent)}
.faq summary .ic{
  flex:none;width:.55rem;height:.55rem;background:var(--color-accent);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease);
}
.faq details[open] summary .ic{transform:rotate(45deg) scale(.55)}
.faq details[open] summary{color:var(--color-accent)}
.faq .faq-body{padding-bottom:1.4rem;color:var(--color-fg-muted);font-size:.97rem;max-width:42rem}
.faq .faq-body a{color:var(--color-accent);font-weight:600}

/* Tableau des aides */
.table-scroll{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius)}
.aid-table{width:100%;border-collapse:collapse;min-width:620px;background:var(--color-bg)}
.aid-table th{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--color-fg-muted);text-align:left;padding:1rem 1.2rem;border-bottom:1px solid var(--color-fg);
  font-weight:500;white-space:nowrap;
}
.aid-table td{padding:.95rem 1.2rem;border-bottom:1px solid var(--color-line);font-size:.95rem;vertical-align:top}
.aid-table tr:last-child td{border-bottom:none}
.aid-table tbody tr{transition:background var(--dur) var(--ease)}
.aid-table tbody tr:hover{background:var(--color-surface)}
.aid-table .amount{font-family:var(--font-mono);font-size:.88rem;white-space:nowrap;color:var(--color-accent);font-weight:500}
.aid-table .cat{font-weight:600}
.table-note{font-size:.82rem;color:var(--color-fg-muted);margin-top:.9rem;max-width:46rem}

/* Équipe */
.team-grid{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem)}
.team-card{
  border:1px solid var(--color-line);border-radius:var(--radius);padding:1.7rem;
  display:grid;gap:1.1rem;background:var(--color-bg);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.team-card:hover{transform:translateY(-4px);border-color:rgba(166,87,42,.45)}
.team-card .monogram{
  width:3.2rem;height:3.2rem;background:var(--color-surface-2);
  transform:rotate(45deg);display:flex;align-items:center;justify-content:center;
  margin:.5rem;transition:background var(--dur) var(--ease);
}
.team-card:hover .monogram{background:var(--color-accent-soft)}
.team-card .monogram span{transform:rotate(-45deg);font-family:var(--font-display);font-size:1.05rem;color:var(--color-accent)}
.team-card .who{font-family:var(--font-display);font-size:1.2rem}
.team-card .role{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-fg-muted);margin-top:.3rem;display:block}
.team-card .bio{font-size:.92rem;color:var(--color-fg-muted)}

/* Stat band */
.stat-band{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem;
  border-block:1px solid var(--color-line);padding-block:clamp(1.8rem,4vw,2.6rem);
}
.on-dark .stat-band{border-color:var(--color-line-dark)}

/* Pagination projet */
.pagenav{display:grid;gap:1px;background:var(--color-line);border-block:1px solid var(--color-line)}
.pagenav a{
  background:var(--color-bg);padding:1.6rem var(--gutter);text-decoration:none;display:grid;gap:.35rem;
  transition:background var(--dur) var(--ease);
}
.pagenav a:hover{background:var(--color-surface)}
.pagenav .dir{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);
  display:flex;align-items:center;gap:.55rem;
}
.pagenav .dir::before{content:"";width:.38rem;height:.38rem;background:var(--color-accent);transform:rotate(45deg)}
.pagenav .t{font-family:var(--font-display);font-size:1.15rem}
.pagenav .next{text-align:right}
.pagenav .next .dir{justify-content:flex-end}

/* Bande CTA pré-footer */
.cta-band{
  background:var(--color-dark);color:var(--color-on-dark);
  padding-block:clamp(3.5rem,8vw,6rem);position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(45rem 22rem at 85% 120%,rgba(166,87,42,.12),transparent 65%);
}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{max-width:22ch}
.cta-band p{color:var(--color-on-dark-muted);margin-top:1.1rem;max-width:34rem}
.cta-band .hero-ctas{margin-top:2rem}

/* Bloc « ce que nous refusons » */
.refuse{
  background:var(--color-dark);color:var(--color-on-dark);border-radius:var(--radius);
  padding:clamp(1.8rem,4vw,2.8rem);position:relative;overflow:hidden;
}
.refuse::before{
  content:"Non.";position:absolute;right:-.5rem;bottom:-2.5rem;font-family:var(--font-display);
  font-style:italic;font-size:clamp(5rem,10vw,9rem);opacity:.05;pointer-events:none;line-height:1;
}
.refuse h3{margin-bottom:1.2rem}
.refuse ul{list-style:none;display:grid;gap:.9rem;position:relative;z-index:1}
.refuse li{padding-left:1.4rem;position:relative;color:var(--color-on-dark-muted);font-size:.97rem}
.refuse li b{color:var(--color-on-dark);font-weight:600}
.refuse li::before{
  content:"✕";position:absolute;left:0;top:0;color:var(--color-accent-dark);
  font-family:var(--font-mono);font-size:.8rem;
}

/* Prose (mentions légales) */
.prose{max-width:46rem}
.prose h2{font-size:1.45rem;margin-top:clamp(2rem,5vw,3rem)}
.prose p,.prose ul{margin-top:.9rem;color:var(--color-fg-muted);font-size:.97rem}
.prose ul{padding-left:1.2rem}
.prose a{color:var(--color-accent)}
.prose strong{color:var(--color-fg)}

/* Page 404 */
.err{
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  background:var(--color-dark);color:var(--color-on-dark);position:relative;overflow:hidden;
  padding-block:calc(var(--nav-h) + 2rem);
}
.err::before{
  content:"404";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-style:italic;font-size:clamp(14rem,42vw,34rem);
  opacity:.04;pointer-events:none;line-height:1;
}
.err .container{position:relative;z-index:1}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width:768px){
  .exp-item{grid-template-columns:1fr 260px;align-items:start}
  .exp-item .exp-full{grid-column:1/-1}
  .form .row{grid-template-columns:1fr 1fr}
  .projects-grid{grid-template-columns:repeat(2,1fr);padding-bottom:2.6rem}
  .proj:nth-child(even){transform:translateY(2.6rem)}
  .proj:nth-child(even):hover{transform:translateY(2.4rem)}
  .quotes-grid{grid-template-columns:1fr 1fr;padding-bottom:2.4rem}
  .quote:nth-child(2){transform:translateY(2.4rem)}
  .quote:nth-child(2):hover{transform:translateY(2.2rem)}
  .step{grid-template-columns:6rem 1fr auto}
  .transform-stage{grid-template-columns:7fr 5fr}
  .transform-media{height:auto;min-height:300px}
  .fiche{grid-template-columns:repeat(4,1fr)}
  .chapter{grid-template-columns:6fr 6fr}
  .chapter.flip .chapter-copy{order:2}
  .chapter.flip .chapter-media{order:1}
  .gallery{grid-template-columns:repeat(12,1fr)}
  .gallery .g7{grid-column:span 7}
  .gallery .g5{grid-column:span 5}
  .gallery .g6{grid-column:span 6}
  .gallery .g12{grid-column:span 12}
  .gallery .g-off{margin-top:2.4rem}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-template-columns:repeat(4,1fr)}
  .pagenav{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .nav-links{display:flex}
  .nav-burger{display:none}
  .hero-grid{grid-template-columns:6.5fr 5.5fr}
  .expertise-grid{grid-template-columns:4.5fr 7.5fr}
  .expertise-side{position:sticky;top:calc(var(--nav-h) + 2rem)}
  .contact-grid{grid-template-columns:5fr 7fr}
  .contact-info{position:sticky;top:calc(var(--nav-h) + 2rem);align-self:start}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1023.5px){
  .transform-wrap{height:auto;background:var(--color-dark)}
  .transform-sticky{position:relative;height:auto;min-height:0;padding-block:var(--section-pad)}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none!important;flex-wrap:wrap;width:auto}
}