/*
Theme Name: L'Établi — Architecture & Design (multi-pages)
Theme URI: https://letabliarchitecture.com
Author: L'Établi Architecture & Design
Author URI: https://letabliarchitecture.com
Description: Thème classique sur mesure pour L'Établi Architecture & Design (Saint-Hyacinthe). Page d'accueil immersive avec vidéo héro, portfolio, section équipe et carrières. Typographie Helvetica Neue embarquée.
Version: 2.123.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: letabli
*/

/* ===== Self-hosted fonts (Manrope, Space Grotesk) ===== */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/manrope-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/manrope-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/manrope-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/manrope-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}


/* ---------- Helvetica Neue Medium — single weight mapped to the full range ---------- */
@font-face{
  font-family:"Helvetica Neue LT";
  src:url("assets/fonts/HelveticaNeue-Medium.woff") format("woff"),
      url("assets/fonts/HelveticaNeueMedium.otf") format("opentype");
  font-weight:100 900;          /* one master satisfies every weight request → no faux-bold */
  font-style:normal;
  font-display:swap;
}
:root{
  color-scheme:light dark;
  --gold:#c9a97e;
  --ink:#17191b;
  --ink-2:#1e2124;
  --limestone:#eceae4;
  --limestone-2:#e4e1d9;
  --paper-text:#25272a;
  --muted:#595b57;
  --concrete:#9c9a92;
  --line-dark:rgba(255,255,255,.14);
  --line-light:#cbc8c0;
  --accent:#141414;
  --accent-2:#f4f2ec;
  --white:#f4f2ec;
  --font-display:"Manrope","Helvetica Neue LT",Helvetica,Arial,sans-serif;
  --font-title:"Helvetica Neue LT","Manrope",Helvetica,Arial,sans-serif;
  --font-body:"Manrope","Helvetica Neue LT",Helvetica,Arial,sans-serif;
  --font-mono:"Manrope","Helvetica Neue LT",Helvetica,Arial,sans-serif;
  --pad:clamp(22px,5vw,92px);
  --sec:clamp(84px,11vw,168px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  font-family:var(--font-body);
  background:var(--limestone);
  color:var(--paper-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em,i{font-style:normal}
.mono{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- hero contact ---------- */
.hero__contact{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:rgba(244,242,236,.72)}
.hero__contact a{transition:color .25s}
.hero__contact a:hover{color:var(--accent-2)}
.hero__contact .sep{width:4px;height:4px;border-radius:50%;background:var(--accent-2);opacity:.7;flex:none}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);
  transition:background .4s ease,padding .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(23,25,27,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:12px var(--pad);
  border-bottom:1px solid var(--line-dark);
}
.nav__logo img{height:34px;width:auto;transition:height .4s ease}
.nav.scrolled .nav__logo img{height:28px}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__links a{
  color:var(--white);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  opacity:.82;transition:opacity .25s;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--accent-2);transition:width .3s ease;
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:22px}
.nav__phone{color:var(--white);font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.06em;opacity:.92}
.btn-rdv{
  border:1px solid var(--accent-2);color:var(--white);
  padding:11px 22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s,color .3s;background:transparent;
}
.btn-rdv:hover{background:var(--accent-2);color:var(--ink)}
.nav__burger{display:none;align-items:center;gap:11px;cursor:pointer;z-index:60;background:none;border:0;padding:12px;margin:-12px;color:var(--white);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.nav__burger-lbl{display:none;transition:opacity .2s}
.burger-x .nav__burger-lbl{opacity:0}
.nav__burger-box{display:inline-flex;flex-direction:column;gap:5px}
.nav__burger-box i{width:26px;height:1.5px;background:var(--white);display:block;transition:.35s}
@media(max-width:1080px){
  .nav__links,.nav__phone{display:none}
  .nav__burger{display:flex}
}
@media(max-width:560px){
  .nav{padding:16px var(--pad)}
  .nav__logo img{height:26px}
  .nav.scrolled .nav__logo img{height:24px}
  .nav__cta{gap:12px}
  .btn-rdv{padding:9px 13px;font-size:10px;letter-spacing:.1em}
}

/* mobile overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;
  padding:90px 24px 44px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .55s cubic-bezier(.76,0,.24,1);
}
@media(max-height:640px){.mobile-menu{gap:14px}.mobile-menu a{font-size:22px}}
.mobile-menu.open{transform:translateY(0)}
body.menu-open{overflow:hidden}
.mobile-menu a{color:var(--white);font-family:var(--font-display);font-size:30px;font-weight:300}
.mobile-menu .mono{color:var(--accent-2);margin-top:20px}
.burger-x .nav__burger-box i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger-x .nav__burger-box i:nth-child(2){opacity:0}
.burger-x .nav__burger-box i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Desktop landing — a "Menu" trigger opens the same overlay, restyled as a
   frosted, translucent, soft-zoom menu so the gateway ghosts through behind.
   Mobile keeps its solid slide-down menu (this block is desktop-only). */
@media(min-width:1081px){
  body.home .nav__burger{display:inline-flex}
  body.home .nav__burger .nav__burger-lbl{display:inline}

  .mobile-menu{
    transform:scale(1.07);opacity:0;visibility:hidden;
    background:rgba(23,25,27,.62);
    -webkit-backdrop-filter:blur(20px) saturate(1.08);backdrop-filter:blur(20px) saturate(1.08);
    transition:opacity .5s ease, transform .8s cubic-bezier(.16,1,.3,1), visibility 0s .5s;
    gap:clamp(10px,1.9vh,26px);
  }
  .mobile-menu.open{
    transform:scale(1);opacity:1;visibility:visible;
    transition:opacity .45s ease, transform .8s cubic-bezier(.16,1,.3,1), visibility 0s 0s;
  }
  .mobile-menu a{
    font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.02em;opacity:0;
    text-shadow:0 1px 20px rgba(0,0,0,.35);transition:opacity .5s ease, color .3s;
  }
  .mobile-menu.open a{opacity:.82;transition-delay:.15s}
  .mobile-menu a:hover{opacity:1;color:var(--gold)}
  .mobile-menu .mono,.mobile-menu .lang-switch{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end;background:var(--ink)}
.hero__video,.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--ink);
}
.hero__poster{z-index:0}
.hero__slides{position:absolute;inset:0;z-index:0}
.hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink);opacity:0;transition:opacity 1.4s ease}
.hero__slide.on{opacity:1}
.hero__video{z-index:1;opacity:0;transition:opacity .35s ease;pointer-events:none}
.hero__video.is-playing{opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:rgba(0,0,0,.6);
}
.hero__inner{position:relative;z-index:3;width:100%;padding:0 var(--pad) clamp(48px,7vw,86px);color:var(--white)}
.hero__eyebrow{display:flex;align-items:center;gap:14px;color:var(--white);opacity:.9;margin-bottom:26px}
.hero__eyebrow .tick{width:34px;height:1px;background:var(--accent-2)}
.hero h1{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(3rem,7.4vw,7rem);line-height:1.03;letter-spacing:-.022em;
  max-width:20ch;
  text-shadow:none;
}
.hero h1 .reveal-line{white-space:nowrap;padding:.07em 0;margin:-.07em 0}
@media(max-width:640px){.hero h1{font-size:clamp(2rem,9.5vw,3rem)}}
.hero h1 em{font-style:normal;color:var(--accent-2)}
.hero__sub{
  margin-top:26px;max-width:72ch;font-size:clamp(1rem,1.35vw,1.18rem);
  color:rgba(244,242,236,.82);font-weight:400;line-height:1.6;
}
.hero__actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.btn{
  padding:16px 30px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  transition:.32s;display:inline-flex;align-items:center;gap:12px;cursor:pointer;border:1px solid;
}
.btn--solid{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--solid:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(244,242,236,.4)}
.btn--ghost:hover{border-color:var(--white)}

