/* ============================================================
   DESIGN TOKENS — "The Assembly"
   ============================================================ */

:root {
  /* Color palette — Light base, high contrast */
  --color-bg:              #fafafa;
  --color-surface:         #f0f0f2;
  --color-border:          #e0e0e4;
  --color-text:            #1a1a1a;
  --color-text-secondary:  #5c5c66;
  --color-text-tertiary:   #9c9ca6;
  --color-black:           #000000;
  --color-white:           #ffffff;
  --color-accent:          #FF6B35;
  --color-accent-glow:     rgba(255, 107, 53, 0.15);
  --color-accent-light:    #FFF0E9;
  --color-dark:            #111116;
  --color-dark-surface:    #1a1a22;

  /* Gradient */
  --gradient-warm: linear-gradient(135deg, #FFD800 0%, #FF8205 40%, #FF6B35 60%, #E10500 100%);

  /* Typography — technical + human */
  --font-sans:     'Raleway', 'Segoe UI', sans-serif;
  --font-heading:  'Space Grotesk', 'Raleway', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
  --font-poster:   'Playfair', 'Didot', Georgia, serif;   /* white paper poster only */
  --font-size-base: 16px;
  --line-height: 1.6;
  --line-height-heading: 1.08;

  /* Font scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3.25rem;
  --text-5xl:  4rem;
  --text-6xl:  5rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-width: 980px;
  --reading-width:   720px;
  --header-height:   80px;
  --axe:             clamp(1.5rem, 8vw, 10rem);   /* left axis shared by the header logo and the hero title */

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Corner brackets — "The Joint" */
  --bracket-size: 16px;
  --bracket-weight: 2px;
  --bracket-offset: 0px;
  --bracket-color: var(--color-border);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   RESET
   ============================================================ */

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

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-6));
  /* native scrollbar hidden: on desktop it took its own lane, showing as a
     light strip beside dark sections. A floating one replaces it (.scrollbar) */
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

/* Floating scrollbar, drawn over the content by the script in baseof */
.scrollbar {
  position: fixed;
  top: 0;
  right: 2px;
  bottom: 0;
  width: 10px;
  z-index: 200;            /* above the fixed header */
  pointer-events: none;
}

.scrollbar__thumb {
  position: absolute;
  right: 0;
  width: 6px;
  border-radius: var(--radius-pill);
  background: rgba(128, 128, 128, 0.35);   /* neutral grey: readable on light and dark sections */
  opacity: 0.4;
  pointer-events: auto;
  cursor: default;
  transition: opacity 0.3s ease, width 0.15s ease;
}

.scrollbar.is-active .scrollbar__thumb,
.scrollbar__thumb:hover,
.scrollbar__thumb.is-dragging {
  opacity: 1;
  width: 8px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* no sideways scroll — keeps centred content from shifting */
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}



/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

p {
  margin-bottom: var(--space-4);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.65;
}

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}

ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li {
  margin-bottom: var(--space-1);
}

blockquote {
  border: none;
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: var(--space-6) 0;
  position: relative;
  --bracket-color: var(--color-accent);
  --bracket-size: 14px;
  --bracket-offset: 0px;
}

blockquote::before,
blockquote::after {
  content: '';
  position: absolute;
  inset: var(--bracket-offset);
  pointer-events: none;
}

