/* ═══════════════════════════════════════════════════════════
   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;
  --navy:#202A3E;
  --navy-2:#2C3A54;
  --navy-3:#131B2A;
  --accent:#8BA3D9;
  --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,.58);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;color:rgba(247,245,243,.15);letter-spacing:.02em;padding-top:20px}

/* ═══════════════════════════════════════════════════════════
   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,.58);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,.58);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,.15);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,.15);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,.4);
}
@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,.3))}
  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:var(--pad);bottom:40px;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 1.3fr;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,.15);
  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 1.3fr;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 1.3fr;
  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 .cta-circle{
  width:40px;height:40px;border-radius:50%;
  background:rgba(139,163,217,.12);display:flex;align-items:center;justify-content:center;
  transition:background .3s;
}
.partners-link:hover .cta-circle{background:var(--accent)}
.partners-link .cta-circle svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2;fill:none}
.partners-link:hover .cta-circle svg{stroke:var(--navy)}

/* 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,.58);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 .cta-circle{
  width:40px;height:40px;border-radius:50%;
  background:rgba(139,163,217,.15);display:flex;align-items:center;justify-content:center;
  transition:background .3s;
}
.partners-right-link:hover .cta-circle{background:var(--accent)}
.partners-right-link .cta-circle svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2;fill:none}
.partners-right-link:hover .cta-circle svg{stroke:var(--navy)}

/* ═══════════════════════════════════════════════════════════
   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 1.3fr;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
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   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{
  background:var(--navy-3);
  padding:clamp(160px,18vw,220px) var(--pad) clamp(60px,8vw,100px);
  position:relative;overflow:hidden;
}
.page-hero-breadcrumb{
  position:relative;z-index:1;
  font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream);margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}
.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(40px,6vw,64px);
  font-weight:200;color:var(--cream);line-height:1.1;
}
.page-hero-title em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400}
.page-hero-line{display:block;width:36px;height:1px;background:var(--accent);margin-top:clamp(16px,2vw,28px);position:relative;z-index:1}
.page-hero-sub{
  position:relative;z-index:1;
  font-family:var(--mu);font-size:clamp(15px,1.3vw,17px);font-weight:300;
  color:rgba(247,245,243,.58);line-height:1.8;max-width:560px;margin-top:24px;
}
.page-hero-shapes{
  position:absolute;right:clamp(60px,8vw,120px);bottom:0;width:clamp(220px,25vw,380px);height:70%;
  pointer-events:none;overflow:visible;opacity:.85;
}
.page-hero-shapes svg{
  position:absolute;bottom:0;right:0;width:100%;height:100%;
}
.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,.25);r:10}
}
/* Page-hero constellation — 70% right of banner */
.page-hero-constellation{
  position:absolute;top:0;right:0;width:70%;height:100%;
  z-index:0;pointer-events:none;overflow:hidden;
}
.page-hero-constellation svg{width:100%;height:100%}
/* Identical styles to .hero-constellation */
.page-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;
}
.page-hero-constellation .cline-1{animation-delay:1.5s}
.page-hero-constellation .cline-2{animation-delay:2s}
.page-hero-constellation .cline-3{animation-delay:2.4s}
.page-hero-constellation .cline-4{animation-delay:2.8s}
.page-hero-constellation .cline-5{animation-delay:3.2s}
.page-hero-constellation .cline-6{animation-delay:3.5s}
.page-hero-constellation .cline-7{animation-delay:3.8s}
.page-hero-constellation .cline-8{animation-delay:4.1s}
.page-hero-constellation .cline-9{animation-delay:4.4s}
.page-hero-constellation .cnode{
  fill:rgba(139,163,217,.5);opacity:0;
  animation:nodeIn .5s ease forwards, nodePulse 4s ease-in-out infinite;
}
.page-hero-constellation .cnode-1{animation-delay:1.5s,5s}
.page-hero-constellation .cnode-2{animation-delay:1.8s,5.3s}
.page-hero-constellation .cnode-3{animation-delay:2.1s,5.6s}
.page-hero-constellation .cnode-4{animation-delay:2.4s,5.1s}
.page-hero-constellation .cnode-5{animation-delay:2.7s,5.4s}
.page-hero-constellation .cnode-6{animation-delay:3s,5.7s}
.page-hero-constellation .cnode-7{animation-delay:3.3s,5.2s}
.page-hero-constellation .cnode-8{animation-delay:3.6s,5.5s}
.page-hero-constellation .cnode-9{animation-delay:3.9s,5.8s}
.page-hero-constellation .cnode-10{animation-delay:4.2s,5.9s}
.page-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;
}

/* 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 1.3fr;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 1.3fr;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 1.3fr;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,.58);line-height:1.85;
}

/* ═══════════════════════════════════════════════════════════
   CLIENTS PAGE — expanded grid
   ═══════════════════════════════════════════════════════════ */
.clients-full{
  background:var(--cream);
  padding:clamp(80px,12vw,140px) var(--pad);
}
.clients-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);
}
.clients-grid .client-tile{width:auto;aspect-ratio:4/5}
.clients-intro{
  font-family:var(--mu);font-size:clamp(15px,1.3vw,17px);font-weight:300;
  color:var(--t2);line-height:1.85;max-width:680px;margin-bottom:clamp(40px,6vw,72px);
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — immersive premium layout
   ═══════════════════════════════════════════════════════════ */

/* Contact body */
/* ═══════════════════════════════════════════════════════════
   PAGE CONTACT — vidéo Paris plein écran + carte « Nous contacter »
   ═══════════════════════════════════════════════════════════ */
/* La gouttière de la barre de défilement est réservée en permanence : sans
   cela, l'apparition de la barre quand la carte du créneau dépasse la fenêtre
   réduisait la largeur utile de ~15 px et TOUTE la page se décalait d'un coup
   à la fin de l'animation. C'est ce décalage qu'on prenait pour un saut. */
html:has(.contact-hero){
  scrollbar-gutter:stable;
  /* Le défilement doux du site anime aussi les recalages imposés par le
     navigateur quand la hauteur du document change : sur cette page, ça
     parasitait l'animation de la carte. */
  scroll-behavior:auto;
}
/* L'ancrage de défilement cherche à garder un élément en place quand ce qui
   l'entoure change de taille : il se battait avec l'animation de hauteur. */
.contact-hero,.contact-card{overflow-anchor:none}

.contact-hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  /* Marges verticales ÉGALES (le centrage en dépend) et proportionnées à la
     hauteur de la fenêtre : à 105 px fixes, la carte du créneau (769 px) plus
     ses marges dépassaient la fenêtre d'une cinquantaine de pixels, une barre
     de défilement apparaissait pour presque rien et la page se décalait.
     À 7 vh, plus aucun débordement au-dessus de ~895 px de hauteur utile. */
  padding:clamp(24px,7vh,105px) var(--pad);
  overflow:hidden;
}
/* Fond : diaporama Ken Burns identique au hero de l'accueil
   (.hero-slideshow / .hero-slide stylés dans global.css) */
