/* ============================================================
   JUMO Partners — prototype statique
   Palette dérivée de la charte graphique officielle (juin 2024)
   Dark Blue #001951 · Calm Turquoise #00A2B4 · tertiaire #FFD200
   ============================================================ */

:root {
  /* neutres à biais froid, choisis — pas hérités */
  --paper:      #FBFCFD;
  --surface:    #F1F5F8;
  --mist:       #E4ECF2;
  --rule:       #D3DEE7;
  --rule-soft:  #E7EEF3;

  --ink:        #0A1430;
  --ink-soft:   #45536E;
  --ink-faint:  #5E6B82;

  --navy:       #001951;
  --teal:       #00A2B4;
  --teal-deep:  #00757F;  /* assombri le 17/09 : #007D8C tombait a 4,38:1 sur la teinte turquoise */
  --amber:      #FFD200;
  --magenta:    #CE008F;

  --on-navy:    #EAF1F7;

  --shadow:     0 1px 2px rgba(10,20,48,.04), 0 8px 24px -12px rgba(10,20,48,.10);

  --measure: 66ch;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1180px;

  /* Charte officielle JUMO Partners (ZEBU Studio, 13/06/2024) */
  --f-display: "Molengo", Georgia, "Songti SC", "SimSun", serif;
  --f-body: "Roboto", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: "Josefin Sans", "Roboto", -apple-system, "Segoe UI", sans-serif;
  --f-quote: "Gotu", Georgia, serif;
  --f-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

:where(a) { color: inherit; }
:where(img, svg) { max-width: 100%; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 74ch; }
.stack > * + * { margin-top: var(--sp, 1rem); }

section { padding-block: clamp(3rem, 7vw, 6rem); }
section.tight { padding-block: clamp(2rem, 4vw, 3.25rem); }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
p  { margin: 0; max-width: var(--measure); }

.lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--rule); max-width: 6rem; }
.eyebrow.solo::after { display: none; }

.cjk { font-family: var(--f-cjk); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- corridor motif ---------- */
.corridor { display: block; width: 100%; height: 26px; overflow: visible; }
.corridor line { stroke: var(--rule); stroke-width: 1; }
.corridor .mk { fill: var(--teal); }
.corridor .mk.rev { fill: var(--amber); }
.corridor text { font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; fill: var(--ink-faint); text-transform: uppercase; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.head-in { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; }
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; font-family: var(--f-display); font-size: 1.22rem; letter-spacing: -.01em; }
.brand b { font-weight: 600; color: var(--ink); }
.brand span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
nav.main { margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.5rem); flex-wrap: wrap; }
nav.main a { text-decoration: none; font-size: .875rem; color: var(--ink-soft); padding-block: .3rem; border-bottom: 1.5px solid transparent; }
nav.main a:hover { color: var(--ink); border-bottom-color: var(--teal); }
nav.main a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--teal); }
/* Two-level navigation (v20). CSS-only disclosure: the submenu opens on hover
   and on keyboard focus anywhere inside the group, so it needs no JavaScript
   and survives the single-file preview. The padding bridge under the parent
   keeps the pointer inside the group while it travels down. */
.has-sub { position: relative; display: inline-flex; }
.has-sub > a::after { content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .45em; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-.15em) rotate(45deg); opacity: .55; }
.sub {
  position: absolute; top: 100%; left: -.9rem; z-index: 60;
  min-width: 15rem; padding: .5rem 0; margin-top: .55rem;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(0, 25, 81, .13);
  display: none; flex-direction: column;
}
.sub::before { content: ""; position: absolute; top: -.6rem; left: 0; right: 0; height: .6rem; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: flex; }
nav.main .sub a { padding: .5rem 1.1rem; border-bottom: 0; font-size: .855rem; }
nav.main .sub a:hover { background: var(--wash); color: var(--ink); border-bottom: 0; }
nav.main .sub a[aria-current="page"] { color: var(--teal-deep); border-bottom: 0; }
/* Narrow screens: no dropdown. The six top-level links wrap into a row, and the
   children are dropped — both parents are real pages that list their own
   children (services.html, sectors.html), so nothing becomes unreachable. */
@media (max-width: 860px) {
  .has-sub { display: inline-flex; }
  .sub { display: none !important; }
  .has-sub > a::after { display: none; }
  nav.main { gap: .55rem 1rem; }
  nav.main a { font-size: .82rem; }
}

