/* ═══════════════════════════════════════════════════════════
   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
   ═══════════════════════════════════════════════════════════ */
: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}
.cursor,.cursor-dot{display:none!important}

/* ═══════════════════════════════════════════════════════════
   MENU OVERLAY
   ═══════════════════════════════════════════════════════════ */
.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
   ═══════════════════════════════════════════════════════════ */
.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.nav-hidden{opacity:0;pointer-events:none;transform:translateY(-100%);transition:opacity .5s,transform .5s,background .5s,box-shadow .5s,height .4s,padding .5s}
.nav:not(.nav-hidden){opacity:1;transform:translateY(0)}
.nav-logo{display:flex;align-items:center;gap:0;transition:opacity .4s}
.nav-logo img{width:auto}
.nav-logo-w{display:block;height:clamp(62px,9.6vw,115px)}
.nav-logo-d{display:none;height:clamp(62px,9.6vw,115px)}
.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}
.nav.scrolled .nav-logo-w{display:none}.nav.scrolled .nav-logo-d{display:none}.nav.scrolled .nav-symbol-wrap{display:block}
.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.scrolled.nav-dark .nav-link{color:rgba(247,245,243,.75)}
.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.scrolled.nav-dark .nav-contact{color:var(--cream);border-color:rgba(247,245,243,.25)}
.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}

.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
   ═══════════════════════════════════════════════════════════ */
.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%;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{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)}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — Immersive, cinematic
   ═══════════════════════════════════════════════════════════ */
.page-hero{
  position:relative;width:100%;min-height:100vh;
  background:var(--navy-3);overflow:hidden;
  display:flex;align-items:center;
  padding:0 var(--pad);
}
/* Animated gradient orbs */
.page-hero-content{
  position:relative;z-index:2;
  max-width:700px;padding:70px 0 80px;
}
.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 ; s'agrandit à l'ouverture du sommaire selon le nombre de titres (hero-sommaire.js) */
  opacity:0;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);margin:0 8px}
.page-hero-title{
  font-family:var(--ep);font-size:clamp(44px,6.5vw,80px);
  font-weight:200;line-height:1.08;
  color:var(--cream);margin-bottom:0;
  overflow:hidden;
}
.page-hero-title .line{
  display:block;opacity:0;transform:translateY(100%);
  animation:heroLineReveal 1s var(--ease) forwards;
}
.page-hero-title .line:nth-child(1){animation-delay:.5s}
.page-hero-title .line:nth-child(2){animation-delay:.65s}
.page-hero-title em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400}
@keyframes heroLineReveal{to{opacity:1;transform:translateY(0)}}
@keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}
.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;
}
@keyframes heroLineGrow{to{width:60px}}
.page-hero-sub{
  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;animation:heroFadeUp .8s var(--ease) 1.1s forwards;
}
/* Scroll indicator */
.hero-scroll-cue{
  position:absolute;bottom:clamp(30px,4vw,50px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;animation:heroFadeUp .8s var(--ease) 1.5s forwards;
}
.hero-scroll-cue span{
  font-family:var(--mu);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(247,245,243,.2);
}
.hero-scroll-line{width:1px;height:40px;background:rgba(139,163,217,.15);position:relative;overflow:hidden}
.hero-scroll-line::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:50%;
  background:var(--accent);animation:scrollLineMove 2s ease-in-out infinite;
}
@keyframes scrollLineMove{0%{top:-50%}100%{top:150%}}

/* Constellation */
.page-hero-constellation{position:absolute;top:8%;left:20%;width:55%;height:50%;z-index:0;pointer-events:none;overflow:hidden}
.page-hero-constellation svg{width:100%;height:100%}
.page-hero-constellation .cline{stroke:rgba(139,163,217,.1);stroke-width:.6;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}
@keyframes drawLine{to{stroke-dashoffset:0}}
.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}
@keyframes nodeIn{to{opacity:1}}
@keyframes nodePulse{0%,100%{r:2;opacity:.5}50%{r:3.5;opacity:1}}

/* ═══════════════════════════════════════════════════════════
   SECTION TRANSITIONS — gradient dividers
   ═══════════════════════════════════════════════════════════ */
.sec-fade-dark-to-cream{height:1px;background:var(--cream-3)}

/* ═══════════════════════════════════════════════════════════
   360° L'ÉLÉVATION — scroll-driven SVG building
   ═══════════════════════════════════════════════════════════ */