/* Voile navy bleuté (cohérent avec le hero d'accueil) */
.contact-hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(19,27,42,.62) 0%, rgba(19,27,42,.42) 38%, rgba(19,27,42,.66) 100%),
    linear-gradient(90deg, rgba(19,27,42,.55) 0%, rgba(19,27,42,.25) 55%, rgba(19,27,42,.45) 100%);
}
.contact-card{
  position:relative;z-index:2;
  /* Aucun défilement dans la carte : si elle dépasse la fenêtre, c'est la
     page entière qui défile (la section grandit avec elle). */
  width:min(94vw,600px);
  background:rgba(19,27,42,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(247,245,243,.1);
  border-radius:18px;
  --cw-pad:40px;          /* respiration extérieure = respiration intérieure */
  padding:var(--cw-pad);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
}
/* Trajet d'une hauteur à l'autre entre deux étapes du parcours — la classe
   est posée par morph() (contact-wizard.js) le temps de l'animation ;
   overflow:hidden évite qu'une barre de défilement clignote en route. */
.contact-card.cw.is-morph{overflow:hidden;transition:height .55s var(--ease)}
.contact-card-eyebrow{
  font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.contact-card-title{
  font-family:var(--ep);font-size:clamp(26px,3.2vw,40px);
  font-weight:200;color:var(--cream);line-height:1.08;
  margin-bottom:clamp(8px,1.4vw,14px);
}
.contact-card-title em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:300}
.contact-card-sub{
  font-family:var(--mu);font-size:clamp(12.5px,1vw,14px);
  font-weight:300;color:rgba(247,245,243,.72);line-height:1.55;
  margin-bottom:clamp(16px,2.2vh,24px);
}

/* ── Formulaire (thème sombre sur la carte navy) ── */
.ct-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:14px}
.ct-input{
  width:100%;padding:11px 0;background:transparent;border:none;
  border-bottom:1px solid rgba(247,245,243,.16);
  color:var(--cream);font-family:var(--mu);font-size:14px;font-weight:400;
  outline:none;transition:border-color .3s;
}
.ct-input:focus{border-color:var(--accent)}
.ct-input::placeholder{color:rgba(247,245,243,.4);font-weight:300}
.ct-select{appearance:none;cursor:pointer;color:rgba(247,245,243,.4);font-weight:300}
.ct-select.has-value{color:var(--cream)}
.ct-select option{background:var(--navy-3);color:var(--cream)}
.ct-textarea{resize:vertical;min-height:58px}
.ct-rgpd{
  font-family:var(--mu);font-size:clamp(10.5px,.9vw,11.5px);font-weight:300;
  color:rgba(247,245,243,.58);line-height:1.5;margin-bottom:16px;
}
.ct-submit{
  display:inline-flex;align-items:center;gap:14px;background:none;border:none;
  font-family:var(--mu);font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--cream);transition:color .3s;cursor:pointer;
}
.ct-submit:hover{color:var(--blue)}
.ct-submit .cta-circle{
  width:44px;height:44px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease);
}
.ct-submit:hover .cta-circle{transform:scale(1.08)}
.ct-submit .cta-circle svg{width:14px;height:14px;stroke:var(--navy);stroke-width:2;fill:none}
.ff{display:flex;flex-direction:column}
.ff.full{grid-column:1/-1}

/* ── Coordonnées du cabinet — « panneau en creux » ──
   Aucun trait pour séparer le bloc du parcours : un aplat presque
   invisible et un rayon de 2 px en font une autre matière. Même air
   au-dessus que partout ailleurs dans la carte (--cw-air). */
.contact-card-coords{
  display:flex;flex-direction:column;gap:9px;
  /* Les 5 px retirés sont ceux que le pied réserve sous son libellé pour
     le filet dessiné : sans cela l'air paraîtrait plus grand ici qu'ailleurs. */
  /* 5 px réservés au filet dessiné du pied + 1,2 px de blanc sous sa ligne de base */
  margin-top:calc(var(--cw-air,40px) - 6.2px);
  /* Le pavé gauche n'est pas choisi, il est calé : 14 + 16 (icône)
     + 12 (gouttière) = 42 px, soit exactement la colonne de texte des
     choix (2 px de retrait de .cw-chip + 24 px de numéro + 16 px de
     gouttière). L'adresse tombe donc sur la même verticale que
     « Particulier » — une seule ligne de texte pour toute la carte. */
  padding:20px 22px 20px 14px;border-radius:2px;
  background:rgba(247,245,243,.035);
}
.contact-card-coords a{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;
  color:rgba(247,245,243,.7);transition:color .3s;
}
.contact-card-coords a:hover{color:var(--blue)}
/* 16 px comme les bulles flottantes (.sidebar-icon) : à viewBox et
   stroke-width égaux, c'est la taille de rendu qui fixe l'épaisseur
   perçue — 18 px donnait des traits 12 % plus épais. */
.contact-card-coords svg{width:16px;height:16px;flex:none}
/* icônes identiques aux bulles latérales (Nav.astro) — forcées en bleu */
.contact-card-coords svg *{stroke:var(--accent);fill:none}
/* La carte est centrée verticalement — c'est la règle. On ne l'accroche en
   haut que si la fenêtre est vraiment trop courte pour la contenir : au-delà
   de ~900 px de haut, la carte du créneau (769 px + les marges de la section)
   tient tout entière, donc la page ne défile pas et le centrage n'entre en
   conflit avec rien. En dessous, la page défilerait et le recentrage
   permanent ferait sauter la lecture à chaque changement de hauteur. */
@media(max-height:900px){
  .contact-hero{align-items:flex-start}
}

@media(max-width:600px){
  .contact-hero{align-items:flex-start}
  .ct-form-grid{grid-template-columns:1fr}
}

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

@media(max-width:900px){
  .page-hero-shapes{display:none}
  .page-hero-constellation{display:none}
  .expertise-cards{grid-template-columns:1fr}
  .expertise-approach{grid-template-columns:1fr;gap:40px}
  .clients-grid{grid-template-columns:1fr 1fr}
  .ct-form-grid{grid-template-columns:1fr}
  .equipe-full .equipe-grid{grid-template-columns:1fr}
  .equipe-collab-grid{grid-template-columns:1fr}
  /* contact-grid & ct-right handled in dedicated responsive block above */
}