.langs { display: flex; gap: .35rem; font-family: var(--f-mono); font-weight: 600; font-size: .68rem; letter-spacing: .1em; }
.langs a { padding: .2rem .4rem; text-decoration: none; color: var(--ink-faint); border: 1px solid transparent; }
.langs a.on { color: var(--ink); border-color: var(--rule); }
.langs a:hover { color: var(--teal-deep); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem); }
.hero h1 em { font-style: italic; color: var(--teal-deep); }

/* ---------- doors ---------- */
.doors { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 820px) { .doors { grid-template-columns: 1fr 1fr; } }
.door {
  background: var(--paper);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  display: flex; flex-direction: column; gap: .85rem;
  text-decoration: none;
  transition: background .18s ease;
}
.door:hover { background: var(--surface); }
.door .dir { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--teal-deep); display: flex; align-items: center; gap: .5rem; }
.door.rev .dir { color: var(--ink-soft); }
.door h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.door p { color: var(--ink-soft); font-size: .97rem; }
.door .go { margin-top: auto; padding-top: .6rem; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; color: var(--ink); border-top: 1px solid var(--rule-soft); }
.door:hover .go { color: var(--teal-deep); }

/* ---------- steps ---------- */
.steps { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }
.step { border-top: 2px solid var(--navy); padding-top: 1rem; }
.step .n { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; color: var(--ink-faint); display: block; margin-bottom: .45rem; }
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .95rem; color: var(--ink-soft); }
.step ul { margin: .8rem 0 0; padding-left: 1rem; font-size: .9rem; color: var(--ink-soft); }
.step li { margin-block: .25rem; }
.band .step p, .band .step ul, .band .step li { color: color-mix(in srgb, var(--on-navy) 84%, transparent); }
.band .step h3 { color: var(--on-navy); }

/* ---------- generic grid + cards ---------- */
.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .g2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .g3 { grid-template-columns: repeat(3, 1fr); } }

/* Values block (v20, About page). Rule on top rather than a card, so it reads as
   a statement of the firm rather than as three products. */
.value { border-top: 2px solid var(--teal); padding-top: 1rem; }
.value h3 { font-family: var(--f-display); font-size: 1.3rem; margin: 0 0 .7rem; }
.value p { color: var(--ink-soft); }
.value p b { color: var(--ink); font-weight: 600; }

/* A client's own words about why a mandate renews (v20, partner pages and the
   organisation page). Distinct from .pull, which is the partner speaking. */