.bld-wrap{position:relative;background:var(--navy-3);height:600vh;min-height:3400px}
.bld-sticky{position:sticky;top:0;height:100vh;overflow:clip;display:flex;align-items:center;justify-content:center}
/* Vignette */
.bld-svg-wrap{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
  /* massif mais jamais plus haut que l'écran (ratio viewBox 300/520 ≈ 0.58) */
  width:min(clamp(310px,35vw,520px),53vh);
  height:auto;
}
.bld-svg-wrap svg{width:100%;height:auto;display:block}
/* Floor groups — hidden by default, revealed on scroll */
.bld-floor{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.bld-floor.built{opacity:1;transform:translateY(0)}
.bld-floor.active rect,.bld-floor.active line,.bld-floor.active polyline,.bld-floor.active path{
  stroke:var(--accent)!important;
  transition:stroke .5s var(--ease);
}
.bld-roof{
  opacity:0;transform:translateY(6px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.bld-roof.built{opacity:1;transform:translateY(0)}
.bld-foundation{opacity:.4}

/* Layout: 3-column grid (panels + center + panels) */
.bld-layout{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(220px,360px) 1fr minmax(220px,360px);
  align-items:center;padding:0 var(--pad);
  z-index:2;opacity:0;transition:opacity 1s var(--ease);
}
.bld-layout.visible{opacity:1}
/* ── Étape courante : typographie éditoriale pure (pas de carte) ── */
.bld-phase{max-width:400px}
.bld-phase-title{font-family:var(--ep);font-weight:300;font-size:clamp(22px,2.2vw,30px);
  color:var(--cream);line-height:1.25;margin:0 0 14px}
.bld-phase-desc{font-family:var(--mu);font-weight:300;font-size:clamp(13px,1.05vw,15px);
  color:rgba(247,245,243,.55);line-height:1.8;margin:0;min-height:6.5em}
.bld-phase-line{width:44px;height:1px;background:var(--accent);opacity:.35;margin-top:clamp(20px,3vh,30px)}
.bld-phase .hb-num,.bld-phase-title,.bld-phase-desc{transition:opacity .25s var(--ease),transform .25s var(--ease)}
.bld-phase.is-switching .hb-num,
.bld-phase.is-switching .bld-phase-title,
.bld-phase.is-switching .bld-phase-desc{opacity:0;transform:translateY(8px)}

/* ── Titre permanent de la section (haut gauche, reste affiché tout du long) ── */
.bld-heading{position:absolute;top:clamp(96px,12vh,132px);left:var(--pad);z-index:5;
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.bld-heading.in{opacity:1;transform:none}
/* même format que les titres de bandeaux de l'accueil (.hb-title) */
.bld-heading-title{font-family:var(--ep);font-weight:300;font-size:clamp(30px,3.6vw,52px);
  line-height:1.12;letter-spacing:-.01em;color:var(--cream);margin:0;max-width:22ch}
.bld-heading-title em{font-family:inherit;font-style:normal;color:var(--accent)}

/* ── Arrivée sur la section : tout est masqué sauf le titre ── */
.bld-svg-wrap{opacity:0;transition:opacity .9s var(--ease)}
.bld-svg-wrap.show{opacity:1}

/* ── Grue de chantier : présente pendant la construction, s'efface à la livraison ── */
.bld-crane{opacity:0;transition:opacity 1.2s var(--ease)}
.bld-crane.on{opacity:1}
/* le câble + crochet se balancent doucement (pivot : le chariot, en haut du câble) */
@keyframes craneSway{from{transform:rotate(.9deg)}to{transform:rotate(-.9deg)}}
#bldCraneLoad{transform-box:view-box;transform-origin:120px 16px;
  animation:craneSway 3.8s ease-in-out infinite alternate}

/* Échafaudage : visible pendant le chantier, glisse d'un niveau à l'autre */
#bldScaffold{opacity:0;transform:translateY(436px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
#bldScaffold.on{opacity:1}
/* Contour pointillé de l'étage à venir */
#bldGhost{transition:opacity .6s var(--ease)}

/* ── FINALE : l'immeuble livré reste, les 8 étapes réapparaissent autour ── */
.bld-finale{position:absolute;inset:0;z-index:4;pointer-events:none;
  /* colonne centrale = largeur exacte du canevas immeuble (.bld-svg-wrap) → jamais de chevauchement */
  display:grid;grid-template-columns:1fr min(clamp(310px,35vw,520px),53vh) 1fr;
  column-gap:clamp(20px,3vw,56px);
  padding:14vh var(--pad) 16vh;
  opacity:0;transition:opacity .9s var(--ease)}
.bld-finale.on{opacity:1}
.bld-fin-col{display:flex;flex-direction:column;justify-content:space-between}
.bld-fin-col--l{text-align:right}
.bld-fin-item{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.bld-finale.on .bld-fin-item{opacity:1;transform:none}
.bld-finale.on .bld-fin-col--l .bld-fin-item:nth-child(1){transition-delay:.1s}
.bld-finale.on .bld-fin-col--l .bld-fin-item:nth-child(2){transition-delay:.24s}
.bld-finale.on .bld-fin-col--l .bld-fin-item:nth-child(3){transition-delay:.38s}
.bld-finale.on .bld-fin-col--l .bld-fin-item:nth-child(4){transition-delay:.52s}
.bld-finale.on .bld-fin-col--r .bld-fin-item:nth-child(1){transition-delay:.17s}
.bld-finale.on .bld-fin-col--r .bld-fin-item:nth-child(2){transition-delay:.31s}
.bld-finale.on .bld-fin-col--r .bld-fin-item:nth-child(3){transition-delay:.45s}
.bld-finale.on .bld-fin-col--r .bld-fin-item:nth-child(4){transition-delay:.59s}
.bld-fin-item span{display:block;font-family:var(--ep);font-weight:200;font-size:17px;
  color:var(--accent);margin-bottom:8px;font-variant-numeric:tabular-nums}
/* même taille que le titre d'étape affiché au fil de la construction (.bld-phase-title) */
.bld-fin-item h4{font-family:var(--ep);font-weight:300;font-size:clamp(22px,2.2vw,30px);
  color:var(--cream);margin:0;line-height:1.25}

/* Progress bar */
.bld-progress{position:absolute;right:var(--pad);top:18%;bottom:18%;width:1px;background:rgba(247,245,243,.05);z-index:3}
.bld-progress-fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--accent);opacity:.4;transition:height .15s linear}


/* ═══════════════════════════════════════════════════════════
   SKILLS / MATIÈRES
   ═══════════════════════════════════════════════════════════ */
.exp-skills{
  background:var(--navy-3);
  padding:clamp(80px,12vw,160px) var(--pad);
  position:relative;
}
.skills-header{text-align:center;margin-bottom:clamp(50px,7vw,80px)}
.skills-header-label{
  font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;display:block;
}
.skills-header-title{
  font-family:var(--ep);font-size:clamp(28px,3.5vw,44px);
  font-weight:200;color:var(--cream);line-height:1.2;
}
.skills-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(32px,4vw,52px);
  max-width:1100px;margin:0 auto;
}
@media(max-width:900px){.skills-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.skills-grid{grid-template-columns:1fr}}
.skill-col{display:flex;flex-direction:column;gap:clamp(10px,1.5vw,16px)}
.skill-col-title{
  font-family:var(--ep);font-size:clamp(16px,1.6vw,20px);
  font-weight:300;color:var(--cream);
  margin-bottom:8px;padding-bottom:12px;
  border-bottom:1px solid rgba(139,163,217,.1);
}
.skill-tag{
  display:inline-block;
  font-family:var(--mu);font-size:13px;font-weight:400;
  color:rgba(247,245,243,.6);
  background:rgba(247,245,243,.03);
  padding:10px 18px;border-radius:8px;
  border:1px solid rgba(247,245,243,.06);
  transition:all .3s var(--ease);cursor:default;
}
.skill-tag:hover{
  background:rgba(139,163,217,.1);color:var(--accent);
  border-color:rgba(139,163,217,.2);
}

/* ── NOS COMPÉTENCES — une ligne éditoriale par clientèle, spécialités à droite ── */
.comp-section .skills-header{text-align:left;max-width:1100px;margin-left:auto;margin-right:auto}
.skills-header-title em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--accent)}
.comp-list{list-style:none;margin:0 auto;padding:0;max-width:1100px;
  border-top:1px solid rgba(247,245,243,.12)}