/* ═══════════════════════════════════════════════════════════
   CONTACT WIZARD — parcours guidé (icônes filaires + suivi)
   ═══════════════════════════════════════════════════════════ */
.contact-card.cw{width:min(94vw,600px)}

/* Le rembourrage haut est amputé des 4,4 px de blanc que l'Epilogue laisse
   au-dessus de ses capitales : sans cela le haut PARAÎT plus grand que le
   bas, qui s'arrête lui sur un bord franc. */
.contact-card.cw{padding-top:calc(var(--cw-pad) - 4.4px)}

/* Les hauteurs des quatre étapes sont volontairement calées les unes sur les
   autres (lignes de choix à 19 px de padding, zone de message à 190 px,
   compteur à 14 px) : elles tombent toutes à ~229 px, donc le rab sous le
   contenu est nul et l'espace avant « Continuer » vaut 40 px partout. */

/* ═══ RÈGLE DE MISE EN PAGE ═══════════════════════════════════
   DEUX hauteurs de carte, pas plus :
   · --cw-court, la petite — les deux questions ET le champ libre du message :
     tout ce qui tient en peu de place ;
   · --cw-base, la grande — le calendrier du rendez-vous et les coordonnées,
     plus les écrans du format et du rappel qui s'intercalent entre eux.
   L'étape 03 change de camp avec son contenu : petite avec le champ libre,
   grande avec le calendrier, qui dépasse naturellement le plancher court.
   Dans chaque groupe la carte ne bouge pas d'un écran à l'autre : le titre de
   rubrique, Retour / Continuer et le cadre des coordonnées restent en place.
   Entre les deux, morph() anime le passage. Le rab tombe sous le contenu de
   l'étape — seul endroit possible dès lors que tout ce qui suit est fixé. */
.cw-step{min-height:var(--cw-court,0px)}
.cw-step.is-grand{min-height:var(--cw-base,0px)}

/* En-tête d'étape : le NUMÉRO tient lieu de progression (la barre du pied a
   été supprimée) et sert de retour dès l'étape 2. Il est aligné sur le bord
   droit de la carte — même verticale que « Continuer » / « Envoyer ». */
/* La marge inférieure passe du titre à l'en-tête : sur le titre, elle
   gonflait la boîte marginale et décalait le numéro vers le bas. */
/* L'écart en-tête → contenu est porté par ce seul endroit : --cw-air. Les
   blocs de tête d'étape (calendrier, message, coordonnées) ne rajoutent donc
   aucune marge — l'air est rigoureusement le même à chaque étape. */
.contact-card.cw{
  /* UN SEUL écart vertical dans toute la carte : titre → rubrique,
     rubrique → contenu, contenu → pied, pied → coordonnées. Une valeur
     fixe, pas un clamp : l'uniformité passe avant l'adaptation. */
  --cw-air:40px;
  /* Le blanc sous le grand titre, réglable à part — c'est la valeur VUE. */
  --cw-air-titre:60px;
  /* ── Échelle typographique de la carte ──
     Trois registres, et rien entre les deux : le CONTENU (choix, saisie,
     jours, heures, coordonnées, récapitulatif) à une seule taille ; les
     ÉTIQUETTES et réglages en micro-capitales ; les MENTIONS secondaires
     (RGPD, précisions sous un choix, délais). Les seuls écarts sont les
     titres : « Nous contacter », la confirmation, la question du format. */
  /* 15 px, pas 15,5 : au-delà, « Professionnels de l'immobilier » passe sur
     deux lignes dans la carte à 327 px de large (mobile 375). Mesuré. */
  --cw-txt:15px;      /* contenu */
  --cw-lab:10.5px;    /* étiquettes / réglages */
  --cw-fine:11.5px;   /* mentions secondaires */
}
.cw-head{display:flex;align-items:center;gap:16px;margin-bottom:calc(var(--cw-air) - 4.3px)}   /* blanc sous la ligne de base des micro-capitales */
.cw-head .cw-q{margin-bottom:0}
/* Le numéro est un repère, pas un contrôle : le retour vit au pied de la
   carte (.cw-pied). Il reste donc gris et non cliquable.
   Alignement : les deux textes sont des capitales de tailles différentes
   (12 et 10,5 px) posées sur la même ligne de base — le plus petit paraît
   alors assis un peu bas. On le centre sur le MILIEU DES CAPITALES du
   titre en le remontant de la demi-différence de hauteur de capitale. */
.cw-step-n{
  flex:none;margin-left:auto;
  font-family:var(--mu);font-size:var(--cw-lab);font-weight:700;
  letter-spacing:.14em;color:rgba(247,245,243,.32);
  /* 0,3525 = la moitié de la hauteur de capitale de Mulish (0,705 em) :
     la remontée vaut donc (cap du titre − cap du numéro) / 2. */
  transform:translateY(calc((var(--cw-lab) - 12px) * 0.3525));
}
/* Grand titre permanent — même recette que .hb-title (titres de bandeaux) :
   Epilogue 300, interlignage 1.12, crénage -.01em, em en bleu */
/* Le titre a son propre écart : --cw-air-titre, plus généreux que les trois
   autres jonctions, parce qu'un titre de 40 px demande plus de blanc qu'un
   filet. La valeur est celle qu'on VOIT : la marge en est amputée du blanc
   que l'Epilogue laisse sous sa ligne de base (0,264 em) et de celui que les
   micro-capitales laissent au-dessus des leurs (4,3 px). */
.cw-title{font-family:var(--ep);font-weight:300;line-height:1.12;letter-spacing:-.01em;font-size:clamp(30px,3.4vw,42px);color:var(--cream);margin-bottom:calc(var(--cw-air-titre) - .264em - 4.3px)}
.cw-title em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--blue)}

/* Étapes */
.cw-step{display:none}
/* Fondu seul — aucun déplacement vertical : le contenu ne « saute » pas
   d'une étape à l'autre. La hauteur de la carte, elle, est animée en
   douceur par le JS (voir .contact-card.cw ci-dessous). */
/* flow-root et non block : l'étape contient les marges de ses enfants. Sans
   cela, la marge basse de la mention légale s'échappait de l'étape en flux
   mais pas hors flux — l'étape était donc mesurée d'une hauteur et rendue
   d'une autre, et les coordonnées dépassaient le créneau de neuf pixels. */
.cw-step.is-active{display:flow-root;animation:cwIn .4s var(--ease)}
@keyframes cwIn{from{opacity:0}to{opacity:1}}
/* Intitulé d'étape — forme « lien à barre » du site (hero « Nous contacter »,
   pré-footer « Échangeons ») : barre verticale accent de 2 px à gauche +
   libellé en petites capitales espacées. Voir links.css §3. */
