:root {
  --dir-green: #213126;
  --dir-green-2: #1b2a21;
  --dir-gold: #e2b24a;
  --dir-ink: #0f1411;
  --dir-white: #ffffff;
  --dir-radius: 22px;
  --dir-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);

  --water-max: 1200px;
  --water-border: rgba(0, 0, 0, 0.10);
  --water-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  --water-text: #111111;
  --water-muted: rgba(17, 17, 17, 0.70);
  --water-accent: #3d7664;
  --water-soft: #cfe7bf;
  --water-line: #2a2a2a;
  --water-open: #75a850;
  --water-closed: #000000;
  --water-head-bg: #274236;
}

body {
  margin: 0;
  font-family: "Alexandria", sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  color: #f1f0f0;
  overflow-x: hidden;
  overflow-y: auto;
}


/*NAV*/

.dir-hero__nav{
  position:absolute;
  top:30px;
  left:0;
  width:95%;
  z-index:10;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 40px;
}

.dir-hero__logo img{
  height:100px;
  width:auto;
  display:block;
}

.dir-hero__menu{
  display:flex;
  align-items:center;
  gap:24px;
}

.dir-hero__menu a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:opacity .2s ease;
}

.dir-hero__menu a:hover{
  opacity:.75;
}

@media (max-width: 980px){

  .dir-hero__nav{
    padding:0 20px;
    top:20px;
  }

  .dir-hero__logo img{
    height:70px;
  }

  .dir-hero__menu a{
    font-size:12px;
  }

}

/* HERO */

.dir-hero {
  margin-top: var(--header-height, 0);
  position: relative;
  width: 100vw;
  min-height: clamp(550px, 65vw, 1000px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.dir-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.dir-hero__container {
  position: relative;
  z-index: 2;
  max-width: 45%;
  margin-left: auto;
  margin-right: 40px;
  padding: 300px 0 160px 20px;
}

.dir-card {
  position: relative;
  margin-bottom: 20px;
  padding: clamp(18px, 3vw, 34px);
  background: rgba(32, 50, 41, 0.90);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow);
  color: var(--dir-white);
}

.dir-card__top{
  position: relative;
  margin-bottom: 40px;
  padding-top: 2px;

}

.dir-card__kicker {
    display:block;
  text-align:left;
font-size: 14px;
  line-height: 1;
  opacity: 0.95;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.dir-card__badge {
  position: absolute;
  top: -10px;
  right: -8px;
  padding: 12px 16px;
  background: #f9b010;
  color: #1b221d;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.dir-card__title {
  margin: 0;
  text-align: center;
  font-weight: 750;
  letter-spacing: 0.2px;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.1;
}

.dir-card__desc {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* CTA */

.dir-cta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.dir-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.dir-btn--full {
  grid-column: 1 / -1;
  background: #ffffff;
  color: #151a16;
}

.dir-btn--gold {
  background: #f9b010;
  color: #131a15;
}

.dir-btn--white {
  background: #87b926;
  color: #131a15;
}

.dir-btn__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.dir-btn__img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.dir-btn__text {
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-align: left;
}

.dir-btn:focus-visible {
  outline: 3px solid rgba(226, 178, 74, 0.65);
  outline-offset: 3px;
}

 /* Responsive */
  @media (max-width: 980px){
    .dir-hero__container{
      justify-content:center;
  max-width: 90%;
margin-right: 20px;
padding: 120px 20px;
    }

 .dir-card__title{
font-size:18px;
}

.dir-card__desc{
font-size:14px;
}

.dir-card__badge {
font-size:10px;
padding:8px 10px;
}

.dir-card__kicker{
font-size:10px;
}

    .dir-card{
      margin-bottom: 30px;
    }
    .dir-cta{
 display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    }
    .dir-btn{
      width: 90% !important;
      min-width: 0;
    }
 .dir-btn--full{
    grid-column: auto;
  }

    .dir-btn__text{
font-size:14px;
    }
  }

/* Camping */

.dir-camping{
  padding: clamp(50px, 6vw, 90px) 20px;
  background: #ffffff;
}

.dir-camping__inner{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;

  background: var(--dir-green);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow);
  overflow: hidden;
}

.dir-camping__media{
  height: 100%;
  min-height: 360px;
}

.dir-camping__img{
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  object-fit: cover;
}

.dir-camping__content{
  padding: clamp(28px, 4vw, 56px);
  color: #ffffff;
}

.dir-camping__kicker{
  display: inline-block;
  margin-bottom: 18px;

  color: #BBDBBB;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.5px;
}

.dir-camping__title{
  margin: 0 0 18px;

  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.05;
  font-weight: 800;
}

.dir-camping__text{
  max-width: 620px;
  margin: 0 0 28px;

  color: rgba(255,255,255,.72);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.45;
}

.dir-camping__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 15px 24px;

  background: #6DA652;
  color: #131a15;

  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;

  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.dir-camping__btn:hover{
  background: #ffffff;
  color: #131a15;
}

@media (max-width: 900px){

  .dir-camping__inner{
    grid-template-columns: 1fr;
  }

  .dir-camping__media,
  .dir-camping__img{
    min-height: 280px;
  }

}

/* Événements */

.dir-event {
  padding: clamp(50px, 6vw, 90px) 20px;
  background: #EEF4E5;
}

.dir-event:nth-of-type(even) {
  background: #ffffff;
}

.dir-event__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--dir-green);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow);
  overflow: hidden;
}