.comp-row{display:grid;grid-template-columns:minmax(0,38%) 1fr;
  gap:clamp(24px,4vw,72px);align-items:start;
  padding:clamp(28px,4vh,48px) 0;border-bottom:1px solid rgba(247,245,243,.12);
  transition:padding-left .4s var(--ease)}
.comp-num{display:block;font-family:var(--ep);font-weight:200;font-size:clamp(14px,1.1vw,17px);
  color:var(--accent);opacity:.65;margin-bottom:10px;font-variant-numeric:tabular-nums;
  transition:opacity .35s var(--ease)}
.comp-name{font-family:var(--ep);font-weight:300;font-size:clamp(21px,2vw,30px);
  line-height:1.15;color:var(--cream);margin:0 0 8px;transition:color .35s var(--ease)}
.comp-who{font-family:var(--mu);font-weight:300;font-size:clamp(13px,1vw,14.5px);
  line-height:1.6;color:rgba(247,245,243,.55);margin:0}
.comp-tags{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px}
.comp-row:hover .comp-name{color:var(--accent)}
.comp-row:hover .comp-num{opacity:1}
@media(max-width:900px){
  .comp-row{grid-template-columns:1fr;gap:18px}
}

/* ═══════════════════════════════════════════════════════════
   CTA PREFOOTER
   ═══════════════════════════════════════════════════════════ */
/* Decorative gold lines */

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){}

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATION
   ═══════════════════════════════════════════════════════════ */
/* 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. */


/* ═══════════════════════════════════════════════════════════
   SCROLL-SNAP (crantage) — desktop : comme sur l'accueil, on est
   toujours calé sur une section (hero / domaines / champ), jamais
   entre deux. Le tunnel .om-wrap (300vh) est plus grand que le
   viewport → le défilement y reste libre pour piloter la frise.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:921px){
  html:has(.xs){scroll-snap-type:y mandatory}
  html:has(.xs) .page-hero,
  html:has(.xs) .xs,
  html:has(.xs) .iv,
  html:has(.xs) .om-wrap,
  html:has(.xs) .cta-prefooter{scroll-snap-align:start}
  html:has(.xs) .footer{scroll-snap-align:end}
}

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE DE SECTION (partagé expertises / méthode) —
   EXACTEMENT la forme des bandeaux de l'accueil : grand chiffre
   fin (.hb-num) + titre (.hb-title), styles hérités de global.css
   ═══════════════════════════════════════════════════════════ */
.xs-head-block{margin:0 0 clamp(28px,4vh,44px)}
/* section expertises : de l'air entre le titre et le sélecteur */
.xs>.xs-head-block{margin-bottom:clamp(36px,5.5vh,64px)}

/* ═══════════════════════════════════════════════════════════
   EXPERTISES PAR CLIENTÈLE — sélecteur plein écran : accordéon
   d'images vertical (même visuel que l'accueil) à GAUCHE,
   prestations de la clientèle active à DROITE
   ═══════════════════════════════════════════════════════════ */
.xs{position:relative;background:var(--navy-3);color:var(--cream);
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;
  /* La marge basse loge DEUX choses : le « Défiler » ancré au bas de la section
     (32 px du bord + son filet de 40 px) et, au-dessus, la description de la
     DERNIÈRE rangée, qui se déplie par-dessus le vide sous la liste. */
  padding:clamp(72px,9vh,104px) var(--pad) clamp(150px,19vh,210px)}
.xs-frame{min-width:0;display:grid;
  grid-template-columns:minmax(0,40%) 1fr;
  /* Les deux colonnes font la MÊME hauteur : celle qui commande est la plus
     haute des deux — les images quand les textes sont courts, la liste quand
     ils sont longs. Plus de flottement, plus de débordement d'un côté. */
  column-gap:clamp(48px,5vw,96px);align-items:stretch}

/* onglets-images : accordéon vertical repris de l'accueil
   (panneau fermé = nom à la verticale ; actif = élargi, index + nom) */
.xs-tabs{display:flex;gap:6px;height:auto;min-height:min(60vh,560px)}
.xs-tab{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
  border:none;padding:0;background-size:0 0;
  transition:flex .6s var(--ease)}
.xs-tab.is-active{flex:3.4 1 0}
/* l'image est peinte par un calque dédié (hérite de l'inline style du bouton)
   pour pouvoir être animée — Ken Burns très lent sur le bandeau actif */
.xs-tab::before{content:'';position:absolute;inset:0;
  background-image:inherit;background-size:cover;background-position:center;
  transform:scale(1.001);will-change:transform}
.xs-tab.is-active::before{animation:xsKb 16s ease-in-out infinite alternate}
@keyframes xsKb{from{transform:scale(1.001)}to{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.xs-tab.is-active::before{animation:none}}
.xs-tab-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(19,27,42,.50) 0%, rgba(19,27,42,.26) 38%, rgba(19,27,42,.74) 100%),
    linear-gradient(90deg, rgba(19,27,42,.42) 0%, rgba(19,27,42,.10) 60%, rgba(19,27,42,.28) 100%)}
/* Trois degrés, comme sur l'accueil (.cl-panel-scrim) : l'onglet actif est le
   plus clair, celui qu'on survole s'éclaircit un peu, les autres restent dans
   l'ombre. C'est le voile qui dit le choix, pas seulement la largeur. */
.xs-tab.is-active .xs-tab-scrim{opacity:.6}
.xs-tab:not(.is-active):hover .xs-tab-scrim{opacity:.8}
.xs-tab:not(.is-active):hover .xs-tab-name{color:var(--cream)}
.xs-tab-body{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;text-align:left;
  padding:clamp(14px,1.6vw,24px);color:var(--cream);overflow:hidden}
.xs-tab-name{font-family:var(--ep);font-weight:400;color:var(--cream);
  transition:color .4s var(--ease)}