.clientnote { margin: 0; padding: 1.4rem 1.6rem; border-left: 3px solid var(--teal); background: var(--wash); }
.clientnote p { margin: 0; font-family: var(--f-quote); font-size: 1.18rem; line-height: 1.5; }
.clientnote cite { display: block; margin-top: .9rem; font-style: normal; font-size: .84rem; color: var(--ink-faint); }
.band .clientnote { background: rgba(255,255,255,.06); }
.band .clientnote p, .band .clientnote cite { color: var(--on-navy); }
.band .clientnote cite { opacity: .78; }
@media (min-width: 700px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .g4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none;
}
a.card:hover { border-color: var(--teal); }
.card .tag, .ocard .tag { font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.card h3 { font-size: 1.18rem; }
.card p { font-size: .93rem; color: var(--ink-soft); }

/* ---------- figures / stats ---------- */
.stats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.stat { background: var(--paper); padding: 1.3rem 1.4rem; }
.stat b { display: block; font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .5rem; font-size: .84rem; color: var(--ink-soft); }

/* ---------- quotes ---------- */
.quote { border-left: 2px solid var(--teal); padding-left: 1.3rem; }
.quote p { font-family: var(--f-quote); font-size: 1.12rem; line-height: 1.5; }
.quote footer { margin-top: .7rem; font-size: .85rem; color: var(--ink-faint); }
.quote footer b { color: var(--ink); font-weight: 600; }

/* sur fond marine, la citation prend les tokens du fond — sinon le nom du client
   se retrouve en encre sombre sur marine (1,09:1, illisible) */
.band .quote { border-left-color: var(--teal); }
.band .quote p { color: var(--on-navy); }
.band .quote footer { color: color-mix(in srgb, var(--on-navy) 76%, transparent); }
.band .quote footer b { color: var(--on-navy); }
.band .checks li, .band .fails li { color: color-mix(in srgb, var(--on-navy) 84%, transparent); }
.band .checks li::before { color: var(--teal); }

/* ---------- band ---------- */
.band { background: var(--navy); color: var(--on-navy); }
.band h2, .band h3 { color: var(--on-navy); }
.band p { color: color-mix(in srgb, var(--on-navy) 78%, transparent); }
.band .eyebrow { color: var(--teal); }
.band .eyebrow::after { background: color-mix(in srgb, var(--on-navy) 25%, transparent); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.15rem;
  font-family: var(--f-mono); font-weight: 600; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--navy); background: var(--navy); color: var(--paper);
  transition: background .16s ease, color .16s ease;
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--teal); color: var(--teal-deep); background: transparent; }
.band .btn { background: var(--teal); border-color: var(--teal); color: #04121F; }
.band .btn.ghost { background: transparent; color: var(--on-navy); border-color: color-mix(in srgb, var(--on-navy) 35%, transparent); }

/* ---------- lists ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-width: var(--measure); }
.checks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; font-size: .96rem; color: var(--ink-soft); }
.checks li::before { content: "—"; color: var(--teal); font-family: var(--f-mono); }

.fails { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-width: var(--measure); }
.fails li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; font-size: .96rem; color: var(--ink-soft); }
.fails li::before { content: "×"; color: var(--magenta); font-family: var(--f-mono); font-size: 1rem; }

/* ---------- table ---------- */
.tblwrap { overflow-x: auto; border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .92rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th { font-family: var(--f-mono); font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); background: var(--surface); }
tr:last-child td { border-bottom: 0; }

/* ---------- logo wall ---------- */
.logos { display: flex; flex-wrap: wrap; gap: .5rem 0; border: 1px solid var(--rule); }
.logos span {
  flex: 1 1 auto; min-width: 150px; padding: .95rem 1.1rem;
  font-family: var(--f-display); font-size: 1rem; color: var(--ink-soft);
  border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
}

/* ---------- offices ---------- */
.offices { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .offices { grid-template-columns: repeat(5, 1fr); } }
.office { background: var(--paper); padding: 1.2rem 1.3rem; }
.office b { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.office span { display: block; font-family: var(--f-mono); font-weight: 600; font-size: .68rem; letter-spacing: .1em; color: var(--ink-faint); margin-top: .35rem; }

/* ---------- endorsement lockup ---------- */
.lockup { display: inline-flex; flex-direction: column; gap: .2rem; border-left: 2px solid var(--teal); padding-left: .9rem; }
.lockup b { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: .02em; font-weight: 500; }
.lockup span { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule); background: var(--surface); padding-block: 2.5rem 3rem; margin-top: 2rem; }
.foot-grid { display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }
.site-foot h4 { font-family: var(--f-mono); font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; margin-bottom: .7rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-foot a { text-decoration: none; font-size: .89rem; color: var(--ink-soft); }
.site-foot a:hover { color: var(--teal-deep); }
.legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: .78rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; }

/* ---------- prototype notice ---------- */
/* Prototype notice. It sits after the footer and sticks to the bottom of the
   viewport, so a reader opens on JUMO's own header rather than on a yellow
   disclaimer — but the notice stays visible on every screen. */
.proto {
  position: sticky; bottom: 0; z-index: 60;
  background: var(--amber); color: #1A1400;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
  padding: .55rem var(--gut); text-align: center;
  border-top: 1px solid rgba(26, 20, 0, .22);
  box-shadow: 0 -6px 18px -12px rgba(10, 20, 48, .45);
}
.proto b { font-weight: 700; }

/* corridor labels */
.corridor { height: 30px; }
.corridor text { dominant-baseline: middle; }
.band .corridor line { stroke: color-mix(in srgb, var(--on-navy) 25%, transparent); }

/* ============================================================
   Logo officiel (charte JUMO Partners, juin 2024)
   Le navy du logo suit currentColor pour rester lisible sur les
   deux thèmes ; le turquoise est verrouillé sur la couleur charte.
   ============================================================ */
:root { --logo-teal: #00A2B4; }

.brand { color: var(--ink); }
.brand .logo { display: block; height: 34px; width: auto; }
.site-foot .brand .logo { height: 40px; }
.band .brand, .band .logo { color: var(--on-navy); }

/* variante typographique du prototype : display en sans géométrique */
:root[data-type="sans"] {
  --f-display: "Figtree", "Karla", -apple-system, "PingFang SC", sans-serif;
}
:root[data-type="sans"] h1, :root[data-type="sans"] h2, :root[data-type="sans"] h3, :root[data-type="sans"] h4 {
  font-weight: 600; letter-spacing: -.025em; line-height: 1.08;
}
:root[data-type="sans"] .quote p { font-weight: 400; letter-spacing: -.01em; }
:root[data-type="sans"] .lockup b { font-weight: 700; letter-spacing: -.01em; }
:root[data-type="sans"] .hero h1 em { font-style: normal; }

/* barre prototype */
.proto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1.2rem; }
.proto .tt { display: inline-flex; align-items: center; gap: .3rem; }
.proto button {
  font: inherit; font-size: .7rem; letter-spacing: .06em;
  background: transparent; border: 1px solid rgba(26,20,0,.35); color: inherit;
  padding: .1rem .5rem; cursor: pointer;
}
.proto button[aria-pressed="true"] { background: #1A1400; color: #FFD200; border-color: #1A1400; }

/* ============================================================
   Figures — SVG écrit à la main, thématisé par tokens.
   Palette catégorielle validée pour les deux thèmes.
   ============================================================ */
:root {
  --fig-a: #0092A3;   /* Beveridge / flux aller */
  --fig-b: #A87400;   /* Bismarck */
  --fig-c: #C4108C;   /* Mixte / point de rupture */
  --fig-grid: #D3DEE7;
}

.fig { margin: 0; color: var(--ink); }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig figcaption {
  margin-top: 1rem; font-size: .85rem; line-height: 1.5;
  color: var(--ink-faint); max-width: 68ch;
  padding-top: .8rem; border-top: 1px solid var(--rule-soft);
}
.fig text { font-family: var(--f-body); font-size: 13px; fill: var(--ink); }
.fig .sub { font-size: 11px; fill: var(--ink-faint); }
.fig .fl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-faint); }
.fig .spine { stroke: var(--fig-grid); stroke-width: 1; }

