/* Multisport Saguenay front page (/accueil). Everything is scoped under .ms
   so the rest of the app keeps upstream's Pico look.
   Palette: granit #26323A, bouleau #F2F4F1, épinette #1F5A4A, lac #9CC3CE,
   balise #F06B1F (trail-marker orange, kept for actions). */

@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); }

.ms {
  --granit: #26323A;
  --bouleau: #F2F4F1;
  --epinette: var(--club-primary, #1F5A4A);
  --lac: #9CC3CE;
  --balise: var(--club-action, #F06B1F);
  --balise-texte: #B8430C; /* orange darkened to 4.5:1 on bouleau, for text */
  --ms-line: #C9D2CF;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--granit);
}
.ms h1, .ms h2, .ms h3 {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  color: var(--granit);
  letter-spacing: 0;
  margin: 0;
}
.ms h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 700; line-height: 1; margin-bottom: 0.6rem; }
.ms h3 { font-size: 1.45rem; font-weight: 600; line-height: 1.1; }
.ms p { margin: 0 0 0.9rem; max-width: 62ch; }
.ms ul { list-style: none; padding: 0; margin: 0; }
.ms li { list-style: none; }
.ms a:focus-visible { outline: 3px solid var(--balise); outline-offset: 3px; }

/* Full-width hero breaking out of Pico's container. */
.ms-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

.ms-hero {
  position: relative;
  background: var(--bouleau);
  padding: 2.5rem 0 0;
  margin-top: -1rem;
  overflow: hidden;
}
/* Pico's .container on the same element keeps the hero text aligned with
   the sections below. */
.ms-hero-text { position: relative; z-index: 1; }
.ms-logo {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.35rem;
  color: var(--epinette);
}
.ms-hero h1 {
  font-size: clamp(3rem, 1.6rem + 6.4vw, 6.5rem);
  font-weight: 700;
  line-height: 0.92;
  max-width: 13ch;
  margin: 0.4rem 0 1.2rem;
  color: var(--granit);
}
.ms-lead { font-size: 1.2rem; max-width: 46ch; }
.ms-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; }

/* The fjord: three ridges and the river, rising once on load. */
.ms-fjord { display: block; width: 100%; height: clamp(150px, 22vw, 300px); margin-top: -1rem; }
.ms-ridge-far { fill: var(--lac); opacity: 0.55; }
.ms-ridge-mid { fill: color-mix(in srgb, var(--epinette) 65%, white); }
.ms-ridge-near { fill: var(--epinette); }
.ms-river { fill: var(--lac); }
@media (prefers-reduced-motion: no-preference) {
  .ms-ridge { animation: ms-rise 900ms cubic-bezier(.2, .7, .2, 1) both; }
  .ms-ridge-mid { animation-delay: 120ms; }
  .ms-ridge-near { animation-delay: 240ms; }
  @keyframes ms-rise { from { transform: translateY(40px); opacity: 0; } }
}

.ms-btn {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.25rem;
  padding: 0.55rem 1.2rem; border-radius: 3px; text-decoration: none;
  border: 2px solid transparent;
}
.ms-btn-go { background: var(--balise); color: var(--club-on-action, #1d1206); }
.ms-btn-go:hover { filter: brightness(1.08); color: var(--club-on-action, #1d1206); }
.ms-btn-quiet { border-color: var(--epinette); color: var(--epinette); background: transparent; }
.ms-btn-quiet:hover { background: var(--epinette); color: var(--bouleau); }

.ms-section { padding: 3rem 0 1rem; border-top: 1px solid var(--ms-line); }
.ms-hero + .ms-section { border-top: 0; }
.ms-note { color: #4A5A60; }

/* Next classes: a timetable, with each class's blaze on the left. */
.ms-next { display: grid; gap: 0.5rem; margin-bottom: 1.2rem; }
.ms-next a {
  display: grid; grid-template-columns: 1fr; gap: 0.1rem;
  padding: 0.6rem 0.9rem; border-left: 6px solid var(--blaze);
  background: #fff; color: var(--granit); text-decoration: none; border-radius: 0 4px 4px 0;
}
.ms-next a:hover { background: var(--bouleau); }
.ms-next strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.ms-next-when { font-weight: 600; color: var(--epinette); }
.ms-next-when::first-letter { text-transform: uppercase; }
.ms-next-meta { font-size: 0.95rem; color: #4A5A60; }

/* Activities: the trail-blaze list, the page's signature. */
.ms-activities { display: grid; gap: 1.6rem 2.5rem; margin-top: 1.4rem; }
.ms-activities li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 1rem; align-items: start; }
.ms-blaze {
  display: block; width: 1.1rem; height: 3.4rem; margin-top: 0.2rem;
  background: var(--blaze); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ms-activities p { margin-bottom: 0.3rem; }
.ms-facts { font-size: 0.95rem; color: #4A5A60; }

.ms-team { display: grid; gap: 1.2rem 2.5rem; margin-top: 1rem; }
.ms-team p { color: #4A5A60; }

.ms-prices { display: grid; gap: 1.5rem 3rem; margin: 1rem 0 1.4rem; }
.ms-prices dl { margin: 0.6rem 0 0; }
.ms-prices dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--ms-line); }
.ms-prices dt { font-weight: 600; }
.ms-prices dd { margin: 0; text-align: right; }
.ms-prices dd strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; color: var(--epinette); }
.ms-prices dd span { display: block; font-size: 0.9rem; color: #4A5A60; }

.ms-community { padding-bottom: 2.5rem; }

@media (min-width: 760px) {
  .ms-hero { padding-top: 3.5rem; }
  .ms-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-activities, .ms-team, .ms-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ms-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}