blockquote::before {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

blockquote::after {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

th {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   DATA TAGS — monospace for technical elements
   ============================================================ */

.data-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   CORNER BRACKETS — "The Joint"
   ============================================================ */

.brackets {
  position: relative;
}

.brackets::before,
.brackets::after {
  content: '';
  position: absolute;
  inset: var(--bracket-offset);
  pointer-events: none;
  transition: inset var(--transition-slow), filter var(--transition-slow);
}

/* Top-left ⌜ and top-right ⌝ */
.brackets::before {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

/* Bottom-left ⌞ and bottom-right ⌟ */
.brackets::after {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

/* Hover: brackets tighten and glow */
.brackets:hover {
  --bracket-offset: -4px;
  --bracket-color: var(--color-accent);
}

.brackets:hover::before,
.brackets:hover::after {
  filter: drop-shadow(0 0 4px var(--color-accent-glow));
}

/* ============================================================
   SCROLL ANIMATIONS — "Slide & Lock"
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 700ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}

.reveal--from-right {
  transform: translateX(40px);
}

.reveal--from-bottom {
  transform: translateY(32px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.reveal--delay-1 { transition-delay: 150ms; }
.reveal--delay-2 { transition-delay: 300ms; }
.reveal--delay-3 { transition-delay: 450ms; }

/* Steps get staggered reveal */
.step.reveal:nth-child(1)  { transition-delay: 0ms; }
.step.reveal:nth-child(2)  { transition-delay: 80ms; }
.step.reveal:nth-child(3)  { transition-delay: 160ms; }
.step.reveal:nth-child(4)  { transition-delay: 240ms; }
.step.reveal:nth-child(5)  { transition-delay: 320ms; }
.step.reveal:nth-child(6)  { transition-delay: 400ms; }
.step.reveal:nth-child(7)  { transition-delay: 480ms; }
.step.reveal:nth-child(8)  { transition-delay: 560ms; }

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.reading-width {
  max-width: var(--reading-width);
  margin-left: auto;
  margin-right: auto;
}

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
  padding-top: var(--header-height);
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  z-index: 100;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, transform 0.3s ease;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header.is-scrolled {
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* the header spans the page on the --axe margins: the logo sits on the same
   left axis as the hero title */
.site-header .site-header__inner {   /* beats the later .container paddings */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: none;
  padding-left: var(--axe);
  padding-right: var(--axe);
}

.site-header__brand {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.015em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: -13px;      /* the logo PNG's transparent margin: the drawn "l" sits on the axis (on the link, not the img, or max-width squeezes it) */
}

.site-header__brand:hover {
  opacity: 0.65;
}

.site-header__logo {
  height: 40px;
  width: auto;
  display: block;
}

/* ============================================================
   BURGER BUTTON — mobile only
   ============================================================ */

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.burger__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  transform-origin: center;
}

.burger.is-open .burger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-open .burger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger.is-open .burger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   NAV — mobile: fullscreen dropdown panel
   ============================================================ */

.site-nav__wrapper {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: rgba(250, 250, 250, 0.97);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4) var(--space-6);
  z-index: 99;
}

.site-nav__wrapper.is-open {
  display: block;
}

.site-nav {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.site-nav li {
  margin-bottom: 0;
}

.site-nav__link {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: none;
  transition: color var(--transition-fast);
}

.site-nav__link:hover {
  color: var(--color-accent);
  opacity: 1;
}

.site-nav__link[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Nav CTA — accent button with brackets */
.site-nav__cta {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  background: var(--color-surface);
  position: relative;
  --bracket-size: 8px;
  --bracket-weight: 1.5px;
  --bracket-offset: -3px;
  --bracket-color: var(--color-accent);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.site-nav__cta::before,
.site-nav__cta::after {
  content: '';
  position: absolute;
  inset: var(--bracket-offset);
  pointer-events: none;
  transition: inset var(--transition-slow);
}

.site-nav__cta::before {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.site-nav__cta::after {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.site-nav__cta:hover {
  background: var(--color-accent);
  color: var(--color-white);
  opacity: 1;
  --bracket-offset: -1px;
}

/* ============================================================
   FOOTER — dark blueprint footer
   ============================================================ */

.site-footer {
  background: var(--color-surface);
  border-top: none;
  padding: var(--space-10) 0;
  margin-top: var(--space-16);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.site-footer__email {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__email:hover {
  color: var(--color-accent);
  opacity: 1;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* phones: links first, the copyright below them, on the same wide left
   margin as the bridge above */
@media (max-width: 639px) {
  .site-footer .site-footer__inner {
    padding-left: 15%;
    gap: var(--space-4);
  }

  .site-footer__links {
    order: -1;
  }
}

.site-footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  position: relative;
  z-index: 10;
}

.site-footer__link:hover {
  color: var(--color-accent);
  opacity: 1;
}

/* an icon before the word (LinkedIn, cookies), on the same line,
   taking the link colour so it turns orange on hover too */
.site-footer__link--icone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__link--icone svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* line icons: drawn with a stroke instead of a fill */
.site-footer__link--icone svg.icone-trait {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* title + subtitle in the bottom-left corner, aligned on the header logo,
   with a generous margin below */
.hero__content {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(8rem + 160px);   /* same room as when the pulse line sat below */
}

/* Floating network canvas */
.hero__network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the hero text hugs the left edge, further out than the page container */
.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin-left: 0;            /* a flex item: auto margins would centre it */
  padding-left: var(--axe);
  padding-right: clamp(1.5rem, 4vw, 4rem);
}

.hero__phrase {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

/* the question, then the promise on its own line */
.hero__phrase {
  max-width: 22em;
  text-wrap: balance;
}

.hero__ligne {
  display: block;
}

@media (min-width: 768px) {
  .hero__phrase {
    font-size: var(--text-4xl);
  }
}

.hero__subtitle .accent {
  color: var(--color-accent);
  font-weight: 600;
}

/* demo button, white paper as a plain link beside it (stacked on phones) */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
}

.hero__lien {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero__lien:hover {
  color: var(--color-accent);
  opacity: 1;
}

/* "data et IA" never splits: on phones the title breaks after "solutions" */
.hero__groupe {
  white-space: nowrap;
}

/* Accent word highlight */
.hero__phrase .accent {
  color: var(--color-accent);
}

/* Word swap — "besoin" is shown, struck out, then replaced by "envie" */
.hero__swap {
  display: inline-grid;
  vertical-align: baseline;
  text-align: center;
}

.hero__swap-word {
  grid-area: 1 / 1;          /* stack both words in the same cell */
  white-space: nowrap;
}

/* "besoin" — appears, gets struck through, then lifts away */
.hero__swap-word--out {
  position: relative;
  color: var(--color-text);
  animation: heroSwapOut 900ms cubic-bezier(0.4, 0, 0.2, 1) 1600ms forwards;
}

/* Hand-drawn marker stroke (SVG) revealed left-to-right over "besoin" */
.hero__strike {
  position: absolute;
  left: -8%;
  top: 0.34em;
  width: 116%;
  height: 0.62em;
  overflow: visible;
  pointer-events: none;
  color: var(--color-accent);
  transform: rotate(-2.5deg);
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  animation: heroStrike 260ms cubic-bezier(0.3, 0, 0.2, 1) 1100ms forwards;
}

.hero__strike path {
  fill: currentColor;
}

/* "envie" — hidden, then drops in to take its place */
.hero__swap-word--in {
  color: var(--color-accent);
  font-size: 1.15em;
  line-height: 1;
  opacity: 0;
  transform: translateY(0.35em);
  animation: heroSwapIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 1900ms forwards;
}

@keyframes heroStrike {
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@keyframes heroSwapOut {
  to { opacity: 0; transform: translateY(-0.45em); }
}

@keyframes heroSwapIn {
  to { opacity: 1; transform: translateY(0); }
}

/* No motion: show the final word only, no swap */
@media (prefers-reduced-motion: reduce) {
  .hero__swap-word--out { display: none; }
  .hero__strike { animation: none; }
  .hero__swap-word--in {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-bottom: 0;
  line-height: 1.6;
  max-width: 540px;
}

/* Keywords start identical to the rest of the subtitle, then light up on scroll:
   Data → black, IA → accent (same orange as "envie") */
.hero__kw {
  color: var(--color-text);
  animation: kwIgnite 0.6s ease 1.2s forwards;   /* land in black, then ignite to orange */
}

@keyframes kwIgnite {
  to { color: var(--color-accent); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__kw {
    animation: none;
    color: var(--color-accent);
  }
}

/* "Too much data" — the word multiplies and scatters as you scroll.
   --ex (0→1) is set on the container by JS from scroll progress;
   --ox/--oy is the origin (the real "Data" word); per-item vars set the target. */
/* Binary cloud layer, contained inside the manifesto zone */
.data-burst {
  position: absolute;
  inset: 0;
  z-index: 0;              /* above the manifesto background, behind its text */
  pointer-events: none;
  overflow: hidden;
}

.data-bit {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-tertiary);
  white-space: pre;
  will-change: transform, opacity;
}

/* Per-column running total that the falling digits sum into, on the floor */
.data-sum {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.hero__body {
  max-width: var(--reading-width);
  margin: 0 auto;
  text-align: left;
}

.hero__body h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.hero__body h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Deferred word-swap (e.g. pénible → facile): hold the "before" state,
   then run when its container becomes visible on scroll. */
.hero__swap--scroll .hero__strike,
.hero__swap--scroll .hero__swap-word--out,
.hero__swap--scroll .hero__swap-word--in {
  animation: none;
}

.manifesto__movement.is-visible .hero__swap--scroll .hero__strike {
  animation: heroStrike 280ms cubic-bezier(0.3, 0, 0.2, 1) 800ms forwards;
}

.manifesto__movement.is-visible .hero__swap--scroll .hero__swap-word--out {
  animation: heroSwapOut 900ms cubic-bezier(0.4, 0, 0.2, 1) 1200ms forwards;
}

.manifesto__movement.is-visible .hero__swap--scroll .hero__swap-word--in {
  animation: heroSwapIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 1500ms forwards;
}

/* ============================================================
   HOMEPAGE — MOSAIC (analysis visuals + client questions)
   ============================================================ */

/* No animation at all (no reveal, no hover motion): a still pause for the
   eye between the hero and the manifesto. Edge to edge, thin white gutters,
   square tiles: 4 columns x 2 rows on desktop, 2 columns on phones.
   Visuals are square, in black and white, and fill their tile; questions sit on a
   few deep tones and one muted orange. */
.mosaique {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: calc((100vw - 10px) / 2);
  grid-auto-flow: dense;
  gap: 10px;
  padding: 10px 0;
  background: var(--color-white);
}

.mosaique__case {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--fond, var(--color-surface));
}

.mosaique__case--large {
  grid-column: span 2;
}

/* question tile: the question in the poster serif, white */
.mosaique__case--question {
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 2.25rem);
  color: var(--color-white);
}

.mosaique__case--question:hover {
  opacity: 1;
}

.mosaique__question {
  font-family: var(--font-poster);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: clamp(1.25rem, 2.2vw, 2.4rem);   /* one size for every question tile */
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 16em;
}

.mosaique__voir {
  align-self: flex-end;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  line-height: 1;
}

/* visual tile: the square analysis, edge to edge, on white, in black and white */
.mosaique__case--visuel {
  background: var(--color-white);
}

.mosaique__case--visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

@media (min-width: 900px) {
  .mosaique {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: calc((100vw - 30px) / 4);
  }
}

/* ============================================================
   HOMEPAGE — MANIFESTO / LE PARTI PRIS
   ============================================================ */

.manifesto {
  background: var(--color-white);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;          /* the binary cloud is clipped to this zone */
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.manifesto .container {
  position: relative;
  z-index: 1;                /* text sits above the binary cloud */
  max-width: var(--reading-width);
}

.manifesto__eyebrow {
  text-align: center;
  margin-bottom: var(--space-12);
}

.manifesto__eyebrow::before {
  content: '// ';
  opacity: 0.5;
}

.manifesto__movement {
  margin-bottom: var(--space-16);
}

.manifesto__movement:last-child {
  margin-bottom: 0;
}

.manifesto__movement {
  position: relative;
}

.manifesto__statement {
  position: relative;
  z-index: 1;            /* stay above the data cloud */
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  text-align: center;
}

.manifesto__statement--turn {
  margin-bottom: var(--space-6);
}

/* The "old way" — crossed out with an accent stroke */
.manifesto__strike {
  position: relative;
  color: var(--color-text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

/* The accent word echoes the hero's highlight on "décisions" */
.manifesto__statement .accent {
  color: var(--color-accent);
}

.manifesto__support {
  position: relative;
  z-index: 1;            /* stay above the data cloud */
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}

/* a line break that only exists on desktop */
.br-desktop {
  display: none;
}

@media (min-width: 900px) {
  .br-desktop {
    display: inline;
  }
}

.manifesto__support strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Closing invitation — turns the question back on the reader */
.manifesto__invite {
  margin-top: var(--space-16);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 0;
  text-align: center;
}

.manifesto__invite .accent {
  color: var(--color-accent);
}

/* centred on the line of text rather than sitting on its baseline; middle
   aligns on the lowercase letters, nudged up to the capitals and the "?" */
.manifesto__cta {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.15em;
  margin-left: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--transition-base), transform var(--transition-base);
}

.manifesto__cta:hover {
  background: var(--color-accent);
  opacity: 1;
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .manifesto {
    padding: var(--space-20) 0 var(--space-24);
  }

  .manifesto__statement {
    font-size: var(--text-4xl);
  }

  .manifesto__invite {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   HOMEPAGE — ILLUSTRATION BANNER (placeholder)
   ============================================================ */

.illus-banner {
  background: var(--color-surface);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.illus-banner__label {
  position: relative;
  z-index: 1;              /* above the line segment */
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-12);
  margin-bottom: 0;
}

/* Client references band */
.references {
  padding: var(--space-16) 0;   /* room around the carousel (it was flush with the band edges) */
}

.references .container {
  position: relative;
  z-index: 1;
}

.references__eyebrow {
  max-width: 880px;
  margin: 0 auto var(--space-10);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

/* carousel: the cards sit side by side in a horizontal snap track */
.references__carousel {
  max-width: 880px;
  margin: 0 auto;
}

.references__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* room for the card shadow, which overflow would otherwise clip */
  padding-bottom: var(--space-12);
  margin-bottom: calc(-1 * var(--space-8));
}

.references__track::-webkit-scrollbar {
  display: none;
}

.reference {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;           /* cards of a row share the tallest height */
}

.reference + .reference {
  margin-left: var(--space-6);
}

.reference .reference__card {
  flex: 1;
}

/* sits on the band's grey so the scroll line stops behind it, as behind the cards */
.references__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  width: fit-content;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
}

.references__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.references__btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.references__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.references__dots {
  display: flex;
  gap: var(--space-3);
}

.references__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.references__dot.is-active {
  background: var(--color-accent);
  transform: scale(1.25);
}

/* white card sits on the grey band and hides the scroll line behind it */
.reference__card {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.22);
  padding: var(--space-12) var(--space-12) var(--space-10);
}

.reference__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-10);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.reference__logo:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.reference__logo img {
  height: 56px;          /* explicit height — the SVG has only a viewBox, no intrinsic size */
  width: auto;
  max-width: 100%;
}

.reference__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.reference__story {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-8);
  text-align: left;
}

.reference__arrow {
  align-self: center;
  font-size: var(--text-2xl);
  color: var(--color-accent);
  line-height: 1;
}

.reference__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}

.reference__label--accent {
  color: var(--color-accent);
}

.reference__hl {
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
}

.reference__text {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 0;
}

.reference__quote {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.reference__quote p {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.reference__quote cite {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

@media (max-width: 640px) {
  .reference__card {
    padding: var(--space-8) var(--space-6);
  }

  .reference__story {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: center;
  }

  .reference__arrow {
    transform: rotate(90deg);   /* point downward when stacked */
  }
}

/* ============================================================
   HOMEPAGE — DELTA (intro + scroll-driven demo)
   ============================================================ */

.delta {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;             /* content vertically centred in the band */
  padding: var(--space-24) 0;
  background: var(--color-surface);   /* same grey as the references band: breaks with the white manifesto above */
  color: var(--color-text);
  text-align: center;
}

.delta .container {
  position: relative;
  z-index: 1;              /* above the line segment */
  width: 100%;
  max-width: 1200px;
}

/* title + subtitle centred on the page, button pushed to the right
   (stacked and centred on mobile) */
.delta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-20);
}

.delta__text {
  max-width: 34em;
  background: var(--color-surface);    /* masks the line behind the text */
}

.delta__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.delta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.delta__subtitle .accent {
  color: var(--color-accent);
  font-weight: 600;
}

/* Δelta links to the demo: dotted underline, solid on hover */
.delta__subtitle a.accent {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.delta__subtitle a.accent:hover {
  opacity: 1;
  text-decoration-style: solid;
}

.delta__subtitle {
  font-size: var(--text-lg);
  line-height: 1.5;
  text-wrap: pretty;       /* no lone last word */
  color: var(--color-text-secondary);
}

/* White paper poster: the photo of a crumpled white poster, whole and as is.
   Multiply lets its white surround melt into the grey band while keeping
   the photo's own shading. The padding puts the text on the paper (the
   paper spans ~7% to 95% of the photo's width, ~8% to 91% of its height).
   Sizes follow the photo width (cqw). */
.affiche {
  display: block;
  width: min(100%, 520px);
  container-type: inline-size;
  background: var(--color-surface);   /* what the photo multiplies onto (.reveal isolates the blend) */
  color: var(--color-text);
  text-align: left;
}

.affiche:hover {
  opacity: 1;
}

.affiche__papier {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 736 / 1102;
  padding: 19cqw 13cqw 22cqw 15cqw;
  background: url("/img/affiche.jpg") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}

.affiche__logo {
  align-self: flex-start;
  height: 9cqw;
  width: auto;
}

/* Delta centred just above the title */
.affiche__corps {
  display: flex;
  flex-direction: column;
}

.affiche__marque {
  align-self: center;
  margin-bottom: 3cqw;
  color: var(--color-accent);
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: 5.2cqw;
  letter-spacing: 0.18em;
}

/* the title in steps, like a typeset poster */
.affiche__titre {
  display: flex;
  flex-direction: column;
  font-family: var(--font-poster);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: 15cqw;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.affiche__titre span:nth-child(1) { padding-left: 0; }
.affiche__titre span:nth-child(2) { padding-left: 18%; }
.affiche__titre span:nth-child(3) { padding-left: 42%; }
.affiche__titre span:nth-child(4) { padding-left: 4%; }

.affiche__pied {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 3.6cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 2cqw;
}

/* download icon */
.affiche__icone {
  width: 6cqw;
  height: 6cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-base);
}

.affiche:hover .affiche__icone {
  transform: translateY(2px);
}

.delta__hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  background: var(--color-surface);
  padding: 0 var(--space-2);
}

.delta__head .affiche {
  margin-top: var(--space-6);
}

/* text on the left, poster on the right, the line running between them */
@media (min-width: 960px) {
  .delta__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-16);
  }

  .delta__text {
    justify-self: end;
    max-width: 30em;
    text-align: left;
  }

  .delta__head .affiche {
    margin-top: 0;
    justify-self: start;
    width: min(100%, 520px);
  }
}

@media (min-width: 768px) {
  .delta__title {
    font-size: var(--text-4xl);
  }
}

/* Demo: full-screen. The header slides away while the demo is under it
   (.site-header.is-hidden, toggled by the demo script), so the section aligns
   on the very top of the viewport, and the snap must agree with it. */
html:has(.demo-steps) {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}

/* The demo is pinned (sticky) in a track taller than the screen: when a fast
   scroll overshoots before the script can stop it, the overshoot happens in
   the spare height, the picture does not move, and the script brings the
   page back unseen. Once the sequence is over (.is-libre) the spare height
   goes, and the page scrolls on normally. */
.demo-piste {
  position: relative;
  height: 160vh;
  height: 160dvh;
  scroll-snap-align: start;
}

.demo-piste.is-libre {
  height: auto;
}

.demo-steps {
  /* --b: tablet bezel; --demo-w: width of the screen, which canvas and HD
     overlay share exactly (pixel-aligned frames, the cross-fade must stay
     invisible). The tablet fits 92% of the width (minus --cote, the room
     for "Passer la démo" on its right) and 88% of the height (minus --sous,
     the room for it below on narrow screens). */
  --b: clamp(8px, 1.4vw, 20px);
  --cote: 0px;
  --sous: 4rem;
  --demo-w: min(calc(92vw - 2 * var(--b) - var(--cote)), calc((88vh - var(--sous) - 2 * var(--b)) * 1916 / 1028));
  --demo-w: min(calc(92vw - 2 * var(--b) - var(--cote)), calc((88dvh - var(--sous) - 2 * var(--b)) * 1916 / 1028));
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  overflow: hidden;
  background: var(--color-bg);   /* breaks with the grey bands around */
  position: sticky;
  top: 0;
}

/* "Passer la démo": arrow in a circle, label beside it; right of the tablet
   on wide screens, below it on narrow ones */
@media (min-width: 900px) {
  .demo-steps {
    --cote: 12rem;
    --sous: 0px;
    flex-direction: row;
  }
}

.demo-passer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-base);
}

/* a solid dark disc so the way out reads at a glance beside the tablet */
.demo-passer__rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  font-size: var(--text-lg);
  line-height: 1;
  transition: background var(--transition-base), transform var(--transition-base);
}

.demo-passer:hover {
  color: var(--color-accent);
}

.demo-passer:hover .demo-passer__rond {
  background: var(--color-accent);
  transform: translateY(2px);
}

/* the tablet: dark bezel, thin metal edge, camera on the top bezel */
.demo-ipad {
  position: relative;
  padding: var(--b);
  background: #1c1c1e;
  border-radius: calc(var(--b) * 2.2);
  box-shadow:
    0 0 0 1px #4a4a4e,
    0 0 0 3px #c9c9cd,
    0 40px 80px -30px rgba(0, 0, 0, 0.45),
    0 18px 36px -18px rgba(0, 0, 0, 0.3);
}

.demo-ipad::before {
  content: "";
  position: absolute;
  top: calc(var(--b) / 2);
  left: 50%;
  width: calc(var(--b) / 3);
  height: calc(var(--b) / 3);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #3a3a3e;
}

.demo-ipad__screen {
  position: relative;
  width: var(--demo-w);
  border-radius: calc(var(--b) * 0.9);
  overflow: hidden;
  background: #edebe5;     /* matches the images background */
}

.demo-steps canvas {
  width: 100%;
  display: block;
}

/* the mp4 is only the prefers-reduced-motion fallback */
.demo-steps video { display: none; }
.demo-steps--video video {
  display: block;
  width: 100%;
  aspect-ratio: 1916 / 1028;
  object-fit: contain;
}
.demo-steps--video canvas { display: none; }

/* Phones (.demo-steps--mobile, set by the demo script below 768px): the
   portrait capture of Delta on a phone, in a phone instead of the tablet.
   Thin bezel, rounder corners, no camera dot; "Passer la démo" below. */
.demo-steps.demo-steps--mobile {
  --b: 7px;
  --cote: 0px;
  --sous: 4rem;
  --demo-w: min(calc(92vw - 2 * var(--b)), calc((88vh - var(--sous) - 2 * var(--b)) * 780 / 1688));
  --demo-w: min(calc(92vw - 2 * var(--b)), calc((88dvh - var(--sous) - 2 * var(--b)) * 780 / 1688));
  flex-direction: column;
}

.demo-steps--mobile .demo-ipad { border-radius: calc(var(--b) * 5); }
.demo-steps--mobile .demo-ipad::before { display: none; }
.demo-steps--mobile .demo-ipad__screen { border-radius: calc(var(--b) * 4); }
.demo-steps--mobile.demo-steps--video video { aspect-ratio: 780 / 1688; }

/* ============================================================
   HOMEPAGE — JOURNEY TIMELINE
   ============================================================ */

.journey {
  padding: var(--space-16) 0 var(--space-24);
  position: relative;
  background: var(--color-white);
}

.journey .container {
  position: relative;
}

.journey__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 2;
}

.journey__subheading {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-12);
  font-weight: 400;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 2;
}

.journey__steps {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
}

/* The thread through the markers: thin, drawn by scroll (applications page
   script places it from the first to the last marker) */
.journey__fil {
  position: absolute;
  width: 1.5px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.journey__fil-trait {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 60ms linear;
}

/* Sticky bar of the 8 steps while reading the cases, under the site header */
.etapes {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(250, 250, 250, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.etapes__liste {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.etapes__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}

.etapes__num {
  font-weight: 600;
}

/* only the case being read shows its title */
.etapes__titre {
  display: none;
}

.etapes__item.is-active {
  background: var(--color-accent);
  color: var(--color-white);
}

.etapes__item.is-active .etapes__titre {
  display: inline;
}

a.etapes__item:hover {
  opacity: 1;
  color: var(--color-accent);
}

a.etapes__item.is-active:hover {
  color: var(--color-white);
}

.etapes__item--bientot {
  color: var(--color-text-tertiary);
  opacity: 0.5;
}

/* ============================================================
   POINTS DE VUE — the blog list, laid out like a review
   ============================================================ */

/* everything on the logo's axis */
.pdv {
  padding: var(--space-16) var(--axe) var(--space-24);
}

.pdv__tete {
  margin-bottom: var(--space-16);
}

.pdv__titre {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.pdv__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-top: var(--space-4);
}

/* category + date line */
.pdv__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.pdv__cat {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-accent);
}

/* the front page: the latest article */
/* numbered "01" like the rest of the list (same number column, so the
   titles line up): one article among others, only the latest */
.une {
  display: flex;
  gap: var(--space-8);
  max-width: 1100px;
  margin-bottom: var(--space-20);
  color: var(--color-text);
}

.une:hover {
  opacity: 1;
}

.une__titre {
  font-family: var(--font-poster);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.une__corps {
  flex: 1;
  min-width: 0;
}

/* the poster beside the front page: the crumpled paper photo, whole, its
   white surround melted into the page (multiply on the page colour), the
   article's quote in the poster serif. Wide screens only. */
.pdv__affiche {
  display: none;
}

/* wide screens: the poster has its own right column and stays pinned under
   the header while the articles scroll; as large as the screen height allows */
@media (min-width: 1100px) {
  .pdv__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-16);
    align-items: start;
  }

  .pdv__affiche {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + var(--space-16));   /* = its place on arrival (page top padding): it never moves */
    width: min(36vw, calc((100vh - var(--header-height) - var(--space-16) - 2rem) * 736 / 1102));
    container-type: inline-size;
    background: var(--color-bg);      /* what the photo multiplies onto */
  }
}

/* narrow screens: the copy placed in the article's text, before the
   paragraph the quote comes from (script in blog/single.html) */
.pdv__affiche.pdv__affiche--texte {
  display: block;
  position: static;
  width: min(100%, 360px);
  margin: var(--space-8) auto;
  container-type: inline-size;
  background: var(--color-bg);
}

@media (min-width: 1100px) {
  .pdv__affiche.pdv__affiche--texte {
    display: none;
  }
}

.pdv__affiche-papier {
  display: flex;
  color: inherit;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 736 / 1102;
  padding: 22cqw 15cqw 24cqw 17cqw;   /* the text stays on the paper */
  background: url("/img/affiche.jpg") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}

.pdv__affiche-citation {
  font-family: var(--font-poster);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: 10cqw;
  margin-block: auto;      /* centred on the paper */
  line-height: 1.05;
  color: var(--color-text);
  text-wrap: balance;
}

/* quotes over 60 characters: smaller, so they stay on the paper */
.pdv__affiche-citation--longue {
  font-size: 8cqw;
}

.pdv__affiche-pied {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 3.6cqw;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.une__chapo {
  max-width: 40rem;
  font-size: var(--text-xl);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.une__lire {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  transition: color var(--transition-base);
}

.une:hover .une__lire {
  color: var(--color-text);
}

/* an article page: same header codes as the front page, then the text at
   reading width */
.article__tete {
  max-width: 52rem;
  margin-bottom: var(--space-12);
}

.article__tete .back-link {
  display: inline-block;
  margin-bottom: var(--space-8);
}

.article__titre {
  font-family: var(--font-poster);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.article__texte {
  max-width: var(--reading-width);
}

/* hyphenated words in titles never break at the hyphen */
.insecable {
  white-space: nowrap;
}

/* the other articles: numbered list with outlined numbers, thin orange rules */
.pdv__suite {
  position: relative;
  max-width: 900px;
}

.pdv__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-accent);
}

.pdv__item {
  border-bottom: 1px solid var(--color-accent);
}

.pdv__item a {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  color: var(--color-text);
}

.pdv__item a:hover {
  opacity: 1;
}

.pdv__num {
  flex-shrink: 0;
  width: 3.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 300;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-accent);
}

.pdv__corps {
  display: flex;
  flex-direction: column;
}

.pdv__item-titre {
  font-family: var(--font-poster);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: var(--text-3xl);
  line-height: 1.1;
  margin-bottom: var(--space-3);
  transition: color var(--transition-base);
}

.pdv__item a:hover .pdv__item-titre {
  color: var(--color-accent);
}

.pdv__chapo {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

@media (max-width: 639px) {
  .pdv__item a,
  .une {
    gap: var(--space-4);
  }

  .pdv__num {
    width: 2.5rem;
    font-size: var(--text-3xl);
  }

  .pdv__item-titre {
    font-size: var(--text-2xl);
  }
}

/* Home: who is behind — a narrow right-aligned text column (eyebrow, name,
   short rule, intro, call to action) and a collage: the photo with cards laid
   over it. Stacked on phones. */
.fondateur {
  padding: var(--space-24) 0;
  background: var(--color-white);
}

.fondateur__inner {
  display: grid;
  gap: var(--space-12);
  max-width: 1200px;
}

.fondateur__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.fondateur__nom {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0;
}

.fondateur__filet {
  display: block;
  width: 4rem;
  height: 4px;
  margin: var(--space-5) 0 var(--space-6);
  background: var(--color-accent);
}

.fondateur__intro {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.fondateur__cta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.fondateur__cta:hover {
  opacity: 1;
  color: var(--color-text);
}

/* LinkedIn icon after the contact link, same orange */
.fondateur__linkedin {
  display: inline-block;
  margin-left: var(--space-5);
  vertical-align: middle;
  color: var(--color-accent);
  line-height: 0;
  transition: color var(--transition-base);
}

.fondateur__linkedin svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.fondateur__linkedin:hover {
  opacity: 1;
  color: var(--color-text);
}

/* the collage: photo and cards share a 12-column grid and overlap */
.fondateur__collage {
  display: grid;
  gap: var(--space-6);
}

.fondateur__photo,
.fondateur__carte {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);   /* barely there: the border draws the tile, as in the reference */
}

.fondateur__photo {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 560 / 640;
  object-fit: cover;
}

.fondateur__carte {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
  background: var(--color-white);
}

.fondateur__carte h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.fondateur__carte p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (min-width: 960px) {
  .fondateur__inner {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-16);
  }

  /* the text column reads right-aligned, against the collage */
  .fondateur__texte {
    text-align: right;
    padding-top: var(--space-12);
  }

  .fondateur__filet {
    margin-left: auto;
  }

  .fondateur__collage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
  }

  .fondateur__photo {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    max-width: none;
  }

  /* first card over the lower right of the photo */
  .fondateur__carte--1 {
    grid-column: 6 / 13;
    grid-row: 2 / 3;
    align-self: end;
    margin-bottom: 1.5rem;
  }

  /* second card below, laid over the bottom of the photo and of the first
     card (it sits on top) */
  .fondateur__carte--2 {
    grid-column: 3 / 11;
    grid-row: 3;
    margin-top: -3rem;       /* bites the bottom of the photo (below the chin) and the first card's bottom padding */
    z-index: 2;
  }
}


/* Home: bridge to the cases of the applications page */
.passerelle {
  padding: var(--space-20) 0;
  text-align: center;
  background: var(--color-white);
}

.passerelle__titre {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
}

.passerelle__cas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-8);
  max-width: 900px;
}

.passerelle__cas a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--transition-base), color var(--transition-base);
}

.passerelle__cas a:hover {
  opacity: 1;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.passerelle__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

/* phones: the bridge reads from the left, set in by a wide left margin */
@media (max-width: 767px) {
  .passerelle {
    text-align: left;
  }

  .passerelle .container {
    padding-left: 15%;
  }

  .passerelle__cas {
    justify-content: flex-start;
  }
}

.passerelle__tout {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.passerelle__tout:hover {
  opacity: 1;
  color: var(--color-accent);
}

/* Each step */
.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: 0;
}

/* Numbered circle marker */
.step__marker {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: all var(--transition-slow);
}

.step:not(.step--soon):hover .step__marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 24px var(--color-accent-glow);
}

.step--soon .step__marker {
  background: var(--color-surface);
  border-color: var(--color-border);
  opacity: 0.5;
}

.step__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.step:not(.step--soon):hover .step__number {
  color: var(--color-white);
}

.step--soon .step__number {
  color: var(--color-text-tertiary);
}

/* Card content — open borders with bracket corners */
.step__card {
  flex: 1;
  padding: var(--space-5) var(--space-6);
  background: var(--color-white);
  border: none;
  border-radius: 0;
  position: relative;
  --bracket-offset: 0px;
  --bracket-color: var(--color-border);
  transition: box-shadow var(--transition-slow);
}

.step__card::before,
.step__card::after {
  content: '';
  position: absolute;
  inset: var(--bracket-offset);
  pointer-events: none;
  transition: inset var(--transition-slow);
}

.step__card::before {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.step__card::after {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.step:not(.step--soon) .step__card:hover {
  --bracket-offset: -6px;
  --bracket-color: var(--color-accent);
  box-shadow: 0 0 24px var(--color-accent-glow);
}

.step--soon .step__card {
  opacity: 0.4;
}

.step__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.step__question {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.step__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.step__btn {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-base);
}

.step__btn:hover {
  opacity: 1;
}

.step__btn--solid {
  background: var(--color-accent);
  color: var(--color-white);
}

.step__btn--solid:hover {
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
}

.step__btn--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.step__btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.step__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   HOMEPAGE — RECENT POSTS
   ============================================================ */

.recent-posts {
  padding: var(--space-12) 0 var(--space-16);
  border-top: 1px solid var(--color-border);
}

.recent-posts__heading {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
  text-align: center;
}

.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* ============================================================
   POST CARD
   ============================================================ */

.post-card {
  background: var(--color-white);
  border: none;
  border-radius: 0;
  padding: var(--space-5);
  text-decoration: none;
  display: block;
  position: relative;
  --bracket-offset: 0px;
  --bracket-color: var(--color-border);
  transition: box-shadow var(--transition-slow);
}

.post-card::before,
.post-card::after {
  content: '';
  position: absolute;
  inset: var(--bracket-offset);
  pointer-events: none;
  transition: inset var(--transition-slow);
}

.post-card::before {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.post-card::after {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.post-card:hover {
  --bracket-offset: -6px;
  --bracket-color: var(--color-accent);
  box-shadow: 0 0 24px var(--color-accent-glow);
  opacity: 1;
}

.post-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-2);
}

.post-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   SINGLE PAGE / ARTICLE
   ============================================================ */

.page-header {
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-3);
}

.page-header__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.tool-name {
  font-family: var(--font-mono);
  font-size: 0.65em;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  margin-left: var(--space-3);
  letter-spacing: 0.02em;
  transition: opacity var(--transition-fast);
}

.tool-name:hover {
  opacity: 0.7;
}

.page-content {
  padding-bottom: var(--space-16);
}

.page-content a:not(.btn) {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--transition-fast);
}

.page-content a:not(.btn):hover {
  opacity: 0.7;
}

.page-content h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.page-content h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.page-content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

/* Blueprint sections for convictions page */
.page-content strong {
  font-weight: 600;
}

/* ============================================================
   BLOG LIST PAGE
   ============================================================ */

.list-header {
  padding: var(--space-10) 0 var(--space-6);
}

.list-header__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-3);
}

