/* ═══════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ═══════════════════════════════════════════════════════════
   TOKENS — Raise Avocats (style C&C premium)
   ═══════════════════════════════════════════════════════════ */
:root{
  --cream:#F7F5F3;
  --cream-2:#EDE9E3;
  --cream-3:#E2DDD7;
  --blue:#BFCDF0;
  --blue-dark:#8BA3D9;
  --navy:#202A3E;
  --navy-2:#2C3A54;
  --navy-3:#131B2A;
  --accent:#8BA3D9;
  --accent-2:#BFCDF0;
  --teal:#5B8A8F;
  --rose:#B08E86;
  --t2:#6B7B95;
  --t3:#8A97AB;
  --ep:'Epilogue',sans-serif;
  --mu:'Mulish',sans-serif;
  --pf:'Playfair Display',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(24px,6vw,100px);
}

/* ═══════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════ */
body{
  background:var(--cream);color:var(--navy);
  font-family:var(--mu);font-weight:400;font-size:16px;line-height:1.7;
  overflow-x:hidden;
}
body.locked{overflow:hidden}

/* ═══════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════════════════════════════════ */
.cursor,.cursor-dot{display:none!important}

/* ═══════════════════════════════════════════════════════════
   MENU OVERLAY — fullscreen with clip-path
   ═══════════════════════════════════════════════════════════ */
.menu{
  position:fixed;inset:0;z-index:490;
  background:var(--navy-3);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  display:flex;overflow:hidden;
}
.menu.open{clip-path:inset(0 0 0% 0)}
.menu-inner{
  display:flex;width:100%;
  padding:clamp(100px,12vw,140px) var(--pad) 60px;
  gap:60px;
}
.menu-nav{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:60%}
.menu-item{border-top:1px solid rgba(247,245,243,.05);overflow:hidden}
.menu-item:last-child{border-bottom:1px solid rgba(247,245,243,.05)}
.menu-link{
  display:flex;align-items:baseline;gap:16px;
  padding:clamp(10px,1.5vw,17px) 0;
  transform:translateY(110%);
  transition:transform .6s var(--ease);
}
.menu.open .menu-item:nth-child(1) .menu-link{transition-delay:.06s}
.menu.open .menu-item:nth-child(2) .menu-link{transition-delay:.1s}
.menu.open .menu-item:nth-child(3) .menu-link{transition-delay:.14s}
.menu.open .menu-item:nth-child(4) .menu-link{transition-delay:.18s}
.menu.open .menu-item:nth-child(5) .menu-link{transition-delay:.22s}
.menu.open .menu-item:nth-child(6) .menu-link{transition-delay:.26s}
.menu.open .menu-item:nth-child(7) .menu-link{transition-delay:.30s}
.menu.open .menu-link{transform:translateY(0)}
.menu-idx{
  font-family:var(--mu);font-size:10px;font-weight:600;
  letter-spacing:.1em;color:var(--accent);min-width:24px;
}
.menu-txt{
  font-family:var(--ep);font-size:clamp(34px,4.2vw,52px);
  font-weight:300;color:var(--cream);line-height:1;
  transition:color .2s,letter-spacing .3s var(--ease);
}
.menu-link:hover .menu-txt{color:var(--accent);letter-spacing:.01em}
.menu-aside{
  width:240px;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:flex-end;align-self:flex-end;text-align:right;
  margin-left:auto;
  opacity:0;transform:translateX(12px);
  transition:opacity .5s,transform .5s var(--ease);transition-delay:.35s;
}
.menu.open .menu-aside{opacity:1;transform:none}
.menu-aside-h{
  font-family:var(--mu);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,245,243,.3);margin-bottom:16px;
}
.menu-aside-li{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;
  background:rgba(247,245,243,.08);color:rgba(247,245,243,.45);
  transition:all .3s;margin-bottom:32px;
}
.menu-aside-li:hover{background:var(--accent);color:var(--navy)}
.menu-aside-links{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:28px;
}
.menu-aside-links a{
  font-family:var(--mu);font-size:13px;font-weight:400;
  color:rgba(247,245,243,.4);transition:color .2s;
}
.menu-aside-links a:hover{color:var(--accent)}
.menu-aside-copy{
  font-family:var(--mu);font-size:11px;font-weight:400;
  color:rgba(247,245,243,.15);letter-spacing:.02em;
  padding-top:20px;
}
.menu-close{
  position:absolute;top:clamp(20px,3vw,32px);right:var(--pad);
  background:none;border:none;display:flex;align-items:center;gap:10px;
  padding:8px 0;z-index:10;
}
.menu-close-txt{
  font-family:var(--mu);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,245,243,.3);transition:color .2s;
}
.menu-close:hover .menu-close-txt{color:var(--accent)}
.menu-close-x{width:20px;height:20px;position:relative}
.menu-close-x::before,.menu-close-x::after{
  content:'';position:absolute;top:50%;left:0;right:0;
  height:1px;background:rgba(247,245,243,.3);transition:background .2s;
}
.menu-close-x::before{transform:rotate(45deg)}
.menu-close-x::after{transform:rotate(-45deg)}
.menu-close:hover .menu-close-x::before,.menu-close:hover .menu-close-x::after{background:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   SCROLL PROGRESS
   ═══════════════════════════════════════════════════════════ */
#spb{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:1001;width:0;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   NAV — horizontal, floating over hero (like C&C)
   ═══════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  height:clamp(70px,10vw,100px);
  transition:background .5s,box-shadow .5s,height .4s,padding .5s;
}
.nav.scrolled{
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
  height:68px;
  padding:0 clamp(6px,.8vw,12px);
}
.nav-logo{display:flex;align-items:center;gap:0;transition:opacity .4s}
.nav-logo img{width:auto}
/* Full logo — default state */
.nav-logo-w{display:block;height:clamp(62px,9.6vw,115px)}
.nav-logo-d{display:none;height:clamp(62px,9.6vw,115px)}
/* Symbol logos — wrapper keeps them stacked, opacity crossfade between white/dark */
.nav-symbol-wrap{display:none;position:relative;width:clamp(30px,4.7vw,56px);height:clamp(30px,4.7vw,56px)}
.nav-logo-sw,.nav-logo-sd{position:absolute;left:0;top:0;height:100%;width:auto;transition:opacity 2.5s ease}
.nav-logo-sw{opacity:1}
.nav-logo-sd{opacity:0}
/* Scrolled: instant switch to symbol wrapper */
.nav.scrolled .nav-logo-w{display:none}
.nav.scrolled .nav-logo-d{display:none}
.nav.scrolled .nav-symbol-wrap{display:block}
/* Dynamic color — crossfade between white and dark symbols */
.nav.scrolled.nav-light .nav-logo-sw{opacity:0}
.nav.scrolled.nav-light .nav-logo-sd{opacity:1}
.nav.scrolled.nav-light .nav-burger span{background:var(--navy)}
.nav.scrolled.nav-dark .nav-logo-sw{opacity:1}
.nav.scrolled.nav-dark .nav-logo-sd{opacity:0}
.nav.scrolled.nav-dark .nav-burger span{background:rgba(247,245,243,.7)}

.nav-link{
  font-family:var(--mu);font-size:14px;font-weight:500;
  letter-spacing:.03em;color:rgba(247,245,243,.75);
  transition:color .3s;
}
.nav.scrolled .nav-link{color:var(--navy)}
.nav-link:hover{color:var(--accent)}

.nav-right{display:flex;align-items:center;gap:clamp(14px,2vw,28px);transition:padding .5s}
.nav-contact{
  font-family:var(--mu);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream);
  padding:10px 24px;border:1px solid rgba(247,245,243,.25);
  border-radius:100px;transition:all .3s;
}
.nav.scrolled .nav-contact{color:var(--navy);border-color:var(--navy)}
.nav-contact:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.nav-lang{position:relative;font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(247,245,243,.95);padding-bottom:3px;transition:color .45s ease,opacity .5s}.nav-lang::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;border-radius:2px;transform:scaleX(1);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1),background .4s}.nav-lang-sw{display:inline-flex;align-items:center;gap:11px}.nav-lang-sep{width:1px;height:11px;background:rgba(247,245,243,.32)}
.nav-lang-inactive{color:rgba(247,245,243,.34);font-weight:500}.nav-lang-inactive::after{transform:scaleX(0);transform-origin:right}.nav-lang-inactive:hover{color:rgba(247,245,243,.82)}.nav-lang-inactive:hover::after{transform:scaleX(1);background:var(--accent)}
.nav.scrolled .nav-lang{opacity:0!important;pointer-events:none}


/* Hamburger — always visible */
.nav-burger{width:46px;height:46px;position:relative;background:none;border:none;cursor:pointer;z-index:500;padding:0;display:flex;align-items:center;justify-content:center}
.nav-burger span{position:absolute;left:10px;height:1.5px;width:26px;background:rgba(247,245,243,.7);transition:background 2.5s ease,width .3s var(--ease),transform .35s var(--ease),opacity .2s;transform-origin:center center}
.nav-burger span:nth-child(1){top:15px}
.nav-burger span:nth-child(2){top:22px;width:18px}
.nav-burger span:nth-child(3){top:29px}
.nav-burger:hover span:nth-child(2){width:26px}
.nav-burger.is-open span:nth-child(1){top:22px;transform:rotate(45deg);width:26px}
.nav-burger.is-open span:nth-child(2){opacity:0;width:0}
.nav-burger.is-open span:nth-child(3){top:22px;transform:rotate(-45deg);width:26px}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — fixed icons like C&C (FR, LinkedIn, mail, tel)
   ═══════════════════════════════════════════════════════════ */
.sidebar{
  position:fixed;right:clamp(12px,1.5vw,20px);top:50%;transform:translateY(-50%);
  z-index:400;display:flex;flex-direction:column;gap:10px;
  transition:opacity .4s,visibility .4s;
}
.sidebar.hidden{opacity:0;visibility:hidden;pointer-events:none}
.sidebar-icon{
  width:38px;height:38px;border-radius:50%;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(247,245,243,.08);backdrop-filter:blur(8px);
  color:rgba(247,245,243,.45);font-size:13px;font-weight:600;
  letter-spacing:.04em;transition:all .4s;
  border:1px solid rgba(247,245,243,.08);
}
.sidebar-icon:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.sidebar-icon svg{width:16px;height:16px;fill:currentColor}
body.sidebar-light .sidebar-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(32,42,62,.05);color:var(--t3);
  border-color:rgba(32,42,62,.08);
}
body.sidebar-light .sidebar-icon:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   HERO — Full viewport, navy bg, text left, decorative shapes right
   ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative;width:100%;min-height:100vh;
  background:var(--navy-3);overflow:hidden;
  display:flex;align-items:center;
  padding:0 var(--pad);
}
.hero-content{
  position:relative;z-index:2;
  max-width:650px;padding:70px 0 80px;
}
.hero-h1{
  font-family:var(--ep);font-size:clamp(36px,5.5vw,56px);
  font-weight:300;line-height:1.15;
  color:var(--cream);margin-bottom:32px;
}
.hero-h1 em{font-style:normal;color:var(--accent);font-weight:300}
.hero-sub{
  font-family:var(--mu);font-size:clamp(15px,1.4vw,17px);font-weight:300;
  color:rgba(247,245,243,.45);line-height:1.8;
  max-width:480px;margin-bottom:44px;
}
.hero-cta{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mu);font-size:14px;font-weight:500;
  letter-spacing:.02em;color:var(--cream);
  transition:color .3s;
}
.hero-cta:hover{color:var(--accent)}
.hero-cta-circle{
  width:48px;height:40px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease),background .3s;
}
.hero-cta:hover .hero-cta-circle{transform:scale(1.1)}
.hero-cta-circle svg{width:16px;height:16px;stroke:var(--navy);stroke-width:2;fill:none}