.dir-event__media {
  height: 100%;
  min-height: 360px;
}

.dir-event__img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  object-fit: cover;
}

.dir-event__content {
  padding: clamp(28px, 4vw, 56px);
  color: var(--dir-white);
}

.dir-event__kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: #BBDBBB;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.5px;
}

.dir-event__title {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
}

.dir-event__text {
  max-width: 620px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.45;
}

.dir-event__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  background: #6DA652;
  color: #131a15;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.dir-event__btn:hover {
  background: #ffffff;
  color: #131a15;
}

@media (max-width: 900px) {
  .dir-event__inner {
    grid-template-columns: 1fr;
  }

  .dir-event__media,
  .dir-event__img {
    min-height: 280px;
  }
}


/* WATER HUB */

.water-hub {
  max-width: var(--water-max);
  margin: 80px auto;
  padding: 10px 0 20px;
  color: var(--water-text);
}

.water-header {
  margin-bottom: 18px;
}

.water-kicker {
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
  font-size: 14px;
  color: var(--water-accent);
}

.water-heading {
  margin: 0 0 12px;
  text-align: center;
 font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.15;
}

.water-intro {
  margin: 0 0 18px;
  text-align: center;
  font-family: "Alexandria", sans-serif;
  font-weight: 300;
font-size: clamp(14px, 1vw, 15px);
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.water-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}

.water-filter-group {
  width: 100%;
  max-width: var(--water-max);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 999px;
}

.water-filter-group--weeks {
  border-radius: 22px;
}

.water-filter-label {
  margin-right: 2px;
 font-size: clamp(14px, 1vw, 15px);
  color: var(--water-muted);
  white-space: nowrap;
}

.water-chip {
  padding: 8px 12px;
	 font-family: "Alexandria", sans-serif;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  color: #111111;
font-size: clamp(14px, 1vw, 15px);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.water-chip:hover {
  transform: translateY(-1px);
}

.water-chip[aria-pressed="true"] {
  background: rgba(61, 118, 100, 0.12);
  border-color: rgba(61, 118, 100, 0.45);
}

.water-week-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.water-filters-mobile {
  display: none;
  width: 100%;
  max-width: var(--water-max);
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
}

.water-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.water-select-label {
 font-size: clamp(14px, 1vw, 15px);
  color: var(--water-muted);
}

.water-select-control {
  width: 100%;
  padding: 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  color: var(--water-text);
 font-size: clamp(14px, 1vw, 15px);
}

.water-week-title {
  max-width: var(--water-max);
  margin: 6px auto 14px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  text-align: center;
}

.water-week-title h3 {
  margin: 0 0 6px;
 font-size: clamp(14px, 1vw, 15px);
  font-weight: 800;
  line-height: 1.2;
}

.water-week-title p {
  margin: 0;
  font-family: "Alexandria", sans-serif;
  font-weight: 300;
 font-size: clamp(14px, 1vw, 15px);
  color: var(--water-muted);
}

/* WATER TABLE */

.water-schedule-wrap {
  width: 100%;
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid var(--water-border);
  border-radius: 20px;
  box-shadow: var(--water-shadow);
}

.water-schedule-table {
  min-width: 1080px;
}

.water-board {
  display: grid;
  grid-template-columns: 290px repeat(7, minmax(110px, 1fr));
  gap: 1px;
  background: var(--water-line);
}

.water-cell {
  min-height: 84px;
  padding: 12px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  text-align: center;
}

.water-cell--head {
  min-height: 78px;
  font-weight: 800;
 font-size: clamp(14px, 1vw, 15px);
  text-transform: uppercase;
  color: #2e1d18;
}

.water-cell--head span {
  display: block;
}

.water-head-date {
  display: inline-flex;
  margin-top: 8px;
  padding: 7px 12px;
  background: var(--water-head-bg);
  border-radius: 999px;
  color: #ffffff;
 font-size: clamp(14px, 1vw, 15px);
  line-height: 1;
}

.water-cell--label {
  justify-content: flex-start;
  padding-left: 16px;
  text-align: left;
  font-weight: 800;
 font-size: clamp(14px, 1vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #2e1d18;
}

.water-cell--label.is-alt,
.water-cell.is-alt {
  background: var(--water-soft);
}

.water-pill {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
font-size: clamp(14px, 1vw, 15px);
  line-height: 1.1;
}

.water-pill--open {
  background: var(--water-open);
  color: #000000;
}

.water-pill--closed {
  background: var(--water-closed);
  color: #ffffff;
  letter-spacing: 1px;
}

.water-note {
font-size: clamp(14px, 1vw, 15px);
  line-height: 1.1;
}

/* WATER MOBILE */

.water-schedule-mobile {
  display: none;
}

.water-mobile-grid {
  display: grid;
  gap: 12px;
}

.water-mobile-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--water-border);
  border-radius: 16px;
  box-shadow: var(--water-shadow);
}

