/* Site theme — dark forest palette layered over classical.css.
   Palette sampled from the hero photos: forest-floor ground, paper-light
   text, moss/cedar accent. Ramps inverted so light steps stay subtle tints
   and 700-900 stay readable text steps. */
:root {
  --color-bg: #171a12;
  --color-surface: #21251a;
  --color-text: #e9e5d6;
  --color-accent: #a2af7c;
  --color-accent-2: #a2af7c;
  --color-divider: color-mix(in srgb, #e9e5d6 18%, transparent);
  --color-accent-100: #202813;
  --color-accent-200: #313b1f;
  --color-accent-300: #46522e;
  --color-accent-400: #5c6b3f;
  --color-accent-500: #83925e;
  --color-accent-600: #b4c092;
  --color-accent-700: #c2cba1;
  --color-accent-800: #dde2c6;
  --color-accent-900: #eef0e2;
  --color-accent-2-100: #202813;
  --color-accent-2-200: #313b1f;
  --color-accent-2-300: #46522e;
  --color-accent-2-400: #5c6b3f;
  --color-accent-2-500: #83925e;
  --color-accent-2-600: #b4c092;
  --color-accent-2-700: #c2cba1;
  --color-accent-2-800: #dde2c6;
  --color-accent-2-900: #eef0e2;
  --color-neutral-100: #1e211a;
  --color-neutral-200: #292d22;
  --color-neutral-300: #383d2f;
  --color-neutral-400: #545948;
  --color-neutral-500: #7b7f6e;
  --color-neutral-600: #a1a492;
  --color-neutral-700: #c1c3b3;
  --color-neutral-800: #dbdccf;
  --color-neutral-900: #edeee4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}
html, body { margin: 0; background: var(--color-bg); }
html { scroll-behavior: smooth; }

/* Framed photograph: image fills the plate, with a small credit link
   pinned to the corner. */
.photo { position: relative; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .credit {
  position: absolute; right: 8px; bottom: 8px; font-size: 10px;
  padding: 2px 8px; border-radius: 3px; text-decoration: none;
  color: rgba(246, 243, 238, 0.75); background: rgba(23, 26, 18, 0.55);
}
.photo .credit:hover { color: #f6f3ee; }

/* Language toggle: links between /  and /fr/, not radio inputs, so the
   selected state mirrors classical.css's .seg-opt:has(input:checked). */
.seg-opt { color: var(--color-text); text-decoration: none; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt[aria-current] { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

@media (max-width: 900px) {
  .cs-grid2, .cs-grid3 { grid-template-columns: 1fr !important; gap: 36px !important; }
  .cs-flow { grid-template-columns: 1fr 1fr !important; }
  .cs-stats { flex-direction: column !important; gap: 28px !important; }
  .cs-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .cs-hero-text { padding: 0 24px 52px !important; }
  .cs-nav { flex-wrap: wrap; gap: 12px 20px !important; padding: 14px 20px !important; }
}
@media (max-width: 560px) {
  .cs-flow { grid-template-columns: 1fr !important; }
}