.list-header__description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.posts-list {
  padding: var(--space-2) 0 var(--space-16);
}

.post-card--list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

.post-card--list:first-child {
  border-top: 1px solid var(--color-border);
}

.post-card--list:hover {
  background: none;
  box-shadow: none;
  border-color: var(--color-border);
  transform: none;
  opacity: 1;
}

.post-card--list:hover .post-card__title {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.post-card--list .post-card__date {
  order: -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-tertiary);
  margin-bottom: 0;
}

.post-card--list .post-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.post-card--list .post-card__excerpt {
  -webkit-line-clamp: 2;
}

/* ============================================================
   BACK LINK
   ============================================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--space-6);
  transition: color var(--transition-fast);
}

.back-link:hover {
  color: var(--color-accent);
  opacity: 1;
}

/* ============================================================
   BUTTON SHORTCODE
   ============================================================ */

.btn-wrapper {
  margin: var(--space-6) 0;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  border: none;
  cursor: pointer;
  transition: box-shadow var(--transition-base);
  line-height: 1;
  white-space: nowrap;
  position: relative;
  --bracket-size: 10px;
  --bracket-weight: 2px;
  --bracket-offset: -4px;
  --bracket-color: var(--color-accent);
}

.btn::before,
.btn::after {
  content: '';
  position: absolute;
  inset: var(--bracket-offset);
  pointer-events: none;
  transition: inset var(--transition-slow);
}