/* 1 · corridor */
.fig .col text { font-size: 13px; fill: var(--ink-soft); }
.fig .col .fl { fill: var(--ink); }
.fig .colrule { stroke: var(--rule); stroke-width: 1; }
.fig .moment line { stroke: var(--fig-grid); stroke-width: 1; stroke-dasharray: 3 5; }
.fig .moment text { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-faint); }
.fig .flow { fill: none; stroke-width: 2; }
.fig .flow.out { stroke: var(--fig-a); }
.fig .flow.back { stroke: currentColor; stroke-dasharray: 6 4; }
.fig .lab { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.fig .lab.out { fill: var(--fig-a); }
.fig .lab.back { fill: var(--ink); }

/* 2 · portes */
.fig .gate circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.fig .gate .n { font-family: var(--f-mono); font-size: 11px; fill: var(--ink); }
.fig .gate .gl { font-size: 12.5px; font-weight: 600; }
.fig .gate.risk circle { stroke: var(--fig-c); stroke-width: 2.5; fill: color-mix(in srgb, var(--fig-c) 12%, transparent); }
.fig .gate.risk .gl { fill: var(--fig-c); }
.fig .bracket path { fill: none; stroke: var(--fig-c); stroke-width: 1.5; }
.fig .bracket text { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--fig-c); }

/* 3 · financement */
.fig .legend text { font-size: 12.5px; fill: var(--ink-soft); }
.fig .legend .c-v { fill: var(--fig-a); }
.fig .legend .c-b { fill: var(--fig-b); }
.fig .legend .c-m { fill: var(--fig-c); }
.fig .tile rect { stroke-width: 1; }
.fig .tile.c-v rect { fill: color-mix(in srgb, var(--fig-a) 14%, transparent); stroke: var(--fig-a); }
.fig .tile.c-b rect { fill: color-mix(in srgb, var(--fig-b) 14%, transparent); stroke: var(--fig-b); }
.fig .tile.c-m rect { fill: color-mix(in srgb, var(--fig-c) 14%, transparent); stroke: var(--fig-c); }
.fig .tile rect.bar { stroke: none; }
.fig .tile.c-v rect.bar { fill: var(--fig-a); }
.fig .tile.c-b rect.bar { fill: var(--fig-b); }
.fig .tile.c-m rect.bar { fill: var(--fig-c); }
.fig .tile text { fill: var(--ink); font-size: 13px; font-weight: 500; }

/* 4 · calendrier */
.fig .tick line { stroke: var(--fig-grid); stroke-width: 1; }
.fig .tick text { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-faint); }
.fig .bar .bl { font-size: 13px; fill: var(--ink); }
.fig .bar rect { fill: color-mix(in srgb, var(--fig-a) 30%, transparent); stroke: var(--fig-a); stroke-width: 1.5; }
.fig .bar.cont rect { fill: color-mix(in srgb, var(--fig-a) 12%, transparent); stroke-dasharray: 5 4; }
.fig .bar.cont .sub { fill: var(--fig-a); }