/* hero text reveal */
.reveal-line{overflow:hidden;display:block}
.reveal-line>*{display:block;transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.loaded .reveal-line>*{transform:translateY(0)}
.d1>*{transition-delay:.15s}.d2>*{transition-delay:.28s}.d3>*{transition-delay:.42s}.d4>*{transition-delay:.55s}

/* ---------- generic section ---------- */
.section{position:relative;padding:clamp(30px,3.2vw,46px) var(--pad) clamp(60px,7.5vw,108px);border-top:1px solid var(--line-light)}
.section--dark{border-top-color:var(--line-dark)}
.section--dark{background:var(--ink);color:var(--white);position:relative;--muted:rgba(244,242,236,.66)}
.eyebrow{display:flex;align-items:center;gap:15px;color:var(--accent);margin-bottom:32px}
.section--dark .eyebrow{color:var(--accent-2)}
.eyebrow .tick{width:36px;height:1px;background:currentColor}
.h-sec{font-family:var(--font-title);font-weight:300;font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.16;letter-spacing:-.01em}
.h-sec em{font-style:normal;color:var(--accent)}
.section--dark .h-sec em{color:var(--accent-2)}

/* dimension divider signature */
.dim{display:flex;align-items:center;gap:0;width:100%;color:var(--concrete)}
.dim .cap{width:1px;height:10px;background:currentColor;flex:none}
.dim .ln{flex:1;height:1px;background:currentColor;opacity:.5}
.dim .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;padding:0 18px;white-space:nowrap}
@media(max-width:480px){.dim .lbl{white-space:normal;text-align:center;line-height:1.6}}

/* ---------- intro / manifesto ---------- */
.intro{background:var(--limestone-2)}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.intro__lead{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.32;color:var(--paper-text)}
.intro__lead em{font-style:normal;color:var(--accent)}
.intro__body{color:var(--muted);font-size:1.02rem;line-height:1.75;max-width:46ch}
.index{margin-top:44px;border-top:1px solid var(--line-light)}
.index a{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-light);transition:.3s;position:relative}
.index a .num{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.index a .ttl{font-family:var(--font-display);font-size:1.5rem;font-weight:400;transition:.3s}
.index a .arw{margin-left:auto;font-size:1.1rem;opacity:0;transform:translateX(-8px);transition:.3s;color:var(--accent)}
.index a:hover{padding-left:14px}
.index a:hover .ttl{color:var(--accent)}
.index a:hover .arw{opacity:1;transform:translateX(0)}
@media(max-width:860px){.intro__grid{grid-template-columns:1fr}}

/* ---------- expertise ---------- */
.exp__intro{max-width:58ch;margin:0 0 clamp(28px,4vw,44px);color:var(--paper-text);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.55}
.expb-list{display:grid;gap:clamp(14px,1.6vw,20px)}
.expb{position:relative;overflow:hidden;min-height:clamp(480px,min(58vw,100svh - 330px),880px);background:var(--ink-2);display:flex;align-items:flex-end}
.expb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.expb:hover .expb__img{transform:scale(1.045)}
.expb__grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,.35) 0%,rgba(20,20,20,0) 26%,rgba(20,20,20,.12) 52%,rgba(20,20,20,.9) 100%)}
.expb__in{position:relative;z-index:2;padding:clamp(28px,4vw,54px);color:var(--white);max-width:64ch}
.expb__meta{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,22px);margin-bottom:16px}
.expb__n{font-family:var(--font-display);font-weight:200;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.02em;color:var(--accent-2)}
.expb__ttl{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.55rem,3vw,2.5rem);line-height:1;letter-spacing:-.015em;color:var(--white)}
.expb__txt{color:rgba(244,242,236,.86);line-height:1.66;max-width:56ch;margin:0 0 22px}
.expb__link{display:inline-flex;align-items:center;gap:8px;color:var(--white);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px;transition:border-color .3s,gap .3s}
.expb__link:hover{border-color:var(--white);gap:14px}
@media(max-width:640px){.expb{min-height:clamp(460px,112vw,600px)}}


/* ---------- services résidentiels (rangées média + texte) ---------- */
.exp{display:grid;gap:clamp(44px,6vw,88px);margin-top:clamp(40px,6vw,72px)}
.exp__row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4.5vw,72px);align-items:center}
.exp__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-2)}
.exp__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.exp__row:hover .exp__media>img{transform:scale(1.04)}
.exp__media .tag{position:absolute;top:14px;left:14px;z-index:2;color:var(--white);background:rgba(23,25,27,.55);padding:6px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.exp__media.ba{cursor:ew-resize;--pos:50%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.exp__num{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.exp__ttl{font-family:var(--font-display);font-weight:300;font-size:clamp(1.55rem,2.8vw,2.3rem);line-height:1.1;letter-spacing:-.015em;margin:14px 0 16px;color:var(--paper-text)}
.exp__txt{color:var(--muted);line-height:1.72;max-width:52ch;margin-bottom:22px}
@media(max-width:860px){.exp__row{grid-template-columns:1fr;gap:20px;align-items:start}}

/* liste de démarches (Service personnalisé) */
.exp__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;max-width:64ch}
.exp__tags span{border:1px solid var(--line-light);padding:7px 12px;font-size:.85rem;line-height:1.4;color:var(--paper-text);background:rgba(255,255,255,.45)}
.expb .exp__tags span{border-color:rgba(255,255,255,.35);color:rgba(244,242,236,.92);background:rgba(23,25,27,.35)}

/* lien fléché de base (utilisé un peu partout) */
.link-arw{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-text);border-bottom:1px solid var(--line-light);padding-bottom:4px;transition:border-color .3s,color .3s}
.link-arw:hover{color:var(--accent);border-color:var(--accent)}
.section--dark .link-arw{color:var(--white);border-color:rgba(255,255,255,.35)}
.section--dark .link-arw:hover{color:var(--accent-2);border-color:var(--accent-2)}

/* before / after comparator (as an expertise band) */
.expb--ba{cursor:ew-resize;--pos:50%;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  min-height:clamp(520px,min(66vw,100svh - 240px),880px)}
.expb--ba .ba__img{object-position:center top}
.expb--ba .ba__before{object-position:center -40px}
.expb--ba .expb__grad,.expb--ba .expb__in{pointer-events:none}
.expb--ba .expb__link{pointer-events:auto}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:none!important;z-index:0}
.ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--white);transform:translateX(-50%);z-index:3;box-shadow:0 0 0 1px rgba(23,25,27,.22)}
.ba__grip{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.4);transition:transform .25s;z-index:3}
.expb--ba:hover .ba__grip{transform:translate(-50%,-50%) scale(1.06)}
.ba__grip svg{width:20px;height:20px}
.ba__lbl{position:absolute;top:16px;z-index:3;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);background:rgba(23,25,27,.55);padding:6px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ba__lbl--before{left:16px}
.ba__lbl--after{right:16px}
.expb--ba:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* before / after album (réalisations) */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);margin-top:clamp(36px,5vw,60px)}
.ba-item{margin:0}
.ba-item .ba{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-2);cursor:ew-resize;--pos:50%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ba-item .ba__grip{top:50%}
.ba-item .ba:hover .ba__grip{transform:translate(-50%,-50%) scale(1.06)}
.ba-item .ba__lbl{top:auto;bottom:14px}
.ba-item figcaption{margin-top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ba-item .ba:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:640px){.ba-grid{grid-template-columns:1fr}}

/* ---------- realisations gallery ---------- */
.gal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.gal__head p{color:var(--concrete);max-width:42ch;margin-top:18px;line-height:1.7}
.gal{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.gal__item{flex:0 1 calc(33.33% - 11px);display:block;position:relative;overflow:hidden;cursor:pointer;background:var(--ink-2);aspect-ratio:4/3}
.gal__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .5s;filter:saturate(.94)}
.gal__item:hover img{transform:scale(1.06);filter:saturate(1.05)}
.gal__item .cap{
  position:absolute;left:0;bottom:0;width:100%;padding:22px 18px 16px;
  background:linear-gradient(transparent,rgba(23,25,27,.9));
  color:var(--white);opacity:0;transform:translateY(12px);transition:.4s;
}
.gal__item:hover .cap{opacity:1;transform:translateY(0)}
.gal__item .cap .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--accent-2);text-transform:uppercase}
.gal__item .cap .t{font-family:var(--font-display);font-size:1.15rem;margin-top:5px}
@media(hover:none){
  .gal__item .cap{opacity:1;transform:none}
}
@media(max-width:900px){.gal__item{flex-basis:calc(50% - 8px)}}
@media(max-width:560px){.gal__item{flex-basis:100%}}

