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

html { scroll-behavior: smooth; scroll-padding-top: 58px; }
body { margin: 0; background: #201f1f; color: #fff; font-family: "Ubuntu", Arial, sans-serif; font-size: 16px; line-height: 1.8; }

img { display: block; max-width: 100%; }

.container { width: min(940px, calc(100% - 40px)); margin-inline: auto; text-align: center; }
.narrow { max-width: 760px; }
.section { padding: 120px 0; }

h1,
h2 { margin: 0 0 30px; color: #fff; font-weight: 400; line-height: 1.25; }

h1 { font-size: clamp(2rem, 5vw, 2.7rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.2rem); }
p { margin: 0 0 24px; }

.site-header { position: sticky; top: 0; z-index: 20; background: #f26522; }

.nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.nav a { padding: 14px 18px; color: #fff; font-size: 1.1rem; text-decoration: none; }
.nav a:hover,
.nav a:focus-visible { background: rgba(0, 0, 0, 0.12); }

.hero { background-color: #871b1b; background-image: linear-gradient(rgba(135, 27, 27, 0.88), rgba(135, 27, 27, 0.88)), url("images/logoHiRes-transparent.png"); background-position: center; background-repeat: repeat-x; background-size: auto, 400px; }
.logo { width: 123px; height: auto; margin: 0 auto 30px; }

/* SLIDER */

.gallery { position: relative; width: 100%; height: 600px; overflow: hidden; background: #201f1f; }

.slides { position: absolute; inset: 0; width: 100%; height: 100%; }

.slide { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; }

.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* Entire image is always visible, centred and proportional */
.slide img { display: block; width: 100%; height: 100%; margin: 0; padding: 0; object-fit: contain; object-position: center; }

.gallery-button { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 52px; height: 70px; padding: 0; border: 0; background: rgba(0, 0, 0, 0.3); color: #fff; font-family: Arial, sans-serif; font-size: 3rem; line-height: 1; cursor: pointer; transition: background 0.2s ease; }

.gallery-button:hover,
.gallery-button:focus-visible { background: rgba(0, 0, 0, 0.6); }

.previous { left: 0; }
.next { right: 0; }

.gallery-dots { position: absolute; z-index: 4; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 7px; }

.gallery-dots button { width: 10px; height: 10px; margin: 0; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }

/* Legend for photos in the slider */
.gallery-dots button.is-active { background: #fff; }

.gallery-caption { position: absolute; z-index: 2; left: 50%; top: 0; transform: translateX(-50%); width: 100%; padding: clamp(10px, 1.5vw, 18px) clamp(45px, 6vw, 80px); background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; font-size: clamp(16px, 1.6vw, 24px); line-height: 1.4; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; }

.gallery-caption.is-visible { opacity: 1; visibility: visible; }

/* VIDEO */

.video-section { background: #b73e05; }
.video-wrap { max-width: 940px; }
.video-wrap iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ABOUT */

.about { background-color: #9e0b0e; background-image: linear-gradient(rgba(158, 11, 14, 0.78), rgba(158, 11, 14, 0.78)), url("images/automne-feuilles-jaunes-rousses.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; }

/* CONTACT */

.contact { background-color: #f26522; background-image: linear-gradient(rgba(242, 101, 34, 0.7), rgba(242, 101, 34, 0.7)), url("images/Picture1.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; }

.contact-card { width: min(300px, 100%); height: auto; margin: 0 auto; }

/* TABLET */

@media (max-width: 900px) {
  .section { padding: 65px 0; }
  .gallery { height: clamp(300px, 60vw, 500px); }
}

/* MOBILE */

@media (max-width: 700px) {
  .section { padding: 55px 0; }
  .nav a { padding: 11px 10px; font-size: 0.95rem; }
  .gallery { height: clamp(280px, 85vw, 500px); }
  .gallery-button { width: 42px; height: 58px; font-size: 2.4rem; }
  .gallery-dots { bottom: 12px; gap: 6px; }
  .gallery-dots button { width: 9px; height: 9px; }
  .about { background-image: none; }
}

/* SMALL MOBILE */

@media (max-width: 420px) {
  .container { width: calc(100% - 28px); }
  .nav a { padding: 10px 8px; font-size: 0.9rem; }
  .gallery { height: 85vw; min-height: 280px; }
  .gallery-button { width: 36px; height: 52px; font-size: 2rem; }
}