/* emplacement photo (prototype) */
.shot {
  margin: 0; display: grid; place-items: center; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--teal) 55%, transparent);
  background: color-mix(in srgb, var(--teal) 5%, transparent);
  padding: 1.5rem;
}
.shot .tagline { font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); }
.shot p { margin: .6rem auto 0; max-width: 44ch; font-size: .92rem; color: var(--ink-soft); }

/* 5 · la cellule */
.fig .cellbox { fill: none; stroke: var(--rule); stroke-width: 1; }
.fig .nucleus { fill: var(--fig-a); }
.fig .cl { font-size: 14px; font-weight: 600; fill: var(--ink); }
.fig .agents rect { fill: color-mix(in srgb, var(--fig-b) 22%, transparent); stroke: var(--fig-b); stroke-width: 1.2; }
.fig .agents text { font-size: 13px; fill: var(--fig-b); }
.fig .io { stroke: currentColor; stroke-width: 1.5; }
.fig .mini rect { fill: color-mix(in srgb, var(--fig-a) 12%, transparent); stroke: var(--fig-a); stroke-width: 1; }
.fig .pulse { stroke: var(--rule); stroke-width: 1; fill: none; }
.fig .pulse.wave { stroke: var(--fig-c); stroke-width: 1.8; }

/* 6 · entonnoir éditorial */
.fig .fstep rect { fill: none; stroke: var(--rule); stroke-width: 1; }
.fig .fstep.end rect { stroke: var(--fig-a); stroke-width: 2; }
.fig .fstep .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; fill: var(--ink-faint); }
.fig .fstep .trade { font-size: 12.5px; fill: var(--fig-a); }
.fig .fstep .fx { fill: var(--rule); }