/* ---------- team ---------- */
.team{background:var(--limestone-2)}
.team__quote{font-family:var(--font-display);font-style:normal;font-weight:300;font-size:clamp(1.4rem,3vw,2.3rem);color:var(--paper-text);max-width:24ch;line-height:1.3}
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);margin-top:clamp(44px,6vw,72px)}
.member{position:relative}
.member__photo{aspect-ratio:3/4;overflow:hidden;background:var(--ink-2);position:relative}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) contrast(1.02);transition:filter .6s,transform 1s cubic-bezier(.16,1,.3,1)}
.member:hover .member__photo img{filter:grayscale(0);transform:scale(1.04)}
.member__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(23,25,27,.35));opacity:0;transition:.5s}
.member:hover .member__photo::after{opacity:1}
.member__name{font-family:var(--font-display);font-size:1.2rem;margin-top:16px;font-weight:400}
.member__role{color:var(--muted);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;line-height:1.6}
@media(max-width:860px){.team__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- careers accordion ---------- */
.careers{background:var(--limestone)}
.careers__intro{color:var(--muted);max-width:52ch;margin-top:20px;line-height:1.7}
.acc{margin-top:clamp(38px,5vw,58px);border-top:1px solid var(--line-light)}
.acc__item{border-bottom:1px solid var(--line-light)}
.acc__head{width:100%;display:flex;align-items:center;gap:22px;padding:26px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--paper-text)}
.acc__head .an{font-family:var(--font-mono);font-size:12px;color:var(--accent);flex:none}
.acc__head .at{font-family:var(--font-display);font-weight:300;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.1;flex:1;transition:color .3s}
.acc__head:hover .at{color:var(--accent)}
.acc__ic{position:relative;width:20px;height:20px;flex:none}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:var(--accent);transition:transform .35s,opacity .3s}
.acc__ic::before{top:9px;left:0;width:20px;height:1.5px}
.acc__ic::after{top:0;left:9px;width:1.5px;height:20px}
.acc__item.open .acc__ic::after{transform:scaleY(0);opacity:0}
.acc__panel{overflow:hidden;max-height:0;transition:max-height .55s cubic-bezier(.16,1,.3,1)}
.acc__inner{padding:2px 0 34px;max-width:62ch}
.acc__inner p{color:var(--muted);line-height:1.72;margin-bottom:16px}
.acc__inner ul{list-style:none;margin:8px 0 24px;display:grid;gap:10px}
.acc__inner li{color:var(--muted);padding-left:24px;position:relative;line-height:1.5}
.acc__inner li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;background:var(--accent)}
.acc__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-sm{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid;transition:.3s;cursor:pointer}
.btn-sm--solid{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-sm--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn-sm--ghost{background:transparent;color:var(--paper-text);border-color:var(--line-light)}
.btn-sm--ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- cta band ---------- */
.cta{position:relative;padding:clamp(90px,13vw,170px) var(--pad);text-align:center;color:var(--white);overflow:hidden;background:var(--ink)}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.32;filter:grayscale(.3)}
.cta::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 45%,rgba(23,25,27,.5),rgba(23,25,27,.9))}
.cta__inner{position:relative;z-index:2}
.cta h2{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,5.5vw,4.6rem);line-height:1.05;letter-spacing:-.015em}
.cta h2 em{font-style:normal;color:var(--accent-2)}
.cta p{color:rgba(244,242,236,.78);max-width:44ch;margin:24px auto 40px;font-size:1.08rem;line-height:1.65}
.cta__phone{margin-top:30px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--concrete);font-size:13px}
.cta__phone a{color:var(--white)}

/* ---------- footer ---------- */
.footer{background:var(--ink-2);color:var(--white);padding:clamp(44px,5.5vw,66px) var(--pad) 28px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
/* width:auto is required. The img carries width/height attributes so the
   browser can reserve space and avoid layout shift, but with only the height
   set in CSS the attribute width would win and stretch the logo. */
.footer__logo img{height:40px;width:auto;margin-bottom:24px}
.footer__addr{color:var(--concrete);line-height:1.9;font-size:.95rem}
.footer__addr a:hover{color:var(--accent-2)}
.footer__col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--concrete);margin-bottom:20px}
.footer__col a{display:block;color:rgba(244,242,236,.82);padding:8px 0;font-size:.95rem;transition:.25s}
.footer__col a:hover{color:var(--accent-2);padding-left:6px}
.footer__socials{display:flex;gap:14px;margin-top:22px}
.footer__socials a{width:40px;height:40px;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;transition:.3s;color:rgba(244,242,236,.85)}
.footer__socials a:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
.footer__socials svg{width:17px;height:17px;display:block}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 24px;padding-top:20px;color:var(--concrete);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em}
@media(max-width:820px){.footer__top{grid-template-columns:1fr 1fr}.footer__logo{grid-column:1/-1}}
@media(max-width:460px){.footer__top{grid-template-columns:1fr;gap:34px}}

/* ---------- reveal on scroll ---------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rise.in{opacity:1;transform:none}
.rise.dly1{transition-delay:.1s}.rise.dly2{transition-delay:.2s}.rise.dly3{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal-line>*,.rise{transform:none!important;opacity:1!important}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* ---------- accessibility utilities ---------- */
/* Read by screen readers and search engines, off-screen for sighted users. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}
/* Keyboard users land here first and can jump the nav straight to the content. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--ink);color:var(--white);padding:14px 22px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase
}
.skip-link:focus{left:0}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* ---------- inner page banner ---------- */
.phero{
  position:relative;background:var(--ink);color:var(--white);overflow:hidden;
  padding:clamp(84px,7vw,92px) var(--pad) clamp(24px,2.6vw,32px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
/* soft depth glow */
.phero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 120% at 92% 30%,rgba(255,255,255,.045),transparent 60%);
}
.phero__inner{position:relative;z-index:2;max-width:none}
.phero .eyebrow{color:var(--accent-2);margin-bottom:clamp(20px,3vw,30px)}
.phero__row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:end}
.phero__row--solo{display:block}
.phero__title{
  font-family:var(--font-title);font-weight:300;
  font-size:clamp(1.7rem,3.3vw,2.45rem);line-height:1.15;letter-spacing:-.015em;max-width:24ch;
}
.phero__title em{font-style:normal;color:var(--accent-2)}
.phero__title--img{max-width:none}
.phero__titleimg{display:block;width:clamp(240px,40vw,500px);max-width:100%;height:auto}
.phero__side{border-left:1px solid rgba(255,255,255,.14);padding-left:clamp(22px,3vw,40px);padding-bottom:8px}
.phero__lead{color:rgba(244,242,236,.78);font-size:.94rem;line-height:1.6;max-width:46ch}
.crumb{display:flex;align-items:center;gap:10px;margin-top:clamp(26px,4vw,40px);color:var(--concrete);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
@media(max-width:820px){
  .phero__row{grid-template-columns:1fr;gap:18px;align-items:start}
  .phero__side{border-left:0;padding-left:0;padding-bottom:0}
  .phero__lead{max-width:56ch}
}
.crumb a{color:var(--concrete);transition:color .25s}
.crumb a:hover{color:var(--accent-2)}
.crumb span[aria-current]{color:var(--white)}

/* ---------- homepage teaser cards ---------- */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(44px,6vw,68px)}
.teaser{position:relative;overflow:hidden;background:var(--ink-2);aspect-ratio:3/4;display:block}
.teaser img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.72);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.teaser:hover img{transform:scale(1.06);filter:saturate(1) brightness(.8)}
.teaser__body{position:absolute;left:0;bottom:0;width:100%;padding:26px 22px;color:var(--white);
  background:linear-gradient(transparent,rgba(23,25,27,.88))}
.teaser__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2)}
.teaser__t{font-family:var(--font-display);font-size:1.45rem;font-weight:400;margin-top:8px;line-height:1.15}
.teaser__x{color:rgba(244,242,236,.72);font-size:.92rem;line-height:1.6;margin-top:10px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease}
.teaser:hover .teaser__x{max-height:120px;opacity:1}
@media(hover:none){.teaser__x{max-height:none;opacity:1}.teaser img{filter:saturate(.9) brightness(.78)}}
@media(max-width:900px){.teasers{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.teasers{grid-template-columns:1fr}}

/* ---------- approach / process steps ---------- */
.steps{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line-light)}
.step{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,4vw,56px);
  align-items:start;padding:clamp(30px,4vw,46px) 0;border-bottom:1px solid var(--line-light);transition:.35s}
.step:hover{background:rgba(20,20,20,.035);padding-left:12px;padding-right:12px}
.step__n{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--accent);padding-top:8px}
.step__t{font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,2.6vw,2.05rem);
  line-height:1.12;color:var(--paper-text)}
.step__d{color:var(--muted);line-height:1.74;max-width:52ch}
.step__d ul{list-style:none;margin:14px 0 0;display:grid;gap:9px}
.step__d li{padding-left:22px;position:relative;line-height:1.5}
.step__d li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:1px;background:var(--accent)}
@media(max-width:820px){.step{grid-template-columns:1fr;gap:14px 0}.step__d{grid-column:1/-1}}