.btn::before {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) top right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.btn::after {
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom left / var(--bracket-weight) var(--bracket-size) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-size) var(--bracket-weight) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) bottom right / var(--bracket-weight) var(--bracket-size) no-repeat;
}

.btn:hover {
  color: var(--color-white);
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
  --bracket-offset: -2px;
}

/* ============================================================
   CONVICTIONS PAGE — "The Assembly" modular system
   ============================================================ */

.assembly {
  padding-bottom: var(--space-24);
}

/* Hero */
.assembly__hero {
  padding: var(--space-16) 0 var(--space-12);
}

/* Hero variant with canvas background */
.assembly__hero--canvas {
  position: relative;
  overflow: hidden;
  min-height: 240px;
}

.crosslines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.assembly__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.08em;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.assembly__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
}

.assembly__title--blog {
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

/* Grid of units */
.assembly__grid {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* ---- Each unit: title block + seam + body block ---- */
.assembly__unit {
  position: relative;
}

/* SVG L-bracket joints at corners */
.assembly__joint {
  position: absolute;
  color: var(--color-border);
  z-index: 2;
  transition: color 0.5s ease;
}

.assembly__joint--tl { top: -10px; left: -10px; }
.assembly__joint--tr { top: -10px; right: -10px; }
.assembly__joint--bl { bottom: -10px; left: -10px; }
.assembly__joint--br { bottom: -10px; right: -10px; }

/* Joints glow on connection */
.assembly__unit.is-connected .assembly__joint {
  color: var(--color-accent);
  transition: color 0.3s ease;
}

/* Joints settle back after glow */
.assembly__unit.is-settled .assembly__joint {
  color: var(--color-border);
  transition: color 1s ease 0.3s;
}

/* Hover: re-highlight settled units */
.assembly__unit.is-settled:hover .assembly__joint {
  color: var(--color-accent);
  transition: color 0.2s ease;
}

.assembly__unit.is-settled:hover .assembly__block {
  border-color: var(--color-accent);
  transition: border-color 0.2s ease;
}

.assembly__unit.is-settled:hover .assembly__seam::after {
  animation: none;
  transform: scaleX(1);
  opacity: 0.4;
}

/* ---- Title block ---- */
.assembly__block {
  border: 1px solid var(--color-border);
  position: relative;
}

.assembly__block--title {
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.assembly__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.assembly__heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
}

/* ---- The seam: shared border between title and body ---- */
.assembly__seam {
  height: 0;
  position: relative;
  z-index: 3;
}

.assembly__seam::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  pointer-events: none;
}

/* Seam lights up on connection — expands from center */
.assembly__unit.is-connected .assembly__seam::after {
  animation: seamFlash 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes seamFlash {
  0%   { transform: scaleX(0); opacity: 1; }
  40%  { transform: scaleX(1); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 0.6; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---- Body block ---- */
.assembly__block--body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: none;
}

/* Body starts detached — slides up to dock */
.assembly__dock {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
}

.assembly__unit.is-docked .assembly__dock {
  transform: translateY(0);
  opacity: 1;
}

/* Borders flash on connection */
.assembly__unit.is-connected .assembly__block {
  border-color: var(--color-accent);
  transition: border-color 0.15s ease;
}

.assembly__unit.is-settled .assembly__block {
  border-color: var(--color-border);
  transition: border-color 1s ease 0.3s;
}

/* ---- Body content ---- */
.assembly__body {
  padding-bottom: 0;
}

.assembly__body p:last-child {
  margin-bottom: 0;
}

.assembly__body a:not(.btn) {
  color: var(--color-accent);
  font-weight: 500;
}

/* Technical data tags — monospace pills */
.assembly__body strong {
  font-weight: 600;
}

/* Last unit (CTA) — no blocks, just centered text */
.assembly__unit:last-child {
  text-align: center;
}

.assembly__unit:last-child .assembly__block {
  border: none;
}

.assembly__unit:last-child .assembly__joint {
  display: none;
}

.assembly__unit:last-child .assembly__block--title {
  justify-content: center;
  padding: var(--space-4) 0;
}

.assembly__unit:last-child .assembly__index {
  display: none;
}

.assembly__unit:last-child .assembly__body {
  max-width: 480px;
  margin: 0 auto;
}

/* ---- Desktop ---- */
@media (min-width: 640px) {
  .assembly__grid {
    padding: 0 var(--space-6);
  }
}

@media (min-width: 768px) {

  .assembly__hero {
    padding: var(--space-24) 0 var(--space-16);
  }

  .assembly__title {
    font-size: var(--text-5xl);
  }

  .assembly__title--blog {
    font-size: var(--text-3xl);
  }

  .assembly__heading {
    font-size: var(--text-2xl);
  }

  /* Alternate offset for visual rhythm */
  .assembly__unit:nth-child(odd) {
    margin-right: 15%;
  }

  .assembly__unit:nth-child(even) {
    margin-left: 15%;
  }

  /* Last unit always centered */
  .assembly__unit:last-child {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================
   APPLICATIONS PAGE — 4-piece Assembly system
   ============================================================ */

.applications__content {
  padding-bottom: var(--space-16);
  max-width: var(--container-width);
  margin: 0 auto;
}

.applications__content > .container > p:first-child {
  text-align: center;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-12);
}

/* Hide original hrs — replaced by assembly units */
.applications__content hr { display: none; }

/* ---- App Assembly unit ---- */
.app-assembly {
  position: relative;
  margin-bottom: var(--space-20);
  padding: 0 var(--space-4);
  scroll-margin-top: calc(var(--header-height) + 3rem + var(--space-6));   /* header + step bar */
}

/* SVG joints at corners — reuse from convictions */
.app-assembly .assembly__joint {
  color: var(--color-border);
  transition: color 0.5s ease;
}
.app-assembly.is-connected .assembly__joint { color: var(--color-accent); }
.app-assembly.is-settled .assembly__joint { color: var(--color-border); transition: color 1s ease 0.3s; }

/* Hover: re-highlight settled units */
.app-assembly.is-settled:hover .assembly__joint { color: var(--color-accent); transition: color 0.2s ease; }
.app-assembly.is-settled:hover .app-assembly__tile { border-color: var(--color-accent); transition: border-color 0.2s ease; }
.app-assembly.is-settled:hover .app-assembly__seam::after { animation: none; transform: scaleX(1); opacity: 0.4; }

/* ---- Tiles ---- */
.app-assembly__tile {
  border: 1px solid var(--color-border);
  transition: border-color 0.3s ease;
}

.app-assembly.is-connected .app-assembly__tile { border-color: var(--color-accent); }
.app-assembly.is-settled .app-assembly__tile { border-color: var(--color-border); transition: border-color 1s ease 0.3s; }

/* Title tile */
.app-assembly__tile--title {
  padding: var(--space-6);
}

.app-assembly__tile--title h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-2);
}

.app-assembly__tile--title .tool-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: var(--space-2);
}

.app-assembly__tile--title .tool-name:hover {
  opacity: 0.7;
}

.app-assembly__intro {
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* ---- Seam between tiles ---- */
.app-assembly__seam {
  height: 0;
  position: relative;
  z-index: 3;
}

.app-assembly__seam::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  pointer-events: none;
}

/* First seam flashes with trio */
.app-assembly.is-connected .app-assembly__seam:first-of-type::after {
  animation: seamFlash 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Second seam flashes with approach */
.app-assembly.is-connected-2 .app-assembly__seam:last-of-type::after {
  animation: seamFlash 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---- Trio: 3 sections side by side ---- */
.app-assembly__trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.app-assembly__tile--section {
  padding: var(--space-5) var(--space-6);
  border-top: none;
}

.app-assembly__tile--section + .app-assembly__tile--section {
  border-top: 1px solid var(--color-border);
}

.app-assembly__section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.app-assembly__tile--section p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ---- Approach tile ---- */
.app-assembly__tile--approach {
  padding: var(--space-6);
  border-top: none;
}

.app-assembly__tile--approach h3 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.app-assembly__tile--approach h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.app-assembly__tile--approach p > strong:first-child {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

.app-assembly__tile--approach a:not(.btn):not(.tool-name) {
  color: var(--color-accent);
  font-weight: 500;
}

.app-assembly__tile--approach .btn-wrapper {
  text-align: center;
  margin: var(--space-8) 0 var(--space-4);
}

.app-assembly__tile--approach table {
  margin: var(--space-6) 0;
}

.app-assembly__tile--approach pre.mermaid {
  background: none;
  border: none;
  padding: var(--space-6) 0;
  text-align: center;
  overflow-x: auto;
}

/* ---- Dock animations ---- */
.app-assembly__dock {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
}

.app-assembly.is-docked .app-assembly__dock:not(.app-assembly__dock--2) {
  transform: translateY(0);
  opacity: 1;
}

.app-assembly__dock--2 {
  transform: translateY(24px);
  opacity: 0;
}

.app-assembly.is-docked-2 .app-assembly__dock--2 {
  transform: translateY(0);
  opacity: 1;
}

/* Title tile fades in */
.app-assembly__tile--title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-assembly.is-title-visible .app-assembly__tile--title {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Desktop: trio becomes 3 columns ---- */
@media (min-width: 640px) {
  .app-assembly {
    padding: 0 var(--space-6);
  }

  .app-assembly__trio {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .app-assembly__tile--section + .app-assembly__tile--section {
    border-top: none;
    border-left: 1px solid var(--color-border);
  }
}

@media (min-width: 768px) {
  .app-assembly__tile--title h2 {
    font-size: var(--text-3xl);
  }
}

/* ============================================================
   CONTACT PAGE — booking first, then the form, then LinkedIn
   ============================================================ */

.rdv {
  margin-bottom: var(--space-16);
}

.rdv__texte {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 36em;
}

/* "Vous préférez écrire ?": a thin rule above, like the lists of the blog */
.contact__ecrire {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  margin-bottom: 0;
}

.contact__linkedin {
  margin-top: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.contact__linkedin a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.contact__linkedin a:hover {
  color: var(--color-accent);
  opacity: 1;
}

.contact__linkedin svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  position: relative;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  transition: border-color var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus {
  border-bottom-color: var(--color-accent);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-tertiary);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  border: 1px solid var(--color-border);
  padding: 0.75rem;
}

.form-textarea:focus {
  border-color: var(--color-accent);
}

/* ---- Form Assembly: tiled blocks ---- */
.form-assembly {
  position: relative;
}

.form-tile {
  border: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
  position: relative;
  transition: border-color 0.3s ease;
}

.form-tile + .form-tile {
  border-top: none;
}

.form-tile__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

.form-tile__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Seam between tiles */
.form-assembly__seam {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
}

.form-assembly__seam::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
}

.form-tile.is-connected .form-assembly__seam::after {
  animation: seamFlash 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Dock animation */
.form-tile--dock {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease;
}

.form-tile--dock.is-docked {
  opacity: 1;
  transform: translateY(0);
}

/* Connection flash */
.form-tile.is-connected {
  border-color: var(--color-accent);
}

.form-tile.is-settled {
  border-color: var(--color-border);
  transition: border-color 1s ease 0.3s;
}

/* Hover re-highlight */
.form-tile.is-settled:hover {
  border-color: var(--color-accent);
  transition: border-color 0.2s ease;
}

/* SVG joints around the whole form */
.form-assembly__joints {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.form-assembly__joints.is-visible {
  opacity: 1;
}

.form-assembly__joints .assembly__joint {
  color: var(--color-border);
}

/* Submit area */
.form-assembly__submit {
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .form-tile__row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-message {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-accent);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.form-message--error {
  border-color: #c0392b;
  color: #c0392b;
}

/* ============================================================
   TARTEAUCITRON OVERRIDES
   ============================================================ */

/* Force-hide tarteaucitron floating elements we never want visible */
#tarteaucitronRoot #tarteaucitronIcon,
#tarteaucitronRoot #tarteaucitronAlertSmall {
  display: none !important;
  pointer-events: none !important;
}

/* Let tarteaucitron manage #tarteaucitronAlertBig visibility natively:
   - First visit: tarteaucitron shows it → user clicks accept/deny → tarteaucitron hides it
   - Subsequent visits: hidden (consent stored in cookie)
   - Footer "Choix des cookies": JS reopens it via tarteaucitron API */

#tarteaucitronRoot #tarteaucitronAlertBig {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  padding: 16px 20px 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  font-size: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

#tarteaucitronRoot #tarteaucitronAlertBig button,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  margin: 0 4px !important;
  white-space: nowrap !important;
}

#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrlDialog {
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* ============================================================
   MERMAID DIAGRAMS — Assembly style
   ============================================================ */

pre.mermaid {
  background: none;
  border: none;
  padding: var(--space-8) 0;
  text-align: center;
  overflow-x: auto;
}

/* Node boxes: sharp, no rounded corners, 1px border */
pre.mermaid svg .node rect,
pre.mermaid svg .node polygon,
pre.mermaid svg .node circle {
  rx: 0 !important;
  ry: 0 !important;
  stroke-width: 1px !important;
  stroke: var(--color-border) !important;
  fill: var(--color-white) !important;
}

/* Accent nodes (first and last in flows) */
pre.mermaid svg .node:first-child rect,
pre.mermaid svg .node:first-child polygon {
  stroke: var(--color-accent) !important;
  fill: var(--color-accent-light) !important;
}

pre.mermaid svg .node:last-child rect,
pre.mermaid svg .node:last-child polygon {
  stroke: var(--color-accent) !important;
  fill: var(--color-accent-light) !important;
}

/* Node text: monospace */
pre.mermaid svg .node .nodeLabel,
pre.mermaid svg .node foreignObject div {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--color-text) !important;
  line-height: 1.4 !important;
}

/* Edges: straight lines, 1px, grey */
pre.mermaid svg .edgePath path.path {
  stroke: var(--color-border) !important;
  stroke-width: 1px !important;
}

/* Arrowheads */
pre.mermaid svg marker path {
  fill: var(--color-border) !important;
  stroke: none !important;
}

/* Edge labels */
pre.mermaid svg .edgeLabel {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
}

pre.mermaid svg .edgeLabel .edgeLabel {
  background: var(--color-bg) !important;
}

/* Hide subgraph borders used for layout */
pre.mermaid svg .cluster rect {
  fill: transparent !important;
  stroke: none !important;
}

pre.mermaid svg .cluster .nodeLabel,
pre.mermaid svg .cluster-label {
  display: none !important;
}

/* ============================================================
   UTILITY
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ============================================================
   TABLET — min-width: 640px
   ============================================================ */

@media (min-width: 640px) {

  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .step__title {
    font-size: var(--text-xl);
  }

  .hero__phrase {
    font-size: var(--text-4xl);
  }

  .hero__subtitle {
    font-size: var(--text-lg);
    max-width: 560px;
  }

  .journey__heading {
    font-size: var(--text-3xl);
  }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .recent-posts__heading {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-10);
  }

  .post-card {
    padding: var(--space-6);
  }

  .page-header {
    padding: var(--space-12) 0 var(--space-10);
    margin-bottom: var(--space-10);
  }

  .page-header__title {
    font-size: var(--text-3xl);
  }

  .list-header {
    padding: var(--space-12) 0 var(--space-6);
  }

  .list-header__title {
    font-size: var(--text-3xl);
  }

  .list-header__description {
    font-size: var(--text-lg);
  }

  .post-card--list {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .post-card--list .post-card__date {
    order: 0;
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--text-sm);
  }

  .post-card--list .post-card__title {
    font-size: var(--text-xl);
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ============================================================
   DESKTOP — min-width: 768px
   ============================================================ */

@media (min-width: 768px) {

  :root {
    --font-size-base: 17px;
  }

  .burger {
    display: none;
  }

  .site-nav__wrapper {
    display: block;
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
  }

  .site-nav {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 400;
    border-bottom: none;
  }

  .site-nav li:last-child .site-nav__link {
    border-bottom: none;
  }

  .site-nav__cta {
    font-size: var(--text-sm);
  }

  /* ---- SERPENTINE TIMELINE (desktop) ---- */

  .journey .container {
    max-width: 860px;
  }


  .journey__steps {
    gap: var(--space-8);
  }

  .step {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    gap: 0;
    align-items: center;
  }

  .step__marker {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 48px;
    height: 48px;
  }

  .step:nth-child(odd) .step__card {
    grid-column: 1;
    grid-row: 1;
    margin-right: var(--space-4);
  }

  .step:nth-child(even) .step__card {
    grid-column: 3;
    grid-row: 1;
    margin-left: var(--space-4);
  }

  /* Hero desktop sizing */
  .hero__phrase {
    font-size: var(--text-6xl);
    letter-spacing: -0.035em;
  }

  .hero__subtitle {
    font-size: var(--text-xl);
    max-width: 600px;
  }

  .journey__heading {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
  }

  .journey__subheading {
    margin-bottom: var(--space-16);
  }

  .hero__body h2 {
    font-size: var(--text-2xl);
    margin-top: var(--space-12);
  }

  .hero__body h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-8);
  }

  .recent-posts {
    padding: var(--space-16) 0 var(--space-24);
  }

  .page-header {
    padding: var(--space-16) 0 var(--space-12);
    margin-bottom: var(--space-12);
  }

  .page-header__title {
    font-size: var(--text-3xl);
  }

  .page-content {
    padding-bottom: var(--space-24);
  }

  .page-content h2 {
    font-size: var(--text-2xl);
    margin-top: var(--space-12);
  }

  .page-content h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-8);
  }

  .list-header {
    padding: var(--space-16) 0 var(--space-8);
  }

  .site-footer {
    margin-top: 0;
  }
}

/* ============================================================
   WIDE DESKTOP — min-width: 980px
   ============================================================ */

@media (min-width: 980px) {

  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   MON APPROCHE — manifesto, figures, principles, questions,
   mission over time, call to action (after Le Grand Continent)
   ============================================================ */

.approche {
  padding: var(--space-16) var(--axe) var(--space-24);
}

.approche__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

/* the manifesto line: the biggest text on the page */
.approche__manifeste {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 18em;
  text-wrap: balance;
  margin-bottom: var(--space-10);
}

/* the story in a thin frame with corner brackets, orange on hover */
.approche__recit {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.approche__recit p { margin: 0; }

.approche__recit:hover {
  border-color: var(--color-accent);
}

.approche__recit:hover .assembly__joint {
  color: var(--color-accent);
}

/* section titles: big, with the short thick orange rule of the home's
   founder block below them */
.approche__h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
}

.approche__h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  margin-top: var(--space-5);
  background: var(--color-accent);
}

/* --- convictions: a title like the mission's, the page's subtitle below --- */
.convictions {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}

/* a section title with its // subtitle right below */
.convictions .approche__h2,
.mission .approche__h2 {
  margin-bottom: var(--space-5);
}

.mission .approche__sous-titre {
  margin-bottom: var(--space-8);
}

.approche__sous-titre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-12);
}