.water-mobile-card__head {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.04);
  font-weight: 800;
  text-transform: uppercase;
  color: #2e1d18;
  font-size: 1.02rem;
}

.water-mobile-days {
  display: grid;
  gap: 8px;
  padding: 10px 12px 14px;
}

.water-mobile-day {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.water-mobile-day strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.water-mobile-badge {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.15;
}

.water-mobile-badge--open {
  background: var(--water-open);
  color: #000000;
}

.water-mobile-badge--closed {
  background: #000000;
  color: #ffffff;
  letter-spacing: 1px;
}

/* RESPONSIVE */

@media (max-width: 980px) {
  .dir-hero__container {
    max-width: 90%;
    margin-right: 20px;
    padding: 120px 20px;
  }

  .dir-card {
    margin-bottom: 30px;
  }

  .dir-card__title {
    font-size: 18px;
  }

  .dir-card__desc {
    font-size: 14px;
  }

  .dir-card__badge {
    padding: 8px 10px;
    font-size: 10px;
  }

  .dir-card__kicker {
    font-size: 10px;
  }

  .dir-cta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dir-btn {
    width: 100%;
    min-width: 0;
  }

  .dir-btn--full {
    grid-column: auto;
  }

  .dir-btn__text {
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .water-filters {
    display: none;
  }

  .water-filters-mobile {
    display: flex;
  }

  .water-schedule-wrap {
    display: none;
  }

  .water-schedule-mobile {
    display: block;
  }
}

/* ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {
  .dir-hero__video {
    display: none;
  }

  .dir-hero {
    background: #0c120e;
  }

  .dir-hero__shade {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.35));
  }
}

/*MAP*/
.dir-map{
  padding: clamp(50px, 6vw, 90px) 20px;
  background: #eef4e5;
}

.dir-map__inner{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.dir-map__kicker{
  display: inline-block;
  margin-bottom: 18px;
  color: #3D7664;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.5px;
}

.dir-map__title{
  margin: 0 0 20px;
  color: var(--dir-green);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
}

.dir-map__text{
  margin-bottom: 24px;
  color: #444;
  font-size: 14px;
  line-height: 1.6;
}

.dir-map__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
 font-size: 14px;
  padding: 14px 22px;

  background: var(--dir-green);
  color: #fff;

  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.dir-map__btn:hover{
  background: #81BD41;
	color:white;
}

.dir-map__img{
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: var(--dir-shadow);
}

@media (max-width: 900px){

  .dir-map__inner{
    grid-template-columns: 1fr;
  }

}

/*Activités*/
.dir-calendar{
  padding: clamp(50px, 6vw, 90px) 20px;
  background: #ffffff;
}

.dir-calendar__inner{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.dir-calendar__kicker{
  display: inline-block;
  margin-bottom: 18px;
  color: #3D7664;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.5px;
}

.dir-calendar__title{
  margin: 0 0 20px;

  color: var(--dir-green);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
}

.dir-calendar__text{
  margin-bottom: 24px;

  color: #444;
  font-size: 16px;
  line-height: 1.6;
}

.dir-calendar__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
 font-size: 14px;
  padding: 14px 22px;

  background: var(--dir-green);
  color: #fff;

  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.dir-calendar__btn:hover{
background: #81BD41;
  color: #fff;
}

.dir-calendar__img{
  width: 100%;
  display: block;

  border-radius: 20px;
  box-shadow: var(--dir-shadow);
}

@media (max-width: 900px){

  .dir-calendar__inner{
    grid-template-columns: 1fr;
  }

}

/* Footer */

.dir-footer {
  padding: clamp(50px, 6vw, 90px) 20px;
  background: var(--dir-green);
  color: #ffffff;
	font-family: "Alexandria", sans-serif;
}

.dir-footer__header{
  max-width: 1200px;
  margin: 0 auto 50px;
}

.dir-footer__pretitle{
  display: inline-block;
  margin-bottom: 18px;

  color: #BBDBBB;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.5px;
}

.dir-footer__title{
  margin: 0;

  color: #ffffff;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 800;
}

.dir-footer__inner {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 50px;
  align-items: start;
}

.dir-footer__logo {
  width: 240px;
  max-width: 100%;
  display: block;
}

.dir-footer__kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: #BBDBBB;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.5px;
}

.dir-footer__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.dir-footer__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #81BD41;
  border-radius: 50%;
  color: #81BD41;
}

.dir-footer a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

.dir-footer a:hover {
  color: #BBDBBB;
}

.dir-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 900px) {
  .dir-footer__inner {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .dir-footer__logo {
    width: 200px;
  }
}