/* Decorative — SVG Parisian skyline, abstract & premium */
.hero-shapes{
  position:absolute;right:0;bottom:0;
  width:clamp(500px,60vw,1000px);height:100%;
  z-index:1;pointer-events:none;
}
.hero-skyline{
  position:absolute;bottom:0;right:0;width:100%;height:auto;
}
/* ── CONSTRUCTION ANIMATION (multi-phase) ── */

/* Phase 1 — Cranes rise from the ground */
.hero-skyline .crane{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:craneLife 7s ease forwards;
}
.hero-skyline .crane-1{animation-delay:.1s}
.hero-skyline .crane-2{animation-delay:.3s}
.hero-skyline .crane-3{animation-delay:.2s}
@keyframes craneLife{
  0%{opacity:0;transform:scaleY(0)}
  10%{opacity:.7;transform:scaleY(1)}
  60%{opacity:.7;transform:scaleY(1)}
  80%{opacity:0;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(0)}
}

/* Phase 2 — Scaffolding appears during construction */
.hero-skyline .scaffold{
  opacity:0;
  animation:scaffoldLife 6s ease forwards;
}
.hero-skyline .scaffold-3{animation-delay:.6s}
.hero-skyline .scaffold-4{animation-delay:.5s}
.hero-skyline .scaffold-5{animation-delay:.4s}
@keyframes scaffoldLife{
  0%{opacity:0}
  8%{opacity:1}
  55%{opacity:1}
  75%{opacity:0}
  100%{opacity:0}
}

/* Phase 3 — Buildings construct slowly from ground */
.hero-skyline .bldg-g{
  transform:translateY(100%);
  animation:buildUp 3.2s cubic-bezier(.4,.05,.25,1) forwards;
}
.hero-skyline .bldg-1{animation-delay:.7s}
.hero-skyline .bldg-2{animation-delay:.9s}
.hero-skyline .bldg-3{animation-delay:1.2s}
.hero-skyline .bldg-4{animation-delay:1s}
.hero-skyline .bldg-5{animation-delay:.8s}
.hero-skyline .bldg-6{animation-delay:1.4s}
.hero-skyline .bldg-7{animation-delay:1.1s}
.hero-skyline .bldg-8{animation-delay:1.5s}
@keyframes buildUp{
  0%{transform:translateY(100%);opacity:.2}
  10%{opacity:.4}
  50%{opacity:.7}
  100%{transform:translateY(0);opacity:1}
}

/* Ground line — appears when construction complete */
.hero-skyline .bldg-ground{opacity:0;animation:groundIn .6s ease forwards 4.8s}
@keyframes groundIn{to{opacity:1}}

/* Phase 4 — Windows light up after buildings are finished */
.hero-skyline .bldg-g rect[rx]{opacity:0;animation:winOn .6s ease forwards}
.hero-skyline .bldg-1 rect[rx]{animation-delay:3.5s}
.hero-skyline .bldg-2 rect[rx]{animation-delay:3.7s}
.hero-skyline .bldg-3 rect[rx]{animation-delay:4.2s}
.hero-skyline .bldg-4 rect[rx]{animation-delay:3.9s}
.hero-skyline .bldg-5 rect[rx]{animation-delay:3.6s}
.hero-skyline .bldg-6 rect[rx]{animation-delay:4.4s}
.hero-skyline .bldg-7 rect[rx]{animation-delay:4.1s}
.hero-skyline .bldg-8 rect[rx]{animation-delay:4.5s}
@keyframes winOn{to{opacity:1}}

/* Phase 5 — Roof details appear last (chimneys, antennas) */
.hero-skyline .bldg-g .roof-detail{opacity:0;animation:roofIn .8s ease forwards}
.hero-skyline .bldg-1 .roof-detail{animation-delay:3.8s}
.hero-skyline .bldg-2 .roof-detail{animation-delay:4s}
.hero-skyline .bldg-3 .roof-detail{animation-delay:4.5s}
.hero-skyline .bldg-4 .roof-detail{animation-delay:4.2s}
.hero-skyline .bldg-5 .roof-detail{animation-delay:3.9s}
.hero-skyline .bldg-7 .roof-detail{animation-delay:4.3s}
.hero-skyline .bldg-8 .roof-detail{animation-delay:4.6s}
.hero-skyline .bldg-6 .roof-detail{animation-delay:4.7s}
@keyframes roofIn{to{opacity:1}}
/* Antenna beacon blink on tallest tower */
.antenna-blink{
  animation:roofIn .8s ease forwards 3.9s, beaconBlink 2s ease-in-out infinite 5.5s!important;
}
.antenna-glow{
  animation:roofIn .8s ease forwards 3.9s, beaconGlow 2s ease-in-out infinite 5.5s!important;
}
@keyframes beaconBlink{
  0%,100%{fill:rgba(139,163,217,.25);r:2.5}
  50%{fill:rgba(139,163,217,.9);r:4}
}
@keyframes beaconGlow{
  0%,100%{fill:rgba(139,163,217,0);r:8}
  50%{fill:rgba(139,163,217,.25);r:16}
}
/* Shooting star */
.shooting-star{
  position:absolute;top:12%;right:30%;width:80px;height:1px;
  background:linear-gradient(to right,transparent,var(--accent),transparent);
  opacity:0;transform:rotate(-25deg);
  animation:shootStar 5s ease-in-out infinite 2s;
}
.shooting-star::after{
  content:'';position:absolute;right:0;top:-1px;
  width:3px;height:3px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px var(--accent),0 0 12px rgba(139,163,217,.5);
}
@keyframes shootStar{
  0%{opacity:0;transform:rotate(-25deg) translateX(0)}
  2%{opacity:.9}
  8%{opacity:0;transform:rotate(-25deg) translateX(-300px)}
  100%{opacity:0}
}
.shooting-star-2{
  position:absolute;top:22%;right:18%;width:50px;height:1px;
  background:linear-gradient(to right,transparent,var(--blue),transparent);
  opacity:0;transform:rotate(-30deg);
  animation:shootStar2 8s ease-in-out infinite 5s;
}
.shooting-star-2::after{
  content:'';position:absolute;right:0;top:-1px;
  width:2px;height:2px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 4px var(--blue);
}
@keyframes shootStar2{
  0%{opacity:0;transform:rotate(-30deg) translateX(0)}
  2%{opacity:.6}
  6%{opacity:0;transform:rotate(-30deg) translateX(-200px)}
  100%{opacity:0}
}

/* Subtle ground glow */
.hero-glow{
  position:absolute;bottom:-40px;right:15%;
  width:clamp(300px,40vw,600px);height:120px;
  background:radial-gradient(ellipse,rgba(139,163,217,.06) 0%,transparent 70%);
  pointer-events:none;
}

/* ── CONSTELLATION — golden network drawing in the sky ── */
.hero-constellation{
  position:absolute;top:10%;left:25%;width:50%;height:45%;
  z-index:0;pointer-events:none;overflow:hidden;
}
.hero-constellation svg{width:100%;height:100%}
/* Constellation lines draw themselves */
.hero-constellation .cline{
  stroke:rgba(139,163,217,.12);stroke-width:.8;fill:none;
  stroke-dasharray:200;stroke-dashoffset:200;
  animation:drawLine 3s ease forwards;
}
.hero-constellation .cline-1{animation-delay:1.5s}
.hero-constellation .cline-2{animation-delay:2s}
.hero-constellation .cline-3{animation-delay:2.4s}
.hero-constellation .cline-4{animation-delay:2.8s}
.hero-constellation .cline-5{animation-delay:3.2s}
.hero-constellation .cline-6{animation-delay:3.5s}
.hero-constellation .cline-7{animation-delay:3.8s}
.hero-constellation .cline-8{animation-delay:4.1s}
.hero-constellation .cline-9{animation-delay:4.4s}
@keyframes drawLine{
  to{stroke-dashoffset:0}
}
/* Constellation nodes — appear then pulse */
.hero-constellation .cnode{
  fill:rgba(139,163,217,.5);opacity:0;
  animation:nodeIn .5s ease forwards, nodePulse 4s ease-in-out infinite;
}
.hero-constellation .cnode-1{animation-delay:1.5s,5s}
.hero-constellation .cnode-2{animation-delay:1.8s,5.3s}
.hero-constellation .cnode-3{animation-delay:2.1s,5.6s}
.hero-constellation .cnode-4{animation-delay:2.4s,5.1s}
.hero-constellation .cnode-5{animation-delay:2.7s,5.4s}
.hero-constellation .cnode-6{animation-delay:3s,5.7s}
.hero-constellation .cnode-7{animation-delay:3.3s,5.2s}
.hero-constellation .cnode-8{animation-delay:3.6s,5.5s}
.hero-constellation .cnode-9{animation-delay:3.9s,5.8s}
.hero-constellation .cnode-10{animation-delay:4.2s,5.9s}
@keyframes nodeIn{
  to{opacity:1}
}
@keyframes nodePulse{
  0%,100%{r:2;opacity:.4}
  50%{r:3.5;opacity:.8}
}
/* Large accent node — hub */
.hero-constellation .cnode-hub{
  fill:rgba(139,163,217,.7);opacity:0;
  animation:nodeIn .8s ease forwards 2s, nodePulseHub 5s ease-in-out infinite 5s;
}
@keyframes nodePulseHub{
  0%,100%{r:3.5;opacity:.5;filter:drop-shadow(0 0 3px rgba(139,163,217,.45))}
  50%{r:5;opacity:.9;filter:drop-shadow(0 0 8px rgba(139,163,217,.5))}
}


/* Hero text stagger animation */
.hero-h1 .line{
  display:block;overflow:hidden;
}
.hero-h1 .line-inner{
  display:block;
  transform:translateY(110%);
  animation:lineUp .9s var(--ease) forwards;
}
.hero-h1 .line:nth-child(2) .line-inner{animation-delay:.12s}
.hero-h1 .line:nth-child(3) .line-inner{animation-delay:.24s}
@keyframes lineUp{to{transform:translateY(0)}}
.hero-tags{opacity:0;animation:fadeUp .8s ease forwards .5s}
.hero-cta{opacity:0;animation:fadeUp .8s ease forwards .7s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hero-cta,.hero-tags{transform:translateY(16px)}

/* Hero tags — Structuration / Conseil / Fiscalité */
.hero-tags{
  display:flex;gap:clamp(10px,1.5vw,18px);margin-top:0;margin-bottom:44px;flex-wrap:wrap;
}
.hero-tag{
  font-family:var(--mu);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,245,243,.85);
  padding:10px 20px;
  border:1px solid rgba(247,245,243,.2);border-radius:100px;
  background:rgba(247,245,243,.05);
  transition:border-color .3s,color .3s,background .3s;
}
.hero-tag:hover{border-color:var(--accent);color:var(--accent)}

.hero-scroll{
  position:absolute;left:50%;transform:translateX(-50%);bottom:32px;z-index:3;
  font-family:var(--mu);font-size:12px;font-weight:500;
  letter-spacing:.1em;color:rgba(247,245,243,.3);
  writing-mode:vertical-rl;cursor:pointer;
  transition:color .3s;
}
.hero-scroll:hover{color:var(--accent)}
.hero-scroll::after{
  content:'';display:block;width:1px;height:40px;
  background:linear-gradient(to bottom,transparent,var(--accent));
  margin-top:12px;margin-left:auto;margin-right:auto;
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ═══════════════════════════════════════════════════════════
   ABOUT — still on navy bg, with description + "Découvrir" link
   ═══════════════════════════════════════════════════════════ */
.about{
  background:var(--navy-3);
  padding:clamp(40px,5vw,64px) var(--pad) clamp(80px,10vw,140px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);
  align-items:start;
}
.about-left{}
.about-desc{
  font-family:var(--mu);font-size:clamp(15px,1.3vw,17px);font-weight:300;
  color:rgba(247,245,243,.55);line-height:1.85;
  margin-bottom:32px;
}
.about-link{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mu);font-size:14px;font-weight:500;
  color:var(--cream);transition:color .3s;
}
.about-link:hover{color:var(--accent)}
.about-link-circle{
  width:40px;height:40px;border-radius:50%;
  background:rgba(139,163,217,.25);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s;
}
.about-link:hover .about-link-circle{background:var(--accent)}
.about-link-circle svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2;fill:none}
.about-link:hover .about-link-circle svg{stroke:var(--navy)}