/* fermé : nom à la verticale (la photo est étroite) */
.xs-tab:not(.is-active) .xs-tab-name{writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;font-size:15px;font-weight:300;color:rgba(247,245,243,.9);
  align-self:center;margin:0 0 6px}
/* actif : index + grand nom — même registre que le nom de clientèle ouvert
   de l'accueil (.cl-panel.is-open .cl-name), et un cran AU-DESSUS des noms
   d'expertises listés dessous (hiérarchie clientèle > expertise) */
.xs-tab.is-active .xs-tab-name{font-size:clamp(18px,1.6vw,24px);line-height:1.2}

/* panneau droit : intro, rangées repliables */
.xs-panels{min-width:0}
.xs-panel{display:none}
.xs-panel.is-active{display:block;animation:xsIn .55s var(--ease)}
@keyframes xsIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.xs-head{margin:0 0 clamp(20px,3vh,32px)}
/* même registre que le lead de l'accueil (.hb-lead), en gris d'accompagnement */
.xf-intro{font-family:var(--mu);font-weight:300;font-size:clamp(15px,1.3vw,18px);
  line-height:1.75;color:rgba(247,245,243,.66);margin:0;max-width:56ch}

/* colonne droite : rangées repliées, la description ne s'ouvre qu'au clic */
.xc-list{--xc-indent:calc(34px + clamp(14px,1.4vw,24px));min-width:0}
.xc-item{border-top:1px solid rgba(247,245,243,.12);
  transition:opacity .45s var(--ease)}
/* Cette transition appartient au SURVOL (les rubriques voisines s'estompent).
   L'arrivée se joue donc en keyframes, à la grammaire commune — même montage
   que les valeurs de l'accueil et les tuiles de publications. */
.xc-item[data-r].in{animation:rvUp var(--rv-dur) var(--rv-e) var(--rv-d,0s) backwards}
.xc-item:last-child{border-bottom:1px solid rgba(247,245,243,.12)}
.xc-list:hover .xc-item:not(:hover){opacity:.5}
/* un volet ouvert : les autres restent estompés (même état qu'au survol),
   sauf celui qu'on survole à ce moment-là */
.xc-list:has(.xc-item.open) .xc-item:not(.open):not(:hover){opacity:.5}
.xc-row{display:grid;grid-template-columns:34px 1fr 14px;
  column-gap:clamp(14px,1.4vw,24px);align-items:baseline;
  width:100%;text-align:left;background:none;border:none;color:inherit;
  padding:clamp(17px,2.9vh,30px) 0;cursor:pointer}
/* même registre que les compteurs de l'accueil (.hb-num-tot : 13px/300/.12em) */
.xf-num{font-family:var(--mu);font-size:13px;font-weight:300;
  letter-spacing:.12em;color:var(--cream);transition:color .35s var(--ease)}
.xc-row:hover .xf-num{color:var(--accent)}
.xc-item.open .xf-num{color:var(--blue)}
/* sous le registre de l'onglet clientèle actif (hiérarchie) ; l'Epilogue 400
   suffit à les distinguer de l'intro Mulish de taille voisine */
.xf-name{font-family:var(--ep);font-weight:400;
  font-size:clamp(16px,1.3vw,20px);line-height:1.2;color:var(--cream);
  margin:0;transition:color .35s var(--ease)}
.xc-row:hover .xf-name{color:var(--accent)}
.xc-item.open .xf-name{color:var(--blue)}
/* icône +/− : deux barres, la verticale pivote à l'ouverture */
.xc-ico{position:relative;width:12px;height:12px;align-self:center;justify-self:end}
.xc-ico::before,.xc-ico::after{content:'';position:absolute;
  background:rgba(247,245,243,.4);
  transition:transform .45s var(--ease),background .3s}
.xc-ico::before{left:0;top:5.5px;width:12px;height:1px}
.xc-ico::after{left:5.5px;top:0;width:1px;height:12px}
.xc-item.open .xc-ico::after{transform:rotate(90deg)}
.xc-item.open .xc-ico::before,.xc-item.open .xc-ico::after{background:var(--blue)}
/* volet : fermé par défaut, hauteur pilotée par le JS (maxHeight=scrollHeight) */
.xc-fold{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.xc-fold-in{min-height:0}
.xf-desc{font-family:var(--mu);font-weight:300;font-size:clamp(13.5px,1vw,15px);
  line-height:1.7;color:rgba(247,245,243,.66);margin:0;max-width:52ch;
  padding:0 0 clamp(16px,2.4vh,22px) var(--xc-indent)}

/* barre d'avancement (base partagée, la frise la spécialise via .om-rail) */
.op-rail{display:flex;gap:8px;margin:clamp(22px,3.2vh,36px) 0 0;box-sizing:border-box;
  font-size:clamp(13.5px,1vw,15px);
  max-width:48ch;padding-left:calc(34px + clamp(14px,1.4vw,24px))}
.op-rail span{flex:1;height:3px;border-radius:99px;
  background:rgba(247,245,243,.14);transition:background .5s var(--ease)}
.op-rail span.on{background:var(--accent)}

/* ═══ NOTRE MÉTHODE — frise horizontale scroll-driven, phases cliquables ═══ */
.om-wrap{height:300vh;background:var(--navy-3)}
.om-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  padding:clamp(72px,9vh,104px) var(--pad) clamp(48px,6vh,76px);
  color:var(--cream);overflow:hidden}
/* la frise occupe TOUTE la hauteur restante sous le titre :
   titres + rail en haut, zone de détail étirée dessous */
.om-board{flex:1;display:flex;flex-direction:column;min-height:0;
  margin-top:clamp(48px,8vh,96px)}
.om-row{display:grid;grid-template-columns:repeat(8,1fr);
  column-gap:clamp(10px,1.2vw,20px);align-items:start}
/* phases à venir : fantômes ; atteintes : titre plein ; courante : numéro accent */
.om-item{display:block;background:none;border:none;padding:0;text-align:left;
  color:inherit;cursor:pointer;opacity:.16;transition:opacity .5s var(--ease)}
