/* ============================================================
   AGENCE 402 — feuille de style du site public (refonte 2026-09)
   Palette et hiérarchie issues de la plaquette commerciale V27.
   Ne pas confondre avec assets/styles.css (ancien site, encore
   chargé par l'intranet).
   ============================================================ */

:root {
  /* Couleurs plaquette */
  --ink: #121B23;
  --ink-2: #273338;
  --slate: #586366;
  --slate-2: #354345;
  --mist: #B8C4C3;
  --mist-2: #8391A3;
  --rule: #DADDD9;
  --rule-soft: #E8EAE6;
  --cream: #F0F0E9;
  --cream-2: #F5F2EC;
  --paper: #FBFBFA;
  --white: #FFFFFF;
  --gold: #D6B775;
  --gold-2: #C8A66A;
  --gold-ink: #7F7150; /* 4,6:1 sur #FBFBFA (AA texte courant) ; #887954 = 4,1:1 */
  --gold-soft: rgba(214, 183, 117, 0.35);

  /* Typographie (les variantes de site redéfinissent ces deux variables) */
  --font-serif: 'Gelasio', Georgia, 'Times New Roman', serif;
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Échelle */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;

  /* Rythme 8 px */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem;
  --s-12: 6rem;
  --s-16: 8rem;

  --container: 1280px;
  --gutter: 1.5rem;
  --margin: 3rem;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
ul, ol { list-style: none; }
strong { font-weight: 500; }
::selection { background: var(--gold-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Grille ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-4); }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ---------- Typographie ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow--ink { color: var(--slate); }
.on-dark .eyebrow { color: var(--gold); }

h1, h2, h3, .h1, .h2, .h3 { font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; }
h1, .h1 { font-family: var(--font-serif); font-size: clamp(2.5rem, 5.2vw, var(--fs-72)); line-height: 1.04; letter-spacing: -0.015em; }
h2, .h2 { font-family: var(--font-serif); font-size: clamp(1.9rem, 3.4vw, var(--fs-48)); }
h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-20); font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.h4 { font-family: var(--font-sans); font-size: var(--fs-16); font-weight: 500; line-height: 1.4; }
.lead { font-size: var(--fs-18); line-height: 1.55; color: var(--slate-2); max-width: 44ch; }
.muted { color: var(--slate); }
.gold { color: var(--gold-ink); }
.on-dark .gold { color: var(--gold); }
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.06em; }
p + p { margin-top: var(--s-2); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95em 1.5em; border: 1px solid var(--ink);
  color: var(--ink); background: transparent; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--white); }
.btn--gold { border-color: var(--gold-2); }
.btn--gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-2); }
.on-dark .btn { color: var(--white); border-color: var(--mist-2); }
.on-dark .btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.on-dark .btn--gold { border-color: var(--gold); color: var(--gold); }
.on-dark .btn--gold:hover { background: var(--gold); color: var(--ink); }
.btn .arrow { width: 0.9em; height: 0.9em; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-14); font-weight: 500; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color 0.25s var(--ease); }
.link-arrow:hover { border-color: var(--ink); }
.link-arrow .arrow { width: 0.85em; height: 0.85em; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: baseline; gap: 0.45em; font-family: var(--font-sans); letter-spacing: 0.32em; text-transform: uppercase; font-size: var(--fs-12); color: var(--ink); }
.brand strong { font-size: var(--fs-18); font-weight: 600; letter-spacing: 0.02em; }
.brand--lower { text-transform: none; letter-spacing: -0.01em; font-size: var(--fs-20); font-weight: 500; gap: 0; }
.brand--lower strong { font-weight: 500; font-size: inherit; color: var(--gold-ink); }
.nav__links { display: flex; align-items: center; gap: var(--s-4); }
.nav__links a { font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding: 0.4em 0; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"] { border-bottom-color: var(--gold-2); }
.nav__lang { font-size: var(--fs-12); letter-spacing: 0.12em; color: var(--slate); }
.nav__lang a { color: var(--slate); }
.nav__lang .current { color: var(--gold-ink); font-weight: 500; }
.nav__cta { margin-left: var(--s-2); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.nav__toggle span { display: block; width: 22px; height: 1px; background: var(--ink); margin: 5px auto; transition: transform 0.3s var(--ease), opacity 0.3s; }

/* ---------- Sections ---------- */
.section { padding: var(--s-12) 0; }
.section--tight { padding: var(--s-8) 0; }
.section--rule { border-top: 1px solid var(--rule); }
.section__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: var(--s-8); }
.section__head .eyebrow { grid-column: 1 / 4; padding-top: 0.5em; border-top: 1px solid var(--ink); }
.section__head h2 { grid-column: 4 / 11; }
.section__head .lead { grid-column: 4 / 11; margin-top: var(--s-3); }
.section__head--stack .eyebrow { grid-column: 1 / -1; border-top: 0; margin-bottom: var(--s-2); }
.section__head--stack h2 { grid-column: 1 / 9; }
.on-dark { background: var(--ink); color: var(--white); }
.on-dark .muted { color: var(--mist); }
.on-dark .lead { color: var(--mist); }
.on-cream { background: var(--cream); }
.on-white { background: var(--white); }
.rule { height: 1px; background: var(--rule); border: 0; }
.rule--ink { background: var(--ink); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); padding-top: var(--s-10); padding-bottom: var(--s-8); }
.hero__text { grid-column: 1 / 7; position: relative; z-index: 2; }
.hero__visual { grid-column: 7 / 13; position: relative; z-index: 1; }
.hero h1 { margin: var(--s-3) 0 var(--s-4); max-width: 11ch; }
.hero h1 .gold { color: var(--gold-ink); }
.hero .lead { max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; margin-top: var(--s-5); }
.hero__grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 96px 96px; opacity: 0.55; mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 92%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 92%); }

/* ---------- Bandeau logos ---------- */
.logos { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.logos__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-4); padding-bottom: var(--s-4); }
.logos__label { font-size: var(--fs-11); letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.logos__list { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: var(--s-4); }
.logos__list img { height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); }
.logos__list img:hover { filter: none; opacity: 1; }
.logos--color .logos__list img { filter: none; opacity: 1; }

/* ---------- Constats (problématique) ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-4); }
.fact { border-top: 1px solid var(--ink); padding-top: var(--s-2); }
.fact .h3 { margin-bottom: var(--s-1); }
.fact p { color: var(--slate); font-size: var(--fs-15); max-width: 34ch; }
.fact__icon { width: 28px; height: 28px; margin-bottom: var(--s-2); color: var(--gold-ink); }

/* ---------- Offres (01 à 04) ---------- */
.offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.offer { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-4) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); min-height: 260px; transition: background 0.3s var(--ease); }
.offer:hover { background: var(--white); }
.offer__num { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.1em; color: var(--gold-ink); }
.offer .h3 { font-size: var(--fs-20); }
.offer p { color: var(--slate); font-size: var(--fs-15); flex: 1; }
.offer .link-arrow { align-self: flex-start; }
.on-dark .offers { border-top-color: var(--gold); border-left-color: rgba(255,255,255,0.12); }
.on-dark .offer { border-color: rgba(255,255,255,0.12); }
.on-dark .offer:hover { background: rgba(255,255,255,0.04); }
.on-dark .offer p { color: var(--mist); }
.on-dark .offer__num { color: var(--gold); }

/* ---------- Page offre ---------- */
.offer-page__head { padding: var(--s-10) 0 var(--s-8); }
.offer-page__head .eyebrow { margin-bottom: var(--s-2); }
.offer-page__head h1 { font-size: clamp(2.2rem, 4.2vw, var(--fs-56)); max-width: 16ch; }
.offer-page__head .lead { margin-top: var(--s-3); }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-6); }
.step { border-top: 1px solid var(--ink); padding-top: var(--s-2); }
.step__num { font-family: var(--font-serif); font-size: var(--fs-28); color: var(--gold-ink); line-height: 1; margin-bottom: var(--s-1); }
.step .h3 { margin-bottom: var(--s-1); }
.step p { color: var(--slate-2); font-size: var(--fs-15); }
.deliverables { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; border: 1px solid var(--rule); background: var(--cream); padding: var(--s-2) var(--s-3); margin-top: var(--s-6); }
.deliverables .eyebrow { font-size: var(--fs-11); }
.deliverables span { font-weight: 500; }

/* ---------- Cas client ---------- */
.case { background: var(--cream); border: 1px solid var(--rule); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }
.case__logo { background: var(--white); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; padding: var(--s-2) var(--s-3); align-self: flex-start; min-height: 64px; }
.case__logo img { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.case__logo--text { font-size: var(--fs-12); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.case h3 { font-family: var(--font-serif); font-size: var(--fs-28); font-weight: 400; }
.case p { color: var(--slate-2); font-size: var(--fs-15); }
.case__kpi { font-family: var(--font-serif); font-size: var(--fs-24); line-height: 1.25; color: var(--ink); }
.case__list { border-top: 1px solid var(--rule); padding-top: var(--s-2); }
.case__list .eyebrow { margin-bottom: var(--s-1); }
.case__list li { font-size: var(--fs-15); padding: 0.35em 0; border-bottom: 1px solid var(--rule-soft); }
.case__list li:last-child { border-bottom: 0; }

/* ---------- Missions ---------- */
.missions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.mission { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-4) var(--s-3); min-height: 200px; display: flex; flex-direction: column; gap: var(--s-2); }
.mission__logo { height: 36px; display: flex; align-items: center; }
.mission__logo img { height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.mission__logo .tag { font-size: var(--fs-11); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); border: 1px solid var(--gold-2); padding: 0.3em 0.6em; }
.mission .h4 { margin-top: auto; }
.mission p { color: var(--slate); font-size: var(--fs-15); }

/* ---------- Équipe ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); }
.people--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.person { display: grid; grid-template-columns: 96px 1fr; column-gap: var(--s-3); align-items: start; }
.person__photo { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--gold-2); padding: 3px; background: var(--white); }
.person__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--cream); }
.person .h3 { font-size: var(--fs-18); }
.person__role { font-size: var(--fs-11); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin: 0.3em 0 0.6em; }
.person__zone { font-size: var(--fs-13); color: var(--slate); margin-bottom: 0.4em; }
.person p { font-size: var(--fs-15); color: var(--slate-2); }

/* ---------- Frise ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--gold-2); padding-top: var(--s-3); }
.timeline__item { position: relative; padding-right: var(--s-2); }
.timeline__item::before { content: ""; position: absolute; top: calc(-1 * var(--s-3) - 4px); left: 0; width: 7px; height: 7px; background: var(--gold-2); }
.timeline__date { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em; color: var(--gold-ink); margin-bottom: 0.5em; }
.timeline__item p { font-size: var(--fs-15); color: var(--slate-2); }
.tracks { display: grid; grid-template-columns: 180px 1fr; column-gap: var(--s-4); row-gap: var(--s-4); }
.track__name { font-family: var(--font-serif); font-size: var(--fs-20); }
.track__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--rule); padding-top: var(--s-2); }

/* ---------- Environnement / secteurs ---------- */
.checklist li { position: relative; padding: 0.7em 0 0.7em 1.6em; border-bottom: 1px solid var(--rule-soft); font-size: var(--fs-15); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 10px; height: 1px; background: var(--gold-2); }
.on-dark .checklist li { border-color: rgba(255,255,255,0.12); color: var(--mist); }
.on-dark .checklist li::before { background: var(--gold); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tag { font-size: var(--fs-13); padding: 0.45em 0.9em; border: 1px solid var(--rule); color: var(--ink-2); }
.on-dark .tag { border-color: rgba(255,255,255,0.25); color: var(--white); }

/* ---------- CTA final ---------- */
.cta { background: var(--ink); color: var(--white); padding: var(--s-12) 0; }
.cta h2 { font-size: clamp(2rem, 4vw, var(--fs-56)); max-width: 18ch; }
.cta .lead { color: var(--mist); margin-top: var(--s-3); }
.cta__contact { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); align-items: baseline; border-top: 1px solid rgba(255,255,255,0.18); padding-top: var(--s-4); }
.cta__contact a { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.6vw, var(--fs-32)); color: var(--white); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.cta__contact .phone { font-size: var(--fs-18); color: var(--mist); }

/* ---------- Pied de page ---------- */
.footer { background: var(--paper); border-top: 1px solid var(--rule); padding: var(--s-6) 0 var(--s-4); font-size: var(--fs-13); color: var(--slate); }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; column-gap: var(--gutter); row-gap: var(--s-4); }
.footer__sig { font-size: var(--fs-11); letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); margin-top: var(--s-1); }
.footer h4, .footer .footer__title { font-family: var(--font-sans); font-size: var(--fs-11); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-2); font-weight: 500; line-height: 1.5; }
.footer li { padding: 0.25em 0; }
.footer a:hover { color: var(--ink); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: var(--s-6); padding-top: var(--s-2); font-size: var(--fs-12); }