/* ---------- insights ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-soft);
  padding: .45rem .85rem; cursor: pointer;
}
.filters button:hover { border-color: var(--teal); color: var(--teal-deep); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--paper); }

.posts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .posts { grid-template-columns: 1fr 1fr; } }
.post {
  background: var(--paper); padding: 1.6rem 1.7rem;
  display: flex; flex-direction: column; gap: .7rem; text-decoration: none;
  transition: background .16s ease;
}
.post:hover { background: var(--surface); }
.post .meta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.post .kind { color: var(--teal-deep); }
.post .date { color: var(--ink-faint); }
.post .gate { color: var(--ink); border: 1px solid var(--rule); padding: .1rem .4rem; }
.post h3 { font-size: 1.24rem; }
.post p { font-size: .94rem; color: var(--ink-soft); }
.post .go { margin-top: auto; padding-top: .5rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink); }
.post:hover .go { color: var(--teal-deep); }

/* ---------- formulaires ---------- */
.signup, .gateform { display: grid; gap: .9rem; align-content: start; }
.gateform { border: 1px solid var(--rule); padding: 1.6rem; background: var(--paper); }
.signup label, .gateform label { display: grid; gap: .35rem; font-size: .88rem; color: var(--ink-soft); }
.band .signup label { color: color-mix(in srgb, var(--on-navy) 84%, transparent); }
.signup input, .signup select, .gateform input, .gateform select, .gateform textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); padding: .6rem .7rem; width: 100%;
}
.signup input:focus, .signup select:focus, .gateform input:focus, .gateform select:focus, .gateform textarea:focus {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
.signup .btn, .gateform .btn { justify-self: start; border: none; cursor: pointer; }
.gateform .opt { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.fineprint { font-size: .78rem; color: var(--ink-faint); max-width: 46ch; }
.band .fineprint { color: color-mix(in srgb, var(--on-navy) 66%, transparent); }

/* ---------- article ---------- */
.prose h3 { margin-top: 2.4rem; margin-bottom: .7rem; }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose p b { color: var(--ink); }
.prose .pull {
  margin: 2rem 0; padding: 1.2rem 0 1.2rem 1.5rem;
  border-left: 2px solid var(--teal);
  font-family: var(--f-display); font-size: 1.3rem; line-height: 1.4; color: var(--ink);
}

/* ---------- barre de filtres ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; }
.filters button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.count { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.post[hidden] { display: none; }
.posts[hidden] { display: none; }
.empty { margin-top: 1.6rem; font-size: .95rem; color: var(--ink-soft); }
.empty a { color: var(--teal-deep); }

/* 7 · carte des offres */
.fig .dirs rect { fill: color-mix(in srgb, var(--fig-a) 10%, transparent); stroke: var(--fig-a); stroke-width: 1.2; }
.fig .dirs text { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); }
.fig .onote { font-size: 12px; fill: var(--ink-faint); }
.fig .omoment { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.fig .ob rect { fill: none; stroke: var(--rule); stroke-width: 1; }
.fig .ob text { font-size: 13.5px; fill: var(--ink); }
.fig .chip rect { fill: color-mix(in srgb, var(--fig-b) 14%, transparent); stroke: var(--fig-b); stroke-width: 1; }
.fig .chip text { font-size: 13px; fill: var(--ink); }

/* 8 · deux routes */
.fig .rstart { fill: var(--ink); }
.fig .route { fill: none; stroke-width: 2; }
.fig .route.a { stroke: var(--fig-a); }
.fig .route.b { stroke: var(--fig-b); }
.fig .rlab { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.fig .rlab.a { fill: var(--fig-a); }
.fig .rlab.b { fill: var(--fig-b); }
.fig .rout { font-size: 13.5px; font-weight: 600; fill: var(--ink); }

/* ---------- associés ---------- */
.idcard {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.idcard > span { display: grid; gap: .25rem; font-size: .95rem; color: var(--ink-soft); }
.idcard b { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
.idcard a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.idcard a:hover { border-bottom-color: var(--teal); color: var(--teal-deep); }

.li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .95rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule) !important;
}
.li:hover { color: var(--teal-deep); border-bottom-color: var(--teal) !important; }
.li svg { flex: none; }
.li.small { font-size: .82rem; }
.li.missing { color: var(--ink-faint); border-bottom: 1px dashed var(--rule) !important; cursor: help; }

.pcard h3 a { text-decoration: none; }
.pcard h3 a:hover { color: var(--teal-deep); }
.pcard-foot {
  margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between;
}
.pcard-foot .go { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-decoration: none; color: var(--ink); }
.pcard-foot .go:hover { color: var(--teal-deep); }
.prose.measure { max-width: 74ch; }

/* ---------- photographies ---------- */
.phero { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .phero { grid-template-columns: minmax(0,1fr) 260px; } }
.portrait {
  width: 100%; max-width: 260px; height: auto; display: block;
  border: 1px solid var(--rule); background: var(--surface);
  filter: saturate(.92);
}
.pcard .avatar {
  width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); margin-bottom: .3rem; filter: saturate(.92);
}
.photo { margin: 0; }
.photo img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); filter: saturate(.9); }
.photo figcaption {
  margin-top: .8rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cover {
  display: block; width: 100%; max-width: 260px; height: auto;
  border: 1px solid var(--rule); box-shadow: var(--shadow);
}
.post .cover { max-width: 96px; float: right; margin: 0 0 .6rem 1rem; }

/* ---- Interview portrait ------------------------------------------------- */
.portrait.interview {
  width: 108px; height: 108px; max-width: none; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%; margin-bottom: 1.6rem;
}

/* ---- Partner mini-cards (contact page) --------------------------------- */
.pmini { display: grid; gap: .1rem; margin-top: 1rem; }
.pmini a {
  display: grid; grid-template-columns: 52px 1fr; gap: .95rem; align-items: center;
  padding: .8rem .2rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule);
}
.pmini a:first-child { border-top: 1px solid var(--rule); }
.pmini img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  object-position: 50% 22%; border: 1px solid var(--rule); filter: saturate(.92);
}
.pmini .n, .pmini .r { display: block; }
.pmini .n { font-family: var(--f-display); font-size: 1.02rem; color: var(--ink); line-height: 1.25; }
.pmini .r {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .22rem;
}
.pmini a:hover .n { color: var(--teal-deep); }
.pmini a:hover img { border-color: var(--teal); }

/* ---- Case study index + detail ------------------------------------------ */
.csgrid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.6rem; }
@media (min-width: 720px) { .csgrid { grid-template-columns: 1fr 1fr; } }
.csgrid a {
  background: var(--paper); padding: 1.5rem 1.5rem 1.35rem; text-decoration: none; color: inherit;
  display: grid; align-content: start; gap: .55rem; transition: background .18s ease;
}
.csgrid a:hover { background: var(--surface); }
.csgrid .who { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--teal-deep); }
.csgrid h3 { font-size: 1.16rem; line-height: 1.3; margin: 0; }
.csgrid p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.csgrid .go { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: .3rem; }
.csgrid a:hover .go { color: var(--teal-deep); }
.csgrid a.cta { background: var(--surface); }
.csgrid a.cta .who { color: var(--ink); }
.csgrid a.cta:hover { background: var(--mist); }
.portrait.interview { width: 124px; height: 124px; }

