/* Charte Ardoise. Une colonne centrée de 1160 px, sections séparées par des filets, une seule section en encre (contact). */
:root {
  --surface:#F4F6F7; --surface-raised:#FFFFFF; --surface-sunken:#E9EDF0; --surface-inverse:#13202B;
  --ink:#13202B; --ink-muted:#4B5B68; --on-inverse:#F4F6F7;
  --line:#D5DBE0; --line-strong:#7A8792;
  --glacier:#2F6E8E; --glacier-strong:#245A75; --on-glacier:#FFFFFF; --glacier-soft:#DCE9F0;
  --inverse-accent:#9CC4DA; --inverse-line:#3A4A57;
  --sediment:#C8B89D; --sediment-soft:#EFE9DF;
  /* Graphiques : ancienne génération en ocre (famille Sédiment), nouvelle en bleu (famille Glacier), validés daltonisme */
  --chart-old:#B07F3A; --chart-old-soft:#F3E4CC; --chart-new:#1F6FA3; --chart-new-soft:#D2E5F2;
  --focus-ring:var(--glacier);
  --shadow-float:0 4px 16px rgba(19,32,43,.10);
  --font-serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --radius-sm:2px; --radius-md:4px;
  --container:1160px; --measure:68ch;
  --gutter:var(--space-12); --section:var(--space-24);
}
:root { color-scheme:light; } /* Thème clair uniquement : référence de la charte Ardoise pour le site */
@media (max-width: 720px) { :root { --gutter:var(--space-4); --section:var(--space-16); } }

html { scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
body { margin:0; background:var(--surface); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:26px; -webkit-font-smoothing:antialiased; }
a { color:var(--glacier); text-underline-offset:4px; text-decoration-thickness:1px; }
a:hover { color:var(--glacier-strong); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
h1,h2,h3 { font-family:var(--font-serif); margin:0; text-wrap:balance; color:var(--ink); }
p { margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
svg.ic { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.wrap { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); box-sizing:content-box; }
.label { font-family:var(--font-mono); font-size:12px; line-height:16px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.section { padding-block:var(--section); border-top:1px solid var(--line); }
.section-head { display:grid; gap:var(--space-2); margin-bottom:var(--space-8); max-width:var(--measure); }
.section-head h2 { font-size:28px; line-height:36px; font-weight:600; }

/* Boutons */
.btn { display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-sans); font-size:15px; line-height:20px; font-weight:500; padding:var(--space-3) var(--space-6); border-radius:var(--radius-md); border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn--primary { background:var(--ink); color:var(--surface); }
.btn--primary:hover { background:var(--glacier-strong); color:var(--on-glacier); }
.btn--secondary { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--secondary:hover { border-color:var(--ink); color:var(--ink); }
.btn--sm { padding:var(--space-2) var(--space-4); font-size:14px; }

/* En-tête */
.top { position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; background:var(--surface); border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease; }
.top.is-scrolled { border-bottom-color:var(--line); box-shadow:var(--shadow-float); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); min-height:68px; }
.brand { font-family:var(--font-serif); font-weight:600; font-size:19px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand:hover { color:var(--ink); }
.nav { display:flex; align-items:center; gap:var(--space-6); }
.nav a:not(.btn) { color:var(--ink-muted); text-decoration:none; font-size:15px; }
.nav a:not(.btn):hover { color:var(--ink); }
@media (max-width: 820px) { .nav a:not(.btn):not(.nav__keep) { display:none; } }

/* Accueil */
.hero { padding-block:var(--space-16) var(--section); }
.hero__inner { display:grid; gap:var(--space-6); max-width:820px; }
.hero h1 { font-size:52px; line-height:58px; font-weight:400; letter-spacing:-.01em; }
.hero h1 em { font-style:normal; color:var(--glacier); }
.lead { font-size:19px; line-height:30px; color:var(--ink-muted); max-width:var(--measure); }
.hero__ctas { display:flex; flex-wrap:wrap; gap:var(--space-3); padding-top:var(--space-2); }
.proofs { display:flex; flex-wrap:wrap; margin-top:var(--space-12); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.proofs li { font-family:var(--font-mono); font-size:13px; line-height:20px; color:var(--ink-muted); padding:var(--space-3) var(--space-6) var(--space-3) 0; margin-right:var(--space-6); border-right:1px solid var(--line); }
.proofs li:last-child { border-right:0; margin-right:0; }
@media (max-width: 720px) {
  .hero h1 { font-size:36px; line-height:42px; }
  .lead { font-size:17px; line-height:28px; }
  .proofs li { padding-right:var(--space-4); margin-right:var(--space-4); }
}

/* Expertises */
.domains { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-6); }
.domain { display:grid; align-content:start; gap:var(--space-4); padding:var(--space-8); background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-md); min-width:0; }
.domain h3 { font-size:22px; line-height:30px; font-weight:600; }
.domain .hook { font-size:17px; line-height:27px; color:var(--ink); }
.domain ul { display:grid; gap:var(--space-2); padding-top:var(--space-4); border-top:1px solid var(--line); }
.domain li { position:relative; padding-left:var(--space-6); color:var(--ink-muted); font-size:15px; line-height:24px; }
.domain li::before { content:""; position:absolute; left:0; top:11px; width:10px; height:1px; background:var(--glacier); }
.domain li ul { border:0; padding-top:var(--space-2); gap:var(--space-1); }
.domain li li::before { background:var(--line-strong); width:6px; }
@media (max-width: 820px) { .domains { grid-template-columns:1fr; } .domain { padding:var(--space-6); } }

/* Chiffres */
.figures { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-top:2px solid var(--glacier); }
.fig { display:grid; align-content:start; gap:var(--space-2); padding:var(--space-6) var(--space-6) var(--space-6) 0; border-right:1px solid var(--line); min-width:0; }
.fig + .fig { padding-left:var(--space-6); }
.fig:last-child { border-right:0; }
.fig__value { font-family:var(--font-mono); font-size:44px; line-height:48px; font-weight:500; letter-spacing:-.02em; color:var(--glacier); font-variant-numeric:tabular-nums; }
.fig__label { font-size:15px; line-height:23px; color:var(--ink); }
.fig__label span { display:block; color:var(--ink-muted); font-size:14px; line-height:22px; margin-top:var(--space-1); }
.sectors { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-8); }
.sectors .label { margin-right:var(--space-2); }
.tag { font-family:var(--font-mono); font-size:12px; line-height:16px; font-weight:500; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); border:1px solid var(--line-strong); color:var(--ink-muted); }
.note { margin-top:var(--space-6); font-size:14px; line-height:22px; color:var(--ink-muted); }
@media (max-width: 960px) {
  .figures { grid-template-columns:1fr; }
  .fig, .fig + .fig { grid-template-columns:110px minmax(0,1fr); align-items:baseline; gap:var(--space-4); padding:var(--space-4) 0; border-right:0; border-bottom:1px solid var(--line); }
  .fig__value { font-size:32px; line-height:36px; }
}

/* À propos */
.about { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--space-12); }
.about__text { display:grid; gap:var(--space-4); align-content:start; max-width:var(--measure); }
.timeline { display:grid; align-content:start; border-top:1px solid var(--line); }
.timeline li { display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--space-4); padding-block:var(--space-3); border-bottom:1px solid var(--line); }
.timeline .yr { font-family:var(--font-mono); font-size:13px; line-height:24px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.timeline strong { font-weight:600; }
.timeline .role { display:block; color:var(--ink-muted); font-size:15px; line-height:22px; }
.certs { display:grid; gap:var(--space-3); margin-top:var(--space-8); }
.certs ul { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.certs .tag { background:var(--glacier-soft); border-color:transparent; color:var(--ink); }
.about__photo { width:140px; aspect-ratio:4/5; height:auto; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--line); filter:grayscale(.15); margin-bottom:var(--space-2); }
@media (max-width: 820px) { .about__photo { width:112px; } }
@media (max-width: 820px) { .about { grid-template-columns:1fr; gap:var(--space-8); } }

/* Contact */
.contact { background:var(--surface-inverse); color:var(--on-inverse); padding-block:var(--section); }
.contact h2 { color:var(--on-inverse); font-size:38px; line-height:44px; font-weight:400; }
.contact .label, .contact .muted { color:var(--on-inverse); opacity:.75; }
.contact__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-12); align-items:end; }
.contact__intro { display:grid; gap:var(--space-4); }
.contact__actions { display:grid; gap:var(--space-4); }
.mail { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding-bottom:var(--space-4); border-bottom:1px solid var(--inverse-line); }
.mail a { font-family:var(--font-mono); font-size:20px; line-height:28px; color:var(--on-inverse); text-decoration:none; word-break:break-all; }
.mail a:hover { color:var(--inverse-accent); }
.copy { font-family:var(--font-mono); font-size:12px; line-height:16px; letter-spacing:.04em; background:transparent; color:var(--on-inverse); border:1px solid var(--inverse-line); border-radius:var(--radius-sm); padding:var(--space-1) var(--space-2); cursor:pointer; }
.copy:hover { border-color:var(--on-inverse); }
.contact .btn--light { background:var(--on-inverse); color:var(--surface-inverse); }
.contact .btn--light:hover { background:var(--inverse-accent); color:var(--surface-inverse); }
.contact .btn--ghost { background:transparent; color:var(--on-inverse); border-color:var(--inverse-line); }
.contact .btn--ghost:hover { border-color:var(--on-inverse); color:var(--on-inverse); }
.contact .btns { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.contact :focus-visible { outline-color:var(--inverse-accent); }
@media (max-width: 820px) { .contact__grid { grid-template-columns:1fr; gap:var(--space-8); } .contact h2 { font-size:30px; line-height:36px; } .mail a { font-size:17px; } }

/* Pied de page */
.foot { background:var(--surface-sunken); padding-block:var(--space-8); font-size:14px; line-height:22px; color:var(--ink-muted); }
.foot .wrap { display:grid; gap:var(--space-4); }
.foot__row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); }
.foot__links { display:flex; flex-wrap:wrap; gap:var(--space-6); }
.foot a { color:var(--ink-muted); }
.foot a:hover { color:var(--ink); }
.foot details summary { cursor:pointer; color:var(--ink-muted); width:fit-content; }
.foot details[open] summary { margin-bottom:var(--space-3); }
.foot dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--space-1) var(--space-6); margin:0; }
.foot dt { font-family:var(--font-mono); font-size:12px; }
.foot dd { margin:0; }
@media (max-width: 520px) { .foot dl { grid-template-columns:1fr; } .foot dd { margin-bottom:var(--space-2); } }

