/* ================================================================
   LE CABINET — page-specific styles
   Builds on colors_and_type.css + home-styles.css (header, footer,
   .partners marquee, .reveal). Navy / champagne / ivory system.
   ================================================================ */

/* ============================================================
   HERO — full-bleed banner, photo fills, title overlaid
   ============================================================ */
.cab-hero {
  position: relative;
  min-height: clamp(560px, 92vh, 940px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(56px, 9vh, 110px);
  background: var(--fg-navy);
  color: #fff;
  overflow: hidden;
}
/* the team photo fills the entire banner */
.cab-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  background: var(--fg-navy-700);
  z-index: 0;
}
/* scrim for legibility of the overlaid title */
.cab-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,21,54,0.62) 0%, rgba(1,21,54,0.16) 20%, rgba(1,21,54,0) 42%, rgba(1,21,54,0.32) 64%, rgba(1,21,54,0.82) 88%, rgba(1,21,54,0.95) 100%);
}
.cab-hero-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M 0 0 L 36 36 M 36 0 L 0 36' stroke='%23FFE1B6' stroke-opacity='0.05' stroke-width='0.4'/></svg>");
}
.cab-hero-head {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  padding: 0 32px;
  text-align: center;
}
.cab-hero-head h1 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: clamp(52px, 8vw, 116px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 26px;
  color: #fff;
  text-shadow: 0 2px 40px rgba(1, 21, 54, 0.45);
}
.cab-hero-head .baseline {
  font-family: var(--fg-font-display);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  max-width: 660px;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(1, 21, 54, 0.4);
}
/* champagne corner ticks on the banner edges */
.cab-hero > .corner {
  position: absolute;
  z-index: 2;
  width: 30px; height: 30px;
  top: calc(var(--header-h, 96px) + 28px); right: 36px;
  border-top: 1.5px solid var(--fg-champagne);
  border-right: 1.5px solid var(--fg-champagne);
  opacity: 0.8;
  pointer-events: none;
}
.cab-hero > .corner.bl {
  top: auto; right: auto;
  bottom: 32px; left: 36px;
  border-top: 0; border-right: 0;
  border-bottom: 1.5px solid var(--fg-champagne);
  border-left: 1.5px solid var(--fg-champagne);
}

/* The partners band follows directly — keep navy continuity, no top gap */
.cab-hero + .partners { padding-top: 64px; }

/* mobile swaps to the portrait group photo — frame on the faces */
@media (max-width: 768px) {
  .cab-hero-bg { object-position: 50% 28%; }
}

/* ============================================================
   INTRO — « Le cabinet » editorial block on ivory
   ============================================================ */
.cab-intro {
  position: relative;
  background: var(--fg-ivory);
  padding: 130px 56px;
  overflow: hidden;
}
.cab-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M 0 0 L 36 36 M 36 0 L 0 36' stroke='%23011536' stroke-opacity='0.07' stroke-width='0.4'/></svg>");
  background-size: 36px 36px;
  pointer-events: none;
  /* fade the mesh out toward the edges so the block reads as a soft field */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 82%);
          mask-image: radial-gradient(ellipse at center, #000 38%, transparent 82%);
}
.cab-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.cab-intro .eyebrow {
  font-family: var(--fg-font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-navy-500);
  margin-bottom: 22px;
}
.cab-intro h2 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--fg-navy);
  margin: 0 0 36px;
}
.cab-rule {
  width: 80px; height: 1px;
  background: var(--fg-gold-rule);
  border: 0;
  margin: 0 auto 40px;
}
.cab-intro p {
  font-family: var(--fg-font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--fg-ink-2);
  margin: 0 auto;
  max-width: 720px;
  text-wrap: pretty;
}
.cab-intro .latin {
  font-family: var(--fg-font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--fg-navy);
  margin-top: 44px;
}
.cab-intro .latin .dia {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--fg-champagne);
  transform: rotate(45deg);
  margin: 0 16px 3px;
  vertical-align: middle;
}

/* ============================================================
   REPÈRES — « Quelques repères » figures on navy
   ============================================================ */