/* ---------- Pages simples (légal, 404) ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--font-sans); font-size: var(--fs-18); font-weight: 500; margin: var(--s-6) 0 var(--s-2); }
.prose h3 { font-size: var(--fs-16); margin: var(--s-4) 0 var(--s-1); }
.prose p, .prose li { color: var(--slate-2); font-size: var(--fs-15); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li { margin: 0.3em 0; }
.prose a { border-bottom: 1px solid var(--rule); }
.page-head { padding: var(--s-10) 0 var(--s-6); border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: clamp(2.2rem, 4.2vw, var(--fs-56)); max-width: 18ch; margin-top: var(--s-2); }
.page-head .lead { margin-top: var(--s-3); }
.crumbs { font-size: var(--fs-12); letter-spacing: 0.06em; color: var(--slate); }
.crumbs a:hover { color: var(--ink); }

/* ---------- Révélation au scroll (sobre) ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --margin: 2rem; }
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .missions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section__head .eyebrow { grid-column: 1 / -1; border-top: 0; margin-bottom: var(--s-1); }
  .section__head h2, .section__head .lead { grid-column: 1 / 11; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --margin: 1.25rem; }
  .nav__inner { height: 64px; }
  .nav__links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--white); border-bottom: 1px solid var(--rule); padding: var(--s-2) var(--margin) var(--s-4); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
  .nav__links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 0.8em 0; font-size: var(--fs-14); }
  .nav__cta { margin: var(--s-2) 0 0; }
  .nav__toggle { display: block; }
  .section { padding: var(--s-8) 0; }
  .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-top: var(--s-6); padding-bottom: var(--s-4); row-gap: var(--s-4); }
  .hero__text, .hero__visual { grid-column: 1 / -1; }
  .hero h1 { max-width: none; }
  .logos__inner { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .logos__list { flex-wrap: wrap; justify-content: flex-start; gap: var(--s-3) var(--s-4); }
  .logos__list img { height: 26px; }
  .facts, .offers, .missions, .steps, .people, .people--3, .track__steps { grid-template-columns: 1fr; }
  .offers, .missions { border-left: 0; }
  .offer, .mission { border-right: 0; min-height: 0; }
  .tracks { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}

/* ---------- Compléments : composants utilisés par les templates ---------- */
.nav__item { position: relative; display: inline-flex; }
.nav__menu { position: absolute; top: calc(100% + 10px); left: -16px; min-width: 260px; background: var(--white); border: 1px solid var(--rule); padding: var(--s-1) 0; display: none; flex-direction: column; z-index: 60; }
.nav__menu a { display: block; padding: 0.6em 16px !important; border-bottom: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-14) !important; font-weight: 400 !important; }
.nav__menu a:hover { background: var(--paper); }
.nav__item:hover .nav__menu, .nav__item.is-open .nav__menu, .nav__item:focus-within .nav__menu { display: flex; }
.nav__item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero__img { width: 118%; max-width: none; margin-left: -4%; height: auto; }
.globe { width: 100%; aspect-ratio: 1; max-width: 820px; margin-left: auto; margin-right: -12%; }
.hero--editorial .hero__visual { align-self: stretch; display: flex; align-items: center; }
.globe canvas { opacity: 0; transition: opacity 0.8s var(--ease); }
.globe.is-mounted canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .globe canvas { transition: none; opacity: 1; } }

.facts--stack { grid-template-columns: 1fr; row-gap: 0; }
.facts--stack .fact { border-top: 1px solid var(--rule); padding: var(--s-3) 0; display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s-2); }
.facts--stack .fact:first-child { border-top-color: var(--ink); }
.facts--stack .fact__icon { margin: 0.2em 0 0; grid-row: 1 / 3; }
.facts--stack .fact p { max-width: 46ch; }
.answer { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.answer__title { font-size: clamp(2rem, 3.6vw, var(--fs-56)); margin-top: var(--s-2); }

.offer-rows { border-top: 1px solid var(--ink); }
.offer-row { border-bottom: 1px solid var(--rule); }
.offer-row__link { display: grid; grid-template-columns: 80px 4fr 6fr 48px; column-gap: var(--gutter); align-items: baseline; padding: var(--s-4) 0; transition: background 0.25s var(--ease); }
.offer-row__link:hover { background: var(--white); }
.offer-row__num { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0.1em; color: var(--gold-ink); }
.offer-row__title { font-size: clamp(1.4rem, 2.2vw, var(--fs-32)); }
.offer-row__text { color: var(--slate); font-size: var(--fs-16); max-width: 46ch; }
.offer-row__arrow { justify-self: end; color: var(--ink); width: 22px; height: 22px; transition: transform 0.25s var(--ease); }
.offer-row__arrow .arrow { width: 22px; height: 22px; }
.offer-row__link:hover .offer-row__arrow { transform: translateX(6px); }
.offer-rows--compact .offer-row__link { padding: var(--s-2) 0; }
.offer-rows--compact .offer-row__title { font-size: var(--fs-20); }
.offer-rows--compact .offer-row__text { font-size: var(--fs-14); }

.missions__also { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.missions__also img { height: 26px; width: auto; }

.sectors { margin-top: var(--s-5); }
.sectors .eyebrow { margin-bottom: var(--s-2); }
.sector-list { border-top: 1px solid var(--ink); margin-top: var(--s-2); }
.sector-list__item { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-28); }
.sector-list__num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--gold-ink); letter-spacing: 0.1em; }