/* Navigation : page active et sélecteur de langue */
.nav a[aria-current="page"] { color:var(--ink); box-shadow:inset 0 -1px 0 var(--glacier); }
.lang { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden; }
.lang button { font-family:var(--font-mono); font-size:12px; line-height:16px; font-weight:500; letter-spacing:.06em; padding:var(--space-2) var(--space-2); min-width:36px; background:transparent; color:var(--ink-muted); border:0; cursor:pointer; }
.lang button + button { border-left:1px solid var(--line-strong); }
.lang button[aria-pressed="true"] { background:var(--ink); color:var(--surface); }
.lang button:not([aria-pressed="true"]):hover { color:var(--ink); }
@media (max-width: 520px) { .top .wrap { gap:var(--space-3); } .nav { gap:var(--space-3); } .nav .btn--sm .cv-txt { display:none; } }

/* Éclairages : en-tête de page */
.page-head { padding-block:var(--space-16) var(--space-12); }
.page-head .hero__inner { gap:var(--space-4); }
.page-head h1 { font-size:44px; line-height:52px; font-weight:400; letter-spacing:-.01em; }
@media (max-width: 720px) { .page-head h1 { font-size:32px; line-height:40px; } }
.toc { display:grid; margin-top:var(--space-8); border-top:1px solid var(--line); }
.toc li { border-bottom:1px solid var(--line); }
.toc a { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:var(--space-4); align-items:baseline; padding-block:var(--space-3); color:var(--ink); text-decoration:none; }
.toc a:hover .toc__t { color:var(--glacier); }
.toc .num, .toc .date { font-family:var(--font-mono); font-size:13px; color:var(--ink-muted); }
@media (max-width: 520px) { .toc a { grid-template-columns:36px minmax(0,1fr); } .toc .date { display:none; } }

/* Éclairage : un graphique, une idée */
.insight { display:grid; gap:var(--space-8); }
.insight__head { display:grid; gap:var(--space-3); max-width:var(--measure); }
.insight__head h2 { font-size:34px; line-height:42px; font-weight:600; }
@media (max-width: 720px) { .insight__head h2 { font-size:26px; line-height:34px; } }
.kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:2px solid var(--glacier); }
.kpi { display:grid; align-content:start; gap:var(--space-2); padding:var(--space-6) var(--space-6) var(--space-6) 0; border-right:1px solid var(--line); min-width:0; }
.kpi + .kpi { padding-left:var(--space-6); }
.kpi:last-child { border-right:0; }
.kpi__value { font-family:var(--font-mono); font-size:36px; line-height:44px; font-weight:500; letter-spacing:-.02em; color:var(--glacier); font-variant-numeric:tabular-nums; white-space:nowrap; }
.kpi__value s { color:var(--chart-old); text-decoration-thickness:1px; }
.kpi__label { font-size:15px; line-height:23px; color:var(--ink); }
@media (max-width: 820px) {
  .kpis { grid-template-columns:1fr; }
  .kpi, .kpi + .kpi { padding:var(--space-4) 0; border-right:0; border-bottom:1px solid var(--line); }
  .kpi__value { font-size:30px; line-height:36px; }
}