.om-item.is-on{opacity:1}
.om-item:hover{opacity:.55}
.om-item.is-on:hover{opacity:1}
.om-num{display:block;font-family:var(--mu);font-size:13px;font-weight:300;
  letter-spacing:.12em;color:rgba(247,245,243,.42);margin-bottom:10px;
  transition:color .35s var(--ease)}
/* même registre que les noms d'expertises du 01 (.xf-name) */
.om-t{font-family:var(--ep);font-weight:400;font-size:clamp(16px,1.3vw,20px);
  line-height:1.25;color:var(--cream);margin:0;
  transition:color .35s var(--ease)}
/* même grammaire de couleurs que l'accordéon du 01 (.xc-item) :
   passé = tout crème, courant = tout bleu (le « volet ouvert »),
   survol = accent — appliquée au numéro ET au titre ensemble */
.om-item.is-on .om-num{color:var(--cream)}
.om-item.is-cur .om-num,
.om-item.is-cur .om-t{color:var(--blue)}
/* le survol ne touche pas l'élément déjà sélectionné (comme au 01 :
   le volet ouvert reste bleu sous la souris) */
.om-row .om-item:hover:not(.is-cur) .om-num,
.om-row .om-item:hover:not(.is-cur) .om-t{color:var(--accent)}
/* le rail réutilise .op-rail mais court sous les 8 titres, pleine largeur */
.om-rail{max-width:none;padding-left:0;margin-top:clamp(20px,3vh,32px)}
/* détail de la phase courante : zone étirée sur la hauteur restante,
   contenu centré verticalement — grand numéro fin (registre .hb-num-cur
   de l'accueil, en beaucoup plus grand) + texte au registre du lead.
   L'ensemble glisse sous la colonne active (margin-left posé en JS). */
.om-detail{flex:1;display:flex;align-items:center;min-height:0;
  margin-top:clamp(20px,3vh,36px)}
/* positionnement sous la colonne active : transform composité (--om-x posé
   en JS), JAMAIS animé — le déplacement a lieu pendant que le calque intérieur
   est invisible. Le fondu vit sur .om-dfade, séparé, pour que Safari ne laisse
   aucun reste de peinture du grand numéro. */
.om-dwrap{transform:translateX(var(--om-x,0px))}
.om-dfade{display:flex;align-items:center;gap:clamp(24px,3vw,56px);
  transition:opacity .24s var(--ease),transform .24s var(--ease)}
/* line-height ≥ 1.1 OBLIGATOIRE : à cette taille, un interligne < 1 fait
   déborder l'encre du glyphe AU-DESSUS de la boîte de l'élément, et Safari
   ne repeint jamais cette bande au déplacement (restes de « bouts de bleu ») */
.om-dnum{font-family:var(--ep);font-weight:200;line-height:1.1;
  font-size:clamp(90px,16vh,150px);color:var(--blue);opacity:.9;
  font-variant-numeric:tabular-nums}
/* même registre gris que les intros de la section 01 (.xf-intro).
   Largeur FIGÉE (pas max-width) : la largeur du groupe ne varie pas d'une
   phase à l'autre, donc les pas d'avancement restent identiques au pixel */
.om-d{font-family:var(--mu);font-weight:300;font-size:clamp(15px,1.3vw,18px);
  line-height:1.75;color:rgba(247,245,243,.66);margin:0;width:46ch;
  /* Hauteur réservée pour QUATRE lignes : les huit textes en font trois, sauf
     « Structuration » qui en prend quatre. Sans cette réserve, le panneau —
     et donc tout ce qui le suit — sautait de 31 px en passant sur cette phase. */
  min-height:calc(4 * 1.75em)}
.om-detail.is-switching .om-dfade{opacity:0;transform:translateY(8px)}
@media(max-width:920px){
  /* mobile : frise 4×2, détail pleine largeur sans déplacement, numéro réduit */
  .om-row{grid-template-columns:repeat(4,1fr);row-gap:22px}
  .om-dwrap{transform:none!important}
  .om-dfade{gap:20px}
  .om-d{width:auto}
  .om-dnum{font-size:clamp(64px,10vh,96px)}
}

.subnav{flex-wrap:wrap}

/* écrans peu hauts (petits laptops) : tout compresser pour rester dans le viewport */
@media(max-height:780px) and (min-width:921px){
  .xs{padding-top:74px;padding-bottom:30px}
  .xs-head-block{margin-bottom:20px}
  .xs .hb-num{margin-bottom:10px}
  .xs-head{margin-bottom:16px}
  .xf-intro{line-height:1.65;font-size:14.5px}
  .xc-row{padding:12px 0}
  .xf-name{font-size:16px}
  .xf-desc{font-size:13.5px;line-height:1.6;padding-bottom:14px}
}

@media(max-width:920px){
  .xs{min-height:0;display:block}
  .xs-frame{grid-template-columns:1fr;row-gap:clamp(26px,4vh,40px)}
  .xs-tabs{display:grid;grid-template-columns:1fr 1fr;height:auto}
  .xs-tab{height:120px;flex:none}
  .xs-tab:not(.is-active) .xs-tab-name{writing-mode:horizontal-tb;transform:none;
    align-self:flex-start;margin:8px 0 0;white-space:normal}
  .xs-tab-name{font-size:14px}
  .xs-tab.is-active .xs-tab-name{font-size:15.5px}
  .xf-name{font-size:15px}
  .xs-head{margin-bottom:clamp(22px,3.5vh,32px)}
  .xf-desc{padding-left:0}
}

/* ═══════════════════════════════════════════════════════════
   NOS INTERVENTIONS PHARES — grille de quatre cartes-images.
   Les quatre opérations sont lisibles d'emblée : image, numéro et
   intitulé. Le texte de celle qu'on survole remonte du bas de sa
   carte, sans que rien ne se déplace autour — même registre que les
   tuiles de publications. L'ancien cercle à quatre quartiers exigeait
   de survoler pour savoir ce qu'on regardait.
   ═══════════════════════════════════════════════════════════ */
.iv{position:relative;background:var(--navy-3);color:var(--cream);
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;
  /* plus de « Défiler » dans cette section : la marge basse redevient celle
     d'un bandeau ordinaire. */
  padding:clamp(72px,9vh,104px) var(--pad) clamp(48px,7vh,84px)}