.about-right{padding-top:8px}
.about-mini-shape{
  width:120px;height:120px;margin-bottom:32px;position:relative;
}
.about-mini-shape .ms1{width:100%;height:100%;border-radius:50%;background:var(--navy-2);position:absolute}
.about-mini-shape .ms2{width:60%;height:60%;border-radius:50%;background:var(--blue);opacity:.2;position:absolute;top:20%;left:20%}
.about-mini-shape .ms3{width:40%;height:40%;border-radius:50%;background:var(--accent);opacity:.2;position:absolute;bottom:0;right:0}

/* ═══════════════════════════════════════════════════════════
   RANKINGS — horizontal carousel like C&C "companies"
   ═══════════════════════════════════════════════════════════ */
.rankings{
  background:var(--cream);
  padding:clamp(50px,7vw,80px) var(--pad);
  border-bottom:1px solid rgba(32,42,62,.06);
}
.rankings-inner{
  display:flex;align-items:center;gap:clamp(30px,5vw,80px);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.rankings-inner::-webkit-scrollbar{display:none}
.ranking-card{
  flex:0 0 auto;
  padding:24px 32px;
  border:1px solid rgba(32,42,62,.08);border-radius:12px;
  display:flex;flex-direction:column;gap:8px;
  min-width:220px;transition:border-color .3s;
}
.ranking-card:hover{border-color:var(--accent)}
.ranking-year{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.ranking-level{font-family:var(--ep);font-size:15px;font-weight:400;color:var(--navy)}
.ranking-cat{font-size:13px;color:var(--t2);line-height:1.4}

/* ═══════════════════════════════════════════════════════════
   EXPERTISES — split layout like C&C, list with "/" separators
   ═══════════════════════════════════════════════════════════ */
.expertises{
  background:var(--cream);
  padding:clamp(80px,12vw,160px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);
  align-items:start;
}
.exp-left{}
.exp-heading{
  font-family:var(--ep);font-size:clamp(28px,4vw,44px);
  font-weight:300;line-height:1.2;color:var(--navy);
  margin-bottom:40px;
}
.exp-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.exp-mini-shapes{
  width:160px;height:130px;position:relative;margin-bottom:24px;
}
.exp-mini-shapes .es1{width:100px;height:100px;border-radius:50%;background:var(--blue);opacity:.15;position:absolute;top:0;left:0}
.exp-mini-shapes .es2{width:80px;height:80px;border-radius:50%;background:var(--accent);opacity:.15;position:absolute;bottom:0;right:20px}
.exp-mini-shapes .es3{width:60px;height:60px;border-radius:50%;background:var(--navy);opacity:.1;position:absolute;top:10px;right:0}
.exp-cta{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mu);font-size:14px;font-weight:500;
  color:var(--navy);transition:color .3s;
}
.exp-cta:hover{color:var(--accent)}
.exp-cta .about-link-circle{background:rgba(139,163,217,.12)}
.exp-cta:hover .about-link-circle{background:var(--accent)}
.exp-cta .about-link-circle svg{stroke:var(--accent)}
.exp-cta:hover .about-link-circle svg{stroke:var(--navy)}

.exp-right{}
.exp-desc{
  font-family:var(--mu);font-size:clamp(15px,1.3vw,17px);font-weight:300;
  color:var(--t2);line-height:1.85;margin-bottom:20px;
}
.exp-desc-2{
  font-family:var(--mu);font-size:14px;font-weight:300;
  color:var(--t3);line-height:1.8;margin-bottom:36px;
}
/* Expertise links with "/" separator — like C&C */
.exp-links{
  font-family:var(--ep);font-size:clamp(18px,2.2vw,26px);
  font-weight:400;line-height:1.6;color:var(--navy);
}
.exp-links a{transition:color .3s;display:inline}
.exp-links a:hover{color:var(--accent)}
.exp-sep{color:var(--t3);margin:0 6px;font-family:var(--mu);font-weight:300}

/* ═══════════════════════════════════════════════════════════
   PARTNERS — split 50/50 (cream + navy) like C&C
   ═══════════════════════════════════════════════════════════ */
.partners{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:clamp(400px,50vw,600px);
}
.partners-left{
  background:var(--cream-2);
  padding:clamp(60px,8vw,100px) var(--pad);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.partners-stats{display:flex;gap:clamp(40px,6vw,80px);margin-bottom:40px}
.stat{display:flex;align-items:baseline;gap:8px}
.stat-bar{width:28px;height:2px;background:var(--accent);margin-bottom:4px}
.stat-num{
  font-family:var(--ep);font-size:clamp(48px,7vw,80px);
  font-weight:200;color:var(--navy);line-height:1;
}
.stat-label{
  font-family:var(--mu);font-size:14px;font-weight:400;
  color:var(--t2);margin-top:4px;
}
.partners-text{
  font-family:var(--ep);font-size:clamp(22px,3vw,32px);
  font-weight:300;line-height:1.35;color:var(--navy);
  margin-bottom:32px;
}
.partners-text em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.partners-link{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mu);font-size:14px;font-weight:500;
  color:var(--navy);transition:color .3s;
}
.partners-link:hover{color:var(--accent)}
.partners-link
.partners-link:hover
.partners-link
.partners-link:hover

/* Decorative mini shape bottom-center of partners-left */
.partners-left-shape{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:100px;height:100px;
}
.partners-left-shape .ps1{width:80px;height:80px;border-radius:50%;background:var(--blue);opacity:.1;position:absolute;top:0;left:0}
.partners-left-shape .ps2{width:60px;height:60px;border-radius:50%;background:var(--accent);opacity:.1;position:absolute;bottom:0;right:0}

.partners-right{
  background:var(--navy-3);
  padding:clamp(60px,8vw,100px) var(--pad);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.partners-right-heading{
  font-family:var(--ep);font-size:clamp(22px,3vw,32px);
  font-weight:300;line-height:1.35;color:var(--cream);
  margin-bottom:20px;
}
.partners-right-heading em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400}
.partners-right-desc{
  font-family:var(--mu);font-size:15px;font-weight:300;
  color:rgba(247,245,243,.45);line-height:1.8;
  margin-bottom:32px;
}
.partners-right-shape{
  position:absolute;top:-20px;right:-20px;
  width:120px;height:120px;
}
.partners-right-shape .prs1{width:100%;height:100%;border-radius:50%;background:var(--navy-2);position:absolute}
.partners-right-shape .prs2{width:50%;height:50%;border-radius:50%;background:var(--blue);opacity:.12;position:absolute;top:25%;left:25%}
.partners-right-link{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mu);font-size:14px;font-weight:500;
  color:var(--cream);transition:color .3s;
}
.partners-right-link:hover{color:var(--accent)}
.partners-right-link
.partners-right-link:hover
.partners-right-link
.partners-right-link:hover

/* ═══════════════════════════════════════════════════════════
   EQUIPE — team portraits section
   ═══════════════════════════════════════════════════════════ */
.equipe{
  background:var(--cream);
  padding:clamp(80px,12vw,160px) var(--pad);
}
.equipe-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:clamp(40px,6vw,72px);
}
.equipe-heading{
  font-family:var(--ep);font-size:clamp(28px,4vw,44px);
  font-weight:300;line-height:1.2;color:var(--navy);
}
.equipe-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.equipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px)}
.equipe-card{position:relative;overflow:hidden}
.equipe-img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(.15);transition:filter .5s,transform .5s var(--ease);
}
.equipe-card:hover .equipe-img{filter:grayscale(0);transform:scale(1.03)}
.equipe-info{padding:24px 0}
.equipe-name{
  font-family:var(--ep);font-size:clamp(20px,2.5vw,28px);
  font-weight:400;color:var(--navy);margin-bottom:4px;
}
.equipe-role{
  font-family:var(--mu);font-size:14px;font-weight:400;
  color:var(--t2);letter-spacing:.02em;margin-bottom:8px;
}
.equipe-desc{font-size:14px;color:var(--t3);line-height:1.7}

/* ═══════════════════════════════════════════════════════════
   CLIENTS — horizontal tiles with drag
   ═══════════════════════════════════════════════════════════ */
.clients{
  background:var(--cream-2);
  padding:clamp(60px,8vw,100px) 0;
}
.clients-header{
  padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:clamp(30px,5vw,52px);
}
.clients-heading{
  font-family:var(--ep);font-size:clamp(24px,3.5vw,38px);
  font-weight:300;line-height:1.2;color:var(--navy);
}
.clients-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.clients-rail{
  display:flex;gap:clamp(12px,2vw,20px);
  padding:0 var(--pad);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.clients-rail::-webkit-scrollbar{display:none}
.clients-rail:active{cursor:grabbing}
.client-tile{
  flex:0 0 auto;width:clamp(180px,22vw,280px);
  position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:4/5;
}
.client-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.client-tile:hover img{transform:scale(1.06)}
.client-tile-label{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px 16px;
  background:linear-gradient(transparent,rgba(19,27,42,.8));
  font-family:var(--mu);font-size:13px;font-weight:500;
  color:var(--cream);letter-spacing:.02em;
}

/* ═══════════════════════════════════════════════════════════
   PUBLICATIONS — article rows like C&C "feature-news"
   ═══════════════════════════════════════════════════════════ */
.publications{
  background:var(--cream);
  padding:clamp(80px,12vw,160px) var(--pad);
}
.pub-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:clamp(40px,6vw,72px);
}
.pub-heading{
  font-family:var(--ep);font-size:clamp(28px,4vw,44px);
  font-weight:300;line-height:1.2;color:var(--navy);
  max-width:600px;
}
.pub-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}

/* Article rows — horizontal like C&C */
.pub-list{}
.pub-row{
  display:grid;grid-template-columns:120px 140px 1fr auto;
  gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(24px,3vw,36px) 0;
  border-top:1px solid rgba(32,42,62,.08);
  transition:background .3s;
}
.pub-row:last-child{border-bottom:1px solid rgba(32,42,62,.08)}
.pub-row:hover{background:rgba(139,163,217,.03)}
.pub-type{
  font-family:var(--mu);font-size:13px;font-weight:500;
  color:var(--accent);letter-spacing:.02em;padding-top:4px;
}
.pub-date{
  font-family:var(--mu);font-size:14px;font-weight:400;
  color:var(--teal);letter-spacing:.02em;padding-top:4px;
}
.pub-title{
  font-family:var(--ep);font-size:clamp(16px,1.6vw,20px);
  font-weight:400;color:var(--navy);line-height:1.45;
}
.pub-arrow{
  font-family:var(--mu);font-size:13px;font-weight:500;
  color:var(--accent);display:flex;align-items:center;gap:8px;
  padding-top:4px;white-space:nowrap;transition:color .3s;
}
.pub-row:hover .pub-arrow{color:var(--navy)}

/* Outils section */
.outils{
  margin-top:clamp(60px,8vw,100px);
  padding-top:clamp(40px,6vw,60px);
  border-top:1px solid rgba(32,42,62,.06);
}
.outils-heading{
  font-family:var(--ep);font-size:clamp(20px,2.5vw,28px);
  font-weight:300;color:var(--navy);margin-bottom:32px;
}
.outils-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.outils-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.outil{
  padding:28px;border:1px solid rgba(32,42,62,.06);border-radius:12px;
  transition:border-color .3s,box-shadow .3s;
}
.outil:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(139,163,217,.08)}
.outil-ico{font-size:24px;margin-bottom:16px}
.outil-t{font-family:var(--ep);font-size:15px;font-weight:400;color:var(--navy);margin-bottom:8px}
.outil-b{font-size:13px;color:var(--t3);line-height:1.6;margin-bottom:16px}
.outil-l{font-size:13px;font-weight:600;color:var(--accent);transition:color .3s}
.outil-l:hover{color:var(--navy)}