/* principles grid */
.princ{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(44px,6vw,70px)}
.princ__item{padding-top:24px;border-top:1px solid var(--line-dark)}
.princ__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.princ__t{font-family:var(--font-display);font-weight:300;font-size:1.5rem;margin:12px 0 10px;line-height:1.2}
.princ__x{color:rgba(244,242,236,.72);line-height:1.7;font-size:.96rem}
@media(max-width:860px){.princ{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.princ{grid-template-columns:1fr}}

/* ---------- contact page ---------- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:stretch}
.contact__grid > div:first-child{display:flex;flex-direction:column}
.cinfo{display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:6px;margin-top:16px}
.cinfo__row{padding:22px 0;border-bottom:1px solid var(--line-light)}
.cinfo__socials{display:flex;gap:12px;margin-top:14px}
.cinfo__socials a{width:44px;height:44px;border:1px solid var(--line-light);display:flex;align-items:center;justify-content:center;color:var(--paper-text);transition:background .3s,border-color .3s,color .3s}
.cinfo__socials a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.cinfo__socials svg{width:18px;height:18px;display:block}
.cinfo__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cinfo__v{font-family:var(--font-display);font-size:1.24rem;margin-top:8px;color:var(--paper-text);line-height:1.45}
/* « info@letabliarchitecture.com » n'offre aucune coupure naturelle : dans une
   colonne de la grille (minmax(170px,1fr)) il débordait la piste, se faisait
   couper par body{overflow-x:hidden} et rendait la page balayable sur mobile.
   Plutôt que de le passer sur deux lignes, on le rétrécit juste ce qu'il faut.
   La mesure se fait sur la COLONNE (cqi), pas sur la fenêtre : avec auto-fit le
   nombre de colonnes change, donc une formule en vw serait fausse par endroits.
   À 1,24 rem l'adresse mesure 13,5 px de large par px de corps ; 7 cqi la laisse
   donc à ~94 % de la colonne. Elle garde sa taille normale dès qu'elle tient. */
.cinfo__row{container-type:inline-size}
.cinfo__v--mail{font-size:min(1.24rem,7cqi)}
.cinfo__v a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .35s ease,color .3s ease}
.cinfo__v a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.cinfo__note{color:var(--muted);font-size:.9rem;margin-top:6px;line-height:1.6}
.cform{background:var(--limestone-2);padding:clamp(26px,3.5vw,44px)}
.cform h3{font-family:var(--font-display);font-weight:300;font-size:1.6rem;margin-bottom:8px}
.cform>p{color:var(--muted);font-size:.94rem;line-height:1.65;margin-bottom:26px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line-light);background:var(--white);
  font-family:var(--font-body);font-size:1rem;color:var(--paper-text);transition:border-color .25s}
.field textarea{min-height:130px;resize:vertical}
/* Champ invalide (telephone uniquement, pose a l'envoi par page-contact.php).
   Reprend le rouge sourd de .formnote--err plutot qu'un rouge vif, pour rester
   dans la palette. !important : sinon la regle :focus qui suit reprendrait la
   main des que le script donne le focus au champ fautif. */
.field input.is-invalid,
.field input.is-invalid:focus{border-color:#9c4a34 !important}
/* Message d'erreur sous le champ. Reprend la typo des etiquettes de champ
   (mono, capitales, interlettrage) pour rester dans le systeme, en rouge. */
.field__err{display:block;margin-top:7px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:#9c4a34}
.field__err[hidden]{display:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}

/* Champs remplis automatiquement par le navigateur.
   Firefox applique un filter() et Chrome un fond jaune codes en dur, tous deux
   impossibles a annuler avec background-color. On neutralise le filtre pour
   Firefox et on repeint le fond avec une ombre interne pour Chrome/Safari. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field select:-webkit-autofill,
.field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--paper-text);
  -webkit-box-shadow:0 0 0 100px var(--white) inset;
  box-shadow:0 0 0 100px var(--white) inset;
  caret-color:var(--paper-text)}
.field input:-moz-autofill,
.field input:-moz-autofill-preview,
.field select:-moz-autofill,
.field textarea:-moz-autofill{
  filter:none;
  box-shadow:0 0 0 100px var(--white) inset}
.field input:autofill,
.field select:autofill,
.field textarea:autofill{
  filter:none;
  box-shadow:0 0 0 100px var(--white) inset;
  -webkit-text-fill-color:var(--paper-text);
  caret-color:var(--paper-text)}
.cform__note{color:var(--muted);font-size:.82rem;margin-top:14px;line-height:1.55}
@media(max-width:900px){.contact__grid{grid-template-columns:1fr}}

/* ---------- next-page pager ---------- */
.nextp{border-top:1px solid #000;border-bottom:1px solid #000}
.nextp a{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);padding:clamp(14px,2vw,22px) var(--pad);
  text-decoration:none;color:var(--accent-2);background:var(--ink);transition:background .4s ease,padding-left .4s ease}
.nextp a:hover{background:#1f2225;padding-left:calc(var(--pad) + 8px)}
.nextp__arw{flex:none;font-size:clamp(1.3rem,1.9vw,1.7rem);color:var(--gold);line-height:1;
  animation:nextp-nudge 5.6s ease-in-out infinite}
.nextp__l{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px}
.nextp__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,242,236,.55)}
.nextp__t{font-family:var(--font-display);font-weight:300;font-size:clamp(1.35rem,2.8vw,2rem);line-height:1;letter-spacing:-.02em}
.nextp__u{height:1px;width:0;background:var(--gold);margin-top:2px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.nextp a:hover .nextp__u{width:100%}
@keyframes nextp-nudge{
  0%,75%,100%{transform:translateX(0)}
  82%{transform:translateX(9px)}
  88%{transform:translateX(0)}
  93%{transform:translateX(5px)}
  97%{transform:translateX(0)}
}
@media (prefers-reduced-motion: reduce){.nextp__arw{animation:none}}

/* current page indicator in nav */
.nav__links .current-menu-item>a,.nav__links a[aria-current="page"]{opacity:1}
.nav__links .current-menu-item>a::after,.nav__links a[aria-current="page"]::after{width:100%}
.mobile-menu .current-menu-item>a{color:var(--accent-2)}

/* form status notices */
.formnote{padding:14px 16px;margin-bottom:22px;font-size:.92rem;line-height:1.55;border-left:2px solid}
.formnote--ok{background:rgba(20,20,20,.09);border-color:var(--accent);color:var(--paper-text)}
.formnote--err{background:rgba(150,60,40,.09);border-color:#9c4a34;color:var(--paper-text)}
/* Photos refused on upload: the enquiry itself went through, so this warns
   rather than errors. */
.formnote--warn{background:rgba(201,169,126,.16);border-color:var(--gold);color:var(--paper-text)}
/* reCAPTCHA: the floating badge sits over the layout bottom-right, so it is
   hidden and replaced by the written notice under the form. Google's terms
   allow exactly this swap, but one of the two MUST be present, so do not
   delete the notice in page-contact.php. */
.grecaptcha-badge{visibility:hidden}
.cform__recaptcha{font-size:.78rem;opacity:.72;margin-top:10px}
.cform__recaptcha a{color:inherit;text-decoration:underline}
.formnote__list{margin:8px 0 0;padding-left:18px}
.formnote__list li{margin-bottom:4px}
.formnote--warn p{margin:10px 0 0}
/* The submit redirect targets this anchor. The offset clears the fixed nav so
   the confirmation isn't hidden underneath it. */
.formnote-anchor{display:block;height:0;scroll-margin-top:120px}

/* ---------- homepage service pillars (understated) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,52px);margin-top:clamp(40px,5vw,64px)}
.pillar{padding-top:26px;border-top:1px solid var(--line-light)}
.pillar__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--accent)}
.pillar__t{font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,2.1vw,1.9rem);margin:14px 0 12px;line-height:1.15;color:var(--paper-text)}
.pillar__x{color:var(--muted);line-height:1.72;font-size:.98rem;max-width:36ch}
.pillar .link-arw{margin-top:20px}
@media(max-width:820px){.pillars{grid-template-columns:1fr;gap:0}.pillar{padding-bottom:26px}.pillar__x{max-width:52ch}}

/* ---------- entry gateway (split screen) ---------- */
.gate{position:relative;display:flex;width:100%;min-height:100vh;min-height:100svh;background:var(--ink)}
.gate__half{position:relative;flex:1 1 50%;display:flex;align-items:flex-end;overflow:hidden;
  min-height:50vh;min-height:50svh;text-decoration:none;transition:flex .6s cubic-bezier(.16,1,.3,1)}
.gate__half+.gate__half{border-left:1px solid rgba(255,255,255,.12)}
.gate__half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.86) brightness(.5);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.gate__slides{position:absolute;inset:0}
.gate__slides img{opacity:0;transition:opacity 1.4s ease,transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.gate__slides img.on{opacity:1}
.gate__half::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(23,25,27,.15) 0%,rgba(23,25,27,.35) 45%,rgba(23,25,27,.9) 100%)}
.gate__inner{position:relative;z-index:2;color:var(--white);padding:clamp(26px,3.6vw,58px);max-width:34rem;
  transform:translateY(10px);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gate__eyebrow{display:flex;align-items:center;gap:14px;color:var(--accent-2);margin-bottom:22px}
.gate__eyebrow .tick{width:30px;height:1px;background:currentColor}
.gate__title{font-family:var(--font-title);font-weight:300;line-height:1.06;letter-spacing:-.015em;
  font-size:clamp(1.7rem,2.7vw,3.1rem);margin-bottom:18px;
  text-shadow:none}
.gate__x{color:rgba(244,242,236,.82);line-height:1.6;font-size:1.04rem;max-width:38ch;margin-bottom:30px;min-height:1.6em}
.gate__btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  padding:0 2px 10px;position:relative;transition:color .35s ease}
.gate__btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--white);transition:width .4s ease}
.gate__btn>span{transition:transform .35s ease}
.gate__btn:hover::after,.gate__btn:focus-visible::after{width:100%}
.gate__btn:hover>span{transform:translateX(4px)}
/* desktop hover: expand hovered half, ease the other back */
@media(hover:hover) and (min-width:821px){
  .gate:hover .gate__half{flex-grow:.82}
  .gate__half:hover{flex-grow:1.4}
  .gate__half:hover img{transform:scale(1.05);filter:saturate(1) brightness(.62)}
  .gate__half:hover .gate__inner{transform:translateY(0)}
  .gate__half:hover .gate__btn::after{width:100%}
  .gate__half:hover .gate__btn>span{transform:translateX(4px)}
}
@media(max-width:820px){
  .gate{flex-direction:column;min-height:100vh;min-height:100svh;height:100svh}
  .gate__half{flex:1 1 50%;min-height:0}
  .gate__inner{transform:none;padding:clamp(20px,5vw,34px);max-width:none}
  .gate__title{font-size:clamp(1.9rem,10vw,2.7rem);margin-bottom:18px}
  .gate__x{display:none}
  .gate__eyebrow{margin-bottom:14px}
  .gate__btn{padding:0 2px 8px}
  .gate__btn::after{width:100%}
  .gate__half+.gate__half{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  }

/* ---------- home gateway: no site menu, pure choice ---------- */
body.home .nav__links{display:none}

/* Mobile header layout: Rendez-vous takes the top-right slot (FR/EN vacates it),
   the language switcher floats bottom-right, and the burger appears on every
   page — including the landing gateway. Scoped to mobile so desktop is unchanged. */
@media(max-width:1080px){
  body.home .nav__burger{display:flex}
  .nav__cta .lang-switch{display:none}
  .lang-fixed{display:block;position:fixed;right:20px;bottom:18px;z-index:50}
}

/* ---------- splash / intro transition (logo flies to top-left) ---------- */
.splash{position:fixed;inset:0;z-index:200;pointer-events:none}
.splash__cover{position:absolute;inset:0;background:var(--ink);
  animation:splashCover 2.6s cubic-bezier(.16,1,.3,1) forwards}
.splash__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(62vw,340px);height:auto;
  animation:splashFly 2.6s cubic-bezier(.16,1,.3,1) forwards;
  transition:opacity .25s ease}