.cab-figures {
  position: relative;
  background: var(--fg-navy);
  color: #fff;
  padding: 120px 56px;
  overflow: hidden;
}
.cab-figures::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M 0 0 L 36 36 M 36 0 L 0 36' stroke='%23FFE1B6' stroke-opacity='0.04' stroke-width='0.4'/></svg>");
  pointer-events: none;
}
.cab-figures-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 76px;
}
.cab-figures-head .eyebrow {
  font-family: var(--fg-font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-champagne);
  margin-bottom: 16px;
}
.cab-figures-head h2 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
}
.figures-grid {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.figure {
  position: relative;
  padding: 18px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.figure + .figure::before {
  content: "";
  position: absolute;
  left: 0; top: 14%;
  height: 72%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 225, 182, 0.28), transparent);
}
.figure .fig-num {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: clamp(56px, 6vw, 76px);
  line-height: 1;
  color: var(--fg-champagne);
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.figure .fig-num sup {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 2px;
}
/* diamond glyph used when a repère has no figure */
.figure .fig-motif {
  width: 46px; height: 46px;
  margin-bottom: 30px;
  margin-top: 8px;
}
.figure .fig-label {
  font-family: var(--fg-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
  max-width: 200px;
  text-wrap: balance;
}

/* Figure 3 — the réseau partners, revealed inside an opening diamond.
   Reuses home-styles .diamond-stage / .quote-reveal mechanics. */
/* visible LinkedIn macaron beside each role (in addition to the photo-hover badge) */
.bio-role-row { display: block; margin: 0 0 26px; }
.bio-role-row .bio-role { display: inline; margin: 0; }
/* punchy accroche under the role — first thing the eye catches */
.bio-body p.bio-accroche {
  font-family: var(--fg-font-display);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--fg-navy);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.bio-li-mini {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  margin-left: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(1, 21, 54, 0.22);
  color: var(--fg-navy);
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.bio-li-mini svg { width: 13px; height: 13px; display: block; }
.bio-li-mini:hover { background: var(--fg-navy); color: #fff; border-color: var(--fg-navy); }

.figure-diamond { justify-content: center; }
.figure-diamond .diamond-stage {
  width: 188px; height: 188px;
}
.figure-diamond .quote-reveal { padding: 0 13%; }
.reseau-text {
  font-family: var(--fg-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}

/* ============================================================
   ÉQUIPE — intro + alternating bio rows
   ============================================================ */
.cab-team {
  background: var(--fg-ivory);
  padding: 130px 56px 140px;
}
.cab-team-head {
  max-width: 760px;
  margin: 0 auto 96px;
  text-align: center;
}
.cab-team-head .eyebrow {
  font-family: var(--fg-font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-navy-500);
  margin-bottom: 20px;
}
.cab-team-head h2 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--fg-navy);
  margin: 0 0 24px;
}
.cab-team-head p {
  font-family: var(--fg-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-ink-2);
  margin: 0;
}

.bio-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 110px;
}
.bio-row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}
.bio-row:nth-child(even) .bio-photo-wrap { order: 2; }
.bio-row:nth-child(even) .bio-body { order: 1; }

.bio-row:nth-child(even) {
  grid-template-columns: 1.15fr 0.85fr;
}
.bio-row:nth-child(even) .bio-photo-wrap { order: 2; }
.bio-row:nth-child(even) .bio-body { order: 1; }

/* ---- Photo with the diamond-opening hover (reprises Diamond Animation) ---- */
.bio-photo-wrap { position: relative; }
.bio-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--fg-navy);
  overflow: hidden;
  cursor: pointer;
}
/* persistent refined inset frame — a little more presence at rest */
.bio-photo::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 225, 182, 0.34);
  z-index: 3;
  pointer-events: none;
  transition: inset 600ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 500ms ease;
}
.bio-photo:hover::after,
.bio-photo.is-open::after {
  inset: 18px;
  border-color: rgba(255, 225, 182, 0.18);
}
/* small brand diamond tick, bottom-right, at rest — fades into the reveal */
.bio-photo::before {
  content: "";
  position: absolute;
  bottom: 24px; right: 24px;
  width: 13px; height: 13px;
  border: 1.5px solid var(--fg-champagne);
  transform: rotate(45deg);
  z-index: 4;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 400ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-photo:hover::before,
.bio-photo.is-open::before {
  opacity: 0;
  transform: rotate(135deg) scale(0.6);
}
.bio-photo image-slot {
  display: block;
  width: 100%; height: 100%;
  background: var(--fg-navy-700);
  color: rgba(255, 255, 255, 0.5);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 700ms ease;
}
/* lower the subject slightly in selected portraits (more headroom above) */
#bio-romain::part(image),
#bio-04::part(image),
#bio-05::part(image) { top: 56% !important; }
#bio-antoine::part(image) { top: 59% !important; }
.bio-photo:hover image-slot,
.bio-photo.is-open image-slot {
  transform: scale(1.04);
  filter: saturate(0.9) brightness(0.82);
}
/* static champagne corner accent */
.bio-photo .corner {
  position: absolute;
  top: 16px; left: 16px;
  width: 24px; height: 24px;
  border-top: 1.5px solid var(--fg-champagne);
  border-left: 1.5px solid var(--fg-champagne);
  opacity: 0.85;
  z-index: 4;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.bio-photo:hover .corner,
.bio-photo.is-open .corner { opacity: 0; }

/* navy scrim that deepens on hover so the diamond + glyph read clearly */
.bio-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(1, 21, 54, 0.55) 0%, rgba(1, 21, 54, 0.15) 55%, transparent 75%),
    linear-gradient(180deg, transparent 40%, rgba(1, 21, 54, 0.6) 100%);
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}
.bio-photo:hover .bio-scrim,
.bio-photo.is-open .bio-scrim { opacity: 1; }