/* ═══════════════════════════════════════════════════════════
   FOOTER — split layout like C&C (cream left + navy right with form)
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   FOOTER — Épuré, premium
   ═══════════════════════════════════════════════════════════ */
/* Col 1 — Marque */

/* Cols 2-4 — Liens */

/* Badge distinction */

/* Bottom bar */

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
/* La révélation est définie UNE seule fois, dans global.css : même durée,
   même courbe, même distance, même échelle (numéro → titre → contenu, un cran
   de 100 ms). Cette page n'en redéfinit plus sa propre version. */
/* Hover lift on cards */
.ranking-card,.outil,.pub-row,.client-tile{transition:transform .4s var(--ease),border-color .3s,box-shadow .3s}
.ranking-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(32,42,62,.06)}
.outil:hover{transform:translateY(-4px)}
/* Smooth section separator lines */
.rankings,.expertises,.publications,.equipe,.clients{position:relative}
/* Parallax-lite on hero shapes */
.hero-shapes{transition:transform .1s linear}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .nav-lang-sw{display:none}
  .sidebar{display:none}
  .menu-aside{display:none}
  .hero-shapes{width:70vw;height:70vw;right:-20%}
  .about{grid-template-columns:1fr;gap:40px}
  .expertises{grid-template-columns:1fr;gap:40px}
  .partners{grid-template-columns:1fr}
  .equipe-grid{grid-template-columns:1fr;gap:40px}
  .pub-row{grid-template-columns:1fr;gap:8px}
  .pub-type,.pub-date{display:inline;margin-right:12px}
  .outils-grid{grid-template-columns:1fr}
  .clients-heading{font-size:clamp(22px,5vw,32px)}
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — inner pages header
   ═══════════════════════════════════════════════════════════ */
.page-hero{position:relative;width:100%;min-height:100vh;background:var(--navy-3);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.page-hero-content{position:relative;z-index:2;max-width:760px;padding:70px 0 80px}
@keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes heroLineGrow{to{width:60px}}
.page-hero-breadcrumb{
  font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:40px;   /* resserré au repos ; l'espace s'agrandit dynamiquement à l'ouverture du sommaire, selon le nombre de titres (hero-sommaire.js) */
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(22px);animation:heroFadeUp .8s var(--ease) .3s forwards}
.page-hero-breadcrumb a{color:rgba(247,245,243,.35);transition:color .3s}
.page-hero-breadcrumb a:hover{color:var(--accent)}
.page-hero-breadcrumb .sep{color:rgba(247,245,243,.15)}
.page-hero-title{
  position:relative;z-index:1;
  font-family:var(--ep);font-size:clamp(44px,6.5vw,80px);
  font-weight:200;line-height:1.08;color:var(--cream);
  opacity:0;transform:translateY(22px);
  animation:heroFadeUp .9s var(--ease) .5s forwards}
.page-hero-title em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400}
.page-hero-line{
  display:block;width:0;height:1px;background:var(--accent);
  margin-top:clamp(28px,3vw,44px);
  animation:heroLineGrow 1.2s var(--ease) .9s forwards}
.page-hero-sub{
  position:relative;z-index:1;
  font-family:var(--mu);font-size:clamp(16px,1.5vw,19px);font-weight:300;
  color:rgba(247,245,243,.5);line-height:1.8;
  max-width:520px;margin-top:28px;
  opacity:0;transform:translateY(22px);
  animation:heroFadeUp .8s var(--ease) 1.1s forwards}
.ph-glow{
  animation:phGlow 3s ease-in-out infinite;
}
@keyframes phGlow{
  0%,100%{fill:rgba(139,163,217,0);r:7}
  50%{fill:rgba(139,163,217,.5);r:10}
}
/* Page-hero constellation — 70% right of banner */
/* Identical styles to .hero-constellation */

/* Inner page nav: symbol logo, no bar, on pages without full hero */
.nav.nav-inner{
  background:transparent;
  box-shadow:none;
  height:68px;
  padding:0 clamp(6px,.8vw,12px);
}
.nav.nav-inner .nav-logo-w{display:none}
.nav.nav-inner .nav-logo-d{display:none}
.nav.nav-inner .nav-symbol-wrap{display:block}
.nav.nav-inner .nav-logo-sw{opacity:0}
.nav.nav-inner .nav-logo-sd{opacity:1}
.nav.nav-inner .nav-link{color:var(--navy)}
.nav.nav-inner .nav-burger span{background:var(--navy)}
.nav.nav-inner .nav-lang{color:var(--navy)}.nav.nav-inner .nav-lang-inactive{color:rgba(19,27,42,.4)}.nav.nav-inner .nav-lang-sep{background:rgba(19,27,42,.24)}

/* ═══════════════════════════════════════════════════════════
   EQUIPE PAGE — expanded team section
   ═══════════════════════════════════════════════════════════ */
.equipe-full{
  background:var(--cream);
  padding:clamp(80px,12vw,140px) var(--pad);
}
.equipe-full .equipe-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);
  margin-bottom:clamp(60px,8vw,100px);
}
.equipe-bio{
  font-family:var(--mu);font-size:15px;font-weight:300;
  color:var(--t2);line-height:1.85;margin-top:16px;
}
.equipe-detail-list{
  margin-top:20px;display:flex;flex-direction:column;gap:8px;
}
.equipe-detail-item{
  font-family:var(--mu);font-size:13px;color:var(--t3);
  padding-left:16px;position:relative;line-height:1.6;
}
.equipe-detail-item::before{
  content:'';position:absolute;left:0;top:9px;
  width:6px;height:1px;background:var(--accent);
}
.equipe-collaborateurs{
  background:var(--cream-2);
  padding:clamp(60px,8vw,100px) var(--pad);
}
.equipe-collab-heading{
  font-family:var(--ep);font-size:clamp(24px,3vw,32px);
  font-weight:300;color:var(--navy);margin-bottom:40px;
}
.equipe-collab-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.equipe-collab-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
}
.equipe-collab-card{
  padding:28px;border:1px solid rgba(32,42,62,.06);border-radius:12px;
  background:var(--cream);transition:border-color .3s;
}
.equipe-collab-card:hover{border-color:var(--accent)}
.equipe-collab-name{font-family:var(--ep);font-size:16px;font-weight:400;color:var(--navy);margin-bottom:4px}
.equipe-collab-role{font-size:13px;color:var(--t2)}

/* ═══════════════════════════════════════════════════════════
   EXPERTISES PAGE — detailed cards
   ═══════════════════════════════════════════════════════════ */
.expertises-full{
  background:var(--cream);
  padding:clamp(80px,12vw,140px) var(--pad);
}
.expertise-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);
}
.expertise-card{
  padding:clamp(32px,4vw,48px);
  border:1px solid rgba(32,42,62,.06);border-radius:16px;
  transition:border-color .4s,box-shadow .4s,transform .4s var(--ease);
  position:relative;overflow:hidden;
}
.expertise-card:hover{
  border-color:var(--accent);
  box-shadow:0 12px 40px rgba(139,163,217,.08);
  transform:translateY(-4px);
}
.expertise-card-num{
  font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.1em;color:var(--accent);margin-bottom:16px;
}
.expertise-card-title{
  font-family:var(--ep);font-size:clamp(20px,2.5vw,26px);
  font-weight:300;color:var(--navy);margin-bottom:12px;line-height:1.3;
}
.expertise-card-title em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.expertise-card-desc{
  font-family:var(--mu);font-size:14px;font-weight:300;
  color:var(--t2);line-height:1.8;
}
.expertise-card-line{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,var(--accent),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.expertise-card:hover .expertise-card-line{transform:scaleX(1)}

/* Expertise approach section */
.expertise-approach{
  background:var(--navy-3);
  padding:clamp(80px,10vw,140px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,100px);
  align-items:center;
}
.expertise-approach-heading{
  font-family:var(--ep);font-size:clamp(28px,4vw,40px);
  font-weight:200;color:var(--cream);line-height:1.2;
}
.expertise-approach-heading em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400}
.expertise-approach-text{
  font-family:var(--mu);font-size:15px;font-weight:300;
  color:rgba(247,245,243,.45);line-height:1.85;
}

/* ═══════════════════════════════════════════════════════════
   CLIENTS PAGE — expanded grid
   ═══════════════════════════════════════════════════════════ */
.clients-full{
  background:var(--navy-3);min-height:100vh;
  display:flex;flex-direction:row;align-items:center;
  gap:clamp(48px, calc(30vw - 370px), 280px);
  padding:clamp(64px,8vh,88px) var(--pad);   /* padding vertical symétrique → contenu centré au pixel */
  overflow:hidden;position:relative;
}
/* en-tête calé à gauche et ANCRÉ EN HAUT — même ligne de titre que les sections 2/3 ;
   l'écart avec la grille reste borné (clamp) pour éviter le vide central */
.clients-full > .cl-section-header{width:clamp(260px,22vw,360px);flex:none;margin-bottom:0;
  align-self:flex-start}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — full width form
   ═══════════════════════════════════════════════════════════ */
