/* Les polices sont auto-hebergees : voir css/fonts.css, charge avant ce fichier. */

/* SiloWeb — brand adaptation of the Industry design system.
   The accent role is retuned to the logo green (#23875a); everything else
   (neutrals, ground, spacing, type, radii) comes from the system tokens. */

:root {
  --color-accent: #23875a;
  --color-accent-100: #eef8f2;
  --color-accent-200: #d2ecdd;
  --color-accent-300: #abdcc2;
  --color-accent-400: #78c19f;
  --color-accent-500: #43a479;
  --color-accent-600: #23875a;
  --color-accent-700: #1b6b48;
  --color-accent-800: #164e35;
  --color-accent-900: #10321f;

  --color-accent-2: #23875a;
  --color-accent-2-100: #eef8f2;
  --color-accent-2-200: #d2ecdd;
  --color-accent-2-300: #abdcc2;
  --color-accent-2-400: #78c19f;
  --color-accent-2-500: #43a479;
  --color-accent-2-600: #23875a;
  --color-accent-2-700: #1b6b48;
  --color-accent-2-800: #164e35;
  --color-accent-2-900: #10321f;

  /* Signal: the contrasting warm accent, used only for data in transit,
     ports and the live node — never for large fields. */
  --silo-signal: #f2a63c;
  --silo-signal-soft: color-mix(in srgb, #f2a63c 55%, transparent);
  /* The signal amber is too light to set type on paper; this is its ink step. */
  --silo-signal-ink: #a15c00;

  /* Three voices with fixed jobs: Archivo sets every heading, Barlow every
     paragraph, and the mono carries ALL figures, prices, codes and labels. */
  --font-heading: Archivo, "Barlow Condensed", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-text: #16211b;
  --color-ink: #122a1c;
  --color-divider: color-mix(in srgb, #16211b 16%, transparent);
}

html { scroll-behavior: smooth; }
/* Running prose is justified; hyphenation keeps the rivers out of the
   measure. Headings, labels and mono figures are never justified. */
p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3, h4, h5, h6, dt, dd, label, summary, th, td, figcaption { text-align: left; hyphens: manual; }
body { margin: 0; overflow-x: hidden; }
a:not(.btn) { color: var(--color-accent-700); text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
a:not(.btn):hover { color: var(--color-accent-800); }
.btn-primary, .btn-primary:hover, .btn-primary:active { color: var(--color-bg); }

/* The system's primary fill is the accent base; at our green that leaves the
   white label at 3.4:1, so the fill drops one ramp step (5.4:1). */
.btn-primary { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); }

/* Grain: a static noise tile drifting slowly over the ground. */
@keyframes silo-grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3%, 2%, 0); }
  50%  { transform: translate3d(2%, -3%, 0); }
  75%  { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes silo-caret {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes silo-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.85; }
}
@keyframes silo-swap {
  0%   { opacity: 0; transform: translateY(14px) skewY(1.5deg); }
  100% { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes silo-flow {
  to { stroke-dashoffset: -24; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}


/* A cable pulls taut as a packet runs along it. */
@keyframes silo-taut {
  0%, 100% { stroke-width: 1.7; }
  46% { stroke-width: 2.6; }
}


/* — Touch: coarse pointers need finger-sized controls. The range track keeps
   its drawn height; only the hit area grows. — */
/* A rule that draws itself across a sheet as it arrives. */
@keyframes silo-draw { from { width: 0; } to { width: 100%; } }

@media (pointer: coarse) {
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
  .input, select.input { min-height: 46px; }
  .btn { min-height: 46px; }
  textarea.input { min-height: 120px; }
}


/* — Hero rig: the arm cycles once per document (3.3s), the belt carries four
   documents over 13.2s so pick and part stay in step. — */
@keyframes silo-belt { from { transform: translateY(0); } to { transform: translateY(-328px); } }
@keyframes silo-arm1 { 0%, 100% { transform: rotate(30deg); } 44% { transform: rotate(25.5deg); } }
@keyframes silo-arm2 { 0%, 100% { transform: rotate(-30deg); } 44% { transform: rotate(-24deg); } }
@keyframes silo-jaw-a { 0%, 100% { transform: rotate(-16deg); } 44% { transform: rotate(-3deg); } }
@keyframes silo-jaw-b { 0%, 100% { transform: rotate(16deg); } 44% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-doc-belt], [data-seg1] *, [data-seg1] { animation: none !important; }
}


/* ——— Dark ground, Hermes-style ———
   The site inverts at the token level: a near-black green ground, paper ink,
   and the two accent steps that used to be "dark ink on paper" remapped to
   their light equivalents, so every existing usage stays legible. */
:root {
  --color-bg: #0b1410;
  --color-text: #eaf1ec;
  --color-ink: #eaf1ec;
  --color-divider: color-mix(in srgb, #eaf1ec 15%, transparent);
  /* accent-900 is now LIGHTER than the ground, so panels lift off it */
  --color-accent-700: #8ccdab;
  --color-accent-800: #b6e0c9;
  /* the amber no longer sits on paper, so its ink step is the amber itself */
  --silo-signal-ink: #f2a63c;
}
/* The fill must not follow the remapped light steps. */
.btn-primary { background: #23875a; border-color: #23875a; }
.btn-primary:hover { background: #2c9e69; border-color: #2c9e69; }
.btn-primary, .btn-primary:hover, .btn-primary:active { color: #f2f7f4; }
.btn-secondary, .btn-ghost { color: var(--color-text); }
::selection { background: color-mix(in srgb, #f2a63c 34%, transparent); }

:root {
  --color-surface: #131f19;
  --color-neutral-900: #eaf1ec;
}
.input, select.input, textarea.input {
  background: color-mix(in srgb, #eaf1ec 6%, transparent);
  color: #eaf1ec;
  border-color: color-mix(in srgb, #eaf1ec 22%, transparent);
}
.input::placeholder, textarea.input::placeholder { color: color-mix(in srgb, #eaf1ec 45%, transparent); }
.input:hover, select.input:hover, textarea.input:hover { border-color: color-mix(in srgb, #eaf1ec 38%, transparent); }
/* Native option lists do not inherit from their select. */
select.input option { background: #0b1410; color: #eaf1ec; }
.card { background: transparent; }

/* Hermes-tight display tracking. */
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.028em; }
h3 { letter-spacing: -0.02em; }

@keyframes silo-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@keyframes silo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes silo-seg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes silo-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes silo-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  [data-flux-col] span { animation: none !important; }
}

.silo-grain {
  position: fixed;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@keyframes silo-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 5px), 0, 0); } }
.silo-marquee {
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.silo-marquee:hover .silo-marquee-track { animation-play-state: paused; }
/* Six items must never leave two on an orphan row. */
.silo-grid3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .silo-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .silo-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .silo-marquee-track { animation: none !important; } }


@keyframes silo-ping { 0% { r: 4; opacity: 0.7; } 70%, 100% { r: 15; opacity: 0; } }
@keyframes silo-sheen { from { transform: translateX(0); } to { transform: translateX(680px); } }
@keyframes silo-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-sheen], [data-now-halo] { animation: none !important; }
}

@keyframes silo-cue { 0%, 100% { transform: translateY(-5px); opacity: 0.5; } 50% { transform: translateY(5px); opacity: 1; } }

/* Hero ground: one slow drift, 34s, transform only. */
@keyframes silo-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
[data-halo] { animation: silo-drift 34s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@media (prefers-reduced-motion: reduce) { [data-halo] { animation: none; } }