.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (max-width: 640px) {
  .container { padding-inline: var(--space-sm); }
}

main { position: relative; z-index: 2; }

section {
  padding-block: var(--space-xl);
  position: relative;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(28, 27, 33, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav.is-stuck {
  background: rgba(28, 27, 33, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border);
}


.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--nav-height);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Wordmark as plain text, never uppercase (charter 01) */
.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav__links {
  display: none;
  gap: var(--space-md);
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-body);
}

.nav__links a {
  color: var(--color-main-dim);
  position: relative;
  padding-block: 0.35em;
  transition: color var(--dur-fast) var(--ease);
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-highlight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__links a:hover { color: var(--color-main); }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--color-main); }

/* Reading progress */
.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--color-highlight);
}

/* Language switch, FR / EN */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-main-faint);
}

.lang-switch a {
  color: var(--color-main-faint);
  padding: 0.2em 0.1em;
  transition: color var(--dur-fast) var(--ease);
}

.lang-switch a:hover { color: var(--color-accent); }
.lang-switch a.is-active { color: var(--color-main); }

/* The panel stacks full width links: the switch sits on its own row */
.lang-switch--panel {
  justify-content: center;
  padding-top: var(--space-sm);
  font-size: 0.8rem;
}

/* Mobile menu button */
.nav__toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}

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

.nav__toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--color-main);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav__toggle span + span { margin-top: 3px; }

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 800px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}

/* Mobile panel */
.nav__panel {
  position: fixed;
  inset: var(--nav-height) 0 auto 0;
  background: rgba(24, 24, 29, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-xs);
  z-index: 99;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.nav__panel.is-open { opacity: 1; transform: none; visibility: visible; }

.nav__panel a {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  padding-block: 0.6em;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-main-dim);
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}

.nav__panel a::before {
  content: attr(data-idx);
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
}

.nav__panel a:hover, .nav__panel a:focus-visible { color: var(--color-main); }

@media (min-width: 800px) { .nav__panel { display: none; } }

/* ============================================================
   AXES (Créer / Collaborer / Transmettre)
   ============================================================ */
.axis {
  display: grid;
  gap: var(--space-lg);
  /* The panel aligns to the axis digit, not to the middle of the text */
  align-items: start;
}

@media (min-width: 860px) {
  .axis { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .axis--reverse .axis__text { order: 2; }
}

.axis__number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 0.9;
  display: block;
  /* Optical alignment: the top of the digit meets the top of the panel */
  margin-top: -0.13em;
  margin-bottom: var(--space-xs);
  /* Stroke first, glyph body over it: hides the seams Jost leaves inside
     3 and 8. The body matches the ground it sits on, hence the variable. */
  paint-order: stroke fill;
  color: var(--axis-number-fill, var(--color-bg));
  -webkit-text-stroke: 2px var(--color-border-strong);
}

.axis__text h2 { font-size: var(--size-h2); margin-top: 0.15em; }

.axis__lead {
  color: var(--color-main-dim);
  margin-top: var(--space-sm);
  max-width: 46ch;
}

/* Animated visual, shown only when it has a column of its own */
.axis__panel {
  display: none;
  aspect-ratio: 4 / 3;
  border: var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 70% 20%, rgba(1, 181, 255, 0.10), transparent 55%),
    var(--color-bg-elevated-2);
  position: relative;
  overflow: hidden;
}

/* After the base rule on purpose: at equal specificity, order decides */
@media (min-width: 860px) { .axis__panel { display: block; } }

.axis__panel svg { width: 100%; height: 100%; }

/* --- axis visuals: branching, network, waves --- */
.net-link {
  stroke: var(--color-border-strong);
  stroke-width: 1;
  fill: none;
}

.net-flow {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 6 54;
  animation: link-flow 3s linear infinite;
}

.net-node {
  fill: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 3.4s var(--ease-out) infinite;
}

.net-node--warm { fill: var(--color-highlight); }

.net-ring {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1;
}

/* --- Transmettre visual: broadcast waves --- */
.wave {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: ring-out 4s var(--ease-out) infinite;
}

.wave--warm { stroke: var(--color-highlight); }

.seed {
  fill: var(--color-highlight);
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 3s var(--ease-out) infinite;
}

.orbit {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  transform-box: fill-box;
  transform-origin: center;
  animation: spin-slow 40s linear infinite;
}

/* ============================================================
   CREATIONS GRID
   ============================================================ */
/* One card per row */
.card-rows {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}

/* ============================================================
   OFFERS GRID
   ============================================================ */
.offer-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}

@media (min-width: 700px) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }
  .offer-grid--two { grid-template-columns: repeat(2, 1fr); }
}