.contact-full{
  background:var(--cream);
  padding:clamp(80px,12vw,140px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,100px);
}
.contact-info{}
.contact-info-heading{
  font-family:var(--ep);font-size:clamp(24px,3vw,32px);
  font-weight:300;color:var(--navy);margin-bottom:32px;line-height:1.3;
}
.contact-info-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.contact-block{margin-bottom:28px}
.contact-block-label{
  font-family:var(--mu);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.contact-block-val{font-size:15px;color:var(--t2);line-height:1.8}
.contact-block-val a{color:var(--navy);transition:color .3s}
.contact-block-val a:hover{color:var(--accent)}
.contact-form-wrapper{
  padding:clamp(32px,4vw,48px);
  background:var(--navy-3);border-radius:20px;
}
.contact-form-wrapper

/* ═══════════════════════════════════════════════════════════
   PUBLICATIONS PAGE — expanded
   ═══════════════════════════════════════════════════════════ */
.publications-full{
  background:var(--cream);
  padding:clamp(80px,12vw,140px) var(--pad);
}

@media(max-width:1080px){
  .clients-full{flex-direction:column;justify-content:center}
  .clients-full > .cl-section-header{width:100%;max-width:680px;margin-bottom:clamp(24px,3.5vh,40px)}
  .cl-grid{width:min(100%,calc((100vh - 340px) * 4 / 3));max-width:none;margin-inline:auto}
  /* globe : repli en colonne (titre au-dessus, globe centré en dessous) */
  .cl-map-section{flex-direction:column;justify-content:center}
  .cl-map-section > .cl-section-header{width:100%;max-width:680px;margin-bottom:clamp(20px,3vh,36px)}
  .gl-svg{width:min(620px, calc(100vh - 360px), 92vw)}
}
@media(max-width:900px){
      .expertise-cards{grid-template-columns:1fr}
  .expertise-approach{grid-template-columns:1fr;gap:40px}
  .clients-grid{grid-template-columns:1fr 1fr}
  .contact-full{grid-template-columns:1fr}
  .equipe-full .equipe-grid{grid-template-columns:1fr}
  .equipe-collab-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   CLIENTS PAGE — Section headers + SVG card grid + world map
   ═══════════════════════════════════════════════════════════ */
::selection{background:var(--accent);color:#fff}
::-moz-selection{background:var(--accent);color:#fff}
.cl-section-header{
  text-align:left;margin-bottom:clamp(24px,3.5vh,44px);
  max-width:680px;
}
.cl-section-label{
  font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.cl-section-title{
  font-family:var(--ep);font-size:clamp(28px,3.5vw,44px);
  font-weight:200;color:var(--navy);line-height:1.2;
  margin-bottom:clamp(16px,2vw,24px);
}
.cl-section-title em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400}
.cl-section-sub{
  font-family:var(--mu);font-size:var(--chapo-taille);
  font-weight:300;color:var(--t2);line-height:var(--chapo-interligne);
}
/* sous-titres 02 (globe) et 03 (terrain) : même largeur que le 01 (clamp identique) */
.cl-map-section .cl-section-sub,.ops--v2 .cl-section-sub{max-width:clamp(260px,22vw,360px)}
/* Dark variants for navy sections */
.cl-section-title--dark{color:var(--cream)}
.cl-section-title--dark em{color:var(--blue)}
.cl-section-sub--dark{color:rgba(247,245,243,.45)}
/* ── Section divider ── */
.cl-divider{
  display:flex;align-items:center;
  gap:clamp(16px,2vw,24px);
  padding:0 var(--pad);
  max-width:100%;
}
.cl-divider-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.25;
}
.cl-divider-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  opacity:.5;
  animation:nodePulse 4s ease-in-out infinite;
}

/* ── Cards Grid ── */
.cl-grid{
  flex:0 1 auto;min-width:0;
  /* largeur bornée par la hauteur (3 rangées de carrés tiennent sans scroll) */
  width:calc((100vh - 200px) * 4 / 3 * 0.93);   /* entre-deux : ~7 % de moins */
  max-width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(6px,0.8vw,12px);
  perspective:1400px;
}
.cl-card{
  background:transparent;border-radius:0;
  border:1px solid var(--cream-3);
  aspect-ratio:1;
  padding:0;
  display:block;text-align:center;
  cursor:pointer;position:relative;
  transform-style:preserve-3d;
  transition:transform .9s var(--ease),box-shadow .4s var(--ease),border-color .3s,opacity .8s var(--ease);
  opacity:0;
  transform:translateY(50px) rotateX(14deg);
}
.cl-card.is-dealt{
  opacity:1;
  transform:translateY(0) rotateX(0deg);
}
.cl-card.is-dealt:hover{
  box-shadow:0 14px 44px rgba(32,42,62,.1);
  border-color:var(--accent);
}
.cl-card.is-dealt:hover:not(.is-open){transform:translateY(-5px)}
.cl-card.is-dealt.is-open{transform:rotateY(180deg)}
/* Front face */
.cl-card-front{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,1.8vw,24px);
  backface-visibility:hidden;
}
/* Back face */
.cl-card-back{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,2.5vw,32px);
  backface-visibility:hidden;
  transform:rotateY(180deg);
  background:var(--cream);
  border:none;
}
.cl-card-num{
  position:absolute;top:clamp(8px,1vw,12px);left:clamp(8px,1vw,12px);
  font-family:var(--ep);font-size:10px;
  font-weight:400;color:var(--cream-3);
  letter-spacing:.04em;
  transition:color .3s;
  z-index:1;backface-visibility:hidden;
}
.cl-card:hover .cl-card-num{color:var(--accent)}
.cl-card-icon{
  width:clamp(64px,8vw,100px);height:clamp(64px,8vw,100px);
  margin:0 auto clamp(12px,1.4vw,18px);
  display:flex;align-items:center;justify-content:center;
}
.cl-card-icon svg{width:100%;height:100%}
.cl-card:hover .cl-card-icon svg path,
.cl-card:hover .cl-card-icon svg rect,
.cl-card:hover .cl-card-icon svg circle,
.cl-card:hover .cl-card-icon svg line,
.cl-card:hover .cl-card-icon svg polyline,
.cl-card:hover .cl-card-icon svg polygon{
  stroke:var(--accent);stroke-opacity:1;transition:stroke .3s,stroke-opacity .3s;
}
.cl-card-title{
  font-family:var(--ep);font-size:clamp(14px,1.3vw,19px);
  font-weight:400;font-style:normal;color:var(--navy);
  line-height:1.3;
}
.cl-card-desc{
  font-family:var(--mu);font-size:clamp(11px,0.9vw,14px);
  font-weight:300;color:var(--t2);
  line-height:1.7;
}
.cl-card-back .cl-card-back-title{
  font-family:var(--ep);font-size:clamp(15px,1.4vw,20px);
  font-weight:500;font-style:normal;color:var(--navy);
  margin-bottom:clamp(8px,1vw,14px);
}
.cl-card-back .cl-card-desc{
  color:var(--t2);
}
/* Notaires — carte spéciale (fond navy) */
.cl-card--special{
  background:var(--navy);border-color:var(--navy);
}
.cl-card--special .cl-card-front{background:var(--navy)}
.cl-card--special .cl-card-back{background:var(--navy)}
.cl-card--special .cl-card-num{color:rgba(247,245,243,.2)}
.cl-card--special:hover .cl-card-num{color:var(--accent)}
.cl-card--special .cl-card-icon svg path,
.cl-card--special .cl-card-icon svg rect,
.cl-card--special .cl-card-icon svg circle,
.cl-card--special .cl-card-icon svg line,
.cl-card--special .cl-card-icon svg polyline{
  stroke:var(--accent);stroke-opacity:.55;
}
.cl-card--special .cl-card-title{color:var(--cream)}
.cl-card--special .cl-card-back-title{color:var(--cream)}
.cl-card--special .cl-card-desc{color:rgba(247,245,243,.55)}
.cl-card--special:hover{
  border-color:var(--accent);background:var(--navy-2);
}
.cl-card--special .cl-card-badge{
  display:inline-block;
  margin-top:clamp(6px,0.8vw,10px);
  font-family:var(--mu);font-size:9px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(139,163,217,.3);
  border-radius:0;padding:4px 12px;
  transition:background .3s,color .3s;
}
.cl-card--special:hover .cl-card-badge{
  background:var(--accent);color:var(--navy);
}
/* Cartes décoratives bleues */
.cl-card--deco{
  background:var(--navy);border-color:var(--navy);
  padding:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  cursor:default;
  transform-style:flat;
}
.cl-card--deco svg{width:100%;height:100%;display:block}
.cl-card--deco:hover{
  border-color:rgba(139,163,217,.2);transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(19,27,42,.2);
}

/* ── Card hover animations — rich SVG element animations ── */
.cl-card .cl-card-icon { transition: opacity .3s ease; }
.cl-card .cl-card-icon svg * { transition: opacity .3s, transform .3s; }

/* ═══════════════════════════════════════════════════════════════════ */
/* 01 · Sociétés de gestion — Buildings grow from bottom, floors fade in, arc draws */
/* ═════════════════════════════════════════════════════════════════════ */