/* plus de chapô sous le titre : l'en-tête porte seul l'écart avec la grille. */
.iv .xs-head-block{margin-bottom:clamp(66px,9.5vh,112px)}
.iv-lead{max-width:60ch;font-family:var(--mu);font-size:var(--chapo-taille);font-weight:300;
  line-height:var(--chapo-interligne);color:var(--t3);margin-bottom:clamp(20px,3vh,36px)}

/* la grille se cale sous le titre plutôt qu'au centre de l'espace restant :
   depuis la suppression du chapô, le centrage la laissait flotter 116 px plus bas */
.iv-stage{position:relative;flex:1;min-height:0;width:100%;
  max-width:1220px;margin:0 auto;align-self:center;display:flex;align-items:flex-start}
/* Les quatre cartes ne sont plus des cases de grille mais quatre rectangles
   posés en coordonnées fixes sur leur quart. C'est ce qui permet à la carte
   désignée de s'étendre au plateau entier sans qu'aucune autre ne change de
   place : rien ne se réorganise, une seule chose bouge. */
.iv-grid{--g:clamp(20px,2vw,34px);
  --moitie:calc((100% - var(--g)) / 2);
  --second:calc(50% + var(--g) / 2);
  /* Rythme repris TEL QUEL du bandeau 01 de la même page : une seule durée
     (--fondu), une seule courbe (--fondu-e), et rien qui attende quoi que ce
     soit — tout part ensemble et arrive ensemble. Le seul décalage toléré est
     celui de la description, qui reprend --vd-retard pour finir malgré tout
     avec le reste : c'est exactement la règle de .values-d.
     La courbe de révélation (--rv-e) et l'enchaînement en deux temps qui
     étaient ici sonnaient sec à côté ; deux bandeaux de la même page ne
     peuvent pas parler deux langues. */
  --iv-t:var(--fondu);
  --iv-pad:clamp(18px,2vw,28px);
  /* Le plateau se déclare CONTENEUR : les unités cqw employées dans le
     bandeau se mesurent alors sur sa largeur à lui, et non sur celle de la
     carte — qui, elle, change en cours de route. C'est ce qui permet de figer
     la mesure du texte. Voir la note sur les sauts de ligne. */
  container-type:inline-size;
  position:relative;width:100%;height:min(52vh,470px)}

.iv-c{position:absolute;width:var(--moitie);height:var(--moitie);
  overflow:hidden;background:var(--navy-2);cursor:default;
  /* Aucun retard, ni à l'aller ni au retour : la carte désignée est opaque et
     passe AU-DESSUS (z-index), elle masque donc les autres à mesure qu'elle
     s'étend. Elles n'ont pas à avoir disparu d'avance — ce qu'il fallait
     éviter, c'était de voir deux photographies se mêler, pas d'en voir une
     recouvrir l'autre. */
  transition:opacity var(--iv-t) var(--fondu-e),
             left var(--iv-t) var(--fondu-e),top var(--iv-t) var(--fondu-e),
             width var(--iv-t) var(--fondu-e),height var(--iv-t) var(--fondu-e)}
.iv-c:nth-of-type(1){left:0;top:0}
.iv-c:nth-of-type(2){left:var(--second);top:0}
.iv-c:nth-of-type(3){left:0;top:var(--second)}
.iv-c:nth-of-type(4){left:var(--second);top:var(--second)}
/* Traitement d'image IDENTIQUE aux onglets-clientèle du bandeau 01 : la
   photographie garde toutes ses couleurs, et c'est un VOILE à deux dégradés —
   un vertical, un horizontal — qui assure la lisibilité du texte. L'ancien
   réglage désaturait l'image de 10 % et l'écrasait sous un noir à 90 % en bas :
   d'où des cartes éteintes. */
.iv-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
/* La carte est trois fois plus large que haute : le recadrage « cover » rogne
   donc beaucoup en hauteur, et par défaut il le fait au centre — le ciel et le
   haut du bâti passaient à la trappe. Ces deux photographies sont cadrées par
   le haut, où se trouve leur sujet. */
.iv-c--haut img{object-position:center top}
.iv-c::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(19,27,42,.50) 0%, rgba(19,27,42,.26) 38%, rgba(19,27,42,.74) 100%),
    linear-gradient(90deg, rgba(19,27,42,.42) 0%, rgba(19,27,42,.10) 60%, rgba(19,27,42,.28) 100%);
  transition:opacity var(--iv-t) var(--fondu-e)}
/* ── Cinématique : plein cadre et bandeau montant ─────────────────────────
   UN seul temps. Tout part au même instant et arrive au même instant : les
   trois vignettes s'effacent, la carte désignée gagne le plateau, son voile
   s'en va, le bandeau monte, le texte s'ouvre. Aucun retard nulle part.

   Ce n'est pas seulement une affaire de rythme, c'est une nécessité de
   géométrie. Le titre de carte subit DEUX déplacements simultanés : il
   descend avec le bas de la carte qui gagne le bas du plateau (+249 px pour
   la rangée du haut), et il remonte de la hauteur du texte qui s'ouvre sous
   lui. Sur une courbe commune f(t), ces deux déplacements se composent en
   (A + B)·f(t) — un seul mouvement, lisse par construction. Qu'on donne à
   l'un un retard ou une durée à lui, et le titre descend, s'arrête, repart :
   le heurt revient aussitôt. D'où la durée et la courbe uniques posées sur
   .iv-grid, que TOUT ce qui bouge ici reprend sans exception. */
.iv-grid:has(.iv-c:hover) .iv-c:not(:hover){opacity:0;pointer-events:none}
.iv-c:hover{left:0;top:0;width:100%;height:100%;z-index:2}
/* plus de zoom d'image : la carte s'agrandit déjà, les deux gestes se
   contrariaient. Et plus de voile : le texte a désormais son bandeau. */
.iv-c:hover img{transform:none}
/* Le voile de la carte retenue ne DISPARAÎT pas, il s'allège — exactement
   comme l'onglet-clientèle actif du bandeau 01, dont le scrim reste à .6
   (mêmes deux dégradés, même valeur). Supprimé tout à fait, il rendait ces
   photographies bien plus vives que toutes les autres du site. */
.iv-c:hover::after{opacity:.6}