.splash.fade .splash__logo{opacity:0}
.splash__tag{position:absolute;left:50%;top:calc(50% + 52px);transform:translateX(-50%);
  color:var(--concrete);font-size:11px;letter-spacing:.34em;
  animation:splashTag 2.6s ease forwards}
@keyframes splashCover{0%,42%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes splashTag{0%{opacity:0}16%{opacity:.85}40%{opacity:.85}52%{opacity:0}100%{opacity:0}}
@keyframes splashFly{
  0%{opacity:0;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vw,340px)}
  13%,44%{opacity:1;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vw,340px)}
  100%{opacity:1;left:var(--pad);top:22px;transform:none;width:135px}
}
@media(max-width:560px){
  @keyframes splashFly{
    0%{opacity:0;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vw,340px)}
    13%,44%{opacity:1;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vw,340px)}
    100%{opacity:1;left:var(--pad);top:22px;transform:none;width:104px}
  }
}
@media(prefers-reduced-motion:reduce){
  .splash__cover,.splash__logo,.splash__tag{animation:none}
  .splash{opacity:0;visibility:hidden}
}

/* header logo stays hidden on home until the splash finishes */
body.home .nav__logo{opacity:0;transition:opacity .25s ease}
body.home.splash-done .nav__logo{opacity:1}

/* ---------- architectural detail: drawing-sheet section numbers ---------- */
body{counter-reset:sheet}
.section{counter-increment:sheet}
.section::before{
  content:none;
  position:absolute;top:clamp(14px,1.8vw,22px);right:var(--pad);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;
  color:var(--concrete);opacity:.65;pointer-events:none;
}
/* Notre histoire: no auto sheet-numbers on these sections (removes the stray 01/02). */
.histline::before,.histname::before{content:none}

/* ---------- étude de cas (case study) ---------- */
.cas__ba{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cas__f{margin:0}
.cas__f img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink-2);display:block}
.cas__f figcaption{margin-top:12px;color:var(--paper-text);font-size:.98rem}
.cas__f figcaption .k{display:inline-block;margin-right:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cas__steps{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,40px)}
.cas__step{border-top:1px solid var(--line-light);padding-top:18px}
.cas__step .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.cas__step h4{font-family:var(--font-display);font-weight:500;font-size:1.06rem;margin:12px 0 9px;letter-spacing:-.01em}
.cas__step p{color:var(--muted);font-size:.9rem;line-height:1.6}
.cas__hero{margin-top:clamp(36px,5vw,60px);aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.cas__draws{margin-top:clamp(24px,3vw,40px);display:grid;gap:16px}
.cas__draws--2{grid-template-columns:1fr 1fr}
.cas__draws--3{grid-template-columns:repeat(3,1fr)}
.cas__draw{margin:0;background:#fff;border:1px solid var(--line-light)}
.cas__draw img{width:100%;height:auto;display:block}
.cas__draw figcaption{padding:9px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-light)}
.doclist{margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--line-light);padding-top:28px}
.doclist__lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.doclist__groups{display:grid;gap:0}
.docgroup{display:grid;grid-template-columns:200px 1fr;gap:clamp(18px,3vw,44px);align-items:start;
  padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--line-light)}
.docgroup:first-child{border-top:0;padding-top:0}
.docgroup__k{padding-top:9px;color:var(--muted);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.docgroup__tags{display:flex;flex-wrap:wrap;gap:9px}
.docgroup__tags span{border:1px solid var(--line-light);padding:8px 14px;font-size:.92rem;color:var(--paper-text);
  background:rgba(255,255,255,.45);transition:border-color .25s,background .25s}
.docgroup__tags span:hover{border-color:var(--ink);background:#fff}
@media(max-width:640px){.docgroup{grid-template-columns:1fr;gap:12px}.docgroup__k{padding-top:0}}
.cas__hero img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.cas__hero:hover img{transform:scale(1.03)}
.cas__grid{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cas__grid img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ink-2)}
.cas__meta{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line-light);padding-top:28px}
.cas__head{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;margin-bottom:clamp(34px,4.5vw,56px)}
.cas__facts{margin:0}
.cas__fact{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line-light)}
.cas__fact:first-child{border-top:0;padding-top:0}
.cas__fact dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cas__fact dd{margin:0;color:var(--paper-text);font-size:1rem;line-height:1.45}
@media(max-width:820px){.cas__head{grid-template-columns:1fr;gap:24px}}
.cas__m .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.cas__m .v{color:var(--paper-text);font-size:1.02rem;line-height:1.5}
@media(max-width:760px){.cas__grid{grid-template-columns:1fr 1fr}.cas__meta{grid-template-columns:1fr;gap:18px}}
@media(max-width:820px){.cas__ba{grid-template-columns:1fr}.cas__steps{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.cas__steps{grid-template-columns:1fr}}
@media(max-width:820px){.cas__draws--2,.cas__draws--3{grid-template-columns:1fr}}

/* ---------- gateway "rideau" page transition ---------- */
.gate-curtain{position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden;
  transform:translate(-100%,0)}
.gate-curtain.is-active{visibility:visible;will-change:transform}
.gate-curtain.no-anim{animation:none!important}
.gate-curtain.no-anim .gate-curtain__inner{transition:none}
.gate-curtain.held{transform:translate(0,0)}                                   /* arrival: covering, static */
.gate-curtain.cover{animation:curtainIn .45s cubic-bezier(.6,0,.3,1) both}      /* close: slide in */
.gate-curtain[data-side="multi"].cover{animation-name:curtainInTop}
.gate-curtain[data-side="inv"].cover{animation-name:curtainInRight}
.gate-curtain.reveal{animation:curtainOut .45s cubic-bezier(.6,0,.3,1) both}    /* open: slide out */
.gate-curtain[data-side="multi"].reveal{animation-name:curtainOutTop}
.gate-curtain[data-side="inv"].reveal{animation-name:curtainOutRight}
@keyframes curtainIn{from{transform:translate(-100%,0)}to{transform:translate(0,0)}}
@keyframes curtainInRight{from{transform:translate(100%,0)}to{transform:translate(0,0)}}
@keyframes curtainInTop{from{transform:translate(0,-100%)}to{transform:translate(0,0)}}
@keyframes curtainInBottom{from{transform:translate(0,100%)}to{transform:translate(0,0)}}
@keyframes curtainOut{from{transform:translate(0,0)}to{transform:translate(-100%,0)}}
@keyframes curtainOutRight{from{transform:translate(0,0)}to{transform:translate(100%,0)}}
@keyframes curtainOutTop{from{transform:translate(0,0)}to{transform:translate(0,-100%)}}
@keyframes curtainOutBottom{from{transform:translate(0,0)}to{transform:translate(0,100%)}}
.gate-curtain__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,20px);
  opacity:0;transform:translateY(8px);transition:opacity .5s ease .18s,transform .5s ease .18s}