/* Building left grows up */
.cl-card--1:hover .a-bldg-l { 
  animation: grow1L 1.2s cubic-bezier(.34,.1,.68,1) forwards;
  transform-origin: bottom;
}
@keyframes grow1L {
  0% { transform: scaleY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Building right grows up */
.cl-card--1:hover .a-bldg-r {
  animation: grow1R 1.2s cubic-bezier(.34,.1,.68,1) forwards .15s;
  transform-origin: bottom;
}
@keyframes grow1R {
  0% { transform: scaleY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Floor lines appear sequentially */
.cl-card--1:hover .a-floor-l1 { animation: fadeIn .4s ease forwards .4s; }
.cl-card--1:hover .a-floor-l2 { animation: fadeIn .4s ease forwards .5s; }
.cl-card--1:hover .a-floor-l3 { animation: fadeIn .4s ease forwards .6s; }
.cl-card--1:hover .a-floor-l4 { animation: fadeIn .4s ease forwards .7s; }
.cl-card--1:hover .a-floor-l5 { animation: fadeIn .4s ease forwards .8s; }
.cl-card--1:hover .a-floor-r1 { animation: fadeIn .4s ease forwards .55s; }
.cl-card--1:hover .a-floor-r2 { animation: fadeIn .4s ease forwards .65s; }
.cl-card--1:hover .a-floor-r3 { animation: fadeIn .4s ease forwards .75s; }
.cl-card--1:hover .a-floor-r4 { animation: fadeIn .4s ease forwards .85s; }
.cl-card--1:hover .a-floor-r5 { animation: fadeIn .4s ease forwards .95s; }
.cl-card--1:hover .a-floor-r6 { animation: fadeIn .4s ease forwards 1.05s; }

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Connection arc draws itself */
.cl-card--1:hover .a-arc {
  animation: strokeDraw 1s ease-out forwards 1.1s;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

/* Network circle and lines pulse in */
.cl-card--1:hover .a-net-circ {
  animation: scaleIn .5s cubic-bezier(.34,.1,.68,1) forwards 1.4s;
}
.cl-card--1:hover .a-net-line {
  animation: scaleIn .4s ease forwards 1.5s;
  transform-origin: 40px 22px;
}

@keyframes strokeDraw {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

@keyframes scaleIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 02 · Marchands de biens — Chart line draws, dots pop, arrow rises */
/* ═════════════════════════════════════════════════════════════════════ */

/* Chart box fades in */
.cl-card--2:hover .a-chart-box {
  animation: fadeIn .3s ease forwards;
}

/* Polyline draws itself */
.cl-card--2:hover .a-chart-line {
  animation: strokeDraw 1.2s ease-out forwards .2s;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

/* Data points pop in sequence */
.cl-card--2:hover .a-dot1 {
  animation: popIn .4s cubic-bezier(.34,.1,.68,1) forwards .8s;
}
.cl-card--2:hover .a-dot2 {
  animation: popIn .4s cubic-bezier(.34,.1,.68,1) forwards 1s;
}
.cl-card--2:hover .a-dot3 {
  animation: popIn .4s cubic-bezier(.34,.1,.68,1) forwards 1.2s;
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Arrow rises */
.cl-card--2:hover .a-arrow-vert {
  animation: riseUp .6s cubic-bezier(.34,.1,.68,1) forwards 1.3s;
  transform-origin: 62px 40px;
}

.cl-card--2:hover .a-arrow-head {
  animation: riseUp .6s cubic-bezier(.34,.1,.68,1) forwards 1.3s;
  transform-origin: 62px 40px;
}

@keyframes riseUp {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 03 · Promoteurs — Building grows, windows appear, crane hook lowers, pulley spins */
/* ═════════════════════════════════════════════════════════════════════ */

/* Building body grows from bottom */
.cl-card--3:hover .a-bldg-body {
  animation: grow3 1.2s cubic-bezier(.34,.1,.68,1) forwards .1s;
  transform-origin: bottom;
}

@keyframes grow3 {
  0% { transform: scaleY(0); opacity: 0; }
  5% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Windows appear bottom to top */
.cl-card--3:hover .a-win4 {
  animation: windowLight .4s ease forwards .6s;
}
.cl-card--3:hover .a-win3 {
  animation: windowLight .4s ease forwards .7s;
}
.cl-card--3:hover .a-win2 {
  animation: windowLight .4s ease forwards .8s;
}
.cl-card--3:hover .a-win1 {
  animation: windowLight .4s ease forwards .9s;
}

@keyframes windowLight {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Cable lowers */
.cl-card--3:hover .a-cable {
  animation: lowerCable 1s ease-out forwards .4s;
}

/* Hook descends and swings slightly */
.cl-card--3:hover .a-hook {
  animation: swingHook 1.2s cubic-bezier(.34,.1,.68,1) forwards .5s;
}

@keyframes lowerCable {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes swingHook {
  0% { transform: translateY(-8px) scaleY(0.8); opacity: 0; }
  10% { opacity: 1; }
  60% { transform: translateY(0) scaleY(1.05); }
  100% { transform: translateY(0) scaleY(1); }
}

/* Pulley spins */
.cl-card--3:hover .a-pulley {
  animation: spinPulley 2s linear forwards .6s;
  transform-origin: 60px 14px;
}

@keyframes spinPulley {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 04 · Foncières privées — Columns rise, pediment draws, door fades */
/* ═════════════════════════════════════════════════════════════════════ */

/* Columns rise sequentially */
.cl-card--4:hover .a-col1 {
  animation: columnRise .8s cubic-bezier(.34,.1,.68,1) forwards;
  transform-origin: 22px 72px;
}
.cl-card--4:hover .a-col2 {
  animation: columnRise .8s cubic-bezier(.34,.1,.68,1) forwards .1s;
  transform-origin: 36px 72px;
}
.cl-card--4:hover .a-col3 {
  animation: columnRise .8s cubic-bezier(.34,.1,.68,1) forwards .2s;
  transform-origin: 50px 72px;
}
.cl-card--4:hover .a-col4 {
  animation: columnRise .8s cubic-bezier(.34,.1,.68,1) forwards .3s;
  transform-origin: 64px 72px;
}

@keyframes columnRise {
  0% { transform: scaleY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Facade appears */
.cl-card--4:hover .a-facade {
  animation: fadeIn .4s ease forwards .1s;
}

/* Pediment draws itself */
.cl-card--4:hover .a-pediment {
  animation: strokeDraw .8s ease-out forwards .6s;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}

/* Pediment detail circle pulses */
.cl-card--4:hover .a-pediment-detail {
  animation: circlePulse .6s ease-out forwards .8s;
}

@keyframes circlePulse {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Door fades in */
.cl-card--4:hover .a-door {
  animation: fadeIn .4s ease forwards 1.1s;
}

/* Baseline appears */
.cl-card--4:hover .a-baseline {
  animation: fadeIn .3s ease forwards 1.3s;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 05 · Hôtels — Windows light up, star sparkles, flag waves */
/* ═════════════════════════════════════════════════════════════════════ */

/* Windows light up sequentially with glow effect */
.cl-card--5:hover .a-win-r1-1 {
  animation: lightWindow .5s ease forwards;
}
.cl-card--5:hover .a-win-r1-2 {
  animation: lightWindow .5s ease forwards .1s;
}
.cl-card--5:hover .a-win-r1-3 {
  animation: lightWindow .5s ease forwards .2s;
}
.cl-card--5:hover .a-win-r2-1 {
  animation: lightWindow .5s ease forwards .3s;
}
.cl-card--5:hover .a-win-r2-2 {
  animation: lightWindow .5s ease forwards .4s;
}
.cl-card--5:hover .a-win-r2-3 {
  animation: lightWindow .5s ease forwards .5s;
}

@keyframes lightWindow {
  0% { opacity: 0; stroke-width: .6; }
  100% { opacity: 1; stroke-width: .8; filter: drop-shadow(0 0 2px var(--accent)); }
}

/* Star sparkles */
.cl-card--5:hover .a-star {
  animation: starSparkle .8s cubic-bezier(.34,.1,.68,1) forwards .4s;
}

@keyframes starSparkle {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Flag waves */
.cl-card--5:hover .a-flag {
  animation: waveFlag 1.2s ease-in-out forwards .6s;
  transform-origin: 66px 13px;
}

@keyframes waveFlag {
  0% { transform: translateX(0) scaleX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateX(3px) scaleX(1); }
  100% { transform: translateX(0) scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 06 · Investisseurs — Portfolio appears, bars grow, coin spins */
/* ═════════════════════════════════════════════════════════════════════ */

/* Portfolio box draws in */
.cl-card--6:hover .a-portfolio {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: strokeDrawLong .8s ease-out forwards .1s;
}

/* Divider line draws */
.cl-card--6:hover .a-divider {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: strokeDraw .5s ease-out forwards .3s;
}

/* Bars grow up sequentially */
.cl-card--6:hover .a-bar-a {
  animation: barGrow .5s cubic-bezier(.34,.1,.68,1) forwards .5s;
  transform-origin: 26px 54px;
}
.cl-card--6:hover .a-bar-b {
  animation: barGrow .5s cubic-bezier(.34,.1,.68,1) forwards .65s;
  transform-origin: 40px 54px;
}
.cl-card--6:hover .a-bar-c {
  animation: barGrow .5s cubic-bezier(.34,.1,.68,1) forwards .8s;
  transform-origin: 54px 54px;
}
@keyframes barGrow {
  0% { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Coin spins and appears */
.cl-card--6:hover .a-coin {
  animation: coinSpin 1s cubic-bezier(.34,.1,.68,1) forwards .4s;
  transform-origin: 40px 18px;
}
.cl-card--6:hover .a-coin-core {
  animation: coinSpin 1s cubic-bezier(.34,.1,.68,1) forwards .4s;
  transform-origin: 40px 18px;
}
@keyframes coinSpin {
  0% { transform: rotateY(90deg) scale(.5); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 07 · Non-résidents — Globe appears, continents fade in, lines draw */
/* ═════════════════════════════════════════════════════════════════════ */

/* Globe circle scales in */
.cl-card--7:hover .a-globe {
  animation: globeScale .8s cubic-bezier(.34,.1,.68,1) forwards .1s;
  transform-origin: 40px 40px;
}
@keyframes globeScale {
  0% { transform: scale(.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Continents fade in sequentially */
.cl-card--7:hover .a-continent-a {
  animation: fadeIn .5s ease forwards .3s;
}
.cl-card--7:hover .a-continent-b {
  animation: fadeIn .5s ease forwards .5s;
}
.cl-card--7:hover .a-continent-c {
  animation: fadeIn .5s ease forwards .7s;
}

/* Latitude and longitude lines draw */
.cl-card--7:hover .a-latitude {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeDraw .8s ease-out forwards .4s;
}
.cl-card--7:hover .a-longitude {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeDraw .8s ease-out forwards .6s;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 08 · Familles — House builds up, windows light, trees grow */
/* ═════════════════════════════════════════════════════════════════════ */

/* Roof draws in */
.cl-card--8:hover .a-roof {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: strokeDrawLong .9s ease-out forwards .1s;
}
@keyframes strokeDrawLong {
  0% { stroke-dashoffset: 200; opacity: .5; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Windows light up sequentially */
.cl-card--8:hover .a-win-l {
  animation: windowLight .5s ease forwards .4s;
  transform-origin: 30px 52px;
}
.cl-card--8:hover .a-win-r {
  animation: windowLight .5s ease forwards .6s;
  transform-origin: 50px 52px;
}
@keyframes windowLight {
  0% { fill: transparent; transform: scale(.7); opacity: 0; }
  100% { fill: rgba(139,163,217,.12); transform: scale(1); opacity: 1; }
}

/* Door appears */
.cl-card--8:hover .a-door {
  animation: riseUp .6s cubic-bezier(.34,.1,.68,1) forwards .5s;
  transform-origin: 40px 66px;
}
.cl-card--8:hover .a-doorknob {
  animation: fadeIn .3s ease forwards .8s;
}

/* Chimney */
.cl-card--8:hover .a-chimney,
.cl-card--8:hover .a-chimney-top {
  animation: fadeIn .4s ease forwards .7s;
}

/* Trees grow from ground */
.cl-card--8 svg circle[cx="18"],
.cl-card--8 svg circle[cx="62"] {
  transform-origin: center bottom;
}
.cl-card--8:hover svg circle[cx="18"] {
  animation: treeGrow .6s cubic-bezier(.34,.1,.68,1) forwards .9s;
  transform-origin: 18px 60px;
}
.cl-card--8:hover svg circle[cx="62"] {
  animation: treeGrow .6s cubic-bezier(.34,.1,.68,1) forwards 1s;
  transform-origin: 62px 60px;
}
@keyframes treeGrow {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Dashed heritage line appears last */
.cl-card--8:hover line[stroke-dasharray="2 2"] {
  animation: fadeIn .4s ease forwards 1.1s;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 08 · Notaires — Balance oscillates like real balance, pans rock */
/* ═════════════════════════════════════════════════════════════════════ */

/* Balance beam and structure appears */
.cl-card--special:hover .a-balance-beam,
.cl-card--special:hover .a-balance-pole,
.cl-card--special:hover .a-balance-pivot {
  animation: fadeIn .3s ease forwards;
}

.cl-card--special:hover .a-balance-base1,
.cl-card--special:hover .a-balance-base2 {
  animation: fadeIn .3s ease forwards .1s;
}

/* Left pan rocks */
.cl-card--special:hover .a-pan-l-line1,
.cl-card--special:hover .a-pan-l-line2,
.cl-card--special:hover .a-pan-l-bowl {
  animation: rockPanLeft 2.4s ease-in-out forwards .2s;
  transform-origin: 18px 24px;
}

/* Right pan rocks (opposite phase) */
.cl-card--special:hover .a-pan-r-line1,
.cl-card--special:hover .a-pan-r-line2,
.cl-card--special:hover .a-pan-r-bowl {
  animation: rockPanRight 2.4s ease-in-out forwards .2s;
  transform-origin: 62px 24px;
}

@keyframes rockPanLeft {
  0% { transform: rotate(0deg); opacity: 0; }
  5% { opacity: 1; }
  15% { transform: rotate(-8deg); }
  35% { transform: rotate(3deg); }
  55% { transform: rotate(-5deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes rockPanRight {
  0% { transform: rotate(0deg); opacity: 0; }
  5% { opacity: 1; }
  15% { transform: rotate(8deg); }
  35% { transform: rotate(-3deg); }
  55% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* ── 3D Globe Section ── */
.cl-map-section{
  background:var(--cream);min-height:100vh;
  display:flex;flex-direction:row;align-items:center;
  gap:clamp(28px,3vw,56px);
  padding:clamp(64px,8vh,88px) var(--pad);   /* padding vertical symétrique → globe centré au pixel */
  position:relative;
}
/* titre + sous-titre : colonne étroite à gauche, ANCRÉE EN HAUT (même ligne que 01/03) */
.cl-map-section > .cl-section-header{
  width:clamp(300px,30vw,440px);flex:none;margin-bottom:0;align-self:flex-start;
}
/* globe : occupe toute la droite, centré, plus gros */
.cl-map-wrap{
  flex:1;min-width:0;margin:0;max-width:none;
  display:flex;justify-content:center;align-items:center;
}
/* Toggle 2D/3D — pill style like Ressources */
.cl-map-toggle{
  display:flex;justify-content:center;
  margin-top:clamp(24px,3vw,40px);
}
.cl-map-toggle-inner{
  display:inline-flex;position:relative;
  background:rgba(32,42,62,.04);
  border-radius:100px;padding:4px;
  border:1px solid rgba(32,42,62,.06);
}
.cl-toggle-btn{
  position:relative;z-index:2;
  font-family:var(--mu);font-size:13px;font-weight:500;
  letter-spacing:.04em;color:var(--t3);
  padding:10px 36px;border-radius:100px;
  cursor:pointer;transition:color .35s;
  background:none;border:none;
}
.cl-toggle-btn.is-active{color:var(--navy);font-weight:600}
.cl-toggle-slider{
  position:absolute;top:4px;left:4px;
  height:calc(100% - 8px);
  width:calc(50% - 4px);
  background:var(--cream);
  border-radius:100px;
  box-shadow:0 2px 8px rgba(32,42,62,.08);
  transition:transform .4s var(--ease);
  z-index:1;
}
.cl-map-toggle-inner[data-active="3d"] .cl-toggle-slider{
  transform:translateX(100%);
}
/* 2D flat map */
.cl-map-2d{display:flex;justify-content:center}
.cl-map-2d img{width:100%;max-width:1400px}
/* 3D globe */
.cl-globe-container{
  position:relative;width:100%;max-width:700px;margin:0 auto;
  aspect-ratio:1;
  opacity:0;
  transition:opacity 1.2s ease;
}
.cl-globe-container.visible{opacity:1}
.cl-globe-container canvas{
  width:100%!important;height:100%!important;
  display:block;
}
.cl-count{
  font-family:var(--ep);font-weight:500;color:var(--accent);
}

/* ── CTA Pre-footer — Ken Burns ── */
@keyframes ctaKenBurns{
  0%  {transform:scale(1)    translate(0,0)}
  40% {transform:scale(1.07) translate(-1.2%,-0.8%)}
  100%{transform:scale(1.04) translate(1.2%,0.6%)}
}

@media(max-width:1200px){
  .cl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cl-toggle-btn{padding:8px 28px;font-size:12px}
}
@media(max-width:600px){
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-map-section{padding:clamp(40px,6vw,60px) var(--pad)}
}
@media(max-width:400px){
  .cl-grid{grid-template-columns:minmax(0,1fr)}
}



/* ═══ CARTE DES OPÉRATIONS — France trait fin + points, panneau typographique ═══ */
.ops{background:var(--navy-3);color:var(--cream);min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(64px,8vh,88px) var(--pad)}
.ops-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;column-gap:clamp(48px,6vw,110px);
  margin-top:clamp(20px,3vh,36px)}
.ops-map{margin:0;min-width:0;transform:translateY(-30px)}
.ops-svg{width:100%;max-width:min(700px, calc(100vh - 300px));height:auto;display:block;margin-inline:auto;overflow:visible}
.ops-outline{fill:none;stroke:rgba(247,245,243,.2);
  stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* points : un cœur ; le point ACTIF émet une onde pulsante — MÊME animation
   que les nœuds de la veille (@keyframes opsPulse ≡ vlPing : anneau 1→3.4,
   fondu à 70 %, 3.2s). Les points inactifs restent un simple cœur. */
.ops-dot{cursor:pointer}
.ops-dot circle{transform-box:fill-box;transform-origin:center}
/* PAS de transition sur r : le rayon est recalculé à chaque frame par le JS
   pendant le zoom — une transition CSS le fait traîner (points géants à l'arrivée) */
.ops-dot .ops-core{fill:var(--accent);transition:fill .3s}
/* non-scaling-stroke OBLIGATOIRE : sinon, au zoom Paris (viewBox minuscule) le
   trait d'1 unité devient gigantesque → l'anneau vire au disque géant.
   Pour reproduire l'épaississement de la veille (bordure qui grossit), on
   anime directement stroke-width (1px→3.4px, en px écran) en même temps que
   l'expansion — même rendu que la veille, à tous les niveaux de zoom. */
.ops-dot .ops-halo{fill:none;stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
@keyframes opsPulse{
  0%{transform:scale(1);stroke-width:1;opacity:.7}
  70%{transform:scale(3.4);stroke-width:3.4;opacity:0}
  100%{opacity:0}
}
.ops-dot:hover .ops-core{fill:var(--blue)}
.ops-dot.is-active .ops-core{fill:var(--blue)}
.ops-dot.is-active .ops-halo{stroke:var(--blue);animation:opsPulse 3.2s ease-out infinite}
.ops-label{font-family:var(--mu);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;fill:rgba(247,245,243,.55);opacity:0;transition:opacity .3s}
.ops-dot:hover .ops-label,.ops-dot.is-active .ops-label{opacity:1}
.ops-dot.is-active .ops-label{fill:var(--blue)}
@media(prefers-reduced-motion:reduce){
  .ops-dot.is-active .ops-halo{animation:none;opacity:0}
}

/* panneau : compteur fin, ville en très grand, méta capitales, détail gris */
.ops-panel{min-width:0;transform:translateY(-90px);   /* remonté : équilibre optique avec la carte */
  /* 2 px d'accent pleine opacité : la barre verticale du site, celle du
     liseré des prestations, des sur-titres et des liens. Ce trait était le
     seul à 1 px translucide — il ne se lisait pas comme les autres. */
  border-left:2px solid var(--accent);padding-left:clamp(20px,1.6vw,28px)}
.ops-count{display:none}
.ops-count #opsCur{font-size:clamp(30px,3.2vw,46px);font-weight:200;color:var(--blue);
  font-variant-numeric:tabular-nums}
.ops-tot{font-family:var(--mu);font-size:13px;font-weight:300;letter-spacing:.12em;
  color:rgba(247,245,243,.42);margin-left:8px}
.ops-ville{font-family:var(--ep);font-weight:400;
  font-size:clamp(19px,1.7vw,26px);line-height:1.15;color:var(--cream);margin:0 0 12px}
.ops-meta{font-family:var(--mu);font-size:clamp(10px,.75vw,11px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.ops-annee{color:rgba(247,245,243,.38);margin-left:16px}
.ops-detail{font-family:var(--mu);font-weight:300;font-size:16px;
  line-height:1.65;color:rgba(247,245,243,.66);margin:0 0 26px;max-width:46ch}
.ops-panel .ops-count,.ops-panel .ops-ville,.ops-panel .ops-meta,.ops-panel .ops-detail{
  transition:opacity .5s ease-in-out,transform .5s ease-in-out}   /* changement de ville : même courbe + même durée que l'apparition/disparition de la fiche */
.ops-panel.is-switching .ops-count,.ops-panel.is-switching .ops-ville,
.ops-panel.is-switching .ops-meta,.ops-panel.is-switching .ops-detail{
  opacity:0;transform:translateY(8px)}
.ops-nav{display:none}
.ops-arrow{width:34px;height:34px;border-radius:50%;background:none;
  border:1px solid rgba(247,245,243,.15);color:rgba(247,245,243,.55);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .3s}
.ops-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ops-arrow:hover{border-color:var(--accent);color:var(--cream)}

@media(max-width:900px){
  .ops-wrap{grid-template-columns:1fr;row-gap:36px}
  .ops-svg{max-width:440px}
  .ops-panel{transform:none}   /* empilé : pas de remontée */
}

/* ═══ VARIANTE 04 (test A/B) — comme le globe : rail texte à gauche centré
   verticalement (titre + détail d'opération sous un filet), carte plein droite ═══ */
.ops--v2{display:flex;flex-direction:row;align-items:center;
  gap:clamp(28px,3vw,56px);
  padding:clamp(48px,6vh,64px) var(--pad);
  position:relative;overflow:hidden}   /* symétrique → contenu centré ; relative+hidden → ancre et rogne le fond photo */

/* ═══ FOND PHOTOGRAPHIQUE VOILÉ ═══════════════════════════════════
   Une photo de la collection refs/ (villa, bureaux, hôtellerie, hôtel
   particulier) se révèle DERRIÈRE toute la section quand une opération est
   sélectionnée ; le type d'actif choisit l'image (JS). Voilée : opacité basse,
   léger flou + voile navy dégradé → subtil, texte toujours lisible. */
/* Toute la couche (image + voile) n'apparaît QU'au clic d'une opération : au repos
   .ops-bg est à opacité 0 → rien n'est peint, la section reste un navy homogène
   (aucun halo). .is-on est posée/retirée par le JS (showBg/hideBg). */
/* Fond photographique ABANDONNÉ : la section reste entièrement navy (la carte
   est le seul focus). Le markup/JS restent en place mais rien n'est peint. */
.ops-bg{display:none!important}
.ops-bg.is-on{opacity:1}
/* photo floutée : matière de fond, un peu plus présente qu'auparavant */
.ops-bg-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transform:scale(1.05);filter:saturate(.85) blur(2px);
  transition:opacity .8s ease,transform 9s ease-out;will-change:opacity}
.ops-bg-pic.is-active{opacity:.18;transform:scale(1.02)}
/* voile navy À PLAT : palier CONSTANT sur tout le centre (aucune zone plus
   claire au milieu → impossible d'avoir un spot/halo), qui ne fond vers le navy
   plein qu'aux bords (pas de couture avec les sections voisines). */
.ops-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(135% 135% at 50% 50%,
    rgba(19,27,42,.72) 0%,
    rgba(19,27,42,.72) 58%,
    rgba(19,27,42,.85) 80%,
    var(--navy-3) 100%)}
.ops--v2 .ops2-rail,.ops--v2 .ops2-mapcol{position:relative;z-index:1}   /* contenu au-dessus du fond */
@media(prefers-reduced-motion:reduce){
  .ops-bg-pic{transition:opacity .6s ease;transform:none;filter:saturate(.95) blur(.5px)}
  .ops-bg-pic.is-active{transform:none}
}
.ops2-rail{width:clamp(300px,30vw,440px);flex:none;align-self:flex-start}   /* même largeur que l'en-tête du globe → cartes et sélecteur alignés sur le même axe */
/* liste texte des opérations (gravée au build pour le SEO ; la carte reste le focus).
   Section SOMBRE → texte crème, comme le reste de la section. */
/* Liste des opérations : gravée dans le HTML au build pour le SEO et les
   lecteurs d'écran, mais JAMAIS affichée — la carte interactive est la seule
   représentation visuelle (masquage « sr-only » : le texte reste indexable). */
.ops2-list{list-style:none;margin:0;padding:0;
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ops--v2 .cl-section-header{margin-bottom:0;width:auto}
/* cartouche : position FIXE dans le creux atlantique (golfe de Gascogne),
   en % de la carte → suit toutes les tailles d'écran, zéro JS */
.ops--v2 .ops-panel{position:absolute;left:-20%;top:57%;width:340px;margin:0;
  padding:2px 0 0 20px;transform:none;border-left:2px solid var(--accent);
  opacity:0;pointer-events:none;translate:0 8px;
  transition:opacity .5s ease-in-out,translate .5s ease-in-out}   /* courbe SYMÉTRIQUE (ease-in-out) : apparition et disparition perçues à vitesse identique — var(--ease) est un ease-out qui faisait traîner la disparition */
.ops--v2 .ops-panel.is-shown{opacity:1;pointer-events:auto;translate:0 0}
.ops--v2 .ops-ville{font-family:var(--ep);font-weight:400;
  font-size:clamp(19px,1.7vw,26px);line-height:1.15;margin:0 0 12px}
/* écho du point actif : une puce identique au point relie le texte à la ville */
.ops--v2 .ops-ville::before{content:'';display:inline-block;width:9px;height:9px;
  border-radius:50%;background:var(--blue);margin-right:12px;vertical-align:4px}
.ops--v2 .ops-meta{font-size:clamp(10px,.75vw,11px);letter-spacing:.14em;margin:0 0 14px}
.ops--v2 .ops-detail{font-size:16px;line-height:1.65;margin:0 0 10px;max-width:none}
.ops--v2 .ops-nav{display:none}   /* pas de flèches : carrousel auto + clic sur les points */
.ops2-mapcol{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2vw,30px)}   /* relative → ancre le bouton France (absolu) sans toucher au centrage de la carte */
/* bouton « France » (retour) : visible SEULEMENT sur la vue Paris, centré sous la carte.
   position:absolute → HORS FLUX : son apparition ne décale JAMAIS la carte (qui reste centrée). */
.ops-seg{position:absolute;left:0;right:0;bottom:clamp(6px,2.5vh,26px);
  display:flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}   /* pleine largeur + flex center → bouton pile sur l'axe de la carte, sans transform (immunisé contre l'animation de révélation) */
.ops-seg.is-on{opacity:1;pointer-events:auto}   /* activé en JS au moment de l'éclosion des points (pas au début du zoom) */
.ops-seg button[data-lvl="paris"]{display:none}   /* seul « France » apparaît */
.ops-seg button{display:flex;flex-direction:column;align-items:center;text-align:center;background:none;border:0;padding:0;cursor:pointer}
/* même police que le nom de pays sur le globe (.gl-caption) */
.ops-seg-lab{font-family:var(--mu);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:rgba(247,245,243,.5);white-space:nowrap;transition:color .3s}
.ops-seg-bar{display:none}
.ops-seg button:hover .ops-seg-lab{color:var(--blue)}   /* gris par défaut → bleu au survol */
.ops-seg button.is-active .ops-seg-lab{color:rgba(247,245,243,.5)}
.ops--v2 .ops-map{transform:none;margin:0;width:100%}
.ops--v2 .ops-svg{max-width:min(980px,calc((100vh - 210px)*1.20));overflow:visible}   /* centrée verticalement dans sa section (plus de décalage) ; débordement LIBRE pendant le vol → coupée seulement aux bords de la page */
/* sous ~1500px : plus assez d'océan → on empile (titre, carte, texte SOUS la carte),
   le texte n'est JAMAIS sur la carte */
@media(max-width:1500px){
  .ops--v2{flex-direction:column;align-items:flex-start}
  .ops2-rail{width:100%}
  .ops--v2 .ops2-mapcol{width:100%;justify-content:flex-start}
  .ops--v2 .ops-svg{max-width:min(560px,62vh);transform:none}
  .ops--v2 .ops-panel{position:static;left:auto;top:auto;width:100%;max-width:520px;margin-top:24px}
}



/* bouton de zoom manuel - coin de la carte */
.ops-map{position:relative}
.ops-back{position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:6px 2px;cursor:pointer;
  font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,243,.5);
  opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s}
.ops-back svg{width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ops-back:hover{color:var(--cream)}
.ops-map.is-idf .ops-back{opacity:1;transform:none;pointer-events:auto}
/* V2 : le bouton retour vit DANS le cartouche, sous le détail d'opération */
.ops--v2 .ops-back{position:static;left:auto;top:auto;margin-top:16px;padding:8px 0 0;transform:none;display:none}
.ops--v2 .ops-map.is-idf .ops-back{display:inline-flex;opacity:1;pointer-events:auto}

/* mouvement de caméra : contour France + détail IdF superposés, opacité pilotée en JS */
.ops-map{position:relative}
.ops-svg{width:100%;max-width:min(700px, calc(100vh - 300px));height:auto;display:block;margin-inline:auto;overflow:visible}
.ops-layer--idf{opacity:0}
.ops-layer--paris{opacity:0}
/* arrondissements de Paris : même trait que la France / l'IdF / le globe */
.ops-paris-dep{fill:none;stroke:rgba(247,245,243,.2);
  stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* mesh : chaque frontière n'est tracée qu'une fois (arêtes dédupliquées),
   donc le trait est STRICTEMENT identique à la France et au globe */
.ops-idf-dep{fill:none;stroke:rgba(247,245,243,.2);
  stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* zone de hit invisible : un clic DANS la région ne dézoome pas ;
   hors région, le curseur signale le retour France */
/* pointer-events:none — au zoom Paris ce chemin déborde du viewBox (overflow visible) et
   recouvrait le sélecteur ; la nav se fait via le sélecteur + les points, plus besoin du hit */
.ops-idf-hit{fill:transparent;stroke:none;pointer-events:none;cursor:default}
/* les tracés (contour France, mailles IdF/Paris) débordent du viewBox au zoom et
   captaient les clics AU-DESSUS du sélecteur (pointer-events reste actif même à opacité 0) :
   on les rend non cliquables — seuls les points et agrégats restent interactifs */
.ops-outline,.ops-idf-dep,.ops-paris-dep{pointer-events:none}
/* PERF : pendant le vol de caméra (zoom viewBox), rendu sans anti-aliasing → re-rastérisation
   du maillage bien plus rapide, donc mouvement fluide. Retour au rendu net à l'arrivée. */
.ops-map.is-flying .ops-outline,.ops-map.is-flying .ops-idf-dep,.ops-map.is-flying .ops-paris-dep{shape-rendering:optimizeSpeed}
.ops-map.is-idf .ops-svg{cursor:zoom-out}
.ops-dot{transition:opacity .7s var(--ease)}   /* fondu collectif des points IdF après le zoom */

/* marqueur d'agrégat Île-de-France — en GRIS (registre texte, pas accent) :
   ce n'est pas une opération, juste une porte d'entrée vers le zoom */
.ops-cluster{cursor:pointer;transition:opacity .3s var(--ease)}
/* le marqueur ne « disparaît » pas : il SE CONTRACTE pendant que la caméra plonge
   (continuité de matière), et ré-éclot en douceur à la fin du retour */
.ops-cluster.is-hidden{opacity:0;pointer-events:none}
.ops-cluster-core{fill:rgba(247,245,243,.55);transition:fill .3s,transform .35s var(--ease);
  transform-box:fill-box;transform-origin:center}
.ops-cluster.is-hidden .ops-cluster-core{transform:scale(.4)}
.ops-cluster-lab{font-family:var(--mu);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;fill:rgba(247,245,243,.55);transition:fill .3s}
.ops-cluster:hover .ops-cluster-core,.ops-cluster:hover .ops-cluster-lab{fill:var(--cream)}

/* ZONE-territoire cliquable : DISCRÈTE par défaut (fine silhouette, pas de remplissage
   → le regard reste sur le reste du pays), elle ne s'anime en bleu qu'au survol.
   fill transparent + pointer-events:all → toute la surface reste cliquable. */
.ops-zone{fill:transparent;stroke:rgba(247,245,243,.2);stroke-width:1;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;pointer-events:all;cursor:pointer;
  transition:fill .3s var(--ease),stroke .3s var(--ease),opacity .35s var(--ease)}
.ops-zone:hover{fill:rgba(139,163,217,.2);stroke:var(--blue)}
.ops-zone.is-hidden{opacity:0;pointer-events:none}
.ops-paris-shape,.ops-gp-shape{display:none}   /* porteurs de données (contours extérieurs) recopiés par les zones, non rendus */

/* ═══ GLOBE — projection orthographique (d3-geo), rotation auto + glisser,
   nom du pays au survol. Trait aligné sur les cartes France/monde. ═══ */
.gl-map{position:relative;margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
.gl-svg{width:min(650px, calc(100vh - 250px), 100%);height:auto;display:block;margin-inline:auto;overflow:visible;cursor:grab;touch-action:none}
.gl-svg.is-grabbing{cursor:grabbing}
.gl-atmo{pointer-events:none}
.gl-sphere{fill:rgba(19,27,42,.55);stroke:rgba(247,245,243,.3);stroke-width:1}
.gl-grat{fill:none;stroke:rgba(247,245,243,.07);stroke-width:.6}
.gl-base{fill:none;stroke:rgba(247,245,243,.2);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gl-on path{fill:rgba(139,163,217,.5);stroke:rgba(247,245,243,.2);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .25s}
.gl-on path:hover,.gl-on path.is-hi{fill:rgba(191,205,240,.85)}
.gl-caption{position:absolute;top:100%;left:0;right:0;text-align:center;   /* HORS FLUX : le globe se centre seul dans sa section (la légende ne le pousse plus vers le haut) */
  font-family:var(--mu);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,245,243,.5);margin:8px 0 0;
  line-height:20px;min-height:20px;
  transition:color .25s}
.gl-caption.is-active{color:var(--blue)}

/* ═══════════════════════════════════════════════════════════════
   THÈME SOMBRE — PAGE CLIENTS (tout en navy, comme les autres pages)
   Bloc de surcharge en fin de fichier : gagne par l'ordre de cascade.
   ═══════════════════════════════════════════════════════════════ */
body{background:var(--navy-3);color:var(--cream)}
.clients-full{background:var(--navy-3)}
.cl-map-section{background:var(--navy-3)}

/* En-têtes de section : titre crème, italique bleu, sous-titre gris */
.cl-section-title{color:var(--cream)}
.cl-section-title em{color:var(--blue)}
.cl-section-sub{color:rgba(247,245,243,.6)}
.cl-count{color:var(--blue)}

/* Cartes : filet fin clair, dos navy-2, textes crème */
.cl-card{border-color:transparent}
.cl-card.is-dealt:hover{box-shadow:0 14px 44px rgba(0,0,0,.35);border-color:transparent}
.cl-card-back{background:var(--navy-2)}
.cl-card-title{color:var(--cream)}
.cl-card-back .cl-card-back-title{color:var(--cream)}
.cl-card-desc,.cl-card-back .cl-card-desc{color:rgba(247,245,243,.6)}
.cl-card-num{color:rgba(247,245,243,.25)}
/* icônes : les traits « navy » (bâtiments) deviennent clairs ; l'accent reste */
.cl-card-icon [stroke="var(--navy)"]{stroke:rgba(247,245,243,.32)}
/* carte spéciale (Notaires) : se distingue par un fond un cran plus clair */
.cl-card--special{background:var(--navy-2);border-color:rgba(139,163,217,.3)}
.cl-card--special .cl-card-front{background:var(--navy-2)}
.cl-card--special .cl-card-back{background:var(--navy-2)}

/* crantage des sections (même modèle que /expertises et /equipe) */
@media(min-width:921px){
  html:has(.clients-full){scroll-snap-type:y mandatory}
  html:has(.clients-full) .page-hero,
  html:has(.clients-full) .clients-full,
  html:has(.clients-full) .cl-map-section,
  html:has(.clients-full) .ops,
  html:has(.clients-full) .cta-prefooter{scroll-snap-align:start}
  html:has(.clients-full) .footer{scroll-snap-align:end}
}

/* ═══ TUILES CLIENTS AVEC IMAGE (fond photo + voile navy + titre) ═══ */
.cl-card--img .cl-card-front{padding:0;overflow:hidden;display:block}
.cl-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform .7s var(--ease);backface-visibility:hidden}
.cl-card--img:hover .cl-card-img{transform:scale(1.06)}
.cl-card-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,27,42,.92) 0%,rgba(19,27,42,.5) 38%,rgba(19,27,42,.12) 100%);
  transition:opacity .4s var(--ease)}
.cl-card--img .cl-card-num{display:none}
.cl-card--img .cl-card-title{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(12px,1.4vw,20px);text-align:left;color:rgba(247,245,243,.78);   /* adouci au repos → moins « pétant » */
  text-shadow:0 1px 16px rgba(10,15,26,.85),0 1px 4px rgba(10,15,26,.7);   /* halo sombre → titre lisible même sur la photo en couleur (survol) */
  font-family:var(--ep);font-weight:400;font-size:clamp(13px,1.15vw,17px);line-height:1.25;
  transition:color .4s var(--ease)}

/* ═══ TUILES CLIENTS v2 — survol = la photo passe en COULEUR (monochrome au
   repos). Titre visible en permanence, aucun panneau descriptif. ═══ */
.cl-card--img{transform-style:flat;overflow:hidden}
.cl-card--img.is-dealt.is-open{transform:none}      /* pas de flip 3D au tap */
.cl-card--img.is-dealt:hover{transform:translateY(-4px)}
/* image : désaturée + assombrie au repos → couleur pleine + léger zoom au survol */
.cl-card--img .cl-card-img{filter:grayscale(1) brightness(.62) contrast(1.03);
  transition:filter .6s var(--ease),transform .7s var(--ease)}
.cl-card--img:hover .cl-card-img,.cl-card--img.is-open .cl-card-img{filter:none;transform:scale(1.05)}
/* voile plus léger au survol : la couleur respire, le titre reste lisible */
.cl-card--img:hover .cl-card-scrim,.cl-card--img.is-open .cl-card-scrim{opacity:.55}
/* titre toujours affiché, ancré en bas — pas de panneau descriptif sur ces tuiles */
.cl-card--img .cl-card-title{opacity:1}
/* survol : le titre passe en crème plein (en écho à la photo qui reprend ses couleurs) */
.cl-card--img:hover .cl-card-title,.cl-card--img.is-open .cl-card-title{color:var(--cream)}
.cl-card--img .cl-card-back{display:none}