.csmeta { display: grid; gap: 1.4rem; margin-top: 2rem; }
@media (min-width: 720px) { .csmeta { grid-template-columns: repeat(3, 1fr); } }
.csmeta > div { border-top: 2px solid var(--ink); padding-top: .8rem; }
.csmeta b { display: block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; margin-bottom: .4rem; }
.csmeta span { font-size: .95rem; color: var(--ink-soft); }

.csteps { counter-reset: s; display: grid; gap: 0; margin-top: 1.4rem; }
.csteps > li { list-style: none; counter-increment: s; display: grid; grid-template-columns: 3.1rem 1fr; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.csteps > li:first-child { border-top: 1px solid var(--rule); }
.csteps > li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-mono); font-size: .8rem; color: var(--teal-deep); padding-top: .15rem; }
.csteps h4 { margin: 0 0 .35rem; font-size: 1.02rem; }
.csteps p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* ---- Offer pages: the fixed nine-block shape ---------------------------- */
/* .checks is a grid, and CSS columns do not apply to grid containers — so the
   two-column variant has to switch display back to block. */
.checks.cols2 { display: block; columns: 2; column-gap: 3rem; max-width: 74rem; }
.checks.cols2 li { break-inside: avoid; margin-bottom: .75rem; }
@media (max-width: 760px) { .checks.cols2 { columns: 1; } }

.buybox .eyebrow { color: var(--ink); }
.buybox {
  display: grid; gap: 2.5rem; padding: 1.8rem;
  background: var(--surface); border: 1px solid var(--rule);
}
@media (min-width: 760px) { .buybox { grid-template-columns: 1fr 1fr; } }

.tbc {
  margin-top: .8rem; padding: .55rem .8rem; font-family: var(--f-mono);
  font-size: .78rem; line-height: 1.45; color: var(--ink-soft);
  border: 1px dashed var(--rule); background: var(--paper);
}

.leadcard {
  display: grid; gap: 1.8rem; align-items: start; margin-top: 1.4rem;
  border-top: 2px solid var(--ink); padding-top: 1.6rem;
}
@media (min-width: 720px) { .leadcard { grid-template-columns: 148px 1fr; } }
.leadcard img {
  width: 148px; height: 148px; object-fit: cover; object-position: 50% 22%;
  border: 1px solid var(--rule); filter: saturate(.92);
}
.leadcard .role {
  margin: .35rem 0 0; font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
}

.faq { margin-top: 1.4rem; }
.faq > div { border-bottom: 1px solid var(--rule); padding: 1.15rem 0; }
.faq > div:first-child { border-top: 1px solid var(--rule); }
.faq dt { font-family: var(--f-display); font-size: 1.06rem; color: var(--ink); }
.faq dd { margin: .5rem 0 0; font-size: .94rem; color: var(--ink-soft); max-width: 68ch; }

/* ---- Services index ----------------------------------------------------- */
.ogrid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.6rem; }
@media (min-width: 760px) { .ogrid { grid-template-columns: 1fr 1fr 1fr; } }
.ogrid .ocard {
  background: var(--paper); padding: 1.6rem 1.5rem 1.4rem; text-decoration: none; color: inherit;
  display: grid; align-content: start; gap: .6rem; transition: background .18s ease;
}
.ogrid .ocard:hover { background: var(--surface); }
.ogrid .ocard h3 { margin: 0; font-size: 1.2rem; line-height: 1.28; }
.ogrid .ocard p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.ogrid .ocard .go {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .3rem;
}
.ogrid .ocard:hover .go { color: var(--teal-deep); }

/* ---- v12: BrandScript blocks ------------------------------------------- */
.tbc-inline {
  font-family: var(--f-mono); font-size: .82em; line-height: 1.5; color: var(--ink-soft);
  border-bottom: 1px dashed var(--rule); padding-bottom: 1px;
}
.band .tbc-inline { color: var(--on-navy); border-bottom-color: color-mix(in srgb, var(--on-navy) 45%, transparent); }
.btn .tbc-inline { color: inherit; border-bottom-color: currentColor; }