.cw-q{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mu);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.3;color:var(--cream);margin-bottom:26px;
}
.cw-q[hidden]{display:none}   /* inline-flex écraserait sinon l'attribut hidden */
.cw-q::before{content:'';flex:none;width:2px;height:15px;background:var(--accent)}
.cw-q em{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit}
.cw-q em{font-style:normal;color:var(--blue)}
/* Sous-titre d'étape — calé sur .hb-lead (Mulish 300, interlignage 1.75) */
.cw-sub{font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;color:rgba(247,245,243,.6);line-height:1.75;max-width:46ch;margin-bottom:clamp(20px,3vh,28px)}

/* Chips (profil / objet) */
/* La liste descend de huit pixels et le pied remonte d'autant : au repos, le
   blanc sous l'intitulé de rubrique valait 37 px et celui sous le dernier
   filet 54, parce que le pied ajoute son propre air à celui de la liste. Les
   deux respirations se valent maintenant, et la carte ne bouge pas. */
.cw-chips{display:flex;flex-direction:column;gap:0;margin-top:8px;margin-bottom:-8px}
/* Écart titre → puces quand il n'y a pas de sous-titre (étapes 1 & 2) */
.cw-q + .cw-chips{margin-top:0}
/* Même vocabulaire que le MENU PLEIN ÉCRAN du site (.menu-idx/.menu-txt) :
   index accent + libellé Epilogue, survol = texte accent + léger crénage.
   Aucun décalage, aucun trait animé — seule l'échelle change. */
.cw-chip{display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;padding:19px 2px;border:none;border-radius:0;border-bottom:1px solid rgba(247,245,243,.08);background:none;cursor:pointer}
.cw-chip:first-child{border-top:1px solid rgba(247,245,243,.08)}
.cw-chip-num{flex:none;min-width:24px;font-family:var(--mu);font-size:var(--cw-lab);font-weight:600;letter-spacing:.1em;color:var(--accent)}
/* Exactement la même fonte que les coordonnées — Mulish 14 px, graisse 300 —
   seule la couleur change (crème ici, crème à 70 % là). */
.cw-chip-label{font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;line-height:1.3;color:var(--cream);transition:color .2s,letter-spacing .3s var(--ease)}
.cw-chip:hover .cw-chip-label,.cw-chip.is-sel .cw-chip-label{color:var(--accent);letter-spacing:.01em}
.cw-chip-go{display:none}

/* Champs (coordonnées + message) */
/* Quatre rangées et non deux : l'adresse et le téléphone ont chacun leur ligne.
   Le bloc des champs remonte de vingt pixels — l'air sous l'intitulé de
   rubrique était le double de celui qui sépare deux lignes de saisie — et ces
   vingt pixels reviennent aux rangées, qui respirent d'autant. La carte, elle,
   ne bouge pas d'un pixel. */
.cw-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:-2px}
.cw-field{position:relative}
.cw-field.full{grid-column:1/-1}
.cw-field input,.cw-field textarea{width:100%;padding:8px 0 6px;background:transparent;border:none;border-bottom:1px solid rgba(247,245,243,.18);color:var(--cream);font-family:var(--mu);font-size:var(--cw-txt);outline:none;transition:border-color .3s}
/* Zone de message : trois fois la hauteur d'origine, et figée — la poignée
   de redimensionnement du navigateur cassait le cadre de la carte.
   1 000 signes : de quoi exposer une situation sans écrire un mémoire,
   le détail se dira au rendez-vous. Le compteur reste dans le registre
   des étiquettes et ne s'allume qu'aux cent derniers signes. */
/* Le champ libre occupe tout ce que la petite hauteur de carte lui laisse :
   l'air sous le compteur vaut alors exactement celui qui sépare l'intitulé de
   rubrique du libellé du champ. Au-delà, l'étape du message deviendrait une
   troisième taille de carte, entre les questions et le calendrier. */
.cw-field textarea{resize:none;height:205px;min-height:205px}
/* Le parcours rendez-vous n'a pas de champ libre : il est simplement retiré
   (l'objet de l'entretien se précise en répondant à l'accusé de réception). */
.cw-field[hidden]{display:none}
.cw-count{
  display:block;margin-top:14px;text-align:right;
  font-family:var(--mu);font-size:var(--cw-lab);font-weight:600;
  letter-spacing:.14em;color:rgba(247,245,243,.26);
  transition:color .3s;
}
.cw-count.is-pres{color:var(--accent)}

.cw-field label{position:absolute;left:0;top:8px;font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;color:rgba(247,245,243,.58);pointer-events:none;transition:all .3s var(--ease)}
.cw-field input:focus,.cw-field textarea:focus{border-color:var(--accent)}
/* Remplissage automatique du navigateur : on masque le bouton « contacts »
   (la pastille bleue de Chrome/Safari) et on neutralise le fond jaune, qui
   casseraient tous deux le rendu sombre de la carte. */
.cw-field input::-webkit-contacts-auto-fill-button,
.cw-field input::-webkit-credentials-auto-fill-button{
  visibility:hidden;display:none!important;pointer-events:none;
  position:absolute;right:0;height:0;width:0;margin:0;
}
.cw-field input:-webkit-autofill,
.cw-field input:-webkit-autofill:hover,
.cw-field input:-webkit-autofill:focus,
.cw-field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--cream);
  caret-color:var(--cream);
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 9999s ease-in-out 0s;   /* neutralise le fond jaune */
}
/* Champs d'identité : l'intitulé remonte au-dessus du champ — c'est la seule
   chose qui nomme encore la valeur une fois saisie. */
.cw-field input:focus~label,
.cw-field input:not(:placeholder-shown)~label{top:-13px;font-size:var(--cw-lab);letter-spacing:.05em;color:var(--accent);font-weight:600}
/* Message : l'intitulé tient lieu de repère dans la zone et s'effface à la
   frappe. Rien ne vient se poser au-dessus du champ. */
.cw-msg textarea:focus~label,
.cw-msg textarea:not(:placeholder-shown)~label{opacity:0}
.cw-field.cw-invalid input,.cw-field.cw-invalid textarea{border-color:var(--rose)}
/* Le blanc sous le compteur ne peut pas descendre en dessous de l'air du pied,
   commun à tout le parcours : c'est donc au-dessus du champ qu'on ajoute de
   quoi équilibrer, pour que l'écart intitulé → libellé égale l'écart
   compteur → bouton. */
.cw-msg{margin-top:-6px;margin-bottom:-12px}