/* The opening diamond badge = the LinkedIn link */
.bio-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 104px; height: 104px;
  display: grid;
  place-items: center;
  z-index: 5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bio-badge .bio-diamond {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-photo:hover .bio-badge .bio-diamond,
.bio-photo.is-open .bio-badge .bio-diamond {
  opacity: 1;
  transform: scale(1);
}
.bio-diamond .half {
  transform-origin: 100px 100px;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-diamond .artery {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 3;
}
.bio-diamond .left .artery  { stroke: var(--fg-champagne); }
.bio-diamond .right .artery { stroke: #ffffff; }
/* halves part on hover — the signature Diamond-Animation motion */
.bio-photo:hover .bio-diamond .left,
.bio-photo.is-open .bio-diamond .left  { transform: translateX(-26px); }
.bio-photo:hover .bio-diamond .right,
.bio-photo.is-open .bio-diamond .right { transform: translateX(26px); }

/* LinkedIn glyph revealed between the parted halves */
.bio-badge .bio-li {
  position: relative;
  z-index: 2;
  width: 30px; height: 30px;
  color: var(--fg-champagne);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 500ms 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-photo:hover .bio-badge .bio-li,
.bio-photo.is-open .bio-badge .bio-li {
  opacity: 1;
  transform: scale(1);
}
.bio-badge:hover .bio-li { color: #fff; }

/* "LinkedIn" caption under the badge, fades in with it */
.bio-badge .bio-li-label {
  position: absolute;
  bottom: -26px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--fg-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-champagne);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 500ms 200ms ease;
}
.bio-photo:hover .bio-badge .bio-li-label,
.bio-photo.is-open .bio-badge .bio-li-label { opacity: 0.85; }

/* ---- Bio text ---- */
.bio-body .bio-index {
  font-family: var(--fg-font-display);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--fg-champagne-600);
  margin-bottom: 18px;
}
.bio-body h3 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--fg-navy);
  margin: 0 0 10px;
}
.bio-body .bio-role {
  font-family: var(--fg-font-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--fg-navy-500);
  margin: 0 0 26px;
}
.bio-body .bio-role-rule {
  width: 54px; height: 1px;
  background: var(--fg-champagne-600);
  border: 0;
  margin: 0 0 26px;
}
.bio-body p {
  font-family: var(--fg-font-body);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--fg-ink-2);
  margin: 0;
  text-wrap: pretty;
}
.bio-body .bio-todo {
  font-style: italic;
  color: var(--fg-ink-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .cab-hero { min-height: 78vh; }
  .cab-hero > .corner { top: calc(var(--header-h, 80px) + 18px); right: 22px; }
  .cab-hero > .corner.bl { bottom: 22px; left: 22px; }
  .cab-intro { padding: 96px 28px; }
  .cab-figures { padding: 88px 28px; }
  .figures-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 0; }
  /* drop the vertical dividers on the wrapped grid; use row rhythm instead */
  .figure + .figure::before { display: none; }
  .cab-team { padding: 96px 28px 104px; }
  .bio-grid { gap: 72px; }
  .bio-row {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 540px;
    margin: 0 auto;
  }
  /* even rows have a higher-specificity 2-col rule above — override it here */
  .bio-row:nth-child(even) { grid-template-columns: 1fr; }
  .bio-row:nth-child(even) .bio-photo-wrap { order: 0; }
  .bio-row:nth-child(even) .bio-body { order: 0; }
  .bio-photo { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .figures-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 0; }
  .figure:last-child { grid-column: 1 / -1; }
  .bio-photo { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .bio-photo image-slot,
  .bio-badge .bio-diamond,
  .bio-diamond .half,
  .bio-badge .bio-li { transition: none; }
}