.gate-curtain.cover .gate-curtain__inner,.gate-curtain.held .gate-curtain__inner{opacity:1;transform:none}
.gate-curtain__logo{height:clamp(34px,5vw,54px);width:auto;filter:brightness(0) invert(1)}
.gate-curtain__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent-2)}
@media (prefers-reduced-motion: reduce){.gate-curtain{transition:none;animation:none}}

/* Mobile: the gateway stacks top→bottom (res, multi, inv), so the curtain wipes
   vertically to match. Placed after the desktop rules so it overrides them here. */
@media(max-width:820px){
  .gate-curtain.cover{animation-name:curtainInTop}                 /* res (top) */
  .gate-curtain[data-side="multi"].cover{animation-name:curtainInTop}
  .gate-curtain[data-side="inv"].cover{animation-name:curtainInBottom}
  .gate-curtain.reveal{animation-name:curtainOutTop}
  .gate-curtain[data-side="multi"].reveal{animation-name:curtainOutTop}
  .gate-curtain[data-side="inv"].reveal{animation-name:curtainOutBottom}
}

/* "le souci du détail" — header with pull-quote */
.detail__head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;
  margin-bottom:clamp(36px,5vw,58px)}
.detail__quote{border-left:2px solid var(--accent);padding-left:clamp(20px,2.4vw,28px)}
.detail__quote p{font-family:var(--font-display);font-weight:300;font-size:clamp(1.3rem,2.1vw,1.72rem);
  line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.detail__src{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-top:16px;font-style:normal}
@media(max-width:820px){.detail__head{grid-template-columns:1fr;gap:26px;align-items:start}}

/* process — horizontal visual timeline */
.flow{position:relative;margin-top:clamp(48px,6vw,78px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,26px)}
.flow::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:1px;background:var(--line-light);z-index:0}
.flow__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.flow__n{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:var(--limestone);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--ink);margin-bottom:24px;flex:none;transition:.3s}
.flow__step:hover .flow__n{background:var(--ink);color:var(--accent-2)}
.flow__t{font-family:var(--font-display);font-weight:400;font-size:1.06rem;line-height:1.2;letter-spacing:-.01em;margin-bottom:10px;max-width:15ch}
.flow__d{color:var(--muted);font-size:.9rem;line-height:1.5;max-width:22ch}
@media(max-width:820px){
  .flow{grid-template-columns:1fr;gap:0}
  .flow::before{top:8px;bottom:8px;left:26px;right:auto;width:1px;height:auto}
  .flow__step{flex-direction:row;text-align:left;align-items:flex-start;gap:22px;padding-bottom:clamp(28px,5vw,38px)}
  .flow__step:last-child{padding-bottom:0}
  .flow__n{margin-bottom:0}
  .flow__body{padding-top:14px}
  .flow__t,.flow__d{max-width:none}
}

/* "le souci du détail" — documents beside the heading (stacked groups) */
.detail__docs{padding-top:6px}
.detail__docs .doclist__lbl{color:var(--muted);margin-bottom:clamp(22px,3vw,30px)}
.docgroup--v{display:block;grid-template-columns:none;padding:0;border-top:0;margin-bottom:clamp(22px,2.6vw,30px)}
.docgroup--v:last-child{margin-bottom:0}
.docgroup--v .docgroup__k{display:block;padding-top:0;margin-bottom:13px;color:var(--accent)}
.docgroup--v .docgroup__tags{gap:8px}

/* histoire — milestones timeline */
.hist__head{text-align:center;max-width:660px;margin:0 auto}
.hist__head .eyebrow{justify-content:center}
.hist__head .h-sec{margin:0}
.hist__intro{color:var(--paper-text);line-height:1.6;margin:18px auto 0;max-width:52ch}
/* dark timeline (histoire) with large gold years */
.histline .hist__intro{color:rgba(244,242,236,.72)}
.histline{position:relative;overflow:hidden}
.hist-float{position:absolute;z-index:5;width:clamp(220px,24vw,400px);aspect-ratio:3/4;
  border:1px solid rgba(244,242,236,.16);background:rgba(244,242,236,.05);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.45)}
.hist-float img{width:100%;height:100%;object-fit:cover;display:block}
.hist-float span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,236,.45)}
.hist-float--r{top:0;right:clamp(12px,3vw,60px);transform:translateY(-50%)}
.hist-float--l{top:0;left:clamp(12px,3vw,60px);transform:translateY(-50%)}
@media(max-width:900px){.hist-float,.hist-float--r,.hist-float--l{position:static;transform:none;right:auto;left:auto;width:min(100%,300px);margin:26px auto 10px}}
.histline .hist,.histline .hist__item{border-color:rgba(244,242,236,.13)}
.histline .hist__k{color:#c9a97e;font-weight:200;font-size:clamp(2rem,4.2vw,3.3rem)}
.hist{margin-top:clamp(42px,5vw,66px);border-top:1px solid var(--line-light)}
.hist__item{text-align:center;padding:clamp(30px,4vw,50px) 0;border-bottom:1px solid var(--line-light);position:relative}
.hist__k{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;color:var(--accent);line-height:1;margin-bottom:14px}
.hist__t{font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 14px;letter-spacing:-.01em}
.hist__body{max-width:600px;margin:0 auto}
.hist__body p{color:var(--muted);line-height:1.7;margin:0}
.hist__body p + p{margin-top:14px}

/* équipe — "notre histoire" teaser band */
.histcta__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,72px);align-items:end}
.histcta .h-sec{margin:14px 0 0}
.histcta__lead{color:var(--paper-text);line-height:1.65;margin:0 0 22px;max-width:46ch}
@media(max-width:820px){.histcta__grid{grid-template-columns:1fr;gap:20px;align-items:start}}

/* histoire — multi-paragraph milestones + name statement */
.hist__body p + p{margin-top:14px}
.histname__in{max-width:820px;margin:0 auto;text-align:center}
.histname__in .eyebrow{justify-content:center;color:var(--accent)}
.histname__q{font-family:var(--font-display);font-weight:300;font-size:clamp(1.65rem,3.6vw,2.7rem);line-height:1.28;letter-spacing:-.01em;margin-top:24px;color:var(--ink)}
.histname__q em{font-style:normal;color:var(--accent)}

/* professional / legal notice */
.legal-note{padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(26px,3vw,38px)}
.legal-note__txt{display:flex;gap:clamp(14px,2vw,26px);align-items:baseline;flex-wrap:wrap;max-width:88ch;
  color:var(--muted);font-size:.92rem;line-height:1.65;margin:0}