/* Le bandeau. C'est le bloc de texte lui-même qui le porte : au repos il
   n'est qu'une étiquette posée au bas de la carte, au survol son fond opaque
   monte du bas et il devient une bande pleine largeur. Le texte n'est donc
   écrit qu'une fois dans le document — rien n'est dupliqué pour l'effet. */
/* MESURE FIGÉE. La carte passe de 595 à 1220 px de large : si le texte
   occupait toute cette largeur, il se recomposerait en cours de route et
   perdrait une ligne au passage — la description tombait de 3 lignes à 2 vers
   700 px. Le titre, posé au-dessus, sautait alors de 23 px d'un bloc au milieu
   du mouvement : c'était là le tremblement, et aucun réglage de durée ne
   pouvait le corriger puisqu'il ne vient pas du tempo mais d'un saut de ligne.
   La colonne de texte garde donc une largeur constante — celle d'un quart,
   mesurée sur le plateau (cqw) et non sur la carte. box-sizing:content-box
   pour que l'ouverture des marges ne la reprenne pas au passage. */
/* DEUX COLONNES. Empilé, le texte long de la transaction hôtelière poussait
   la bande à 70 % du plateau : il ne restait que 142 px de photographie, et
   la mécanique — plein cadre, image mise en valeur — s'effondrait. Posé à
   côté du titre plutôt qu'en dessous, il gagne en mesure et la bande
   redescend. Les deux colonnes sont dimensionnées en cqw, donc constantes :
   c'est ce qui garantit l'absence de recomposition. */
.iv-c-b{position:absolute;left:0;bottom:0;z-index:3;
  box-sizing:content-box;
  display:grid;align-items:start;
  /* 38 cqw : la largeur du plus long intitulé, « Opérations de marchands de
     biens », mesurée au corps MAXIMAL (449 px à 26 px). Le corps plafonne à
     26 px vers 1530 px de large tandis que le plateau plafonne à 1220 : au
     delà, le titre continuait de grossir dans une colonne qui, elle, ne
     bougeait plus, et passait sur deux lignes jusque dans la grille au repos
     — où les trois autres tiennent sur une seule. */
  grid-template-columns:38cqw 50cqw;
  column-gap:4cqw;
  padding:var(--iv-pad);
  transition:padding var(--iv-t) var(--fondu-e)}
/* Numéro et intitulé forment UN bloc. Placés en deux rangées d'une grille que
   le texte traversait, ils s'écartaient l'un de l'autre : la hauteur du texte
   se répartissait entre les deux rangées et le numéro partait en vadrouille
   tout en haut. Réunis dans un même conteneur, ils restent solidaires. */
.iv-c-h{grid-column:1}
.iv-c-d{grid-column:2}
/* le fond, lui, couvre toute la largeur de la carte quelle qu'elle soit */
.iv-c-b::before{content:'';position:absolute;left:0;top:0;bottom:0;right:auto;
  width:100cqw;z-index:-1;
  background:rgba(19,27,42,.94);
  transform:translateY(101%);
  transition:transform var(--iv-t) var(--fondu-e)}
.iv-c:hover .iv-c-b{padding:clamp(26px,3.2vw,46px)}
.iv-c:hover .iv-c-b::before{transform:none}
/* Typographie STRICTEMENT celle du bandeau 01 : mêmes corps, mêmes graisses,
   mêmes interlettrages, mêmes couleurs. Les valeurs sont recopiées de
   .values-n / .values-t / .values-d — deux bandeaux de la même page ne
   peuvent pas parler deux langues. */
.iv-c-n{font-family:var(--mu);font-size:13px;font-weight:300;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--cream);display:block;margin-bottom:8px;
  transition:color var(--fondu) var(--fondu-e)}
.iv-c:hover .iv-c-n{color:var(--blue)}
.iv-c-t{font-family:var(--ep);font-weight:400;font-size:clamp(19px,1.7vw,26px);
  line-height:1.12;color:var(--cream);margin:0}
/* le texte s'ouvre à sa hauteur EXACTE (0fr → 1fr), sans valeur devinée.
   Même durée et même courbe que le reste : c'est son ouverture qui remonte le
   titre, elle ne peut pas suivre un tempo à elle. */
.iv-c-d{margin:0;font-family:var(--mu);font-weight:300;
  font-size:clamp(13.5px,1vw,15px);line-height:1.65;
  color:rgba(247,245,243,.6);
  display:grid;grid-template-rows:0fr;opacity:0;
  /* La HAUTEUR reste sur la courbe commune : c'est elle qui remonte le titre,
     elle ne peut pas suivre un tempo à part sans rompre le mouvement. Seule
     l'OPACITÉ prend le décalage du bandeau 01 — elle part plus tard mais
     arrive en même temps, sa durée étant --fondu moins ce retard. */
  transition:grid-template-rows var(--iv-t) var(--fondu-e),
             opacity calc(var(--fondu) - var(--vd-retard)) var(--fondu-e) var(--vd-retard)}
/* la mesure est désormais tenue par la largeur figée du bandeau lui-même */
.iv-c-d span{min-height:0;overflow:hidden;display:block}
/* Aucun décalage vertical : le texte n'est plus sous le titre mais à côté de
   lui, et sa première ligne doit partir exactement à la hauteur du numéro.
   Les 10 px qui l'en séparaient — hérités de la disposition empilée — le
   faisaient démarrer un cran plus bas. */
.iv-c:hover .iv-c-d{grid-template-rows:1fr;opacity:1}

@media(max-width:900px){
  /* au doigt, la mécanique n'a plus lieu d'être : les quatre cartes
     s'empilent, chacune avec son texte déjà déplié. */
  .iv-grid{height:auto;display:grid;grid-template-columns:1fr;gap:8px}
  /* les quarts sont posés par des règles :nth-of-type() : il faut les
     annuler à égale portée, sinon le décalage subsiste en position relative
     et la page déborde en largeur. */
  .iv-grid .iv-c{position:relative;left:auto;top:auto;width:100%;height:auto;
    min-height:clamp(200px,42vw,280px)}
  /* la mesure figée n'a plus d'objet : une seule carte par ligne, rien ne
     change de largeur en cours de route. */
  .iv-c-b{position:relative;box-sizing:border-box;width:100%}
}
@media(hover:none){
  .iv-c-d{grid-template-rows:1fr;opacity:1;padding-top:10px;transition:none}
  .iv-c-b::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .iv-c img,.iv-c::after,.iv-c-d,.iv-c,.iv-c-b,.iv-c-b::before{
    transition-duration:.01ms;transition-delay:0s}
}