.intranet-box { margin-top: var(--s-6); border: 1px solid var(--ink); padding: var(--s-3) var(--s-3) var(--s-4); }
.intranet-box .muted { margin: var(--s-1) 0 var(--s-3); font-size: var(--fs-15); }
.intranet-box__links { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.cta__side { align-self: end; }
.cta .cta__contact { margin-top: var(--s-2); flex-direction: column; align-items: flex-start; gap: var(--s-2); border-top: 0; padding-top: 0; }

.timeline__step { border-top: 0; }
.track__steps .timeline__date { margin-bottom: 0.3em; }

@media (max-width: 860px) {
  .offer-row__link { grid-template-columns: 48px 1fr 32px; row-gap: var(--s-1); }
  .offer-row__text { grid-column: 2 / 3; }
  .offer-row__arrow { grid-row: 1; grid-column: 3; }
  .facts--stack .fact { grid-template-columns: 32px 1fr; }
  .answer { margin-top: var(--s-6); }
  .hero__img { width: 100%; margin-left: 0; }
  .globe { margin-right: 0; max-width: 100%; }
  .sector-list__item { font-size: var(--fs-20); }
  .nav__menu { position: static; display: flex; border: 0; padding: 0 0 0 16px; min-width: 0; }
  .nav__item { flex-direction: column; align-items: flex-start; }
}

/* ---------- Placement de colonnes (remplace les styles inline) ---------- */
.from-5 { grid-column: 5 / 13; }
.from-7 { grid-column: 7 / 13; }
.from-8 { grid-column: 8 / 13; }
.hero__text { grid-column: 1 / 8; }
.hero__visual { grid-column: 8 / 13; }
.hero h1 { max-width: none; }
.hero__grid-bg { opacity: 0.45; mask-image: radial-gradient(ellipse at 70% 40%, rgba(0,0,0,0.9), transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, rgba(0,0,0,0.9), transparent 75%); }
.logos__list img { filter: none; opacity: 1; }
.logos__inner { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.section--offers { padding-top: 0; }
.section--offers .offer-rows { margin-top: var(--s-6); }
.answer { margin-top: var(--s-8); }
.person { grid-template-columns: 112px minmax(0, 1fr); }
.person__photo { width: 112px; height: 112px; }
.people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intranet-box .eyebrow { margin-bottom: var(--s-2); }
@media (max-width: 860px) {
  .from-5, .from-7, .from-8, .hero__text, .hero__visual { grid-column: 1 / -1; }
  .person { grid-template-columns: 80px minmax(0, 1fr); }
  .person__photo { width: 80px; height: 80px; }
}

@media (max-width: 860px) {
  .people, .people--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Révision 2 (critique Astra n°1, 19:20 UTC) : marges 72 px / 1296 utiles,
   serif réservée aux titres « statement », corps commerciaux 18/28,
   missions 2 colonnes, portraits carrés, footer navy, hero 640 px.
   ============================================================ */
:root { --container: 1440px; --margin: 4.5rem; --gutter: 1.5rem; }
body { font-size: var(--fs-16); }
.lead { font-size: var(--fs-18); line-height: 1.55; max-width: 60ch; }
/* Titres : serif uniquement pour les énoncés (hero, problématique, réponse, histoire, contact) */
h2, .h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.75rem, 2.8vw, var(--fs-40)); line-height: 1.2; letter-spacing: -0.02em; }
h2.serif, .h2.serif, .statement { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, var(--fs-48)); line-height: 1.1; letter-spacing: -0.01em; }
.answer__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, var(--fs-56)); }
.offer-row__title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.4rem, 2vw, var(--fs-28)); letter-spacing: -0.02em; line-height: 1.25; }
.offer-row__text { font-size: var(--fs-18); line-height: 1.55; }
.offer-row__link { grid-template-columns: 72px 4fr 6fr 48px; padding-top: var(--s-4); padding-bottom: var(--s-4); }
.offer-rows--compact .offer-row__title { font-size: var(--fs-20); }
.offer-rows--compact .offer-row__text { font-size: var(--fs-15); }
.answer { margin-top: var(--s-8); padding-top: var(--s-6); }
.section--offers .offer-rows { margin-top: var(--s-8); }
/* Problématique : seconde phrase en navy */
#probleme h2 .gold { color: inherit; }
/* Nav */
.nav__inner { height: 80px; }
.nav__links { gap: var(--s-3); }
.nav__links a { font-size: var(--fs-13); letter-spacing: 0.12em; }
.nav__links .nav__cta { border: 1px solid var(--gold-ink); min-height: 48px; padding: 0 var(--s-2); color: var(--ink); letter-spacing: 0.12em; }
.nav__links .nav__cta:hover { background: var(--gold-ink); color: var(--white); }
/* Hero : 640 px minimum, globe 740 px débordant à droite */
.hero__inner { min-height: 640px; padding-top: var(--s-8); padding-bottom: var(--s-8); }
.hero__text { grid-column: 1 / 7; }
.hero__visual { grid-column: 7 / 13; }
.hero h1 { font-size: clamp(2.5rem, 5vw, var(--fs-72)); }
.globe { width: 740px; max-width: none; margin-right: -14%; }
.hero--editorial .hero__visual { overflow: visible; }
.hero { overflow: hidden; }
/* Bandeau logos */
.logos__list img { height: 32px; }
/* Missions : 2 colonnes, 3 rangées */
.missions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mission { padding: var(--s-4) var(--s-4); min-height: 0; }
.mission .h4 { font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin-top: var(--s-1); }
.mission p { font-size: var(--fs-18); line-height: 1.55; }
.mission__logo { height: 40px; }
.mission__logo img { height: 34px; max-width: 160px; }
/* Cas client : preuves en 24/32 */
.case h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-24); letter-spacing: -0.01em; }
.case__kpi { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-24); line-height: 1.33; }
.case p { font-size: var(--fs-18); line-height: 1.55; }
.case__list li { font-size: var(--fs-16); }
/* Page offre : étapes empilées sur 7 colonnes, cas sur 5 */
.steps { grid-template-columns: 1fr; row-gap: var(--s-4); }
.step { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s-2); }
.step__num { grid-row: 1 / 3; margin: 0; }
.step .h3 { font-size: var(--fs-24); letter-spacing: -0.01em; }
.step p { font-size: var(--fs-18); line-height: 1.55; max-width: 56ch; }
.deliverables { margin-top: var(--s-4); }
.offer-page__head h1 { max-width: 20ch; }
/* Portraits carrés, fond commun */
.person { grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--s-3); }
.person__photo { width: 160px; height: 160px; border-radius: 0; border: 0; padding: 0; background: var(--cream); }
.person__photo img { border-radius: 0; object-fit: cover; object-position: top; background: transparent; transform: scale(1.02); }
.person .h3 { font-size: var(--fs-24); letter-spacing: -0.01em; }
.person p { font-size: var(--fs-16); line-height: 1.55; }
.person__role { margin-top: 0.4em; }
.people--3 .person { grid-template-columns: 128px minmax(0, 1fr); }
.people--3 .person__photo { width: 128px; height: 128px; }
/* Frise : nom 200 px, 3 jalons égaux */
.tracks { grid-template-columns: 200px 1fr; }
.track__name { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-18); }
.timeline__date { font-size: var(--fs-14); letter-spacing: 0.02em; font-family: var(--font-sans); font-weight: 500; }
.timeline__item p, .track__steps p { font-size: var(--fs-16); }
/* Environnement */
.checklist li { font-size: var(--fs-18); }
/* Contact + footer navy continu */
.cta { padding: var(--s-10) 0; }
.cta h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, var(--fs-56)); line-height: 1.1; }
.footer { background: var(--ink); color: var(--mist); border-top: 1px solid rgba(255,255,255,0.16); padding: var(--s-6) 0 var(--s-4); }
.footer .brand, .footer h4, .footer .footer__title { color: var(--white); }
.footer .brand--lower strong { color: var(--gold); }
.footer a:hover { color: var(--white); }
.footer__bottom { border-top-color: rgba(255,255,255,0.16); }
.footer__sig { color: var(--mist-2); }
/* Petits textes : 14/20 pour les métadonnées */
.crumbs { font-size: var(--fs-14); }
.footer { font-size: var(--fs-14); }
@media (max-width: 1100px) {
  :root { --margin: 2.5rem; }
  .globe { width: 100%; margin-right: 0; }
}
@media (max-width: 860px) {
  :root { --margin: 1.5rem; }
  body { font-size: var(--fs-16); }
  .lead, .mission p, .case p, .step p, .offer-row__text, .checklist li { font-size: var(--fs-16); line-height: 1.5; }
  .hero__inner { min-height: 0; padding-top: var(--s-4); padding-bottom: var(--s-3); row-gap: var(--s-3); }
  .hero__visual { height: 240px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
  .globe { width: 300px; margin: -20px 0 0; }
  .logos__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); }
  .logos__list img { height: 30px; max-width: 140px; margin: 0; }
  .logos__list img { display: block; }
  .logos__inner { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .logos__list { row-gap: 0; }
  .logos__list img { height: 28px; padding: 18px 0; box-sizing: content-box; }
  .missions { grid-template-columns: 1fr; }
  .person { grid-template-columns: 112px minmax(0, 1fr); }
  .person__photo { width: 112px; height: 112px; }
  .people--3 .person { grid-template-columns: 112px minmax(0, 1fr); }
  .people--3 .person__photo { width: 112px; height: 112px; }
  .tracks { grid-template-columns: 1fr; }
  .track__steps { grid-template-columns: 1fr; border-left: 1px solid var(--rule); border-top: 0; padding: 0 0 0 var(--s-3); row-gap: var(--s-2); }
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--gold-2); padding: 0 0 0 var(--s-3); row-gap: var(--s-3); }
  .timeline__item::before { top: 0.35em; left: calc(-1 * var(--s-3) - 4px); }
  .step { grid-template-columns: 40px 1fr; }
  .cta { padding: var(--s-8) 0; }
}

/* Mobile : surcharges finales (doivent rester en fin de feuille) */
@media (max-width: 860px) {
  .hero__text, .hero__visual, .from-5, .from-7, .from-8 { grid-column: 1 / -1; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.5rem; }
  .hero__visual { height: 230px; overflow: hidden; display: block; margin-top: var(--s-2); }
  .globe { width: 380px; max-width: none; margin: -30px 0 0 auto; }
  .hero__actions .btn { padding: 0.9em 1.2em; }
  .person__photo { border-radius: 0; border: 0; padding: 0; }
}

/* Portraits : les PNG sont des médaillons ronds ; en carré on recadre le carré inscrit du disque */
.person__photo { overflow: hidden; }
.person__photo img { transform: scale(1.46); object-position: center 42%; }
.people--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .people--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .people, .people--3 { grid-template-columns: 1fr; } }