/* --- principles: side by side, a small orange number on top --- */
.principes {
  display: grid;
  gap: var(--space-12);
}

/* big outlined orange numbers, as in "Points de vue" */
.principe__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 300;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-accent);
  margin-bottom: var(--space-5);
}

.principe__titre {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

.principe p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* --- a mission over time: stacked on phones, a timeline on desktop --- */
.mission {
  margin-bottom: var(--space-24);
}

/* full width, a line break after the first sentence */
.mission__intro {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-12);
}

.mission__etapes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-10);
  position: relative;
}

/* phones: a vertical line on the left, a dot per step */
.etape {
  position: relative;
  padding-left: var(--space-8);
  border-left: 2px solid var(--color-border);
}

.etape::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.35em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
}

.etape__temps {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.etape__titre {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.etape__texte {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.etape__lien {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.etape__lien:hover {
  opacity: 1;
  color: var(--color-text);
}

/* --- call to action --- */
.approche__fin {
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.approche__fin p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.approche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

.approche__ecrire {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.approche__ecrire:hover {
  color: var(--color-accent);
  opacity: 1;
}

/* the manifesto in two lines, cut after the comma */
.approche__ligne {
  display: block;
}

@media (min-width: 768px) {
  .approche__manifeste {
    font-size: var(--text-4xl);
  }

  .approche__recit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
  }

}

@media (min-width: 960px) {
  .principes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
  }

  /* desktop: the three steps on one horizontal line */
  .mission__etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
  }

  .etape {
    padding-left: 0;
    padding-top: var(--space-8);
    border-left: 0;
    border-top: 2px solid var(--color-border);
  }

  .etape::before {
    left: 0;
    top: -7px;
  }
}

/* wide screens: each line holds on one row, the size following the width
   left between the margins (the longer line is ~25em wide), up to 5xl.
   Narrower, the lines wrap at the 4xl size so the title stays big. */
@media (min-width: 1200px) {
  .approche__manifeste {
    max-width: none;
    font-size: min(var(--text-5xl), calc((100vw - 2 * var(--axe)) / 25));
  }

  .approche__ligne {
    white-space: nowrap;
  }
}