.chart-card { background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-8); display:grid; gap:var(--space-6); min-width:0; }
@media (max-width: 720px) { .chart-card { padding:var(--space-4); } }
.chart-card__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--space-4); }
.chart-card__title { font-family:var(--font-serif); font-size:20px; line-height:28px; font-weight:600; }
.chart-card__unit { font-size:14px; line-height:22px; color:var(--ink-muted); }
.legend { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); font-size:14px; line-height:20px; color:var(--ink-muted); }
.legend span { display:inline-flex; align-items:center; gap:var(--space-2); }
.legend svg { width:28px; height:14px; flex:none; }
.chart { position:relative; min-width:0; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .t { font-family:var(--font-sans); font-size:13px; fill:var(--ink); }
.chart .t-muted { font-family:var(--font-sans); font-size:12px; fill:var(--ink-muted); }
.chart .t-mono { font-family:var(--font-mono); font-size:12px; fill:var(--ink-muted); font-variant-numeric:tabular-nums; }
.chart .t-group { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; font-weight:500; fill:var(--ink-muted); text-transform:uppercase; }
.chart .row-hit { fill:transparent; cursor:default; }
.chart .row.is-hover .row-bg { fill:var(--surface-sunken); }
.tip { position:absolute; z-index:2; pointer-events:none; background:var(--surface-raised); border:1px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-float); padding:var(--space-2) var(--space-3); font-size:13px; line-height:20px; color:var(--ink); max-width:260px; opacity:0; transition:opacity .1s ease; }
.tip.is-on { opacity:1; }
.tip b { font-weight:600; }
.tip .mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.tip .muted { color:var(--ink-muted); }
.chart-card details summary { cursor:pointer; font-size:14px; color:var(--ink-muted); width:fit-content; }
.chart-card details[open] summary { margin-bottom:var(--space-3); }
.data-table { width:100%; border-collapse:collapse; font-size:14px; line-height:20px; }
.data-table th, .data-table td { text-align:left; padding:var(--space-2) var(--space-3) var(--space-2) 0; border-bottom:1px solid var(--line); vertical-align:top; }
.data-table th { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); font-weight:500; }
.data-table td.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.table-scroll { overflow-x:auto; }
.source { font-size:13px; line-height:20px; color:var(--ink-muted); border-top:1px solid var(--line); padding-top:var(--space-4); }

.points { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-6) var(--space-12); counter-reset:pt; }
.points li { display:grid; gap:var(--space-2); padding-top:var(--space-4); border-top:1px solid var(--line); counter-increment:pt; }
.points li::before { content:counter(pt, decimal-leading-zero); font-family:var(--font-mono); font-size:12px; line-height:16px; color:var(--glacier); font-weight:500; }
.points h3 { font-size:20px; line-height:28px; font-weight:600; }
.points p { color:var(--ink-muted); font-size:15px; line-height:24px; }
@media (max-width: 820px) { .points { grid-template-columns:1fr; } }

.takeaway { background:var(--sediment-soft); border-left:2px solid var(--sediment); border-radius:var(--radius-sm); padding:var(--space-6) var(--space-8); display:grid; gap:var(--space-4); }
@media (max-width: 720px) { .takeaway { padding:var(--space-4); } }
.takeaway h3 { font-size:20px; line-height:28px; font-weight:600; }
.takeaway ul { display:grid; gap:var(--space-3); }
.takeaway li { position:relative; padding-left:var(--space-6); font-size:15px; line-height:24px; }
.takeaway li::before { content:""; position:absolute; left:0; top:11px; width:10px; height:1px; background:var(--ink); }
.cta-band { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-6); border-top:1px solid var(--line); }

.takeaway li strong { font-weight:600; }
.takeaway .source { border-top-color:var(--sediment); padding-top:var(--space-3); }

/* En-tête à deux onglets : Offre (one-pager) et Éclairages */
.top .wrap { justify-content:flex-start; gap:0 var(--space-8); }
.top .nav { margin-left:auto; gap:var(--space-3); }
.tabs { display:flex; align-self:stretch; gap:var(--space-2); }
.tabs a { display:flex; align-items:center; padding:0 var(--space-4); font-size:16px; line-height:20px; font-weight:500; color:var(--ink-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a:hover { color:var(--ink); }
.tabs a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--glacier); }
.subnav { background:var(--surface-sunken); border-top:1px solid var(--line); }
.subnav .wrap { display:flex; align-items:center; gap:var(--space-6); min-height:40px; overflow-x:auto; scrollbar-width:none; }
.subnav .wrap::-webkit-scrollbar { display:none; }
.subnav a { color:var(--ink-muted); text-decoration:none; font-size:14px; line-height:20px; white-space:nowrap; }
.subnav a:hover { color:var(--ink); }
.subnav .label { white-space:nowrap; }
html { scroll-padding-top:120px; }
@media (max-width: 640px) {
  .top .wrap { flex-wrap:wrap; min-height:0; padding-top:var(--space-3); }
  .top .brand { order:1; }
  .top .nav { order:2; }
  .tabs { order:3; width:100%; margin-top:var(--space-2); height:44px; }
  .tabs a { flex:1; justify-content:center; padding:0; }
  .subnav .label { display:none; }
  .subnav .wrap { gap:var(--space-4); }
  html { scroll-padding-top:150px; }
}