/* Mobile : lignes d'offres et bandeau livrables (surcharges finales) */
@media (max-width: 860px) {
  .offer-row__link, .offer-rows--compact .offer-row__link { grid-template-columns: 40px minmax(0, 1fr) 28px; column-gap: var(--s-2); row-gap: 6px; align-items: start; }
  .offer-row__num { padding-top: 0.5em; }
  .offer-row__title { grid-column: 2; }
  .offer-row__text { grid-column: 2 / 3; }
  .offer-row__arrow { grid-row: 1; grid-column: 3; justify-self: end; padding-top: 0.35em; }
  .deliverables { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .deliverables .muted { display: none; }
  .deliverables .eyebrow { margin-bottom: 4px; }
}

/* ---------- Entrée du hero (sobre, une fois) ---------- */
.js .hero__text > * { opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.js .hero__visual { opacity: 0; transition: opacity 0.9s var(--ease) 0.25s; }
.hero.is-ready .hero__text > * { opacity: 1; transform: none; }
.hero.is-ready .hero__text > *:nth-child(2) { transition-delay: 0.08s; }
.hero.is-ready .hero__text > *:nth-child(3) { transition-delay: 0.16s; }
.hero.is-ready .hero__text > *:nth-child(4) { transition-delay: 0.24s; }
.hero.is-ready .hero__text > *:nth-child(5) { transition-delay: 0.32s; }
.hero.is-ready .hero__visual { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__text > *, .hero__visual { opacity: 1; transform: none; transition: none; } }
/* ---------- Page offre : variante diptyque (titre + cas client au premier écran) ---------- */
.offer-diptych { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-top: var(--s-8); padding-bottom: var(--s-10); }
.offer-diptych__text { grid-column: 1 / 8; }
.offer-diptych__case { grid-column: 8 / 13; }
.offer-diptych h1 { font-size: clamp(2.2rem, 4.2vw, var(--fs-56)); max-width: 18ch; }
.method { border-top: 1px solid var(--ink); padding-top: var(--s-6); padding-bottom: var(--s-10); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.method__label { grid-column: 1 / 4; }
.method__steps { grid-column: 4 / 13; }
.method__steps .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
.method__steps .step { grid-template-columns: 1fr; }
.method__steps .step__num { grid-row: auto; margin-bottom: var(--s-1); }
@media (max-width: 860px) {
  .offer-diptych__text, .offer-diptych__case, .method__label, .method__steps { grid-column: 1 / -1; }
  .method__steps .steps { grid-template-columns: 1fr; }
}

/* ---------- Révision 3 (prise de recul n°1) : or des grands titres, numéros au lieu de pictos, secteurs en ligne ---------- */
:root { --gold-title: #B09160; }
.hero h1 .gold, .answer__title .gold, .cta .gold { color: var(--gold-title); }
.fact__num { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.1em; color: var(--gold-ink); padding-top: 0.45em; }
.facts--stack .fact__num { grid-row: 1 / 3; }
.sectors .tags { display: block; font-size: var(--fs-16); color: var(--ink); }
.sectors .tag { border: 0; padding: 0; font-size: inherit; display: inline-block; white-space: nowrap; }
.sectors .tag:not(:last-child)::after { content: "·"; color: var(--gold-2); margin: 0 0.6em; }

/* ============================================================
   Options de sections (variantes S1 « index monumental », S4 « preuve dominante », S11 « contact clair »)
   activées par thème : home_offers = monumental, home_missions = dominant, contact = light
   ============================================================ */
.num { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: 0.08em; color: var(--gold-ink); }
.idx { border-top: 1px solid var(--ink); }
.idx__row { border-bottom: 1px solid var(--rule); transition: border-color 0.3s var(--ease); }
.idx__row:hover, .idx__row:focus-within { border-bottom-color: var(--ink); }
.idx__link { display: flex; align-items: center; height: 144px; padding-bottom: 20px; }
.idx__grid { display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 7fr) 48px; column-gap: var(--gutter); align-items: baseline; width: 100%; }
.idx__title { display: block; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-40); line-height: 48px; letter-spacing: -0.02em; color: var(--ink); }
.idx__text { position: relative; display: block; font-size: var(--fs-18); line-height: 28px; color: var(--slate); max-width: 60ch; }
.idx__lead { position: absolute; left: 0; right: 0; top: 100%; padding-top: 6px; font-size: var(--fs-16); line-height: 24px; color: var(--ink-2); max-width: 52ch; opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.idx__link:hover .idx__lead, .idx__link:focus-visible .idx__lead { opacity: 1; transform: none; }
.idx__arrow { justify-self: end; width: 24px; height: 24px; color: var(--ink); transition: transform 0.3s var(--ease); }
.idx__arrow .arrow { width: 24px; height: 24px; }
.idx__link:hover .idx__arrow { transform: translateX(6px); }
.feat { align-items: stretch; row-gap: var(--gutter); }
.feat__cell { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--rule); padding: var(--s-5); min-height: 400px; transition: background 0.3s var(--ease); }
a.feat__cell:hover { background: var(--cream-2); }
.feat__top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.feat__top img { width: auto; max-width: 200px; object-fit: contain; }
.feat__link { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.feat__link .arrow { width: 16px; height: 16px; color: var(--ink); transition: transform 0.3s var(--ease); }
a.feat__cell:hover .feat__link .arrow { transform: translateX(4px); }
.feat__name { margin-top: var(--s-5); font-size: var(--fs-24); line-height: 32px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.feat__text { margin-top: var(--s-1); margin-bottom: auto; font-size: var(--fs-18); line-height: 28px; color: var(--slate); max-width: 40ch; }
.feat__kpi { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--rule); font-family: var(--font-serif); font-size: var(--fs-28); line-height: 36px; letter-spacing: -0.01em; color: var(--ink); max-width: 32ch; }
.rest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--gutter); border-top: 1px solid var(--ink); }
.rest__cell { display: flex; flex-direction: column; padding: var(--s-3) 0 var(--s-4); }
.rest__logo { height: 36px; display: flex; align-items: center; }
.rest__logo img { width: auto; max-width: 140px; object-fit: contain; }
.rest__tag { font-size: var(--fs-11); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); border: 1px solid var(--gold-2); padding: 0.3em 0.6em; }
.rest__name { margin-top: var(--s-3); font-size: var(--fs-18); line-height: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.rest__text { margin-top: 4px; font-size: var(--fs-16); line-height: 24px; color: var(--slate); }
.ct { background: var(--paper); padding: var(--s-12) 0; border-top: 1px solid var(--rule); }
.ct__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); align-items: end; }
.ct__q { grid-column: 1 / 9; }
.ct__q h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-64); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); margin-top: var(--s-3); }
.ct__q p { margin-top: var(--s-4); font-size: var(--fs-18); line-height: 1.55; color: var(--slate-2); max-width: 52ch; }
.ct__c { grid-column: 9 / 13; }
.ct__mail { display: block; margin-top: var(--s-2); font-family: var(--font-serif); font-size: var(--fs-32); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); border-bottom: 1px solid var(--gold-2); padding-bottom: var(--s-2); }
.ct__tel { display: inline-block; margin-top: var(--s-2); font-size: var(--fs-18); line-height: 1.55; color: var(--slate-2); }
.ft { background: var(--paper); border-top: 1px solid var(--rule); padding: var(--s-3) 0; font-size: var(--fs-14); line-height: 1.43; color: var(--slate); }
.ft__line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.ft__left, .ft__right { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.ft .brand { color: var(--ink); }
.ft__sig { font-size: var(--fs-11); line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); }
.ft a:hover { color: var(--ink); }
@media (max-width: 1280px) { .idx__text { font-size: var(--fs-16); line-height: 24px; } }
@media (max-width: 1100px) { .rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .idx__link { display: block; height: auto; padding: 20px 0; }
  .idx__grid { grid-template-columns: 40px minmax(0, 1fr) 20px; column-gap: var(--s-2); row-gap: var(--s-1); }
  .idx__title { font-size: var(--fs-28); line-height: 36px; }
  .idx__text { grid-column: 2; font-size: var(--fs-16); line-height: 24px; }
  .idx__lead { display: none; }
  .idx__arrow { grid-row: 1; grid-column: 3; width: 20px; height: 20px; }
  .feat__cell { padding: var(--s-3); min-height: 0; }
  .feat__kpi { font-size: var(--fs-24); line-height: 32px; margin-top: var(--s-4); }
  .feat__name { margin-top: var(--s-4); font-size: var(--fs-20); line-height: 28px; }
  .feat__text { font-size: var(--fs-16); line-height: 24px; }
  .rest { grid-template-columns: 1fr; margin-top: var(--s-4); }
  .rest__cell { border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; }
  .rest__cell:last-child { border-bottom: 0; }
  .ct { padding: var(--s-8) 0; }
  .ct__q, .ct__c { grid-column: 1 / -1; }
  .ct__q h2 { font-size: var(--fs-40); line-height: 1.12; }
  .ct__q p { font-size: var(--fs-16); line-height: 1.5; margin-top: var(--s-3); }
  .ct__mail { font-size: var(--fs-24); line-height: 1.33; }
  .ct__tel { font-size: var(--fs-16); line-height: 1.5; }
  .ft__line, .ft__left, .ft__right { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .ft__line { gap: var(--s-3); }
}

/* ============================================================
   Révision 4 (critique Astra n°2, 19:50 UTC) : hero sans (référence header), CTA contour,
   réponse empilée, offres 36/44, preuves en sans, fondateurs portrait au-dessus, mobile.
   ============================================================ */
.hero--sans h1 { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(2.5rem, 5vw, 72px); }
.hero--sans h1 .gold { font-style: italic; font-weight: 400; color: var(--gold-title); }
.btn--outline { background: transparent; border: 1px solid var(--gold-ink); color: var(--ink); min-height: 48px; padding: 0 20px; }
.btn--outline:hover { background: var(--gold-ink); color: var(--white); border-color: var(--gold-ink); }
.hero__inner { min-height: 640px; padding-top: var(--s-8); padding-bottom: var(--s-8); }
.globe { width: 740px; margin-right: -20%; }
.answer { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: block; }
.answer__title { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-40); line-height: 48px; letter-spacing: -0.02em; margin-top: var(--s-2); }
.answer__text { margin-top: var(--s-3); font-size: var(--fs-18); line-height: 28px; color: var(--slate-2); max-width: 60ch; }
.section--offers .idx, .section--offers .offer-rows, .section--offers .cells { margin-top: 56px !important; }
.idx__title { font-size: 36px; line-height: 44px; }
.idx__text { max-width: 44ch; }
.feat__kpi { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-24); line-height: 32px; letter-spacing: -0.01em; }
.feat__text { margin-bottom: 0; }
.feat__kpi { margin-top: var(--s-4); }
.rest__cell { padding: var(--s-3) 0; }
.rest__name { font-size: 22px; line-height: 28px; }
.rest__tag { font-size: var(--fs-12); line-height: 16px; }
.people--stack { column-gap: var(--s-6); }
.people--stack .person { grid-template-columns: minmax(280px, 1fr); }
.people--stack .person__photo { width: 192px; height: 192px; margin-bottom: var(--s-2); }
.person__role { font-size: var(--fs-14); line-height: 20px; letter-spacing: 0.06em; }
.person p { font-size: var(--fs-18); line-height: 28px; }
.checklist li { padding: 16px 0 16px 1.6em; border-bottom: 1px solid var(--rule); }
.checklist li:first-child { border-top: 1px solid var(--rule); }
.checklist li::before { top: 1.55em; }
.sectors { margin-top: var(--s-4); }
.link-arrow { font-size: var(--fs-16); line-height: 24px; min-height: 44px; align-items: center; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.cell { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cell__link { display: flex; flex-direction: column; min-height: 352px; padding: var(--s-4); transition: background 0.3s var(--ease); }
.cell__link:hover { background: var(--white); }
.cell__top { display: flex; align-items: center; justify-content: space-between; }
.cell__arrow { width: 24px; height: 24px; color: var(--ink); transition: transform 0.3s var(--ease); }
.cell__arrow .arrow { width: 24px; height: 24px; }
.cell__link:hover .cell__arrow { transform: translateX(6px); }
.cell__title { margin-top: var(--s-8); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-32); line-height: 40px; letter-spacing: -0.02em; color: var(--ink); }
.cell__text { margin-top: var(--s-2); font-size: var(--fs-18); line-height: 28px; color: var(--slate); max-width: 44ch; }
.cell__case { margin-top: auto; padding-top: var(--s-6); display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--fs-12); letter-spacing: 0.14em; text-transform: uppercase; }
.cell__case-label { color: var(--slate); }
.cell__case-name { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) {
  .hero h1, .hero--sans h1 { font-size: 40px; line-height: 44px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: var(--s-4); }
  .hero__actions .btn { justify-content: center; min-height: 48px; }
  .hero__actions .link-arrow { align-self: flex-start; }
  .hero__visual { height: 200px; margin-top: var(--s-3); }
  .globe { width: 340px; margin: -24px 0 0 auto; }
  .section { padding: var(--s-8) 0; }
  .answer { margin-top: var(--s-6); padding-top: var(--s-5); }
  .section--offers .idx, .section--offers .offer-rows, .section--offers .cells { margin-top: 40px !important; }
  .idx__grid, .offer-row__link { grid-template-columns: 24px minmax(0, 1fr) 24px; column-gap: 12px; }
  .idx__title { font-size: 28px; line-height: 36px; }
  .people--stack .person { grid-template-columns: 1fr; }
  .people--stack .person__photo { width: 144px; height: 144px; }
  .cells { grid-template-columns: 1fr; border-left: 0; }
  .cell { border-right: 0; }
  .cell__link { min-height: 0; padding: var(--s-3) 0 var(--s-4); }
  .cell__title { margin-top: var(--s-4); font-size: var(--fs-24); line-height: 32px; }
  .cell__text { font-size: var(--fs-16); line-height: 24px; }
  .cell__case { padding-top: var(--s-4); }
}
@media (max-width: 860px) {
  .hero__visual { height: 220px; margin-top: var(--s-4); }
  .globe { width: 340px; margin: 0 0 0 auto; }
}

/* Deux tracés de circuit à 45° sous le quadrant inférieur gauche du globe (critique Astra n°3) */
.hero__visual { position: relative; }
.hero__traces { position: absolute; left: -6%; bottom: 8%; width: 46%; height: auto; pointer-events: none; }
.hero--plaquette .hero__traces { display: none; }
@media (max-width: 860px) { .hero__traces { display: none; } }