/* Modes de recontact */
.cw-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:6px}
.cw-mode{padding:16px 12px;border:1px solid rgba(247,245,243,.14);border-radius:15px;background:rgba(247,245,243,.03);text-align:center;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.cw-mode:hover{border-color:var(--accent);transform:translateY(-3px)}
.cw-mode.is-active{border-color:var(--accent);background:rgba(139,163,217,.13)}
.cw-mode-ico{width:44px;height:44px;margin:0 auto 11px;border-radius:12px;background:rgba(139,163,217,.13);display:flex;align-items:center;justify-content:center;transition:background .3s}
.cw-mode-ico svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.cw-mode.is-active .cw-mode-ico{background:var(--accent)}
.cw-mode.is-active .cw-mode-ico svg{stroke:var(--navy-3)}
.cw-mode-t{display:block;font-family:var(--mu);font-size:var(--cw-txt);font-weight:600;color:var(--cream);margin-bottom:2px}
.cw-mode-d{display:block;font-family:var(--mu);font-size:var(--cw-fine);font-weight:300;color:rgba(247,245,243,.5);line-height:1.35}

/* ═══════════════════════════════════════════════════════════
   CRÉNEAUX (mode RDV) — calendrier mensuel + colonne des heures
   Le format n'est pas une rubrique : deux mots en bout de titre.
   Aucun sous-titre, hauteur bornée, deux clics pour réserver.
   ═══════════════════════════════════════════════════════════ */
/* Barre de réglages : le mois seul, séparé du calendrier par un filet.
   Le format du rendez-vous n'est plus demandé ici (voir .cw-modal).
   Aucune marge haute : l'écart à l'en-tête vient de --cw-air, comme aux
   autres étapes. */
.cr-bar{
  /* Le calendrier respire comme le champ libre : autant d'air entre l'intitulé
     de rubrique et la barre des mois qu'entre le libellé du message et son
     titre. Les cases paient la différence (39 px au lieu de 42) pour que la
     carte n'y gagne pas un pixel. */
  margin-top:8.6px;
  margin-bottom:clamp(16px,2.2vh,22px);
}
.cr{margin-top:18px}
/* La grille réserve six rangées, et la dernière n'est presque jamais pleine :
   sous le dernier chiffre, il reste une demi-case vide qui s'ajoute à l'air du
   pied. À l'œil, le calendrier paraissait donc collé en haut et flottant en
   bas. On reprend cette demi-case pour que le blanc au-dessus du calendrier et
   celui sous le dernier jour se valent — mesuré d'encre à encre, pas de boîte
   à boîte, car ce sont les chiffres que l'on voit, pas les cases. */
.cr{margin-bottom:-18.7px}

/* Choix du mois — centré, tenu entre deux filets qui courent jusqu'aux
   bords de la carte : la forme d'un titre de partie, mais dans le registre
   des étiquettes du site (Mulish micro-capitales, actif en accent).
   Aucun Epilogue ici : le site le réserve aux titres de contenu. */
.cr-mtabs{display:flex;align-items:center;justify-content:center;gap:18px}
.cr-mtabs::before,.cr-mtabs::after{
  content:'';flex:1;height:1px;background:rgba(247,245,243,.1);
}
.cr-mtab{
  flex:none;
  font-family:var(--mu);font-size:var(--cw-lab);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,245,243,.3);transition:color .22s var(--ease);
}
.cr-mtab:hover{color:rgba(247,245,243,.65)}
.cr-mtab.is-sel{color:var(--blue)}

/* Calendrier à gauche, heures à droite */
/* 122 px : l'heure centrée (37 px) plus le glyphe vidéo posé à 8 px du bord
   droit. Ni l'intertitre supprimé ni aucun libellé ne commande plus cette
   largeur — seule la lisibilité du cadre le fait. */
.cr-msplit{display:grid;grid-template-columns:1fr 122px;gap:22px;align-items:start}
/* Six lignes TOUJOURS réservées : un mois sur cinq ou six semaines donne
   la même hauteur, la carte ne saute plus d'un mois à l'autre. */
.cr-mrow,.cr-mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
/* Six rangées toujours réservées : la grille a la même hauteur quel que soit
   le mois (voir renderCalendrier dans contact-wizard.js). */
.cr-mgrid{grid-template-rows:repeat(6,1fr)}
.cr-mhead span{
  text-align:center;padding-bottom:9px;
  font-family:var(--mu);font-size:var(--cw-lab);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,243,.22);
}
/* Hauteur de case fixée plutôt que carrée : à 7 colonnes, le carré donnait
   des cases de 51 px et un calendrier de 340 px de haut. 42 px suffisent au
   confort de visée et resserrent l'ensemble d'une soixantaine de pixels. */
.cr-md{
  height:39px;display:grid;place-items:center;border-radius:2px;
  /* graisse 300, comme les choix et les coordonnées : c'est le registre du
     contenu. La sélection, elle, passe en 700 pour rester lisible. */
  font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;color:rgba(247,245,243,.72);
  border:1px solid transparent;transition:all .18s var(--ease);
}
.cr-md:hover:not(.is-off):not(.is-empty){border-color:var(--accent);color:var(--cream)}
.cr-md.is-sel{background:var(--accent);border-color:var(--accent);color:var(--navy-3);font-weight:700}
.cr-md.is-off{color:rgba(247,245,243,.16);cursor:default}
.cr-md.is-empty{visibility:hidden}

/* Colonne des heures */
/* Aucun plafond ni défilement : la colonne reste plus courte que la grille
   du mois (six semaines réservées), et une variation éventuelle — un groupe
   visio qui s'ajoute, un jour plus fourni — est absorbée par l'animation de
   hauteur (morph(), contact-wizard.js). */
.cr-mhours{display:flex;flex-direction:column;gap:6px}
/* Boutons d'heure allégés : le pavé de 44 px et le fond accent plein
   pesaient lourd à côté du calendrier. Cadre à 8 % à peine visible au repos,
   et la sélection se dit par un aplat accent très dilué + le texte en bleu,
   plutôt que par un bloc plein. */
.cr-h{
  width:100%;text-align:center;padding:6px 12px;
  border:1px solid rgba(247,245,243,.09);border-radius:2px;
  font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;color:rgba(247,245,243,.6);
  transition:all .22s var(--ease);
}
.cr-h:hover{border-color:rgba(139,163,217,.55);color:var(--cream)}
.cr-h.is-sel{background:rgba(139,163,217,.14);border-color:var(--accent);color:var(--blue)}
.cr-vide{font-family:var(--mu);font-size:var(--cw-fine);font-weight:300;color:rgba(247,245,243,.26);line-height:1.6}