.legal-note__k{flex:none;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.legal-note__txt>span:last-child{flex:1 1 320px;min-width:0}

/* multilogement — "pourquoi" header with engagements checklist */
.why__head{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;margin-bottom:clamp(40px,5vw,64px)}
.eng__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.eng{list-style:none;display:grid;gap:0;margin:0;padding:0}
.eng li{display:flex;gap:15px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line-light);font-size:1.05rem;color:var(--paper-text)}
.eng li:first-child{border-top:0;padding-top:0}
.eng li::before{content:"";width:16px;height:9px;border-left:2px solid #c9a97e;border-bottom:2px solid #c9a97e;transform:rotate(-45deg);flex:none;position:relative;top:-3px}
@media(max-width:820px){.why__head{grid-template-columns:1fr;gap:28px}}

/* engagements — closing "et bien d'autres" line + contact link */
.eng__more{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-light);color:var(--muted);line-height:1.62;font-size:.98rem}
.eng__more a{color:var(--accent);text-decoration:none;border-bottom:1px solid #c9a97e;padding-bottom:2px;white-space:nowrap;transition:border-color .25s}
.eng__more a:hover{border-color:var(--accent)}

/* legal note on dark background */
.section--dark .legal-note__k{color:var(--accent-2)}

/* footer credit — "Propulsé par BrandNous" */
.footer__credit a{position:relative;color:#c9a97e;text-decoration:none;transition:color .3s,text-shadow .3s}
.footer__credit a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.footer__credit a:hover{color:#e2cba6;text-shadow:0 0 14px rgba(201,169,126,.45)}
.footer__credit a:hover::after{transform:scaleX(1)}

/* contact form — photo upload field */
.field__opt{color:var(--muted);font-weight:400}
.filefield{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filefield input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.filefield__btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-light);background:rgba(255,255,255,.5);padding:11px 18px;font-size:.92rem;cursor:pointer;transition:border-color .25s,background .25s}
.filefield__btn::before{content:"+";font-size:1.1em;line-height:1;color:var(--accent)}
.filefield__btn:hover{border-color:var(--ink);background:#fff}
.filefield input[type=file]:focus-visible + .filefield__btn{outline:2px solid var(--accent);outline-offset:2px}
.filefield__info{font-size:.85rem;color:var(--muted);line-height:1.45}
.filefield__info.is-warn{color:#a8452f}

/* contact form — photo thumbnails with remove */
.filelist{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.filechip{position:relative;width:92px}
.filechip__thumb{width:92px;height:92px;object-fit:cover;border:1px solid var(--line-light);display:block;background:var(--limestone-2)}
.filechip__name{display:block;font-size:.72rem;color:var(--paper-text);margin-top:6px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filechip__size{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--muted);margin-top:2px}
.filechip__x{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;border:2px solid var(--limestone);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0;transition:background .2s,transform .2s}
.filechip__x:hover{background:#a8452f;transform:scale(1.08)}

/* réalisations — project type filter (dark section) */
.galfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,4vw,48px)}
.galfilter__btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.7);background:transparent;border:1px solid rgba(244,242,236,.22);padding:10px 18px;border-radius:2px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.galfilter__btn:hover{border-color:rgba(244,242,236,.55);color:var(--accent-2)}
.galfilter__btn.is-active{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}
.gal__item.is-hidden{display:none}

/* FR / EN language switch */
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:#fff}
.lang-switch a{color:inherit;text-decoration:none;opacity:.6;transition:opacity .2s}
.lang-switch a:hover{opacity:.9}
.lang-switch a.is-active{opacity:1;font-weight:600}
.lang-switch span{opacity:.45}
.mobile-menu .lang-switch{margin-top:18px;font-size:15px;gap:10px}
.lang-fixed{display:none}

/* ---------- Case-study before/after showcase (Réalisations) ---------- */
.casestudy{color:var(--white)}
.cs__wrap{max-width:none}
.cs__title{max-width:34ch;margin-bottom:18px}
.cs__lead{color:rgba(244,242,236,.72);font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.7;max-width:60ch;margin-bottom:14px}
.cs__meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete);margin-bottom:30px;display:flex;gap:22px;flex-wrap:wrap}
.cs__count{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.cs__ba{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:ew-resize;user-select:none;border:1px solid rgba(255,255,255,.08);background:#000;touch-action:pan-y}
.cs__ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cs__before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.cs__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.5)}
.cs__handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;color:var(--ink);font-weight:700;letter-spacing:1px}
.cs__lbl{position:absolute;top:16px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:7px 13px;background:rgba(23,25,27,.66);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2}
.cs__lbl--a{left:16px}.cs__lbl--b{right:16px}
.cs__viewcap{position:absolute;left:16px;bottom:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);z-index:2}
.cs__nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:14px}
.cs__arw{font:inherit;background:none;border:1px solid rgba(255,255,255,.3);color:var(--white);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;transition:border-color .3s,color .3s}
.cs__arw:hover{border-color:var(--gold);color:var(--gold)}
.cs__idx{font-size:12px;letter-spacing:.16em;color:var(--concrete)}
.cs__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px);margin-top:16px}
.cs__thumb{position:relative;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;overflow:hidden;background:none;opacity:.5;transition:opacity .3s;outline:2px solid transparent;outline-offset:2px}
.cs__thumb.is-active{opacity:1;outline-color:var(--gold)}
.cs__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cs__tl{position:absolute;left:0;right:0;bottom:0;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:5px 4px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff}
.cs__subhead{margin:clamp(44px,5vw,72px) 0 18px;font-family:var(--font-title);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.9rem)}
.cs__gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cs__g{aspect-ratio:3/2;overflow:hidden}
.cs__g img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.cs__g:hover img{transform:scale(1.05)}