/* Accessibilité (axe) : surtitres sur crème et sur navy */
.on-cream .eyebrow, .deliverables .eyebrow, .case .eyebrow { color: #6B5E48; }
.cta .eyebrow, .on-dark .eyebrow { color: var(--gold); }

/* ============================================================
   Révision 5 (critique Astra n°4 : pages intérieures) : ordre des preuves, cadres supprimés, personnes avant la frise
   ============================================================ */
.case { padding: var(--s-4); gap: var(--s-2); }
.case h3 { font-size: var(--fs-24); line-height: 32px; margin-top: var(--s-1); }
.case__kpi { font-size: var(--fs-24); line-height: 32px; color: var(--ink); margin-top: 0; }
.case__text { color: var(--slate-2); font-size: var(--fs-16); line-height: 24px; margin-top: var(--s-1); }
.case__list { margin-top: var(--s-2); }
.case__list li { font-size: var(--fs-16); line-height: 24px; }
.case__tag { align-self: flex-start; font-size: var(--fs-12); line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); border: 1px solid var(--gold-2); padding: 0.3em 0.6em; }
.deliverables { margin-top: var(--s-3); }
.intranet-box { border: 0; border-top: 1px solid var(--ink); padding: var(--s-3) 0 0; margin-top: var(--s-4); }
.intranet-box__links { gap: var(--s-2); }
.intranet-box .btn { min-height: 48px; }
.offer-page__head { padding: var(--s-10) 0 var(--s-6); }
.offer-page__head h1, .page-head h1 { font-size: clamp(2.2rem, 3.9vw, 56px); line-height: 1.07; max-width: 20ch; }
.section { padding: var(--s-10) 0; }
.people--stack .person { grid-template-columns: minmax(0, 1fr); }
.people--stack .person__photo { width: 160px; height: 160px; }
.people--3.people--stack .person__photo { width: 128px; height: 128px; }
.person__role { color: var(--slate-2); }
#histoire .section__head { margin-bottom: var(--s-6); }
.sector-list { margin-top: 0; }
.rest__cell .link-arrow { margin-top: var(--s-2); font-size: var(--fs-14); min-height: 0; }
@media (max-width: 860px) {
  .offer-page__head { padding: var(--s-5) 0 var(--s-4); }
  .offer-page__head h1, .page-head h1 { font-size: 36px; line-height: 40px; }
  .section { padding: var(--s-6) 0; }
  .offer-page__head + .section .grid { display: flex; flex-direction: column; gap: var(--s-4); }
  .offer-page__head + .section .grid > aside { order: -1; }
  .case { padding: var(--s-3); }
  .case__kpi { font-size: 22px; line-height: 28px; }
  .people--stack .person__photo, .people--3.people--stack .person__photo { width: 112px; height: 112px; }
  .timeline { row-gap: var(--s-3); }
  .timeline__date { font-size: var(--fs-12); line-height: 16px; }
}

/* ============================================================
   Révision 6 (QA visuelle toutes pages) : or des grands titres AA, portraits, H1 cohérents, hero 640, cascade mobile, menu
   ============================================================ */