/* ── Heures ouvertes en visioconférence seulement ──
   Un GLYPHE VIDÉO dans le cadre, à droite de l'heure. Pourquoi celui-ci
   plutôt qu'un astérisque, une note ou un regroupement sous intertitre :
     · l'ordre chronologique reste intact — 11:00 ne descend pas en fin de
       colonne pour rejoindre ses semblables ;
     · la caméra est la convention de toutes les prises de rendez-vous en
       ligne : elle se lit sans clé et sans renvoi ;
     · la marque tient dans le cadre qu'elle qualifie.
   L'heure reste centrée : le glyphe est posé en absolu, il ne pousse rien.
   Et rien ne repose sur lui seul — l'écran suivant dit le format en clair
   (voir l'état « indisponible » des panneaux du format, .cw-modal-opt.is-off). */
.cr-h{position:relative}
.cr-h-cam{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:12px;height:12px;fill:none;stroke:var(--accent);stroke-width:1.6;
  opacity:.75;transition:opacity .22s var(--ease),stroke .22s;
}
.cr-h:hover .cr-h-cam{opacity:1}
.cr-h.is-sel .cr-h-cam{stroke:var(--blue);opacity:1}

/* ═══ FENÊTRE « FORMAT DU RENDEZ-VOUS » ═════════════════════
   Posée sur la carte une fois le créneau choisi. Elle se lit comme un
   nouvel écran de la carte, pas comme un voile — et pour cela elle n'a
   AUCUN fond à elle : c'est le contenu de l'étape qui s'efface (voir
   .cw-modal-open plus bas), la fenêtre se pose alors directement sur le
   fond de la carte. Le navy translucide et le flou sont donc exactement
   ceux des quatre autres étapes — un aplat plein, même très proche,
   trahissait la substitution. La composition suit le reste du parcours :
   créneau en micro-capitales, question en Epilogue, deux lignes de choix
   séparées par des filets, retour au pied. */
.cw-modal{
  /* DANS LE FLUX, pas posée par-dessus. Une fenêtre absolue gardait la carte
     à la hauteur du calendrier — 842 px — avec la question centrée dans un
     grand vide, puis une chute brutale à l'étape suivante. En flux, la carte
     va chercher la bonne hauteur par le même trajet que les étapes
     (morph(), contact-wizard.js).
     Hauteur : celle de l'étape sur laquelle l'écran s'intercale, pour que la
     carte ne bouge pas en s'ouvrant. Le format suit le calendrier — grande
     hauteur, celle des coordonnées qui viennent ensuite (voir #cwFmtModal
     ci-dessous) ; l'heure de rappel suit le champ libre — petite hauteur. */
  min-height:var(--cw-court,0px);
  /* Exactement le fondu des étapes (.cw-step.is-active) : aucun déplacement,
     aucune durée à part — c'est un écran de plus, pas un événement. */
  animation:cwIn .4s var(--ease);
}
/* SEUL le corps de l'étape quitte la mise en page (display, pas visibility) :
   c'est ce qui permet à la carte de reprendre la hauteur qu'il faut. Le titre,
   l'en-tête d'étape, le pied et les coordonnées RESTENT en place — « Retour »
   est donc exactement là où il était au choix de la date, et la carte garde
   rigoureusement la hauteur d'une étape. L'intitulé de rubrique porte alors le
   créneau retenu (majTitre(), contact-wizard.js) : un seul en-tête. */
.contact-card.cw.cw-modal-open > #contactForm{display:none}
/* Cet écran-là se débarrasse de tout ce qui n'est pas la question : le grand
   titre, le numéro d'étape et le cadre des coordonnées s'effacent. Ils
   s'effacent SANS QUITTER la mise en page (visibility, pas display) — c'est ce
   qui garde le créneau retenu, la question, les deux choix et « Retour »
   exactement là où ils étaient. */
.contact-card.cw.cw-modal-open .cw-title,
.contact-card.cw.cw-modal-open .cw-step-n,
.contact-card.cw.cw-modal-open > #cwCoords{visibility:hidden}
.cw-modal[hidden]{display:none}
/* Aucune animation propre au contenu : elle se superposait au fondu de la
   fenêtre ET au trajet de hauteur de la carte — trois durées différentes pour
   un seul geste. Le déplacement de 10 px, en particulier, se battait avec la
   hauteur qui bougeait au même moment. */
.cw-modal-in{width:100%}
/* La question tient sur DEUX lignes, pas trois : c'est ce qui permet à cet
   écran de faire exactement la hauteur d'une étape (voir .cw-modal). Le blanc
   qui la suit est l'air de la carte, comme partout ailleurs. */
.cw-modal-q{
  font-family:var(--ep);font-weight:300;line-height:1.15;letter-spacing:-.01em;
  font-size:clamp(22px,2.4vw,28px);color:var(--cream);
  max-width:32ch;margin-bottom:var(--cw-air);
}

/* ── Les deux formats, en PANNEAUX ──
   Le choix se fait à la surface, pas dans une liste : deux panneaux côte à
   côte, dans la matière du cadre des coordonnées (aplat presque invisible,
   rayon de 2 px). Le glyphe ouvre chaque panneau — le même repère de plan et
   la même caméra que le visiteur retrouvera sur l'écran suivant —, le libellé
   est dans le registre du contenu, la précision dans celui des mentions. Au
   survol, un cadre accent et l'aplat qui se teinte : rien ne bouge. */
.cw-modal-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Trois panneaux — l'écran du rappel. Même matière, même gouttière : seule la
   grille change. */
.cw-modal-opts--trois{grid-template-columns:repeat(3,1fr)}
.cw-modal-opt{
  display:block;text-align:left;cursor:pointer;
  padding:22px 20px;border-radius:2px;
  background:rgba(247,245,243,.035);border:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.cw-modal-opt:hover{border-color:var(--accent);background:rgba(139,163,217,.08)}
/* Panneau retenu : le même vocabulaire que partout ailleurs dans la carte
   (heure choisie, sous-choix du profil) — cadre accent, aplat dilué, libellé
   en bleu. Cliquer choisit ; c'est « Continuer » qui fait avancer. */
.cw-modal-opt.is-sel{border-color:var(--accent);background:rgba(139,163,217,.13)}
.cw-modal-opt.is-sel .cw-modal-opt-t{color:var(--blue)}
/* Tête du panneau : le glyphe, et à l'opposé l'étiquette quand le format
   n'est pas offert sur ce créneau. */
.cw-modal-opt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.cw-modal-opt-ico{display:block}
.cw-modal-opt-ico svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.4}
.cw-modal-opt-t{
  display:block;font-family:var(--mu);font-size:var(--cw-txt);
  font-weight:300;color:var(--cream);line-height:1.3;transition:color .2s;
}
.cw-modal-opt:hover .cw-modal-opt-t{color:var(--accent)}
.cw-modal-opt-d{
  display:block;margin-top:7px;
  font-family:var(--mu);font-size:var(--cw-fine);font-weight:300;
  color:rgba(247,245,243,.55);line-height:1.55;
}