/* ── Prestations : la liste du bandeau 03 de l'accueil ────────────────────
   Elle y suit un titre de section, d'où sa marge haute. Ici elle ouvre la
   colonne et doit s'aligner sur le haut des onglets-images d'en face. */
.xs-panel .values-list{margin-top:0}
/* ── Régime replié ────────────────────────────────────────────────────────
   Contrairement à l'accueil, la description n'est pas réservée sous chaque
   intitulé : les textes de cette page font cinq lignes, quatre réserves de
   cette taille chassaient la section hors de l'écran.

   La rangée garde donc une hauteur FIXE, et la description qu'on lit se pose
   PAR-DESSUS, hors du flux. Rien ne pousse, rien ne se redimensionne, la liste
   ne change jamais de hauteur — or c'est précisément le moment où les rangées
   voisines s'effacent : la place est libre à l'écran, autant s'en servir.
   ────────────────────────────────────────────────────────────────────────── */
.xs-panel .values-item{--vd:0px}
.values-list--repli{position:relative}
.values-list--repli .values-item{
  /* Hauteur de repos = le quart de la colonne d'images d'en face : les quatre
     rangées la remplissent exactement et restent rigoureusement égales. */
  min-height:calc(min(60vh,560px) / 4 - 16px);
  /* grille plutôt que boîte flexible : align-content centre le contenu dans la
     rangée, pendant qu'align-items garde le numéro et l'intitulé sur la même
     ligne de base. */
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px,2vw,34px);
  align-items:baseline;align-content:center;
  padding-block:clamp(14px,2vh,22px)}
/* la rangée lue passe au-dessus de ses voisines, que sa description recouvre */
.values-list--repli .values-item:hover,
.values-list--repli .values-item.is-current{z-index:2}
.values-list--repli .values-c{position:relative}
.values-list--repli .values-d{
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  margin:0;pointer-events:none;
  opacity:0;transform:translateY(6px);
  transition:opacity calc(var(--fondu) - var(--vd-retard)) var(--fondu-e) var(--vd-retard),
             transform calc(var(--fondu) - var(--vd-retard)) var(--fondu-e) var(--vd-retard)}
.values-list--repli .values-item:hover .values-d,
.values-list--repli .values-item.is-current .values-d{opacity:1;transform:none}
/* Même geste que sur l'accueil : à la lecture, le couple intitulé + description
   REMONTE, de sorte qu'il reste centré sur la rangée. Sans ça l'intitulé garde
   sa place au milieu et le texte pend dessous, laissant un grand vide au-dessus.
   La remontée porte sur .values-c — donc sur l'intitulé ET sa description, qui
   conservent leur écart — et le numéro suit du même mouvement. */
/* Au repos, ni l'intitulé ni le numéro ne sont décalés : --vd ne sert plus de
   réserve dans ce régime, il ne vaut que pour la REMONTÉE à la lecture. Sans
   cette remise à zéro, le numéro héritait du décalage et tombait 65 px sous
   son intitulé. */
.values-list--repli .values-t,
.values-list--repli .values-n{transform:none}
.values-list--repli .values-c,
.values-list--repli .values-n{
  transition:transform var(--fondu) var(--fondu-e),color var(--fondu) var(--fondu-e)}
.values-list--repli .values-item:hover .values-c,
.values-list--repli .values-item.is-current .values-c,
.values-list--repli .values-item:hover .values-n,
.values-list--repli .values-item.is-current .values-n{
  transform:translateY(calc(-1 * var(--vd,0px)))}
/* La description déborde de sa rangée : aucun ancêtre ne doit la rogner. */
.xs-panels,.xs-panel,.values-list--repli{overflow:visible}
.xs-panels{display:flex;align-items:center}
.xs-panel{width:100%}

/* ── Numérotation des prestations ─────────────────────────────────────────
   Registre des compteurs de bandeau de l'accueil (.hb-num-tot : Mulish 13,
   graisse 300, interlettrage .12em) — le site numérote déjà ses sections
   ainsi, la liste en hérite plutôt que d'inventer une forme de plus.
   Le numéro est en blanc plein, comme son intitulé, et prend l'accent quand
   sa ligne est lue. Il glisse avec le titre
   (--vd, hérité de la rangée), donc le couple ne se disloque jamais. */
/* Le numéro et le titre partagent la MÊME ligne de base — c'est le navigateur
   qui l'établit (align-items:baseline), pas un décalage réglé à la main : un
   corps de 13 px et un de 26 px n'ont pas le même haut de boîte, les caler par
   le haut les faisait paraître désalignés. */
.xs-panel .values-item{align-items:baseline}
.values-n{
  flex:none;width:2.4em;
  font-family:var(--mu);font-size:13px;font-weight:300;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--cream);
  transform:translateY(var(--vd,0px));
  transition:color var(--fondu) var(--fondu-e),transform var(--fondu) var(--fondu-e);
}
/* Ligne lue : le numéro passe au bleu du site — celui des mots-clés de titre
   (.hb-title em, .ref-title em au survol), pas l'accent des micro-repères. */
.values-item:hover .values-n,
.values-item.is-current .values-n{color:var(--blue);transform:none}
@media(hover:none){.values-n{transform:none}}
@media(max-width:620px){.values-n{width:2em;font-size:12px}}

/* ── Nom de la clientèle : un vrai titre, invisible à l'écran ─────────────
   L'onglet-image le porte déjà visuellement ; mais sans titre dans le code,
   les seize prestations pendaient toutes sous « Nos expertises », à plat.
   Les moteurs et les modèles de langue voient maintenant l'arborescence :
     h2 Nos expertises → h3 Hôtellerie → h4 Transactions hôtelières
   Masquage « sr-only » : le texte reste lu par les robots et les lecteurs
   d'écran, il n'est simplement pas peint. */
.xs-cat-title{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}