:root { --gold-title: #9E8250; }
.person__photo { background: #E6E6E1; }
.person__photo img { transform: scale(1.42); object-position: center 34%; }
.title-sans .page-head h1, .title-sans .offer-page__head h1, .title-sans .offer-diptych h1 { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; letter-spacing: -0.03em; line-height: 1.07; }
.globe { width: 620px; margin-right: -16%; }
#probleme { padding-bottom: var(--s-6); }
.section--offers .idx, .section--offers .offer-rows, .section--offers .cells { margin-top: 24px !important; }
.feat__link { color: #6B5E48; }
.nav__menu { top: calc(100% + 22px); }
.nav__item::after { height: 24px; }
.nav__has-menu .chev { display: inline-block; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 8px; }
@media (max-width: 1100px) { .globe { width: 100%; margin-right: 0; } }
@media (max-width: 860px) {
  .hero__inner { min-height: 0; padding-top: var(--s-4); padding-bottom: var(--s-3); }
  .nav__inner { height: 64px; }
  .nav__links { inset: 64px 0 auto 0; }
  .globe { width: 340px; margin: 0 0 0 auto; }
  .hero__visual { height: 220px; }
  .nav__has-menu .chev { display: none; }
}

/* ============================================================
   Révision 7 (critique Astra n°5, finale) : rythme réponse → offres, globe mobile 200 px, H1 mobile 36/40, preuves
   ============================================================ */
.section--offers .idx, .section--offers .offer-rows, .section--offers .cells { margin-top: 56px !important; }
.answer { min-height: 0; }
.case__kpi strong, .feat__kpi strong { font-weight: 600; color: var(--ink); }
.case__list li { font-size: var(--fs-16); line-height: 24px; }
.case__list { margin-top: var(--s-3); }
.logos__inner { padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 860px) {
  .hero h1, .hero--sans h1 { font-size: 36px; line-height: 40px; }
  .hero__visual { height: 200px; margin-top: 24px; }
  .globe { width: min(320px, 100%); margin: 0 0 0 auto; }
  .section--offers .idx, .section--offers .offer-rows, .section--offers .cells { margin-top: 40px !important; }
  .logos__list img { padding: 12px 0; }
  .logos__inner { padding-top: 24px; padding-bottom: 24px; }
}
/* Rythme réponse → offres (56 px desktop / 40 px mobile), déclaré en fin de feuille pour primer sur .section */
#probleme { padding-bottom: 0; }
.section--offers { padding-top: 0; }
.section--offers .idx, .section--offers .offer-rows, .section--offers .cells { margin-top: 56px !important; }
@media (max-width: 860px) { .section--offers .idx, .section--offers .offer-rows, .section--offers .cells { margin-top: 40px !important; } }
/* Portraits : fond identique au disque des PNG (#F0F0E9), recadrage plus large pour ne pas couper les têtes */
.person__photo { background: #F0F0E9; }
.person__photo img { transform: scale(1.25); object-position: center 40%; }
/* Tracés de circuit : tracé progressif au chargement (signature discrète), coupé si mouvement réduit */
.js .hero__traces path { stroke-dasharray: 520; stroke-dashoffset: 520; animation: traceDraw 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s forwards; }
.js .hero__traces circle { opacity: 0; animation: traceDot 0.3s ease-out 1.5s forwards; }
@keyframes traceDraw { to { stroke-dashoffset: 0; } }
@keyframes traceDot { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .hero__traces path, .js .hero__traces circle { animation: none; stroke-dashoffset: 0; opacity: 1; } }
/* Portraits : réglage par personne (hauteur des yeux homogène) */
.person__photo img[src*="portrait-bertrand"] { object-position: center 44%; }
.person__photo img[src*="portrait-christophe"] { object-position: center 42%; }
.person__photo img[src*="portrait-jonathan"] { object-position: center 38%; }
.person__photo img[src*="portrait-sophie"] { object-position: center 42%; }

/* ============================================================
   Révision 8 (critique Astra n°6 : mobile des pages intérieures)
   ============================================================ */
.person__photo img[src*="portrait-bertrand"] { transform: scale(1.18); object-position: center 44%; }
.person__photo img[src*="portrait-christophe"] { transform: scale(1.18); object-position: center 42%; }
.person__photo img[src*="portrait-jonathan"] { transform: scale(1.21); object-position: center 38%; }
@media (max-width: 860px) {
  .page-head h1, .offer-page__head h1 { font-size: 34px; line-height: 38px; }
  h2, .h2 { font-size: 26px; line-height: 32px; }
  .page-head, .offer-page__head { padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .page-head + .section, .offer-page__head + .section { padding-top: var(--s-4); }
  .case { padding: 20px; gap: 12px; }
  .case__kpi { font-size: 22px; line-height: 28px; }
  .case__list li { padding: 10px 0; border-bottom: 0; }
  .case__list { border-top: 1px solid var(--rule); padding-top: 12px; }
  .step { grid-template-columns: 32px 1fr; column-gap: 16px; }
  .step p { font-size: 16px; line-height: 24px; }
  .intranet-box__links { flex-direction: column; gap: 12px; }
  .intranet-box .btn { width: 100%; justify-content: center; min-height: 48px; }
  .deliverables { gap: 12px; }
  .sector-list__item { font-size: 18px; padding: 10px 0; }
  .people--stack { row-gap: 32px; }
  .people--3.people--stack { margin-top: 48px; }
  .timeline { row-gap: 20px; }
  .track__steps { row-gap: 12px; }
  .rest__cell { padding: 24px 0; }
  .rest__cell .link-arrow { min-height: 48px; }
  .footer a { display: inline-block; padding: 6px 0; }
  .missions__also img { height: 28px; }
}

/* Portraits carrés des fondateurs (détourages de l'ancien site, désaturés) : pas de recadrage CSS */
.person__photo img[src*="-sq.png"] { transform: none; object-position: center; }

/* Barre mobile : CTA « Nous contacter » visible à côté du menu */
.nav__cta--bar { display: none; }
@media (max-width: 860px) {
  .nav__cta--bar { display: inline-flex; min-height: 40px; padding: 0 12px; font-size: 11px; letter-spacing: 0.1em; margin: 0 8px 0 auto; }
  .nav__inner { gap: 8px; }
  .nav__toggle { flex: 0 0 auto; }
}
@media (max-width: 860px) { .nav__links .nav__cta:not(.nav__cta--bar) { display: none; } }

/* ============================================================
   Révision 9 (second avis DA indépendant) : un seul or sur papier, tracés ×3, grille visible, contact en sans,
   numéros hors index en sans, logos à hauteur optique, mobile 3 + 2, pas de doublon Val Thorens sur l'accueil
   ============================================================ */
.hero__traces { width: 52%; left: -8%; bottom: 6%; }
.js .hero__traces path { stroke-dasharray: 560; stroke-dashoffset: 560; }
.hero__grid-bg { opacity: 0.6; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); }
.btn--gold, .nav__links .nav__cta, .btn--outline { border-color: var(--gold-title); }
.btn--gold:hover, .nav__links .nav__cta:hover, .btn--outline:hover { background: var(--gold-title); border-color: var(--gold-title); color: var(--white); }
.title-sans .cta h2 { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: clamp(2rem, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.title-sans .cta__contact a { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: clamp(1.25rem, 2vw, 28px); line-height: 36px; letter-spacing: -0.01em; }
.title-sans .cta__contact .phone { font-family: 'Archivo', sans-serif; font-weight: 400; }
.fact__num, .rest .num, .feat__link, .step__num { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.12em; }
.step__num { font-size: var(--fs-14); }
.page-index .missions__also { display: none; }
@media (max-width: 860px) {
  .logos__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-2); }
  .logos__list img { height: 24px; max-width: 100%; padding: 12px 0; }
}

/* ---------- Impression : le texte, sans navigation ni décor ---------- */
@media print {
  .nav, .hero__visual, .hero__grid-bg, .hero__traces, .nav__toggle, .logos, .footer__inner, .btn, .link-arrow, .reveal::before { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .js .reveal, .js .hero__text > *, .js .hero__visual { opacity: 1 !important; transform: none !important; }
  .cta { background: #fff; color: #000; padding: 12pt 0; border-top: 1px solid #000; }
  .cta .eyebrow, .cta .lead, .cta__contact a, .cta__contact .phone { color: #000; }
  .case, .on-cream, .deliverables { background: #fff; border: 1px solid #999; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding: 12pt 0; }
  h1, h2, h3 { page-break-after: avoid; }
  .case, .step, .person { page-break-inside: avoid; }
}

/* Ancres héritées de l'ancien site (#offer, #team) pour les liens externes existants */
.anchor-alias { display: block; height: 0; }

/* ----------------------------------------------------------------------------
   Révision 10 (critique Astra n°9 : pages intérieures, 15 sept. 02:17 UTC) :
   secteurs en diptyque (index à gauche, énoncé de la plaquette en serif à droite : plus de colonne vide),
   méthode avant cas client sur mobile, portraits 176 / 128 (mobile 128 / 112), chronologie 16/24,
   bandeau formats / livrables en ligne sur mobile.
   ---------------------------------------------------------------------------- */
.sector-statement { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.2; color: var(--ink); max-width: 18ch; margin-top: var(--s-2); }
.sector-list__item { padding: 18px 0; }
html { scroll-padding-top: 96px; }
.people--3.people--stack .person__photo img { transform: scale(1.45); } /* médaillons ronds de la plaquette : zoom suffisant pour que le cercle couvre les angles du carré (rayon 1,45 × 48 > diagonale 68 px) */
.people__board-label { margin: var(--s-10) 0 var(--s-3); } /* ex-style en ligne du gabarit équipe */
.offer-page__head + .section.offer-body { padding-top: var(--s-8); } /* remplace le style en ligne du gabarit offre (surchargeable sur mobile) */
/* Expérience « text-wrap » (Chrome 117+, Safari 17.5+, ignoré ailleurs) : titres équilibrés, paragraphes sans mot orphelin ; le hero garde ses lignes explicites */
h2, h3, .h2, .h3, .page-head h1, .offer-page__head h1 { text-wrap: balance; }
p, li, .lead { text-wrap: pretty; }
.hero h1, .hero .lead, .cta h2 { text-wrap: initial; }
html:not(.js) .hero__visual { display: none; } /* sans JavaScript : pas de cadre vide à la place du globe */ /* ancres (#offres, #contact, #offer, #team…) dégagées de la barre de navigation collante */
.people--stack .person__photo { width: 176px; height: 176px; }
.people--3.people--stack .person__photo { width: 128px; height: 128px; }
.track__name { font-size: var(--fs-24); line-height: 1.25; }
.track__steps p, .timeline__item p { font-size: var(--fs-16); line-height: 24px; color: var(--slate-2); }
.tracks { row-gap: var(--s-5); }
@media (max-width: 860px) {
  .grid > aside.from-8 { grid-row: 2; }
  .offer-page__head + .section .grid > aside { order: 0; } /* annule la preuve d'abord (rév. 5) : ordre visuel = ordre du document */
  .people--stack .person__photo { width: 128px; height: 128px; }
  .people--3.people--stack .person__photo { width: 112px; height: 112px; }
  .deliverables { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
  .deliverables .eyebrow { flex-basis: 100%; margin-bottom: 2px; }
  .deliverables span { white-space: nowrap; }
  .deliverables .muted { display: none; }
  /* critique n°10 : chronologie mobile articulée (4 px date → événement, 16 px entre événements, 32 px entre parcours) */
  .track__steps .timeline__date, .timeline__date { margin-bottom: 4px; }
  .track__steps { row-gap: 16px; }
  .tracks { row-gap: 32px; }
  .timeline { row-gap: 16px; }
  /* critique n°10 : pied de page mobile sur deux colonnes (marque en pleine largeur) */
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
  .footer__inner > :first-child { grid-column: 1 / -1; }
  /* critique n°11 : sur téléphone, portrait à côté du nom et du rôle, biographie dessous en pleine largeur (page équipe et fondateurs de l'accueil) */
  .people--stack .person { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 0; align-items: start; }
  .people--stack .person > div:not(.person__photo) { display: contents; }
  .people--stack .person__photo, .people--3.people--stack .person__photo { width: 96px; height: 96px; grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .people--stack .person > div > .h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .people--stack .person > div > .person__role { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; }
  .people--stack .person > div > .person__zone { grid-column: 1 / -1; margin: 12px 0 0; }
  .people--stack .person > div > p:not(.person__role):not(.person__zone) { grid-column: 1 / -1; margin: 12px 0 0; }
  .people--stack { row-gap: 32px; }
  .people__board-label { margin-top: 48px; } /* critique n°12 */
  .people--3.people--stack { margin-top: 0; }
  .section__head { margin-bottom: 40px; } /* critique n°12 : 64 → 40 px entre l'en-tête de section et son contenu sur téléphone */
  /* critique n°11 : ouverture des pages d'offre resserrée (40 px entre le chapô et la première étape) */
  .offer-page__head { padding-bottom: 24px; }
  .offer-page__head + .section.offer-body { padding-top: 16px; }
  /* critique n°11 : petits repères plus fermes sur téléphone ; portraits carrés partout */
  .eyebrow { font-weight: 600; letter-spacing: 0.14em; }
  .people--stack .person__photo, .people--stack .person__photo img { border-radius: 0; }
  .sector-statement { font-size: 24px; line-height: 30px; max-width: none; margin-top: var(--s-4); }
}

/* ============================================================
   Révision 11 (20 sept. 2026) : charte « 01 Signature » (Agence_DA, http://51.68.228.67:8406/ onglet 01).
   Trois couleurs en grands aplats : bleu encre #121B23 (principale), or #D6B775 (secondaire), blanc cassé #FBFBFA
   (tertiaire), brume #B8C4C3 en soutien. L'or n'est jamais un texte sur fond clair (1,9:1) : il vit sur l'encre
   (hero, barre, contact, pied), dans les aplats (bouton principal) et dans le curseur du logo, repris en signe
   devant les surtitres. Georgia (Gelasio en repli, métriquement compatible) pour les énoncés, Poppins pour le reste.
   Logo vectoriel 402 (cadre + curseur). Hero : bande encre de 560 px, le titre visible en entier à 1280 × 631.
   Problématique : grille 3 cellules (H3). Offres : 4 tuiles (site B).
   ============================================================ */
:root {
  --font-serif: Georgia, 'Gelasio', 'Times New Roman', serif;
  --font-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --gold-title: var(--gold);
  --gold-2: var(--gold);
  --nav-h: 72px;
}
body { font-family: var(--font-sans); }
strong { font-weight: 600; }
html { scroll-padding-top: calc(var(--nav-h) + 24px); }

/* Énoncés en Georgia, titres courants en Poppins 500 */
h1, .h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; }
h2, .h2, h2.serif, .h2.serif, .statement, .answer__title, .cta h2, .ct__q h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.12; }
h2, .h2 { font-size: clamp(1.75rem, 2.8vw, var(--fs-40)); }
h3, .h3, .h4, .offer-row__title, .idx__title, .cell__title, .tile__title, .feat__name, .rest__name, .mission .h4, .track__name, .prose h2 { font-family: var(--font-sans); font-weight: 500; }
.page-head h1, .offer-page__head h1, .offer-diptych h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; }
.lead { color: var(--slate-2); }

/* Surtitres : texte ardoise, curseur or du logo en signe (6 × 13, le rapport 26,1 / 58,4 du logo) */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--slate); font-weight: 500; font-size: var(--fs-12); letter-spacing: 0.16em; }
.eyebrow::before { content: ""; flex: 0 0 auto; width: 6px; height: 13px; background: var(--gold); }
.eyebrow--ink { color: var(--slate); }
.on-cream .eyebrow, .deliverables .eyebrow, .case .eyebrow { color: var(--slate); }
.hero .eyebrow, .cta .eyebrow, .on-dark .eyebrow { color: var(--gold); }

/* Petits repères (numéros, étiquettes) : Poppins, ardoise, jamais d'or sur fond clair */
.num, .fact__num, .step__num, .offer__num, .offer-row__num, .timeline__date, .sector-list__num, .feat__link, .cell__case-label { font-family: var(--font-sans); font-weight: 500; color: var(--slate); }
.case__tag, .rest__tag, .mission__logo .tag { color: var(--slate); border-color: var(--rule); }
.person__role { color: var(--slate); }
.gold { color: var(--ink); }
.hero h1 .gold, .on-dark .gold, .cta .gold { color: var(--gold); }
.timeline { border-top-color: var(--rule); }
.timeline__item::before { background: var(--gold); }
.checklist li::before { background: var(--gold); }
.sectors .tag:not(:last-child)::after { color: var(--gold); }
.step__num { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-28); color: var(--ink); }
.case__kpi strong, .feat__kpi strong { font-weight: 600; }

/* Boutons : sur fond clair, contour encre ; sur l'encre, aplat or (texte encre 9,6:1) */
.btn { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.12em; }
.btn--gold, .btn--outline { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.btn--gold:hover, .btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.link-arrow { font-weight: 500; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.on-dark :focus-visible, .nav :focus-visible, .hero :focus-visible, .cta :focus-visible, .footer :focus-visible { outline-color: var(--gold); }

/* Barre de navigation : aplat encre, logo or, liens blanc cassé, contact en aplat or */
.nav { background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav__inner { height: var(--nav-h); gap: var(--s-3); }
.brand--logo { display: inline-flex; align-items: center; color: var(--gold); }
.brand--logo .logo { height: 30px; width: auto; display: block; }
.nav__links { gap: var(--s-4); }
.nav__links a { font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.10em; color: var(--paper); border-bottom: 1px solid transparent; }
.nav__links a:hover, .nav__links a[aria-current="page"] { border-bottom-color: var(--gold); }
.nav__lang { color: var(--mist-2); letter-spacing: 0.10em; }
.nav__lang a { color: var(--mist); }
.nav__lang .current { color: var(--gold); }
.nav__links .nav__cta { background: var(--gold); border: 1px solid var(--gold); color: var(--ink); min-height: 44px; padding: 0 18px; font-weight: 500; letter-spacing: 0.10em; margin-left: var(--s-1); }
.nav__links .nav__cta:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.nav__has-menu .chev { border-color: var(--mist-2); }
.nav__menu { top: calc(100% + 20px); left: -20px; min-width: 240px; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.14); padding: var(--s-1) 0; }
.nav__menu a { color: var(--paper) !important; padding: 0.55em 20px !important; font-size: var(--fs-14) !important; }
.nav__menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--gold) !important; }
.nav__item::after { height: 22px; }
.nav__toggle span { background: var(--paper); }

/* Hero : bande encre, Georgia droite puis italique or (l'affiche « Sécuriser l'IA. »), globe brume + or */
.hero { background: var(--ink); color: var(--paper); }
.hero__inner { min-height: 560px; padding-top: 48px; padding-bottom: 48px; align-items: center; }
.hero__text { grid-column: 1 / 8; }
.hero__visual { grid-column: 8 / 13; }
.hero__grid-bg { opacity: 0.08; background-image: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px); mask-image: radial-gradient(ellipse at 72% 45%, rgba(0, 0, 0, 0.9), transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 72% 45%, rgba(0, 0, 0, 0.9), transparent 72%); }
.hero h1, .hero--sans h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.5rem, 4.5vw, 64px); line-height: 1.06; letter-spacing: -0.015em; color: var(--paper); margin: 20px 0 24px; max-width: 14ch; }
.hero h1 .gold, .hero--sans h1 .gold { font-style: italic; font-weight: 400; color: var(--gold); }
.hero .lead { color: var(--mist); font-size: var(--fs-18); line-height: 1.55; max-width: 42ch; }
.hero__actions { margin-top: 32px; gap: var(--s-2) var(--s-4); }
.hero .btn--outline { background: var(--gold); border-color: var(--gold); color: var(--ink); min-height: 48px; padding: 0 22px; }
.hero .btn--outline:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.hero .link-arrow { color: var(--paper); }
.hero__traces g[stroke] { stroke: var(--mist-2); }
.hero__traces circle { fill: var(--ink); stroke: var(--mist-2); }
.hero--editorial .globe { width: 540px; max-width: none; margin: 0 -14% 0 auto; }
.hero--editorial .hero__visual { align-self: center; }

/* Bandeau des références : blanc cassé, un filet dessous */
.logos { background: var(--paper); border-top: 0; border-bottom: 1px solid var(--rule); }
.logos__inner { padding-top: 22px; padding-bottom: 22px; }

/* Problématique : en-tête surtitre / énoncé, puis trois cellules séparées par des filets (H3 « grille technique ») */
.section--pb { padding-top: 0; padding-bottom: 0; }
.pb { border-bottom: 1px solid var(--rule); }
.pb__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding: 64px 0 56px; border-bottom: 1px solid var(--rule); }
.pb__head .eyebrow { grid-column: 1 / 5; margin-top: 0.55em; }
.pb__head h2 { grid-column: 5 / 13; margin: 0; font-size: clamp(1.75rem, 2.9vw, 42px); line-height: 1.12; max-width: 22ch; }
.pb__head h2 .gold { color: var(--slate); }
.pb__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb__cell { display: flex; flex-direction: column; gap: 18px; padding: 40px var(--s-4) 56px; border-left: 1px solid var(--rule); }
.pb__cell:first-child { border-left: 0; padding-left: 0; }
.pb__cell:last-child { padding-right: 0; }
.pb__cell .num { font-size: var(--fs-12); letter-spacing: 0.08em; }
.pb__cell .h3 { margin-top: 6px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.pb__cell p { color: var(--slate); font-size: var(--fs-16); line-height: 1.55; max-width: 26em; }
/* Réponse : bande sans filet, surtitre + énoncé à gauche, texte de la plaquette à droite (site B) */
.section--pb .answer { margin-top: 0; padding: 56px 0; border-top: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.section--pb .answer .eyebrow { grid-column: 1 / 5; grid-row: 1; align-self: start; }
.section--pb .answer__title { grid-column: 1 / 5; grid-row: 2; margin-top: 12px; font-size: clamp(2rem, 3.2vw, 44px); line-height: 1.1; }
.section--pb .answer__text { grid-column: 5 / 13; grid-row: 1 / 3; margin-top: 0; font-size: var(--fs-20); line-height: 1.5; color: var(--slate-2); max-width: 30em; }

/* Offres : étiquette puis quatre tuiles (site B) */
.section--offers .tiles { margin-top: 0; }
.tiles { border-top: 1px solid var(--rule); }
.tiles__label { display: inline-flex; padding: 14px 0; }
.tiles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tile { border-left: 1px solid var(--rule); }
.tile:first-child { border-left: 0; }
.tile__link { display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: 32px var(--s-4) 40px; color: var(--ink); }
.tile:first-child .tile__link { padding-left: 0; }
.tile:last-child .tile__link { padding-right: 0; }
.tile .num { font-size: var(--fs-12); letter-spacing: 0.08em; }
.tile__title { display: block; margin-top: 32px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color 0.25s var(--ease); }
.tile__link:hover .tile__title { text-decoration-color: var(--ink); }
.tile__text { display: block; color: var(--slate); font-size: var(--fs-16); line-height: 1.5; max-width: 26em; }
.tile__arrow { display: block; margin-top: auto; width: 22px; height: 22px; color: var(--ink); transition: transform 0.25s var(--ease); }
.tile__arrow .arrow { width: 22px; height: 22px; }
.tile__link:hover .tile__arrow { transform: translateX(6px); }

/* Contact et pied de page : encre, logo or, courriel en Poppins */
.cta { padding: var(--s-10) 0; }
.cta h2 { color: var(--paper); font-size: clamp(2rem, 3.4vw, 52px); }
.cta__contact a { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.25rem, 2vw, 28px); line-height: 1.3; letter-spacing: -0.01em; border-bottom-color: var(--gold); }
.cta__contact .phone { font-family: var(--font-sans); font-weight: 400; color: var(--mist); }
.footer .brand--logo { color: var(--gold); }
.footer .brand--logo .logo { height: 26px; }
.footer__inner--5 { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); column-gap: var(--s-4); }
.footer__sig { margin-top: var(--s-2); }
.ft .brand--logo { color: var(--ink); }
.ft .brand--logo .logo { height: 24px; }