/* ── Format indisponible sur ce créneau ──
   Le panneau reste, avec son adresse : on ne raye pas une adresse exacte, et
   la barrer n'aurait rien appris. Il perd sa présence (opacité), son glyphe
   passe en crème, il cesse de répondre — et une étiquette en micro-capitales
   dit ce qu'il en est. C'est le registre des étiquettes de la carte : nommer,
   pas illustrer. Cet état est l'avertissement du parcours ; il a remplacé
   l'écran de confirmation qui suivait (voir majFormat(), contact-wizard.js). */
.cw-modal-opt.is-off{
  opacity:.62;cursor:default;
  background:rgba(247,245,243,.025);
}
.cw-modal-opt.is-off:hover{border-color:transparent;background:rgba(247,245,243,.025)}
.cw-modal-opt.is-off .cw-modal-opt-ico svg{stroke:rgba(247,245,243,.58)}
.cw-modal-opt.is-off:hover .cw-modal-opt-t{color:var(--cream)}
/* 10,5 px, pas 9,5 : la carte n'a que TROIS tailles (--cw-txt 14, --cw-fine
   11,5, --cw-lab 10,5) et une étiquette appartient au registre des étiquettes.
   Graisse 700 et crénage .14em : exactement le numéro d'étape. */
.cw-modal-opt-tag{
  flex:none;padding-top:2px;
  font-family:var(--mu);font-size:var(--cw-lab);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,243,.58);
}
.cw-modal-opt-tag[hidden]{display:none}

/* Créneau manquant : on signale sans rien déplacer */
.cr.cw-invalid .cr-md:not(.is-off):not(.is-empty){border-color:rgba(176,142,134,.45)}
.cw-slots-empty{font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;line-height:1.7;color:rgba(247,245,243,.5);margin-top:22px}

@media(max-width:600px){
  .cr-head{flex-direction:column;align-items:flex-start;gap:10px}
  .cr-msplit{grid-template-columns:1fr;gap:16px}
  .cr-mhours{flex-direction:row;flex-wrap:wrap}
  .cr-h{width:auto}
}

/* RGPD */
/* L'étape des coordonnées est une colonne : quand elle est plus courte que le
   plancher commun, le vide se partage également autour de la mention (marges
   automatiques du porte-mention) au lieu de tomber entièrement sous elle. */
.cw-step[data-step="4"].is-active{display:flex;flex-direction:column}
/* Le pied remonte de douze pixels sur cette étape : l'air qu'il laissait sous
   la mention était la moitié plus large que celui qui sépare deux lignes de
   saisie. Ces douze pixels reviennent aux rangées. */
.cw-rgpd-place{margin-top:auto;margin-bottom:2px}

/* Mention légale : un aparté, pas une clause perdue dans le gris. Fond à peine
   teinté et filet accent à gauche — le vocabulaire des encarts du site. Elle se
   lit comme un à-côté assumé, et le pied du parcours reste net. */
.cw-rgpd{
  /* L'encart est centré dans le blanc qui reste : autant d'air entre le filet
     du dernier champ et son bord haut qu'entre son bord bas et le trait du
     bouton. Le retrait négatif reprend au pied ce que la marge haute ajoute —
     la carte garde donc exactement sa hauteur. */
  margin:24.5px 0 -8.5px;padding:14px;
  background:rgba(139,163,217,.06);
  border-left:2px solid var(--accent);
  border-radius:0 2px 2px 0;
  /* 11 px et un retrait de 14 : la mention tient sur DEUX lignes au lieu de
     trois, sans qu'un mot soit retiré. Les vingt pixels gagnés vont aux deux
     bouts de l'étape — sous l'intitulé de rubrique et au-dessus du pied. */
  font-family:var(--mu);font-size:11px;font-weight:300;
  color:rgba(247,245,243,.55);line-height:1.6;
}

/* ═══════════════════════════════════════════════════════════
   PIED DU PARCOURS — Retour / Continuer
   Aucun filet au repos. Au survol, le filet se dessine SOUS LE LIBELLÉ,
   de gauche à droite : exactement la recette des liens du site
   (links.css §2 — dégradé currentColor, background-size 0 % → 100 %,
   5 px d'écart au texte, .45 s sur la courbe du site). Le pied parle donc
   la même langue que « Découvrir l'équipe » ou « Toutes nos actualités ».
   Le pied est unique pour les quatre étapes et vit hors des étapes : sa
   hauteur est constante et n'entre pas dans l'animation de hauteur de la
   carte (morph(), contact-wizard.js).
   ═══════════════════════════════════════════════════════════ */
/* Le même air qu'entre l'en-tête et le contenu — ni plus, ni moins :
   aucun rembourrage supplémentaire, la marge suffit. */
.cw-pied{margin-top:calc(var(--cw-air) - 1.7px)}   /* blanc au-dessus des capitales du pied */
.cw-pied[hidden]{display:none}
/* Hauteur RÉSERVÉE, quoi que le pied contienne : le disque d'envoi de la
   dernière étape (44 px) ne doit pas faire grandir la carte à ce moment-là.
   Toutes les étapes ont donc le même pied, et la carte la même hauteur. */
.cw-pied-row{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:44px}
/* Libellés dans le registre des RÉGLAGES du site (onglets de mois, numéro
   d'étape) et non dans celui des titres : 10,5 px, sinon le pied pèse
   autant que l'intitulé de rubrique, qui est en 12 px. */
.cw-retour,.cw-suivant{
  flex:none;background:none;border:0;cursor:pointer;line-height:1;
  font-family:var(--mu);font-size:var(--cw-lab);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  /* filet dessiné au survol — même recette que tous les liens du site */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  /* Pavé SYMÉTRIQUE : les 5 px du bas réservent la place du filet dessiné au
     survol ; sans les 5 px du haut, le libellé n'était pas centré dans sa
     propre boîte, et il se retrouvait 2,5 px plus haut que le texte de la
     pilule d'envoi — qui, lui, est centré dans la sienne. Les deux libellés
     du pied tombent maintenant sur la même ligne de base. */
  padding:5px 0;
  transition:background-size .45s var(--ease),color .3s;
}
.cw-retour:hover,.cw-suivant:not(:disabled):hover{background-size:100% 1px}
/* En attente, le pas suivant n'est pas un lien : pas de filet à dessiner */
.cw-suivant:disabled{background-image:none}
/* Les deux libellés ont la même couleur : ce sont deux pas du même
   parcours, seule leur place dit lequel avance et lequel recule. */
.cw-retour,.cw-suivant{color:var(--cream)}
.cw-retour:hover,.cw-suivant:not(:disabled):hover{color:var(--blue)}
/* Étape 1 : rien derrière soi — le libellé s'effface sans laisser de trou
   (visibility, pas display : la ligne garde exactement sa géométrie). */