.stake h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.band .stake h3 { color: var(--on-navy); }
.stake p { margin: 0; font-size: .95rem; }
.band .stake p { color: color-mix(in srgb, var(--on-navy) 86%, transparent); }

.promises { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.4rem; }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promises > div { background: var(--paper); padding: 1.5rem; }
.promises h3 { margin: 0 0 .5rem; font-size: 1.06rem; }
.promises p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.fineprint { margin-top: 1rem; font-size: .88rem; color: var(--ink-faint); max-width: 72ch; }

/* the reader's route in — three routes, not one */
.routes { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.6rem; }
@media (min-width: 820px) { .routes { grid-template-columns: repeat(3, 1fr); } }
.routes a { background: var(--paper); padding: 1.5rem; text-decoration: none; color: inherit; display: grid; align-content: start; gap: .5rem; }
.routes a:hover { background: var(--surface); }
.routes .who { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--teal-deep); }
.routes h3 { margin: 0; font-size: 1.12rem; }
.routes p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.routes .go { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: .25rem; }
.routes a:hover .go { color: var(--teal-deep); }

/* procurement fact table */
.facts { display: grid; gap: 0; margin-top: 1.4rem; }
.facts > div { display: grid; gap: .3rem 1.4rem; padding: .95rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { .facts > div { grid-template-columns: 15rem 1fr; } }
.facts > div:first-child { border-top: 1px solid var(--rule); }
.facts dt, .facts b { font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; padding-top: .2rem; }
.facts span { font-size: .95rem; color: var(--ink-soft); }

.sectorline { margin-top: 1.3rem; font-size: .95rem; color: var(--ink-soft); max-width: 78ch; }
.sectorline a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sectorline a:hover { color: var(--teal-deep); border-bottom-color: var(--teal); }

/* four sector cards, replacing the run-on sentence */
.sectors { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.4rem; }
@media (min-width: 700px) { .sectors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .sectors { grid-template-columns: repeat(4, 1fr); } }
.sectors a { background: var(--paper); padding: 1.4rem 1.4rem 1.3rem; text-decoration: none; color: inherit; display: grid; align-content: start; gap: .5rem; transition: background .18s ease; }
.sectors a:hover { background: var(--surface); }
.sectors h3 { margin: 0; font-size: 1.12rem; }
.sectors p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.sectors a:hover h3 { color: var(--teal-deep); }

/* ---------- v21 collection notice ---------- */
/* Sits beneath the form fields, on the page. Small but not grey-on-grey:
   a notice nobody can read is not a notice. --ink-soft passes 4.5:1 in
   both themes; --ink-faint does not at this size. */
.collect { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--rule);
  background: var(--surface); border-radius: 2px; max-width: 62ch; }
.collect p { font-size: .85rem; line-height: 1.55; color: var(--ink-soft); margin-top: .7rem; }
.collect p:first-of-type { margin-top: 0; }
.collect .eyebrow { margin-bottom: .6rem; }
.collect a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.band .collect { background: color-mix(in srgb, var(--on-navy) 6%, transparent);
  border-color: color-mix(in srgb, var(--on-navy) 20%, transparent); }
.band .collect p { color: color-mix(in srgb, var(--on-navy) 82%, transparent); }
.band .collect a { color: var(--on-navy); }
/* Honeypot: off-canvas rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- rythme de fonds (maquette du 15/09/2026, validee par Benoit) ----
   Le site etait juge trop blanc. Les sections alternent desormais paper, gris
   froid et teinte turquoise, avec un seul accent ambre par page et la bande
   navy inchangee. Les tons sont poses par build.js, pas a la main. */
:root {
  --tint-teal:  #E9F5F7;
  --tint-amber: #FFF8E0;
  --hero-wash:  linear-gradient(180deg, #EDF6F8 0%, var(--paper) 100%);
}
.tone-hero    { background: var(--hero-wash); }
.tone-paper   { background: var(--paper); }
.tone-surface { background: var(--surface); }
.tone-teal    { background: var(--tint-teal); }
.tone-amber   { background: var(--tint-amber); border-top: 2px solid var(--amber); }
.tone-surface .card, .tone-teal .card, .tone-amber .card { background: var(--paper); }
.tone-surface .door:hover, .tone-teal .door:hover, .tone-amber .door:hover { background: var(--paper); }
.tone-surface .stat, .tone-teal .stat, .tone-amber .stat { background: var(--paper); }