/* ---------- Avant/Après — "voir plus" reveal ---------- */
.ba-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .62s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.ba-more__inner{overflow:hidden;min-height:0;padding-top:clamp(20px,3vw,32px)}
.ba-more.is-open{grid-template-rows:1fr;opacity:1}
.ba-more .ba-item{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.ba-more.is-open .ba-item{opacity:1;transform:none}
.ba-more.is-open .ba-item:nth-child(1){transition-delay:.12s}
.ba-more.is-open .ba-item:nth-child(2){transition-delay:.20s}
.ba-more.is-open .ba-item:nth-child(3){transition-delay:.28s}
.ba-more.is-open .ba-item:nth-child(4){transition-delay:.36s}
.ba-more.is-open .ba-item:nth-child(n+5){transition-delay:.42s}
@media(prefers-reduced-motion:reduce){.ba-more,.ba-more .ba-item{transition:none}}
.ba-more__ctrl{display:flex;justify-content:center;margin-top:clamp(28px,3.6vw,46px)}
.ba-more__btn{font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid rgba(23,25,27,.32);padding:15px 30px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.ba-more__btn:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.ba-more__btn .lbl-less{display:none}
.ba-more__btn.is-open .lbl-more{display:none}
.ba-more__btn.is-open .lbl-less{display:inline}

/* ---------- Approche — processus : filmstrip imagé (cadre double filet) ---------- */
.proc-strip{margin-top:clamp(44px,6vw,66px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(22px,2.6vw,38px)}
.proc-tile__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);border:1px solid rgba(37,39,42,.55);outline:1px solid rgba(37,39,42,.28);outline-offset:5px;margin-bottom:22px}
.proc-tile__n{position:absolute;top:0;left:0;z-index:2;background:var(--ink);color:var(--white);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;padding:6px 9px;opacity:0;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.proc-tile:hover .proc-tile__n{opacity:1;transform:none}
.proc-tile__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.proc-tile:hover .proc-tile__img img{transform:scale(1.04)}
.proc-tile__t{font-family:var(--font-title);font-weight:300;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:9px}
.proc-tile__d{color:var(--muted);font-size:.9rem;line-height:1.5}
@media(max-width:820px){.proc-strip{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media(max-width:480px){.proc-strip{grid-template-columns:1fr}}

/* ---------- case study: centered 66% before/after stage + divider ---------- */
.cs__divider{margin:clamp(34px,4.5vw,58px) 0 clamp(26px,3vw,40px)}
.cs__stage{max-width:66%;margin:0 auto}
.cs__stage .cs__count{text-align:center}
@media(max-width:820px){.cs__stage{max-width:100%}}

/* case study is a dark section — make its eyebrow legible on ink */
.casestudy .eyebrow{color:var(--gold)}

/* ---------- Approche ⇄ Expertise page switcher ---------- */
.pgswitch{background:var(--limestone);display:flex;justify-content:center;padding:clamp(36px,4.6vw,62px) var(--pad) 0}
.pgswitch__in{display:inline-flex;gap:clamp(32px,4vw,60px)}
.pgswitch__tab{font-family:var(--font-mono);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;border-bottom:1px solid transparent;text-decoration:none;transition:color .3s,border-color .3s}
.pgswitch__tab:hover{color:var(--paper-text)}
.pgswitch__tab.is-active{color:var(--paper-text);border-bottom-color:var(--gold)}

/* ---------- Loi 25 — privacy policy (link + in-page modal) ---------- */
.cform__legal{margin-top:20px;text-align:center}
.cform__legal-link{font:inherit;font-size:13px;letter-spacing:.02em;color:var(--muted);background:none;border:0;border-bottom:1px solid transparent;padding:0 0 3px;cursor:pointer;transition:color .3s,border-color .3s}
.cform__legal-link:hover{color:var(--paper-text);border-bottom-color:var(--gold)}
.privacy[hidden]{display:none}
.privacy{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,52px)}
.privacy__backdrop{position:absolute;inset:0;background:rgba(23,25,27,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:privacyFade .3s ease}
.privacy__panel{position:relative;background:var(--limestone);color:var(--paper-text);max-width:720px;width:100%;max-height:86vh;display:flex;flex-direction:column;border:1px solid var(--line-light);box-shadow:0 40px 90px rgba(0,0,0,.45);animation:privacyRise .45s cubic-bezier(.16,1,.3,1)}
.privacy__close{position:absolute;top:16px;right:16px;z-index:2;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--limestone);border:1px solid var(--line-light);border-radius:50%;color:var(--paper-text);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.privacy__close:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.privacy__scroll{overflow-y:auto;padding:clamp(30px,4.5vw,56px)}
.privacy__title{font-family:var(--font-title);font-weight:300;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.14;letter-spacing:-.01em;margin:14px 0 6px}
.privacy__updated{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.privacy__body p{color:var(--paper-text);opacity:.82;line-height:1.7;margin-bottom:16px;max-width:62ch}
.privacy__body h3{font-family:var(--font-title);font-weight:400;font-size:1.15rem;letter-spacing:-.01em;margin:28px 0 9px}
.privacy__body a{color:var(--paper-text);border-bottom:1px solid var(--gold)}
@keyframes privacyFade{from{opacity:0}to{opacity:1}}
@keyframes privacyRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:560px){.privacy__panel{max-height:92vh}}

/* client: remove eyebrow dashes + the lines around plain dividers */
.tick{display:none}
.dim .ln,.dim .cap{display:none}
.dim .lbl{padding-left:0}

/* client: hide eyebrow kicker labels (the little "Pourquoi L'Établi" text) everywhere */
.eyebrow,.hero__eyebrow,.gate__eyebrow{display:none}

/* client: remove the small eyebrow kicker labels (Pourquoi Letabli, Le processus, etc.) */
.eyebrow{display:none}


/* Realisations - drone video project */
.drone__lead{color:var(--muted);margin-top:16px;max-width:54ch;line-height:1.6}
.drone__player{margin:clamp(30px,4vw,50px) auto 0;max-width:1080px;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2);border:1px solid rgba(37,39,42,.55);outline:1px solid rgba(37,39,42,.28);outline-offset:5px}
.drone__player video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}

/* Multilogement - faisabilité value showcase */
.faisa__lead{color:var(--muted);margin-top:16px;max-width:58ch;line-height:1.6}
.faisa__grid{margin-top:clamp(40px,5vw,66px);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,46px);align-items:center}
.faisa__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2);border:1px solid var(--line-light)}
.faisa__img img{width:100%;height:100%;object-fit:cover;display:block}
.faisa__cap{position:absolute;left:0;bottom:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(23,25,27,.66);padding:7px 11px}
.faisa__val{font-family:var(--font-title);font-weight:300;font-size:clamp(1.5rem,3.2vw,2.6rem);letter-spacing:-.01em;margin-top:15px;color:var(--muted)}
.faisa__val--big{color:var(--gold)}
.faisa__arrow{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--muted);line-height:1}
.faisa__cta{margin-top:clamp(30px,4vw,46px)}
@media(max-width:700px){.faisa__grid{grid-template-columns:1fr;gap:14px}.faisa__arrow{transform:rotate(90deg);justify-self:start;margin:4px 0}}

/* Contact - office photo */
.contact__photo{margin-top:clamp(28px,4vw,44px);aspect-ratio:4/3;overflow:hidden;background:var(--ink-2);border:1px solid var(--line-light)}
.contact__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Contact - office photo replaces info column; coordonnées go horizontal below */
.contact__grid > .contact__photo{position:relative;margin-top:0;aspect-ratio:auto;overflow:hidden}
.contact__grid > .contact__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.contact__grid > .contact__photo{aspect-ratio:4/3}.contact__grid > .contact__photo img{position:static}}
.cinfo--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(22px,3vw,46px);margin-top:clamp(44px,5vw,66px);flex:none}
.cinfo--row .cinfo__row{padding:0;border-bottom:0}

.phero__leadlabel{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}

/* case study head centered */
.cs__title,.cs__lead{text-align:center;margin-left:auto;margin-right:auto}
.cs__meta{justify-content:center}

/* Equipe — vision + valeurs (dark) */
.mv{background:var(--ink);color:var(--white)}
.mv__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.mv__vtext{font-family:var(--font-title);font-weight:300;font-size:clamp(1.35rem,2.5vw,2.1rem);line-height:1.4;letter-spacing:-.01em;max-width:42ch;color:var(--white)}
.mv__values{margin-top:clamp(58px,7vw,100px)}
.mv__vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px);margin-top:clamp(30px,3vw,44px)}
.mv__v h3{font-family:var(--font-title);font-weight:300;font-size:clamp(1.4rem,2.1vw,1.9rem);letter-spacing:-.01em;margin-bottom:13px;color:var(--gold)}
.mv__v p{color:rgba(244,242,236,.64);line-height:1.66}
@media(max-width:760px){.mv__vgrid{grid-template-columns:1fr;gap:34px}}

@media(min-width:761px){.oneline-d{white-space:nowrap}}
.intro__grid--solo{grid-template-columns:1fr}

/* Prevent the mobile-menu overlay from animating (flashing) while the browser is being resized */
body.is-resizing .mobile-menu,
body.is-resizing .mobile-menu a,
body.is-resizing .nav__burger-box i{transition:none !important}

/* Centered page-hero: same big-title-left / lead-right layout, breadcrumb removed,
   block centered vertically so it doesn't drop to the bottom. */
.phero--center{display:flex;align-items:center;min-height:clamp(238px,20vw,282px)}
.phero--center .phero__inner{width:100%}
.phero--center .phero__row{align-items:center}

/* ---------- page banner: title left, intro right ----------
   Long intros (the Equipe mission) get a wider, right-shifted lead column via
   .phero__row--wide, added by template-parts/page-hero.php. */
.phero__row--wide{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.phero__row--wide .phero__lead{max-width:none;font-size:.9rem;line-height:1.62}
@media(max-width:1180px){
  .phero__row--wide{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .phero__row--wide .phero__lead{font-size:.86rem;line-height:1.58}
}
@media(max-width:820px){
  .phero__row--wide{grid-template-columns:1fr}
  .phero__row--wide .phero__lead{font-size:.92rem;line-height:1.62;max-width:60ch}
}

/* One-line titles inside the existing column. 2.65vw is measured against the
   real Helvetica Neue metrics: the longest title (41 chars) fills ~98% of the
   title column at every width from 1080px up, so it never wraps and never
   overflows. The character cap is dropped, it was forcing the wrap. */
@media(min-width:1081px){
  .phero--center .phero__title{
    max-width:none;white-space:nowrap;
    font-size:min(2.65vw,4rem);
    letter-spacing:-.035em;    /* the wordmark's tracking */
  }
}
@media(max-width:1080px){
  .phero--center .phero__title{max-width:26ch;font-size:clamp(1.6rem,4.4vw,2.2rem)}
}
/* on small screens the banner is content-driven, no forced height */
@media(max-width:820px){
  .phero--center{min-height:0}
}

/* ---------- contact: more compact form + photo ----------
   Height is the real problem, so the four short fields pair up two per row
   instead of stacking; that removes two full rows. The pair still spans the
   full width of the section, matching every other band on the site. */
.contact__grid{gap:clamp(32px,4.5vw,70px)}
.cform{padding:clamp(22px,2.6vw,34px)}
.cform h3{font-size:1.38rem}
.cform>p{font-size:.89rem;margin-bottom:18px}

/* two-up field rows */
.cform form{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.cform form > *{grid-column:1 / -1}
.cform .field--half{grid-column:span 1}
@media(max-width:640px){
  .cform form{grid-template-columns:1fr}
  .cform .field--half{grid-column:1 / -1}
}

.field{margin-bottom:14px}
.field label{margin-bottom:6px}
.field input,.field select,.field textarea{padding:11px 13px;font-size:.94rem}
.field textarea{min-height:92px}
.filefield__btn{padding:9px 15px;font-size:.88rem}
.filefield__info{font-size:.8rem}
.cform__note{font-size:.79rem;margin-top:11px}
.cform__legal{margin-top:15px}