/* Pages simples et d'attente */
.crumbs { color: var(--slate); }

@media (max-width: 1100px) {
  .footer__inner--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__inner--5 > :first-child { grid-column: 1 / -1; }
  .hero--editorial .globe { width: 100%; margin: 0; }
  .tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(2n+1) { border-left: 0; }
  .tile:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .tile:nth-child(odd) .tile__link { padding-left: 0; }
  .tile:nth-child(even) .tile__link { padding-right: 0; padding-left: var(--s-4); }
}
@media (max-width: 860px) {
  .nav__inner { height: 64px; }
  .nav__links { inset: 64px 0 auto 0; background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .nav__links a { color: var(--paper); }
  .nav__menu { background: transparent; border: 0; padding-left: 16px; }
  .nav__cta--bar { background: var(--gold); border-color: var(--gold); color: var(--ink); }
  .hero__inner { min-height: 0; padding-top: var(--s-4); padding-bottom: var(--s-3); }
  .hero h1, .hero--sans h1 { font-size: 38px; line-height: 1.08; max-width: none; margin: 16px 0 20px; }
  .hero--editorial .globe { width: min(320px, 100%); margin: 0 0 0 auto; }
  .hero .btn--outline { justify-content: center; }
  .pb__head { display: block; padding: 40px 0 32px; }
  .pb__head .eyebrow { margin: 0 0 16px; }
  .pb__cells { grid-template-columns: 1fr; }
  .pb__cell { border-left: 0; padding: 24px 0 32px; border-top: 1px solid var(--rule); }
  .pb__cell:first-child { border-top: 0; }
  .section--pb .answer { display: block; padding: 40px 0; }
  .section--pb .answer__text { margin-top: 20px; font-size: var(--fs-18); }
  .tiles__grid { grid-template-columns: 1fr; }
  .tile { border-left: 0; border-top: 1px solid var(--rule); }
  .tile:first-child { border-top: 0; }
  .tile__link, .tile:nth-child(even) .tile__link, .tile:nth-child(odd) .tile__link { min-height: 0; padding: 24px 0 32px; }
  .tile__title { margin-top: 16px; }
  .footer__inner--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Rév. 11, ajustements après capture 1280 × 631 : le globe ne dicte plus la hauteur du hero (560 px exactement,
   tout le premier écran tient sous la barre), énoncé de la problématique sur deux lignes, surtitres sans filet,
   titre du contact sans césure, première colonne du pied plus large */
.hero--editorial .hero__visual { position: relative; align-self: stretch; min-height: 0; }
.hero--editorial .globe { position: absolute; top: 50%; right: -14%; transform: translateY(-50%); width: 540px; margin: 0; }
.hero--editorial .hero__traces { bottom: auto; top: calc(50% + 160px); left: -4%; }
.pb__head h2 { max-width: none; text-wrap: initial; }
.section__head .eyebrow { border-top: 0; padding-top: 0; }
.cta h2 { max-width: none; font-size: clamp(2rem, 3.2vw, 48px); }
.footer__inner--5 { grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr)); }
.footer__sig { letter-spacing: 0.14em; }
@media (max-width: 1100px) {
  .hero--editorial .globe { position: absolute; width: 440px; right: -10%; }
}
@media (max-width: 860px) {
  .hero--editorial .hero__visual { height: 200px; overflow: hidden; }
  .hero--editorial .globe { position: static; transform: none; width: min(320px, 100%); margin: 0 0 0 auto; }
  .hero--editorial .hero__traces { display: none; }
}
/* Rév. 11 : menus déroulants en blanc cassé sur la barre encre (lisibles aussi au-dessus du hero encre) */
.nav__menu { background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 12px 32px rgba(18, 27, 35, 0.18); }
.nav__menu a { color: var(--ink) !important; }
.nav__menu a:hover { background: var(--cream); color: var(--ink) !important; }
@media (max-width: 860px) {
  .nav__menu { background: transparent; border: 0; box-shadow: none; }
  .nav__menu a { color: var(--mist) !important; }
}
/* Rév. 11, téléphone : colonnes du hero en pleine largeur (les placements 1/8 et 8/13 ci-dessus ne valent qu'au-delà de 860 px) */
@media (max-width: 860px) {
  .hero__text, .hero__visual { grid-column: 1 / -1; }
  .hero--editorial .hero__visual { align-self: auto; }
}
@media (max-width: 1100px) { .footer__inner--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .footer__inner--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
/* Rév. 11 (retour fondateur, 20 sept.) : « Nous contacter » et « Parlons de votre projet » en contour or, pas en aplat ; l'aplat n'arrive qu'au survol */
.nav__links .nav__cta, .nav__cta--bar, .hero .btn--outline { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.nav__links .nav__cta:hover, .nav__cta--bar:hover, .hero .btn--outline:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
/* Rév. 11 (retour fondateur, 20 sept.) : bandeau des références ×1,5 ; hero calé en haut (48 px sous la barre) et
   éléments plus espacés, le bouton « Parlons de votre projet » restant à la même hauteur */
.logos__list img { max-width: 240px; }
.logos__inner { padding-top: 28px; padding-bottom: 28px; }
.hero__inner { align-items: start; padding-top: 48px; }
.hero h1, .hero--sans h1 { margin: 24px 0 38px; }
.hero__actions { margin-top: 51px; }
@media (max-width: 860px) {
  .hero__inner { padding-top: var(--s-4); }
  .hero h1, .hero--sans h1 { margin: 16px 0 20px; }
  .hero__actions { margin-top: var(--s-4); }
  .logos__list img { max-width: 100%; }
}
/* Rév. 11 (retour fondateur, 21 sept.) : globe décalé de 50 px vers la gauche */
.hero--editorial .globe { right: calc(-14% + 50px); }
.hero--editorial .hero__traces { left: calc(-4% + 50px); }
@media (max-width: 1100px) { .hero--editorial .globe { right: calc(-10% + 50px); } }
@media (max-width: 860px) { .hero--editorial .globe { right: auto; } }
/* ============================================================
   Révision 12 (24 sept. 2026) : page Contact (sur le modèle de carbone4.com/fr/contact), « Nous rejoindre »,
   offres d'emploi, candidature spontanée, formulaires. Bandeau de contact : bouton « Nous contacter » à la place
   du courriel et du téléphone (rappelés sur la page Contact). Champs carrés, contour brume (3,4:1 sur blanc,
   seuil 3:1 des composants), jamais d'or en texte sur fond clair.
   ============================================================ */
:root { --error: #A13A2A; }   /* brique : 6,6:1 sur blanc, 5,9:1 sur crème */

/* Bandeau de contact : bouton contour or sur l'encre, calé en bas à droite */
.cta__side { display: flex; justify-content: flex-end; align-items: flex-end; }
.cta .cta__btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); min-height: 48px; padding: 0 22px; }
.cta .cta__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* En-tête en deux colonnes (Contact) : titre à gauche, énoncé à droite */
.page-head__split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-top: var(--s-4); }
.page-head__split h1 { grid-column: 1 / 7; margin-top: 0; }
.page-head__aside { grid-column: 7 / 13; padding-top: 0.4em; }
.page-head__statement { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.1vw, 30px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.page-head__note { margin-top: var(--s-3); font-size: var(--fs-15); color: var(--slate); }
.page-head__note a, .form__note a { color: var(--ink); border-bottom: 1px solid var(--mist-2); }
.page-head__note a:hover, .form__note a:hover { border-bottom-color: var(--ink); }

/* Mise en page formulaire + coordonnées */
.form-section { padding: var(--s-8) 0 var(--s-12); }
.form-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.form-layout .form-panel { grid-column: 1 / 9; }
.form-side { grid-column: 10 / 13; }
.form-panel { background: var(--cream); padding: 40px; }
.form-panel--white { background: var(--white); }
.form-panel > .eyebrow { margin-bottom: 28px; }
.form-panel__intro { margin-bottom: 28px; font-size: var(--fs-16); line-height: 1.55; color: var(--slate-2); max-width: 52ch; }
.side-jobs { margin-top: 20px; border-top: 1px solid var(--ink); }
.side-jobs a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-16); font-weight: 500; color: var(--ink); }
.side-jobs .arrow { flex: 0 0 auto; width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.side-jobs a:hover .arrow { transform: translateX(4px); }
.coords { margin-top: 20px; border-top: 1px solid var(--ink); }
.coords > div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.coords dt { font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.coords dd { margin-top: 8px; }
.coords dd a { font-size: var(--fs-20); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 2px; overflow-wrap: anywhere; }
.coords dd a:hover { border-bottom-color: var(--ink); }

/* Champs */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-13); font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.field__req { color: var(--slate); }
.field input, .field textarea { width: 100%; font: inherit; font-size: var(--fs-16); color: var(--ink); background: var(--white); border: 1px solid var(--mist-2); border-radius: 0; padding: 0 14px; transition: border-color 0.2s var(--ease); }
.field input { height: 48px; }
.field textarea { min-height: 176px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); outline-color: var(--error); }
.field__err { margin-top: 6px; font-size: var(--fs-13); color: var(--error); }
.field__help { margin-top: 6px; font-size: var(--fs-13); color: var(--slate); }
.field--file input { height: auto; padding: 10px; border-style: dashed; font-size: var(--fs-14); color: var(--slate-2); cursor: pointer; }
.file__btn, .file__name { display: none; }
/* avec JavaScript : champ natif masqué (toujours focusable), bouton et nom de fichier dessinés */
.js .file { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px; background: var(--white); border: 1px dashed var(--mist-2); }
.js .file:hover { border-color: var(--slate); }
.js .file__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.js .file__btn { display: inline-flex; flex: 0 0 auto; white-space: nowrap; align-items: center; min-height: 40px; padding: 0 16px; font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.js .file:hover .file__btn { background: var(--ink); color: var(--paper); }
.js .file__name { display: block; min-width: 0; font-size: var(--fs-14); color: var(--slate-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js .file__input:focus-visible ~ .file__btn { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.js .file:has(.file__input[aria-invalid="true"]) { border-color: var(--error); }
.field--file input::file-selector-button { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; padding: 10px 16px; margin-right: 16px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.field--file input::file-selector-button:hover { background: var(--ink); color: var(--paper); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 28px; }
.form__note { flex: 1 1 280px; max-width: 48ch; font-size: var(--fs-13); line-height: 1.5; color: var(--slate); }
.form__submit { min-height: 48px; flex: 0 0 auto; }
.form__submit[disabled] { opacity: 0.6; cursor: progress; }
.form__status { margin-top: 20px; padding: 12px 16px; border-left: 3px solid var(--error); background: var(--white); font-size: var(--fs-14); color: var(--error); }
.form__done { padding: 8px 0 16px; outline: none; }
.form__done-title { font-family: var(--font-serif); font-size: clamp(1.75rem, 2.6vw, 36px); line-height: 1.15; color: var(--ink); margin-bottom: 12px; }
.form__done p:not(.form__done-title) { color: var(--slate-2); font-size: var(--fs-16); }

/* Nous rejoindre : trois arguments (cellules de la problématique), puis les offres en rangées */
.why .pb__head { padding: 56px 0 20px; border-bottom: 1px solid var(--ink); }
.why .pb__head .eyebrow { grid-column: 1 / -1; }
.why .pb__cell { padding-top: 32px; padding-bottom: 48px; }
.jobs { padding-top: var(--s-10); }
h2.eyebrow { line-height: 1.5; }   /* surtitres qui tiennent lieu de titre de section (ordre des titres) */
.jobs__label { margin-bottom: 16px; }
.jobs__list .offer-row__title { font-size: clamp(1.25rem, 1.9vw, 26px); font-weight: 500; letter-spacing: -0.01em; }
.jobs__facts { display: block; margin-top: 8px; font-size: var(--fs-13); letter-spacing: 0.02em; color: var(--slate); }
.offer-row--spontaneous .offer-row__title { font-family: var(--font-serif); font-weight: 400; }

/* Offre d'emploi : repères du poste en ligne, puis rangées titre / liste */
.job-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.job-facts > div { padding: 16px 24px 0; border-left: 1px solid var(--rule); }
.job-facts > div:first-child { padding-left: 0; border-left: 0; }
.job-facts dt { font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.job-facts dd { margin-top: 6px; font-size: var(--fs-16); font-weight: 500; color: var(--ink); }
.job-head__cta { margin-top: var(--s-5); }
.job-head__cta .btn { min-height: 48px; }
.job-body { padding: var(--s-8) 0 var(--s-10); }
.job-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 40px 0; border-top: 1px solid var(--rule); }
.job-row--intro { border-top: 0; padding-top: 0; }
.job-intro { grid-column: 1 / 10; max-width: 44em; font-size: var(--fs-20); line-height: 1.55; }
.job-row__title { grid-column: 1 / 5; font-family: var(--font-sans); font-size: var(--fs-20); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.job-row__list, .job-steps { grid-column: 5 / 13; }
.job-row .checklist li { font-size: var(--fs-16); line-height: 1.5; padding: 14px 0 14px 1.6em; }
.job-row .checklist li::before { top: calc(14px + 0.75em); }
/* le filet de la rangée tient lieu de premier filet de liste ; le texte du premier item s'aligne sur le titre */
.job-row .checklist li:first-child { border-top: 0; padding-top: 0; }
.job-row .checklist li:first-child::before { top: 0.75em; }
.job-row .checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.job-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; }
.job-steps li { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 0 0; font-size: var(--fs-15); line-height: 1.5; color: var(--slate-2); }
.job-steps .num { font-size: var(--fs-12); letter-spacing: 0.08em; }

/* Postuler : intro à gauche, formulaire à droite */
.apply__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.apply__intro { grid-column: 1 / 5; }
.apply__intro h2 { font-size: clamp(2rem, 3.2vw, 44px); margin-bottom: var(--s-3); }
.apply__intro .lead { font-size: var(--fs-16); max-width: 32ch; }
.apply .form-panel { grid-column: 5 / 13; }

@media (max-width: 1100px) {
  .form-layout .form-panel { grid-column: 1 / 9; }
  .form-side { grid-column: 9 / 13; }
  .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .job-facts > div:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: 16px; }
}
@media (max-width: 860px) {
  .cta__side { justify-content: flex-start; margin-top: var(--s-4); }
  .page-head__split { display: block; }
  .page-head__aside { margin-top: var(--s-4); padding-top: 0; }
  .form-section { padding: var(--s-5) 0 var(--s-8); }
  .form-layout, .apply__grid { display: block; }
  .form-panel { padding: 24px 20px; margin-left: calc(-1 * var(--margin) + 4px); margin-right: calc(-1 * var(--margin) + 4px); }
  .form-side { margin-top: var(--s-6); }
  .form__grid { grid-template-columns: 1fr; gap: 20px; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__note { flex: none; }   /* en colonne, la base de 280 px deviendrait une hauteur */
  .js .file { gap: 12px; }
  .js .file__btn { padding: 0 12px; }
  .form__submit { justify-content: center; }
  .why .pb__head { padding: 40px 0 16px; }
  .jobs { padding-top: var(--s-6); }
  .job-facts > div, .job-facts > div:nth-child(3) { padding: 14px 16px 0 0; border-left: 0; }
  .job-facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
  .job-row { display: block; padding: 32px 0; }
  .job-row--intro { padding-top: 0; }
  .job-intro { font-size: var(--fs-18); }
  .job-row__title { margin-bottom: 16px; }
  .job-steps { grid-template-columns: 1fr; }
  .job-steps li { flex-direction: row; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .job-steps li:first-child { padding-top: 0; }
  .job-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
  .apply__intro { margin-bottom: var(--s-4); }
  .apply__intro .lead { max-width: none; }
}
/* Rév. 12 (24 sept. 2026) : accueil, « Nos secteurs » en trois cartes à la place des cas clients, puis un bouton vers
   la page Secteurs. Cartes blanches à filet, arête haute encre ; cas d'usage en liste à tirets or (petit signe) */
/* en-tête : surtitre au-dessus, titre sur une ligne (retour du fondateur) ; il ne passe à la ligne que faute de place */
.scards__head { margin-bottom: var(--s-6); }
.scards__head h2 { grid-column: 1 / -1; max-width: none; text-wrap: wrap; }
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.scard { display: flex; flex-direction: column; gap: 16px; padding: 32px 32px 36px; background: var(--white); border: 1px solid var(--rule); border-top: 1px solid var(--ink); }
/* sous-grille : numéro, titre, texte et liste alignés d'une carte à l'autre, quelle que soit la longueur des textes */
@supports (grid-template-rows: subgrid) {
  .scard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 16px; align-content: start; }
}
.scard .num { font-size: var(--fs-12); letter-spacing: 0.08em; }
.scard__title { margin-top: 20px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.scard__text { color: var(--slate-2); font-size: var(--fs-16); line-height: 1.5; max-width: 30em; }
.scard__uses { padding-top: 12px; border-top: 1px solid var(--rule); }
.scard__uses li { position: relative; padding: 10px 0 0 1.4em; font-size: var(--fs-15); line-height: 1.45; color: var(--ink); }
.scard__uses li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 1px; background: var(--gold); }   /* pixel entier : un filet d'1 px à position fractionnaire vire au gris */
.scards__cta { margin-top: var(--s-6); }
.scards__cta .btn { min-height: 48px; }
@media (max-width: 1100px) {
  .scard { padding: 28px 24px 32px; }
}
@media (max-width: 860px) {
  .scards { grid-template-columns: 1fr; gap: 16px; }
  .scard { padding: 24px 20px 28px; }
  .scard__title { margin-top: 8px; }
  .scards__cta { margin-top: var(--s-4); }
  .scards__cta .btn { width: 100%; justify-content: center; }
}