.cw-retour:disabled{visibility:hidden}

/* ── Dernière étape : l'envoi devient un bouton ──
   « Envoyer ma demande » n'est plus un lien parmi d'autres : c'est le geste du
   parcours. Il prend la forme d'une pilule à CADRE accent, qui se remplit au
   survol. Pourquoi le cadre et non l'aplat plein : la carte n'a aucun élément
   plein, un aplat y aurait crié. Le geste se révèle quand la main s'approche.
   Le filet dessiné des libellés du pied est retiré — le cadre porte seul
   l'appel, deux signaux se disputeraient l'attention. */
.cw-suivant.is-envoi{
  padding:13px 25px;border:1px solid var(--accent);border-radius:999px;
  color:var(--accent);background-image:none;letter-spacing:.12em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.cw-suivant.is-envoi:not(:disabled):hover{background:var(--accent);color:var(--navy)}
/* Envoi impossible ou en cours : le cadre s'éteint sans disparaître — la place
   du bouton ne bouge pas, seule sa présence. */
.cw-suivant.is-envoi:disabled{
  border-color:rgba(247,245,243,.14);color:rgba(247,245,243,.28);cursor:default;
}
/* Choix encore incomplet : le pas suivant reste là, mais en attente */
.cw-suivant:disabled{color:rgba(247,245,243,.22);cursor:default}

/* ── Confirmation ──
   Une seule page : la coche, « Demande envoyée », et une phrase qui dit ce
   qui se passe ensuite selon le canal. Ni référence, ni récapitulatif, ni
   frise d'étapes — rien qui promette un suivi qui n'existe pas. */
.cw-done{display:none}
.cw-done.is-active{display:block;animation:cwIn .55s var(--ease)}
.cw-check{
  width:52px;height:52px;border-radius:50%;margin-bottom:26px;
  background:rgba(139,163,217,.14);display:flex;align-items:center;justify-content:center;
}
.cw-check svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:cwDraw .7s var(--ease) .2s forwards}
@keyframes cwDraw{to{stroke-dashoffset:0}}
/* Même recette que le grand titre de la carte, une échelle en dessous */
.cw-done-title{font-family:var(--ep);font-weight:300;line-height:1.12;letter-spacing:-.01em;font-size:clamp(24px,2.6vw,30px);color:var(--cream)}
.cw-done-lead{
  margin-top:14px;max-width:44ch;
  font-family:var(--mu);font-size:var(--cw-txt);font-weight:300;
  line-height:1.7;color:rgba(247,245,243,.62);
}
/* ── Échec d'envoi ──
   Posé entre l'étape et le pied, à la place exacte où le regard revient
   après avoir cliqué « Envoyer ». Le rose du site (--rose) plutôt que du
   rouge : c'est la couleur que la carte utilise déjà pour un champ en
   défaut. Le message, lui, contient toujours une porte de sortie — le
   téléphone du cabinet (voir T.errEnvoi, contact-wizard.js). */
.cw-err{
  margin:calc(var(--cw-air,40px) - 12px) 0 0;
  padding:13px 16px;border-radius:2px;
  border-left:2px solid var(--rose);
  background:rgba(176,142,134,.09);
  font-family:var(--mu);font-size:var(--cw-fine);font-weight:300;
  line-height:1.6;color:rgba(247,245,243,.78);
}
.cw-err[hidden]{display:none}

@media(max-width:560px){
  .cw-modal-opts,.cw-modal-opts--trois{grid-template-columns:1fr}
  .cw-fields{grid-template-columns:1fr}
  .cw-modes{grid-template-columns:1fr}
  .cw-mode{display:flex;align-items:center;gap:14px;text-align:left}
  .cw-mode-ico{margin:0}
}



/* ══════════════════════════════════════════════════════════════
   FOCUS CLAVIER
   Aucune règle n'existait : un visiteur au clavier — ou à la voix — ne savait
   pas où il se trouvait dans le parcours. Le cadre accent reprend exactement
   le vocabulaire du survol, avec un halo pour qu'il se voie aussi sur les
   éléments qui ont déjà un cadre. :focus-visible et non :focus : la souris ne
   déclenche rien.
   ══════════════════════════════════════════════════════════════ */
.contact-card.cw :focus-visible:not(input):not(textarea):not(select){
  outline:1px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
/* Les champs de saisie portent déjà un filet bas : on l'allume, et rien de
   plus — ni cadre, ni ombre, qui doubleraient le trait. */
.cw-field input:focus-visible,.cw-field textarea:focus-visible{
  outline:none;box-shadow:none;
  border-bottom-color:var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   PRÉFÉRENCE HORAIRE DU RAPPEL
   Une précision, pas une question de plus : même grammaire que les puces de
   sous-choix, et elle ne bloque jamais « Continuer ».
   ══════════════════════════════════════════════════════════════ */
.cw-rappel{margin-bottom:26px}
.cw-rappel[hidden]{display:none}
.cw-rappel-lab{
  display:block;margin-bottom:11px;
  font-family:var(--mu);font-size:var(--cw-lab);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,243,.55);
}
.cw-rappel-opts{display:flex;flex-wrap:wrap;gap:8px 10px}

/* Puces de précision — servent au rappel (et servaient au métier) */
.cw-sous-opt{
  padding:6px 13px;border:1px solid rgba(247,245,243,.14);border-radius:2px;background:none;cursor:pointer;
  font-family:var(--mu);font-size:var(--cw-fine);font-weight:300;color:rgba(247,245,243,.62);
  transition:border-color .25s var(--ease),color .25s,background .25s;
}
.cw-sous-opt:hover{border-color:rgba(139,163,217,.5);color:var(--cream)}
.cw-sous-opt.is-sel{border-color:var(--accent);background:rgba(139,163,217,.13);color:var(--blue)}

/* ══════════════════════════════════════════════════════════════
   MENTION DU FUSEAU ET RÉASSURANCE
   ══════════════════════════════════════════════════════════════ */
/* L'heure de Paris, sous le calendrier : un client à Londres ou à Dubaï
   réservait sans savoir de quel fuseau il s'agissait. */
.cw-tz{
  margin:14px 0 0;
  font-family:var(--mu);font-size:var(--cw-fine);font-weight:300;
  color:rgba(247,245,243,.5);
}
.cw-tz[hidden]{display:none}
/* Le lien de la mention RGPD : filet dessiné, comme tous les liens du site */
/* Le lien ne se détache pas de la phrase : même couleur, même graisse — seul
   le filet dit qu'il est cliquable. */
.cw-rgpd a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(247,245,243,.3);
  transition:color .3s,border-color .3s;
}
.cw-rgpd a:hover{color:var(--blue);border-color:var(--accent)}