/* RESET */
/* @use "./base/base-reset.scss" as *;   EXEMPLE */
/* SPACING */
:root {
  /* SPACING VARIABLES */
  --sp-0: calc(4 / 16 * 1rem);
  --sp-1: calc(8 / 16 * 1rem);
  --sp-2: calc(16 / 16 * 1rem);
  --sp-3: calc(24 / 16 * 1rem);
  --sp-4: calc(32 / 16 * 1rem);
  --sp-5: calc(40 / 16 * 1rem);
  --sp-6: calc(48 / 16 * 1rem);
  --sp-7: calc(56 / 16 * 1rem);
  --sp-8: calc(64 / 16 * 1rem);
  --sp-9: calc(72 / 16 * 1rem);
  --sp-10: calc(80 / 16 * 1rem);
  /* TEXT SIZES VARIABLES */
  --txt-0: calc(12 / 16 * 1rem);
  --txt-1: calc(16 / 16 * 1rem);
  --txt-2: calc(21 / 16 * 1rem);
  --txt-3: calc(28 / 16 * 1rem);
  --txt-4: calc(38 / 16 * 1rem);
  --txt-5: calc(50 / 16 * 1rem);
  --txt-6: calc(67 / 16 * 1rem);
  --txt-7: calc(90 / 16 * 1rem);
  /* BORDER RADIUS VARIABLES */
  --br-s: calc(16 / 16 * 1rem);
  --br-m: calc(32 / 16 * 1rem);
  --br-l: calc(64 / 16 * 1rem);
}

@-moz-document url-prefix() {
  :root {
    --sp-0: 0.25rem;
    --sp-1: 0.5rem;
    --sp-2: 1rem;
    --sp-3: 1.5rem;
    --sp-4: 2rem;
    --sp-5: 2.5rem;
    --sp-6: 3rem;
    --sp-7: 3.5rem;
    --sp-8: 4rem;
    --sp-9: 4.5rem;
    --sp-10: 5rem;
    --txt-0: 0.75rem;
    --txt-1: 1rem;
    --txt-2: 1.3125rem;
    --txt-3: 1.75rem;
    --txt-4: 2.375rem;
    --txt-5: 3.125rem;
    --txt-6: 4.1875rem;
    --txt-7: 5.625rem;
    --br-s: 1rem;
    --br-m: 2rem;
    --br-l: 4rem;
  }
}
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-white-100);
  overflow-x: hidden;
}

@media all and (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0;
}

h1 {
  margin: 0;
  /*
  letter-spacing: -5%;
  */
}

h2 {
  margin: 0;
  /*
  letter-spacing: -5%;
  */
}

h3 {
  margin: 0;
  /*
  letter-spacing: -5%;
  */
}

h4 {
  margin: 0;
  /*
  letter-spacing: -5%;
  */
}

h5 {
  margin: 0;
}

button {
  cursor: pointer;
  padding: var(--sp-1) var(--sp-3);
  width: fit-content;
  height: fit-content;
  background-color: initial;
  border: var(--color-red-100) 2px solid;
  border-radius: var(--br-l);
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--color-red-100);
}

button p {
  font-family: "Gambetta", serif;
  color: var(--color-red-100);
  font-weight: 600;
}

button:hover p {
  color: var(--color-white-100);
}

.section--dark button {
  background-color: var(--color-green-100);
  border: var(--color-white-100) 2px solid;
}
.section--dark button p {
  color: var(--color-white-100);
}

.section--dark button:hover {
  border: none;
  background-color: var(--color-white-100);
  border: var(--color-white-100) 2px solid;
}
.section--dark button:hover p {
  color: var(--color-green-100);
}

.fluid-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@property --scroll-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll-position-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --nav-transition-duration {
  syntax: "<time>";
  inherits: true;
  initial-value: 0.2s;
}
@property --when-scrolling {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes adjust-pos {
  to {
    --scroll-position: 1;
    --scroll-position-delayed: 1;
  }
}
:root {
  animation: adjust-pos linear both;
  animation-timeline: scroll(root);
}

body {
  transition: --scroll-position-delayed 0.15s linear;
  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));
  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity)); /* abs(var(--scroll-velocity)); */
  --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed)); /* sign(var(--scroll-velocity)); */
  --when-scrolling: abs(var(--scroll-direction));
  --when-not-scrolling: abs(var(--when-scrolling) - 1);
  --when-scrolling-up: min(abs(var(--scroll-direction) - abs(var(--scroll-direction))),	1);
  --when-scrolling-down: min(var(--scroll-direction) + abs(var(--scroll-direction)), 1);
  --when-scrolling-down-or-when-not-scrolling: clamp(0, var(--scroll-direction) + 1, 1);
  --when-scrolling-up-or-when-not-scrolling: clamp(0, abs(var(--scroll-direction) - 1), 1);
  /*
  --nav-transition-duration: calc(0.2s + 3s * (1 - var(--when-scrolling)));
  */
  --nav-transition-duration: calc(0s + 99999s * (1 - var(--when-scrolling)));
  --scroll-threshold: 0.05;
  --scroll-direction-thresholded: calc(var(--scroll-direction) * min(1, (var(--scroll-speed) / var(--scroll-threshold))) );
}

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-VariableItalic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/Gambetta-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/Gambetta-VariableItalic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --spacing-grid-gap: var(--sp-1);
  --spacing-grid-row-gap: var(--sp-3);
}

.grid-layout {
  display: grid;
  row-gap: var(--sp-7);
  column-gap: var(--sp-1);
  grid-template-columns: var(--sp-3) repeat(5, 1fr) var(--sp-3);
}

.grid-layout > * {
  grid-column: 2/-2;
}

.grid-layout-1 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-layout-2 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-layout-3 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-layout-4 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-layout-5 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-layout-6 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-layout-7 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-layout-8 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-layout-9 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-layout-10 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-layout-11 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-layout-12 {
  display: grid;
  gap: var(--spacing-grid-gap);
  row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

[class*=grid-layout-] > * {
  grid-column: 1/-1;
}

@media all and (min-width: 768px) {
  :root {
    --spacing-grid-gap: var(--sp-2);
    --spacing-grid-row-gap: var(--sp-5);
  }
  .grid-layout {
    column-gap: var(--sp-2);
    grid-template-columns: var(--sp-4) repeat(8, 1fr) var(--sp-4);
  }
  .grid-layout-tablet-1 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-layout-tablet-2 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-layout-tablet-3 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-layout-tablet-4 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-layout-tablet-5 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-layout-tablet-6 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-layout-tablet-7 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-layout-tablet-8 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-layout-tablet-9 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid-layout-tablet-10 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid-layout-tablet-11 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid-layout-tablet-12 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media all and (min-width: 1024px) {
  .grid-layout {
    grid-template-columns: var(--sp-4) repeat(9, 1fr) var(--sp-4);
  }
  .grid-layout-desktop-1 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-layout-desktop-2 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-layout-desktop-3 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-layout-desktop-4 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-layout-desktop-5 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-layout-desktop-6 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-layout-desktop-7 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-layout-desktop-8 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-layout-desktop-9 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid-layout-desktop-10 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid-layout-desktop-11 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid-layout-desktop-12 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media all and (min-width: 1440px) {
  :root {
    --spacing-grid-gap: var(--sp-3);
  }
  .grid-layout {
    column-gap: var(--sp-3);
    grid-template-columns: var(--sp-9) repeat(12, 1fr) var(--sp-9);
  }
  .grid-layout-wide-1 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-layout-wide-2 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-layout-wide-3 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-layout-wide-4 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-layout-wide-5 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-layout-wide-6 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-layout-wide-7 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-layout-wide-8 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-layout-wide-9 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid-layout-wide-10 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid-layout-wide-11 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid-layout-wide-12 {
    display: grid;
    gap: var(--spacing-grid-gap);
    row-gap: var(--spacing-grid-row-gap, var(--spacing-grid-gap));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
:root {
  --section-spacing: var(--sp-10);
  /* --content-max-width: 1440px; Could be interesting*/
  --content-max-width: 1920px;
  --max-width: 1920px;
}

@media all and (min-width: 768px) {
  :root {
    --section-spacing: calc(var(--sp-10));
  }
}
@media all and (min-width: 1024px) {
  :root {
    --section-spacing: calc(var(--sp-10) + var(--sp-5));
  }
}
.section {
  padding-block: var(--section-spacing);
  background-color: var(--color-white-100);
  max-width: var(--content-max-width);
  margin-inline: auto;
}

@media all and (max-width: 767px) {
  .section:first-of-type {
    padding-block-start: calc(var(--section-spacing) + var(--sp-5));
  }
}
.section--dark {
  background-image: url("/assets/medias/svg/section-green-texture2.svg");
  background-repeat: repeat;
  background-size: 50%;
  background-color: var(--color-green-100);
}

/* Make space for footer overlapp */
.section:last-of-type {
  padding-block-end: calc(var(--section-spacing) * 2 + var(--br-m));
}

.banner {
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  max-width: var(--max-width);
  justify-self: center;
  position: relative;
}

.banner--medium {
  height: 75vh;
}

.banner--small {
  height: 50vh;
}

.banner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  max-width: var(--max-width);
  height: 30%;
  opacity: 0.8;
  background: linear-gradient(to bottom, var(--color-black-100) 0%, transparent 100%);
  z-index: 1;
}

.banner::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: var(--max-width);
  height: 5%;
  background-color: var(--color-white-100); /* Adjust the opacity as needed */
  border-radius: var(--br-m) var(--br-m) 0 0;
}

.banner--dark::after {
  background-image: url("/assets/medias/svg/section-green-texture2.svg");
  background-repeat: repeat;
  background-size: 50%;
  background-color: var(--color-green-100);
}

:root {
  /*p*/
  --font-family-p: "General Sans", sans-serif;
  --font-size-p: var(--txt-1);
  --font-weight-p: 300;
  --font-line-height-p: normal;
  /*h5*/
  --font-family-h5: "General Sans", sans-serif;
  --font-size-h5: var(--txt-2);
  --font-weight-h5: 500;
  --font-line-height-h5: normal;
  /*h4*/
  --font-family-h4: "Gambetta", serif;
  --font-size-h4: var(--txt-3);
  --font-weight-h4: 600;
  --font-line-height-h4: normal;
  /*h3*/
  --font-family-h3: "Gambetta", serif;
  --font-size-h3: var(--txt-3);
  --font-weight-h3: 600;
  --font-line-height-h3: normal;
  /*h2*/
  --font-family-h2: "Gambetta", serif;
  --font-size-h2: var(--txt-3);
  --font-weight-h2: 600;
  --font-line-height-h2: 100%;
  --font-color-h2: var(--color-red-100);
  /*h1*/
  --font-family-h1: "Gambetta", serif;
  --font-size-h1: var(--txt-4);
  --font-weight-h1: 700;
  --font-line-height-h1: 89%;
  --font-color-h1: var(--color-red-100);
}

/* TABLET FONTS SIZES */
@media all and (min-width: 768px) {
  :root {
    /*h2*/
    --font-size-h2: var(--txt-4);
    /*h1*/
    --font-size-h1: var(--txt-5);
  }
}
/* DESKTOP FONTS SIZES */
@media all and (min-width: 1024px) {
  :root {
    /*h3*/
    --font-size-h3: var(--txt-4);
    /*h2*/
    --font-size-h2: var(--txt-5);
    /*h1*/
    --font-size-h1: var(--txt-6);
  }
}
/* LARGE DESKTOP FONTS SIZES */
@media all and (min-width: 1440px) {
  :root {
    /*p*/
    --font-size-p: var(--txt-2);
    /*h5*/
    --font-size-h5: var(--txt-2);
    /*h4*/
    --font-size-h4: var(--txt-4);
    /*h3*/
    --font-size-h3: var(--txt-5);
    /*h2*/
    --font-size-h2: var(--txt-6);
    /*h1*/
    --font-size-h1: var(--txt-7);
  }
}
/* APPLY TEXT PARAMETERS */
a {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--font-line-height-p);
}

p {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--font-line-height-p);
  color: var(--text-color-100);
}

h5 {
  font-family: var(--font-family-h5);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--font-line-height-h5);
  color: var(--text-color-100);
}

h4 {
  font-family: var(--font-family-h4);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--font-line-height-h4);
  color: var(--text-color-100);
}

h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--font-line-height-h3);
  color: var(--color-red-100);
}

h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--font-line-height-h2);
  color: var(--font-color-h1);
}

h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--font-line-height-h1);
  color: var(--font-color-h1);
}

.fc-100 {
  color: var(--text-color-100);
}

/* SECTION MODIFIERS */
.section--dark {
  --text-color-100: var(--text-color-light-100);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--color-white-100);
}

:root {
  /* ROOT VARIABLES */
  --color-black-100: #1B1B1E;
  --color-white-100: #fffefa;
  --color-red-100: #BD4B11;
  --color-green-100: #5a8e71;
  --color-olive-100: #505957;
  --color-olive-200: #727E7B;
  --color-olive-300: #9FA7A5;
  --color-olive-400: #CDD0CF;
  --color-olive-500: #E8EAE9;
  /* TEXT VARIABLES */
  --text-color-100: var(--color-olive-100);
  --text-color-light-100: var(--color-white-100);
}

body:has(.mainnav__toggle:checked) {
  overflow: hidden;
  height: 100vh;
  box-sizing: border-box;
}

.-anim__scrollHidden {
  transform: translateY(calc(-100% * var(--scroll-direction) - 100.1%));
  transition-property: transform;
  transition-duration: 0.2s;
  transition-delay: var(--nav-transition-duration);
  transition-timing-function: ease-in-out;
}

.mainnav__container {
  width: 100%;
  box-sizing: border-box;
  /*overflow-x: clip; BREAKS MACOS SAFARI */
  position: fixed;
  z-index: 2;
  transition: 0.3s ease-in-out;
  background-color: var(--color-white-100);
  box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.45);
  /*overflow: hidden;*/ /* BREAKS */
}

.mainnav__container .section {
  background-color: transparent;
}

.mainnav__content {
  padding-block: var(--sp-2);
}

.mainnav__bar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  grid-column: 2/-2;
}

.mainnav__logo {
  width: 20vw;
  max-width: 85px;
}

.mainnav__bar a {
  pointer-events: all;
}

.mainnav__icon {
  margin-left: auto;
  padding: var(--spacing-m);
  cursor: pointer;
  pointer-events: all;
}

.mainnav__icon::after {
  content: "";
  display: block;
  background-image: url("/assets/medias/svg/menu-burger.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 21px;
  height: 21px;
  transition: 0.3s ease-in-out;
}

.mainnav__icon:first-child {
  margin-left: 0;
}

/*===================
= NAVIGATION 
===================*/
.mainnav__nav {
  width: 100%;
  height: 100vh;
  position: absolute;
  right: -100%;
  z-index: 1;
  background-color: var(--color-white-100);
  transition: all 0.3s ease-in-out;
}

.mainnav__list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
}

.mainnav__list:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  height: fit-content;
  display: flex;
  flex-direction: row;
  gap: var(--sp-2);
  padding-bottom: var(--section-spacing);
}
.mainnav__list:nth-of-type(2) button {
  background-color: var(--color-red-100);
  border: none;
}
.mainnav__list:nth-of-type(2) button p {
  color: var(--color-white-100);
  font-size: var(--txt-1);
}
.mainnav__list:nth-of-type(2) li:last-child button {
  background-color: var(--color-green-100);
}

.mainnav__item {
  position: relative;
}

.mainnav__item h2 {
  font-size: var(--txt-1);
  font-weight: 600;
  letter-spacing: normal;
}

.mainnav__item a::after {
  content: "";
  position: absolute; /* Sticks to the bottom of the link area */
  width: 100%; /* Spans the full width of the text */
  height: 2px; /* Thickness of your line */
  background-color: var(--color-red-100);
  margin-top: var(--sp-0);
  /* Animation Magic */
  transform: scaleX(0); /* Hide it by shrinking it to 0 width */
  transition: transform 0.3s ease;
}

.mainnav__item a:hover::after {
  /* Animation Magic */
  transform: scaleX(1); /* Hide it by shrinking it to 0 width */
}

.mainnav__item--active a::after {
  transform: scaleX(1); /* Hide it by shrinking it to 0 width */
  font-weight: bold;
}

/* ---- TOGGLE NAVIGATION ---- */
.mainnav__toggle {
  display: none;
}

.mainnav__toggle:checked ~ .mainnav__nav {
  top: 0;
  right: 0;
  z-index: 1;
}

.mainnav__toggle:checked ~ .mainnav__bar .mainnav__icon::after {
  background-image: url("/assets/medias/svg/menu-cross.svg");
}

/*===================
= MEDIA QUERIES
===================*/
@media all and (min-width: 1024px) {
  .mainnav__container {
    padding-inline: var(--spacing-xl);
  }
  .mainnav__content {
    flex-direction: row;
  }
  .mainnav__logo {
    padding-inline: 0;
  }
  .mainnav__icon {
    display: none !important;
  }
  .mainnav__bar {
    grid-column: 2/3;
  }
  .mainnav__nav {
    width: 100%;
    position: relative;
    grid-row: 1/1;
    grid-column: 3/-2;
    height: auto;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: none;
    background-color: transparent;
  }
  .mainnav__list {
    flex-direction: row;
    gap: var(--sp-5);
    justify-content: center;
    width: 100%;
  }
  .mainnav__list:nth-of-type(2) {
    position: relative;
    justify-content: right;
    width: fit-content;
    padding-bottom: 0;
  }
  .mainnav__item h2 {
    font-size: var(--spacing-m);
  }
}
@media all and (min-width: 1440px) {
  .mainnav__logo {
    max-width: 150px;
  }
  .mainnav__container {
    padding-inline: var(--spacing-xxl);
  }
  .mainnav__list {
    gap: var(--sp-10);
  }
}
@media all and (min-width: 1024px) {
  /* Nav Scroll or not */
  .nav-not-scrolled {
    box-shadow: none;
  }
}
/* FOOTER MAIN CHANGES */
footer {
  position: relative;
  max-width: var(--max-width);
  width: 100%;
  justify-self: center;
  background-color: var(--color-olive-100);
  border-radius: var(--br-m) var(--br-m) 0 0;
  margin-top: calc(-1 * var(--br-m));
}

.footer .section {
  padding-block-end: var(--section-spacing);
}

.footer .section--dark {
  background-color: var(--color-olive-100);
  border-radius: var(--br-m) var(--br-m) 0 0;
}

.footer h2 {
  color: var(--color-white-100);
  grid-column: 3/-3;
  text-align: center;
}

.footer-content p {
  color: var(--color-white-100);
}

.footer-content h5 {
  padding-bottom: var(--sp-2);
  font-family: "Gambetta", serif;
  color: var(--color-white-100);
  font-weight: 700;
}

@media all and (min-width: 768px) {
  .footer h2 {
    padding-top: var(--sp-10);
  }
  .footer .section {
    padding-block-start: calc(var(--section-spacing) / 2);
    padding-block-end: var(--section-spacing);
  }
}
@media all and (min-width: 1024px) {
  footer .grid-layout {
    row-gap: calc(var(--section-spacing) / 2);
  }
  .footer .section {
    padding-block-start: calc(var(--section-spacing) / 4);
    padding-block-end: calc(var(--section-spacing) / 4);
  }
}
/* FOOTER IMAGE */
.footer::before {
  content: "";
  display: block;
  width: 100%;
  max-width: var(--max-width);
  height: 88px;
  background-image: url("/assets/medias/svg/Val-Dieu-Logo--small.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  translate: 0% -50%;
}

/* FOOTER CONTENT LIST */
.footer-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--sp-1);
}
.footer-list > * {
  width: fit-content;
}

.footer-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-item__social p {
  font-weight: 500;
  display: flex;
  align-items: center;
}
.footer-item__social p::after {
  content: "";
  display: block;
  background-image: url("/assets/medias/svg/social-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 12px;
  width: 12px;
  padding-left: var(--sp-1);
}

@media all and (min-width: 768px) {
  .footer-content {
    grid-column: 2/5;
  }
  .footer-content:nth-of-type(2) {
    grid-column: -4/-2;
  }
  .footer-content:nth-of-type(2) .footer-list > * {
    width: 100%;
  }
  .footer-content:nth-of-type(2) p, .footer-content:nth-of-type(2) h5 {
    text-align: right;
  }
}
@media all and (min-width: 1024px) {
  .footer::before {
    width: 100%;
    height: 120px;
    translate: 0% -50%;
  }
  .footer h2 {
    padding-top: calc(var(--sp-10) * 1.5);
  }
}
/* FOOTER BUTTONS */
.footer-button {
  width: fit-content;
  border: none !important;
  background-color: var(--color-white-100) !important;
  padding: var(--sp-1) var(--sp-3);
}
.footer-button p {
  color: var(--color-olive-100) !important;
}

a:last-of-type .footer-button {
  background-color: var(--color-green-100) !important;
}
a:last-of-type .footer-button p {
  color: var(--color-white-100) !important;
}

@media all and (min-width: 768px) {
  .footer-buttons {
    flex-direction: row;
    grid-column: 5/-5;
    grid-row: 2/2;
    justify-content: center;
  }
}
/* FOOTER LANGUAGES */
.footer-langs ul {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}

.selected-lang p {
  text-decoration: underline;
  font-weight: 600;
}

@media all and (min-width: 768px) {
  .footer-langs {
    grid-column: 2/4;
    justify-self: start;
  }
}
/* FOOTER LEGALS */
.footer-legals ul {
  display: flex;
  gap: var(--sp-1);
  justify-content: center;
}

@media all and (min-width: 768px) {
  .footer-legals {
    grid-column: 8/-2;
    grid-row: 3/3;
    justify-self: end;
  }
}
/* FOOTER COPYRIGHT */
.footer-cr ul {
  text-align: center;
  color: var(--color-white-100);
  padding-bottom: var(--sp-3);
}

@media all and (min-width: 768px) {
  .footer-cr {
    grid-column: 4/-4;
    grid-row: 3/3;
    justify-self: center;
  }
}
.interactive-map {
  position: relative;
  background-image: url("/assets/medias/img/Map.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--br-s);
  overflow: hidden;
}

@media all and (min-width: 1024px) {
  .interactive-map {
    grid-column: 3/-3;
  }
}
@media all and (min-width: 1440px) {
  .interactive-map {
    grid-column: 3/-3;
  }
}
/* Map info */
.map--info {
  display: flex;
  flex-direction: row;
  align-items: center;
  pointer-events: none;
  position: absolute;
  transform: translate(-25px, -25px);
  z-index: 1;
}

.map--info:hover {
  z-index: 2;
}

.map--info-img {
  display: block;
  width: var(--sp-4);
  height: var(--sp-4);
  pointer-events: all;
}

#map--parking-03 img {
  width: calc(var(--sp-4) * 2);
}

@media all and (min-width: 768px) {
  .map--info-img {
    width: var(--sp-5);
    height: var(--sp-5);
  }
  #map--parking-03 img {
    width: calc(var(--sp-5) * 2);
  }
}
@media all and (min-width: 1024px) {
  .map--info-img {
    width: var(--sp-6);
    height: var(--sp-6);
  }
  #map--parking-03 img {
    width: calc(var(--sp-6) * 2);
  }
}
.map--info-link {
  display: block;
  cursor: pointer;
}

.map--info-txt {
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: var(--txt-1);
  color: var(--color-white-100);
  font-family: "Gambetta", serif;
  font-weight: 600;
  padding: var(--sp-1) var(--sp-2);
  background-color: rgba(80, 89, 87, 0.8);
  border: solid 2px var(--color-red-100);
  border-radius: var(--br-m);
  text-wrap: nowrap;
  position: absolute;
  top: 0;
  left: calc(100% + var(--sp-1));
}

.map--info-link:hover + .map--info-txt {
  opacity: 1;
  display: block;
}

#map--abbaye {
  left: 56.21%;
  top: 39.97%;
}

#map--magasin {
  left: 25.51%;
  top: 57.22%;
}

#map--info {
  left: 51.61%;
  top: 65.63%;
}

#map--restauration {
  left: 40.28%;
  top: 56.92%;
}

#map--bird {
  left: 45.24%;
  top: 22.17%;
}

#map--wc {
  left: 36.71%;
  top: 48.97%;
}

#map--promenade {
  left: 13.49%;
  top: 47.26%;
}

#map--brasserie {
  left: 31.96%;
  top: 71.53%;
}

#map--parc {
  left: 86.34%;
  top: 64.41%;
}

#map--parking-01 {
  left: 44.46%;
  top: 44.31%;
}

#map--parking-03 {
  left: 76.77%;
  top: 30.26%;
}

#map--parking-02 {
  left: 21.09%;
  top: 37.44%;
}

/* MAIN VARIABLES */
:root {
  --gal-container-height: 210px;
  --gal-main-width: 100%;
  --gal-main-height: 140px;
  --gal-hov-width: 185px;
  --gal-hov-height: 209px;
  --gal-neighbor-height: 162px;
}

@media all and (min-width: 1024px) {
  :root {
    --gal-container-height: 290px;
    --gal-main-height: 192px;
    --gal-hov-width: 257px;
    --gal-hov-height: 289px;
    --gal-neighbor-height: 225px;
  }
}
@media all and (min-width: 1440px) {
  :root {
    --gal-container-height: 450px;
    --gal-main-height: 300px;
    --gal-hov-width: 400px;
    --gal-hov-height: 450px;
    --gal-neighbor-height: 350px;
  }
}
/* HOME PAGE INTRO SECTION */
.hp-intro {
  grid-column: 2/-2;
}

.hp-intro h1, .hp-intro h2 {
  text-align: center;
}

.hp-intro-txt > * {
  text-align: center;
}

.hp-intro-img {
  background-image: url("/assets/medias/img/image_Home.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--br-s);
}

.hp-intro-button {
  grid-column: 2/-2;
  justify-self: center;
}

@media all and (min-width: 768px) {
  .hp-intro .hp-intro-img, .hp-intro p {
    grid-column: 2/-2;
    text-align: center;
  }
  .hp-intro-button {
    grid-column: 4/-4;
  }
}
@media all and (min-width: 1024px) {
  .hp-bg {
    background-position: 50% 50%;
  }
}
/* HOME PAGE GALLERY SECTION */
.hp-gallery {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  grid-column: 1/-1;
}

.hp--gallery-item {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  padding: 0 var(--sp-3) 0 var(--sp-3);
  box-sizing: border-box;
}

.hp--gallery-img {
  border-radius: var(--br-s);
  height: 100%;
  flex: 0 0 auto;
}

@media all and (min-width: 768px) {
  .hp-gallery {
    overflow: hidden;
    grid-column: 2/-2;
  }
  .hp--gallery-item {
    flex: 1 1 0;
    padding: 0;
    height: 250px;
    transition: all 0.2s ease;
    padding-block: var(--sp-6);
    padding-inline: var(--sp-2);
  }
  .hp--gallery-item:nth-child(3) {
    flex-grow: 2;
    padding-block: 0px;
  }
  .hp--gallery-item:nth-child(2), .hp--gallery-item:nth-child(4) {
    flex-grow: 1.5;
    padding-block: var(--sp-3);
  }
  .hp-gallery:has(.hp--gallery-item:hover) .hp--gallery-item {
    flex-grow: 1;
    padding-block: var(--sp-6);
  }
  .hp--gallery-item:hover {
    flex-grow: 2 !important;
    padding-block: 0px !important;
  }
  .hp-gallery:has(.hp--gallery-item:nth-child(2):hover) :is(.hp--gallery-item:nth-child(1), .hp--gallery-item:nth-child(3)),
  .hp-gallery:has(.hp--gallery-item:nth-child(4):hover) :is(.hp--gallery-item:nth-child(3), .hp--gallery-item:nth-child(5)),
  .hp-gallery:has(.hp--gallery-item:nth-child(3):hover) :is(.hp--gallery-item:nth-child(2), .hp--gallery-item:nth-child(4)),
  .hp-gallery:has(.hp--gallery-item:nth-child(1):hover) .hp--gallery-item:nth-child(2),
  .hp-gallery:has(.hp--gallery-item:nth-child(5):hover) .hp--gallery-item:nth-child(4) {
    flex-grow: 1.5 !important;
    padding-block: var(--sp-3);
  }
  .hp--gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media all and (min-width: 1024px) {
  .hp--gallery-item {
    height: 350px;
  }
}
@media all and (min-width: 1440px) {
  .hp--gallery-item {
    height: 480px;
  }
}
/* HOME PAGE EXPLORE SECTION */
.hp-explore-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hp-explore-item {
  border: 1px solid var(--color-green-100);
  border-radius: var(--br-s);
  padding: var(--sp-2);
  height: auto;
  transition: all 0.3s ease;
}

.hp-explore-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.hp-explore-label h5 {
  color: var(--color-green-100);
}

.hp-explore-input {
  display: none;
}

.hp-explore-content {
  display: none;
  text-align: center;
  padding-top: var(--sp-0);
}

.hp-explore-input:checked ~ .hp-explore-content {
  display: block;
}

@media all and (min-width: 768px) {
  .hp-explore h2, .hp-explore p {
    grid-column: 2/-2;
    text-align: center;
  }
  .hp-explore a {
    justify-self: center;
    grid-column: 3/-3;
  }
  .hp-explore-list {
    grid-column: 3/-3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-2);
    row-gap: var(--sp-2);
  }
  .hp-explore-content {
    display: block;
  }
}
@media all and (min-width: 1024px) {
  .hp-explore-list {
    column-gap: var(--sp-4);
    row-gap: var(--sp-4);
  }
}
@media all and (min-width: 1440px) {
  .section:has(.hp-explore) {
    row-gap: calc(var(--section-spacing) * 2);
  }
  .hp-explore {
    grid-column: 2/7;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }
  .hp-explore h2, .hp-explore p {
    text-align: left;
  }
  .hp-explore-list {
    grid-column: 8/-2;
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
  }
  .hp-explore-item {
    padding: 0;
    border: none;
  }
  .hp-explore-label {
    align-items: flex-start;
  }
  .hp-explore-content {
    text-align: left;
  }
  .hp-explore-content p {
    font-size: var(--txt-1);
  }
}
/* HOME PAGE BOOK SECTION */
.section--dark:has(.hp-book) {
  padding-block: 0;
  margin-block: var(--section-spacing);
}

.hp-book {
  gap: var(--sp-3);
  padding-block: var(--sp-5);
}

.hp-book > * {
  text-align: center;
  grid-column: 2/-2;
}

.hp-book a {
  justify-self: center;
  align-self: center;
  grid-column: 2/-2;
}
.hp-book a p {
  text-align: center;
}

@media all and (min-width: 768px) {
  .hp-book h5 {
    grid-column: 2/5;
    text-align: left;
  }
  .hp-book a {
    grid-column: -5/-2;
    justify-self: end;
    width: 100%;
  }
}
@media all and (min-width: 1024px) {
  .hp-book h5 {
    grid-column: 2/6;
  }
}
/* HOME PAGE COMMUNITY SECTION */
@media all and (min-width: 768px) {
  .hp-community h2, .hp-community p {
    text-align: center;
    grid-column: 2/-2;
  }
  .hp-community a {
    justify-self: center;
    grid-column: 3/-3;
  }
}
.discover--intro {
  row-gap: var(--sp-5);
}

.discover--intro-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  grid-column: 1/-1;
}

@media all and (min-width: 768px) {
  .discover--intro-title {
    grid-column: 2/-2;
  }
}
.discover--intro-title h1 {
  text-align: center;
}

.discover--intro-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/-1;
  text-align: center;
}

@media all and (min-width: 768px) {
  .discover--intro-txt {
    grid-column: 2/-2;
  }
}
.discover--history {
  grid-column: 1/-1;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

@media all and (min-width: 1024px) {
  .discover--history {
    display: grid;
  }
}
.discover--history-content {
  padding-block: var(--sp-5);
  padding-inline: var(--sp-6);
  z-index: 1;
  border-radius: var(--br-m) var(--br-m) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media all and (min-width: 1024px) {
  .discover--history-content {
    grid-column: 1/8;
    padding-block: var(--sp-10);
    padding-inline-start: 0;
    row-gap: var(--sp-3);
    border-radius: 0 var(--br-m) var(--br-m) 0;
    display: grid;
  }
}
.discover--history-content * {
  grid-column: 2/-2;
}

.discover--history-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-image: url("/assets/medias/img/discover-history.jpeg");
  background-size: cover;
  background-position: right;
  margin-block-end: calc(var(--br-m) * -1);
}

@media all and (min-width: 1024px) {
  .discover--history-image {
    position: absolute;
    background-image: url("/assets/medias/img/discover-history.jpeg");
    background-size: cover;
    background-position: right;
    width: 100%;
    height: 100%;
    margin: 0;
    grid-column: 7/-1;
  }
}
/* ============= DIAGRAM ============= */
.discover--diagram {
  padding-block-start: 0;
}

@media all and (min-width: 1024px) {
  .discover--diagram {
    row-gap: 0;
  }
}
.diagram--abbaye {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 3/-3;
}

@media all and (min-width: 1024px) {
  .diagram--abbaye::after {
    content: "";
    display: block;
    width: 2px;
    height: calc(var(--sp-10) * 2);
    background-color: var(--color-red-100);
    margin-block-start: var(--sp-3);
  }
}
.diagram--diagonals {
  display: none;
}

@media all and (min-width: 1024px) {
  .diagram--diagonals {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    grid-column: 3/10;
    box-sizing: border-box;
  }
  .diagram--diagonals img {
    max-width: 50%;
    min-width: 50%;
    box-sizing: border-box;
  }
  .diagram--diagonals img:first-child {
    padding-inline-start: calc((100vw - var(--sp-3) * 2 - var(--spacing-grid-gap) * 10) / 18);
  }
  .diagram--diagonals img:last-child {
    padding-inline-end: calc((100vw - var(--sp-3) * 2 - var(--spacing-grid-gap) * 10) / 18);
  }
}
@media all and (min-width: 1440px) {
  .diagram--diagonals img:first-child {
    padding-inline-start: calc((100vw - var(--sp-3) * 2 - var(--spacing-grid-gap) * 10) / 28);
  }
  .diagram--diagonals img:last-child {
    padding-inline-end: calc((100vw - var(--sp-3) * 2 - var(--spacing-grid-gap) * 10) / 28);
  }
}
.diagram--step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.diagram--step::before {
  content: "";
  display: block;
  width: 2px;
  height: var(--sp-10);
  margin-block-end: var(--spacing-grid-row-gap);
  background-color: var(--color-red-100);
}

.diagram--step img {
  width: var(--sp-6);
}

@media all and (min-width: 1024px) {
  .diagram--step::before {
    height: calc(var(--sp-10) * 2);
    margin-block-start: calc(var(--sp-10) * -2);
    margin-block-end: var(--sp-3);
  }
  .diagram--step-brasserie::before,
  .diagram--step-fromagerie::before {
    height: calc(var(--sp-10) * 4);
    margin-block-start: -2px;
  }
  .diagram--step img {
    width: var(--sp-8);
  }
}
@media all and (min-width: 1024px) {
  .diagram--diagonals {
    grid-column: 3/10;
  }
  .diagram--step-abbaye {
    grid-column: 5/8;
  }
  .diagram--step-brasserie {
    grid-column: 2/5;
    grid-row: 3/5;
  }
  .diagram--step-fromagerie {
    grid-column: 8/11;
  }
}
@media all and (min-width: 1440px) {
  .diagram--diagonals {
    grid-column: 4/12;
  }
  .diagram--step-abbaye {
    grid-column: 6/10;
  }
  .diagram--step-brasserie {
    grid-column: 3/6;
  }
  .diagram--step-fromagerie {
    grid-column: 10/13;
  }
}
/* TIMELINE */
.discover--timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

@media all and (min-width: 768px) {
  .discover--timeline {
    gap: 120px;
  }
}
.discover--timeline-title {
  grid-column: 2/-2;
  text-align: center;
}

.timeline--dates {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--sp-3);
  grid-column: 2/-2;
  overflow-x: auto;
}

@media all and (min-width: 768px) {
  .timeline--dates {
    grid-column: 2/4;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
  }
}
.timeline--date-item h5 {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  text-wrap: nowrap;
}

@media all and (min-width: 768px) {
  .timeline--date-item h5 {
    font-size: var(--txt-3);
  }
}
.timeline--cards {
  display: flex;
  flex-direction: column;
  grid-column: 2/-2;
}

@media all and (min-width: 768px) {
  .timeline--cards {
    grid-column: 4/-2;
  }
}
.timeline--card-item {
  display: flex;
  flex-direction: column;
  position: relative;
}

.timeline--card-input {
  display: none;
}

.timeline--card-content {
  transform: translateY(48px);
  height: 0;
  overflow-y: visible;
  opacity: 0;
  transition: none;
}

.timeline--card-input:checked + .timeline--card-content {
  opacity: 1;
  transform: translateY(0);
  height: auto;
  transition: all 0.5s ease;
}

.timeline--card-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  grid-column: 1/-1;
}

@media all and (min-width: 1024px) {
  .timeline--card-header {
    flex-direction: column;
    gap: var(--sp-2);
    grid-column: 1/6;
  }
}
.timeline--card-header * {
  margin: 0;
}

.timeline--card-header h3 {
  margin-block-end: var(--sp-2);
  font-family: "General Sans", sans-serif;
  font-size: var(--txt-7);
  font-weight: 300;
}

.timeline--card-img {
  grid-column: 1/-1;
  aspect-ratio: 4/3;
  border-radius: var(--br-s);
}

@media all and (min-width: 1024px) {
  .timeline--card-img {
    grid-column: 6/-1;
    aspect-ratio: 1/1;
  }
}
/* COMMUNITY PAGE INTRO SECTION */
.community--intro {
  row-gap: var(--sp-5);
}

.community--intro-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}

.community--intro-txt {
  text-align: center;
}

@media all and (min-width: 768px) {
  .community--intro {
    grid-column: 3/-3;
  }
}
/* COMMUNITY PAGE LIFE SECTION */
.community--life {
  row-gap: var(--sp-5);
}

.community--life img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  border-radius: var(--br-s);
}

.community--life > div {
  display: flex;
  flex-direction: column;
  row-gap: var(--sp-2);
}

@media all and (min-width: 768px) {
  .community--life {
    grid-column: 1/-2;
  }
  .community--life img {
    grid-column: 1/4;
    height: 100%;
    border-radius: 0 var(--br-s) var(--br-s) 0;
  }
  .community--life > div {
    grid-column: 5/-1;
  }
}
@media all and (min-width: 1024px) {
  .community--life img {
    grid-column: 1/5;
    border-radius: 0 var(--br-m) var(--br-m) 0;
  }
  .community--life > div {
    grid-column: 6/-1;
  }
}
@media all and (min-width: 1440px) {
  .community--life img {
    grid-column: 1/6;
    border-radius: 0 var(--br-m) var(--br-m) 0;
  }
  .community--life > div {
    grid-column: 8/-1;
  }
}
/* COMMUNITY PAGE PRAY SECTION */
.community--agenda {
  grid-column: 1/-1;
  gap: 0px;
  row-gap: 0px;
}
.community--agenda h3, .community--agenda h4, .community--agenda p {
  color: var(--text-color-light-100);
}
.community--agenda ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-3);
}

.community--agenda-item {
  border-bottom: 1px var(--color-white-100) solid;
  padding: calc(var(--sp-3) + var(--sp-1)) var(--sp-5);
}
.community--agenda-item li {
  display: flex;
  justify-content: space-between;
}
.community--agenda-item p:first-child {
  font-weight: 600;
}

@media all and (min-width: 768px) {
  .community--pray-title, .community--pray-txt {
    text-align: center;
    grid-column: 2/-2;
  }
  .community--agenda {
    grid-column: 2/-2;
    border-radius: var(--br-m);
  }
  .community--agenda-item {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    padding: var(--sp-5) var(--sp-10);
  }
  .community--agenda-item h3 {
    align-self: center;
  }
  .community--agenda-item ul {
    padding: 0 0 0 var(--sp-3);
    border-left: 1px var(--color-white-100) solid;
  }
}
@media all and (min-width: 1440px) {
  .community--pray-title, .community--pray-txt {
    grid-column: 3/-3;
  }
  .community--agenda-item ul {
    padding-left: var(--sp-5);
  }
}
/* COMMUNITY PAGE MORE SECTION */
.community--more {
  row-gap: var(--sp-5);
}
.community--more img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  border-radius: var(--br-s);
}
.community--more h4 {
  color: var(--color-red-100);
}

.community--more-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.community--more-content div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

@media all and (min-width: 768px) {
  .community--more {
    grid-column: 3/-3;
  }
  .community--more img {
    border-radius: var(--br-m);
  }
}
@media all and (min-width: 1024px) {
  .community--more {
    grid-column: 2/-2;
  }
  .community--more div {
    grid-column: 1/6;
  }
  .community--more img {
    aspect-ratio: unset;
    height: 100%;
    border-radius: var(--br-m);
    order: 1;
    grid-column: 7/-1;
    grid-row: 1/1;
  }
}
@media all and (min-width: 1440px) {
  .community--more img {
    grid-column: 8/-1;
  }
}
/* COMMUNITY PAGE NEWS SECTION */
.community--news {
  grid-column: 1/-1;
}
.community--news ul {
  display: flex;
  gap: var(--sp-1);
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
}

.community--news-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-sizing: border-box;
  padding-inline: var(--sp-3);
  flex: 0 0 100%;
}
.community--news-item img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  border-radius: var(--br-s);
}
.community--news-item h5 {
  color: var(--color-red-100);
  font-family: var(--font-family-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--font-line-height-h1);
}
.community--news-item p:last-of-type {
  font-weight: 600;
  opacity: 0.5;
}

@media all and (min-width: 768px) {
  .community--news-title {
    grid-column: 3/-3;
  }
  .community--news {
    grid-column: 3/-3;
  }
  .community--news ul {
    gap: var(--sp-1);
    padding-bottom: 0px;
  }
  .community--news-item {
    padding-inline: 0px;
    flex: 0 0 49%;
  }
}
@media all and (min-width: 1024px) {
  .community--news-title {
    grid-column: 2/-2;
  }
  .community--news {
    grid-column: 2/-2;
  }
  .community--news ul {
    gap: var(--sp-3);
    padding-bottom: 0px;
    overflow-x: unset;
  }
  .community--news-item {
    padding-inline: 0px;
    flex: inherit;
    width: 100%;
  }
}
/* COMMUNITY PAGE CHARTE SECTION */
.community--charte div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.community--charte div p {
  width: 100%;
}
.community--charte a {
  justify-self: center;
}

@media all and (min-width: 768px) {
  .community--charte {
    grid-column: 3/-3;
  }
  .community--charte h2 {
    text-align: center;
  }
  .community--charte div {
    flex-direction: row;
    gap: var(--sp-5);
  }
}
@media all and (min-width: 1440px) {
  .community--charte {
    grid-column: 4/-4;
  }
}
.visit--activites-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

@media all and (min-width: 768px) {
  .visit--activites-header {
    display: grid;
  }
}
.activites--header-what {
  grid-column: 1/3;
}

.activites--header-title {
  grid-column: 3/-1;
}

.activites--header-txt {
  grid-column: 3/-1;
}

@media all and (min-width: 1024px) {
  .activites--header-what {
    grid-column: 1/5;
  }
  .activites--header-title {
    grid-column: 5/10;
  }
  .activites--header-txt {
    grid-column: 5/-2;
  }
}
.visit--activities-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-grid-gap);
}

@media all and (min-width: 768px) {
  .visit--activities-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (min-width: 1024px) {
  .visit--activities-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.visit--activities-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-radius: var(--br-m);
  padding: var(--sp-2);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.visit--activities-card::before {
  content: "";
  background-size: cover;
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 0;
  transition: all 0.2s ease;
}

.visit--activities-card:hover::before {
  filter: grayscale(0%);
}

.visit--activities-visit::before {
  background-image: url("../medias/img/VISITE GUIDEE 1.jpg");
}

.visit--activities-eat::before {
  background-image: url("../medias/img/image_Eat.png");
}

.visit--activities-shop::before {
  background-image: url("../medias/img/image_Shop.png");
}

.visit--activities-walk::before {
  background-image: url("../medias/img/image_Walk.png");
}

.visit--activities-parc::before {
  background-image: url("../medias/img/image_Parc.png");
}

.visit--activities-card:hover {
  transform: scale(1.02);
}

.activities--card--disabled {
  display: none;
}

@media all and (min-width: 768px) {
  .activities--card--disabled {
    opacity: 0;
    pointer-events: none;
  }
}
.activities--card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--br-s);
  box-sizing: border-box;
  background-color: white;
  z-index: 1;
}

.activities--card-title {
  margin: 0;
  color: var(--color-red-100);
}

.activities--card-txt {
  color: var(--color-red-100);
}

.visit--details-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
}

@media all and (min-width: 1024px) {
  .visit--details-list {
    gap: var(--sp-10);
    padding-block: var(--sp-10);
  }
}
.visit--details-img {
  border-radius: var(--br-m);
  aspect-ratio: 6/4;
  background-size: cover;
  grid-column: 1/7;
}

.visit--details-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  grid-column: 8/-1;
}

.visit--details-title {
  margin: 0;
}

.visit--details-item {
  scroll-margin-block-start: 120px;
}

@media all and (min-width: 1024px) {
  .visit--details-item {
    scroll-margin-block-start: 180px;
  }
}
.visit--details-item:nth-child(2n) .visit--details-img {
  grid-column: 7/-1;
}

.visit--details-item:nth-child(2n) .visit--details-content {
  grid-column: 1/6;
  grid-row: 1/2;
}

@media all and (min-width: 768px) {
  .visit--details-img {
    aspect-ratio: 6/4;
    grid-column: 1/5;
  }
  .visit--details-content {
    grid-column: 5/-1;
  }
  .visit--details-item:nth-child(2n) .visit--details-img {
    grid-column: 5/-1;
  }
  .visit--details-item:nth-child(2n) .visit--details-content {
    grid-column: 1/5;
    grid-row: 1/2;
  }
}
@media all and (min-width: 1024px) {
  .visit--details-img {
    aspect-ratio: 6/4;
    grid-column: 1/7;
  }
  .visit--details-content {
    grid-column: 8/-1;
  }
  .visit--details-item:nth-child(2n) .visit--details-img {
    grid-column: 7/-1;
  }
  .visit--details-item:nth-child(2n) .visit--details-content {
    grid-column: 1/6;
    grid-row: 1/2;
  }
}
/* SUPPORT PAGE INTRO SECTION */
.section:has(.support--intro) {
  padding-top: calc(var(--section-spacing) * 2);
}

.support--intro {
  text-align: center;
}

@media all and (min-width: 768px) {
  .support--intro {
    grid-column: 3/-3;
  }
}
@media all and (min-width: 1440px) {
  .support--intro {
    grid-column: 4/-4;
  }
}
/* SUPPORT PAGE HISTORY SECTION */
.support--history {
  grid-column: 1/-1;
  background-image: url("/assets/medias/img/gallery-home_cloche.jpg");
  background-size: cover;
  background-position: center;
}
.support--history div {
  background-color: var(--color-white-100);
  margin: var(--sp-10) var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--br-s);
  display: flex;
  flex-direction: column;
  row-gap: var(--sp-3);
}
.support--history div h3, .support--history div p {
  text-align: left;
}

@media all and (min-width: 768px) {
  .support--history {
    grid-column: 2/-2;
    border-radius: var(--br-m);
  }
  .support--history div {
    border-radius: var(--br-m);
    margin: var(--sp-10);
    align-items: center;
  }
  .support--history div h3, .support--history div p {
    text-align: center;
  }
}
@media all and (min-width: 1440px) {
  .support--history {
    grid-column: 3/-3;
  }
  .support--history div {
    padding-inline: calc(var(--sp-10) * 1.5);
  }
}
/* SUPPORT PAGE PROJECTS SECTION */
@keyframes slideXR {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
.support--projects {
  row-gap: var(--sp-10);
  scroll-timeline: --projects-timeline;
}

.support--projects-item {
  grid-column: 1/-1;
  row-gap: var(--sp-5);
}
.support--projects-item img {
  /*height: 100%; BREAKS SAFARI */
  animation: slideXR linear;
  animation-timeline: --projects-timeline;
  animation-range: cover 0% contain 25%;
  grid-column: 1/-2;
  aspect-ratio: 16/9;
  border-radius: 0 var(--br-s) var(--br-s) 0;
}
.support--projects-item div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.support--projects-item:nth-child(even) img {
  border-radius: var(--br-s) 0 0 var(--br-s);
  grid-column: 2/-1;
}

@media all and (min-width: 768px) {
  .support--projects-item img {
    height: 100%;
    grid-column: 1/5;
    border-radius: 0 var(--br-m) var(--br-m) 0;
  }
  .support--projects-item div {
    grid-column: 6/-2;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .support--projects-item:nth-child(even) img {
    grid-column: 7/-1;
    grid-row: 1/1;
    border-radius: var(--br-m) 0 0 var(--br-m);
  }
  .support--projects-item:nth-child(even) div {
    grid-row: 1/1;
    grid-column: 2/6;
  }
}
@media all and (min-width: 1024px) {
  .support--projects-item img {
    grid-column: 1/6;
  }
  .support--projects-item div {
    grid-column: 7/-2;
  }
}
@media all and (min-width: 1440px) {
  .support--projects {
    row-gap: calc(var(--sp-10) * 2);
  }
  .support--projects-item img {
    grid-column: 1/7;
  }
  .support--projects-item div {
    grid-column: 9/-2;
  }
  .support--projects-item:nth-child(even) img {
    grid-column: 9/-1;
  }
  .support--projects-item:nth-child(even) div {
    grid-column: 2/7;
  }
}
/* DONATION PAGE INTRO SECTION */
.donation--intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background-color: var(--color-white-100);
  margin-inline: calc(var(--sp-3) + var(--sp-1));
  padding: var(--sp-5);
  border-radius: var(--br-s);
  position: absolute;
  top: 40%;
}

@media all and (min-width: 768px) {
  .donation--intro {
    border-radius: var(--br-m);
  }
  .donation--intro h3, .donation--intro p {
    text-align: center;
  }
}
/* DONATION PAGE INFO SECTION */
.section:has(.donation--info) {
  padding-top: calc(var(--section-spacing) * 3);
}

.donation--info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.donation--info h4 {
  color: var(--color-red-100);
}
.donation--info ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.donation--info ul li span {
  font-weight: 500;
  font-style: italic;
}
.donation--info ~ img {
  justify-self: center;
}
.donation--info ~ hr {
  width: 100%;
  color: var(--color-black-100);
  margin: 0;
}

@media all and (min-width: 768px) {
  .donation--intro {
    margin-inline: calc(var(--sp-10) * 1.75);
  }
  .section:has(.donation--info) {
    padding-top: var(--section-spacing);
  }
  .donation--info {
    grid-column: 3/6;
  }
  .donation--info ~ img {
    grid-column: -5/-3;
  }
  .donation--info ~ hr {
    grid-column: 6/-6;
    width: 0px;
    display: block;
    justify-self: center;
  }
  .donation--info ~ p {
    grid-column: 3/-3;
  }
}
@media all and (min-width: 1024px) {
  .donation--intro {
    margin-inline: calc(var(--sp-10) * 2);
  }
  .section:has(.donation--info) {
    padding-top: cacl(var(--section-spacing)/2);
  }
  .donation--info {
    grid-column: 3/7;
  }
  .donation--info ~ img {
    grid-column: -5/-3;
  }
  .donation--info ~ hr {
    grid-column: 7/7;
  }
  .donation--info ~ p {
    grid-column: 3/-3;
  }
}
@media all and (min-width: 1440px) {
  .donation--intro {
    margin-inline: calc(var(--sp-10) * 4);
  }
  .donation--info ~ hr {
    grid-column: 9/9;
  }
}
.error {
  padding-top: calc(var(--section-spacing) * 2);
}
.error h1 {
  font-size: 10rem;
  justify-self: center;
  background: url("/assets/medias/img/Banner_Visit.jpeg"), black;
  background-size: contain;
  background-clip: text;
  color: transparent;
}
.error div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}
.error div h2, .error div p {
  color: var(--text-color-100);
}
.error div button {
  border: none;
  background-color: var(--color-green-100);
}
.error div button p {
  color: var(--text-color-light-100);
}

@media all and (min-width: 768px) {
  .error h1 {
    font-size: 20rem;
  }
  .error div {
    gap: var(--sp-3);
  }
}
@media all and (min-width: 1024px) {
  .error {
    padding-top: calc(var(--section-spacing));
  }
  .error h1 {
    font-size: 30rem;
  }
}
@media all and (min-width: 1440px) {
  .error div {
    gap: var(--sp-5);
  }
}
.section:has(.guided-visits--intro) {
  padding-top: calc(var(--section-spacing) * 2);
}

.guided-visits--intro {
  row-gap: var(--sp-5);
}

.guided-visits--intro-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  grid-column: 1/-1;
}

@media all and (min-width: 768px) {
  .guided-visits--intro-title {
    grid-column: 2/-2;
  }
}
.guided-visits--intro-title h1 {
  text-align: center;
}

.guided-visits--intro-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/-1;
  text-align: center;
}

@media all and (min-width: 768px) {
  .guided-visits--intro-txt {
    grid-column: 2/-2;
  }
}
.guided-visits--book h2 {
  padding-block-end: var(--sp-2);
}

.book--smallGroups {
  grid-column: 2/-2;
}
.book--smallGroups h3 {
  padding-bottom: var(--sp-5);
}

.book--bigGroups {
  grid-column: 2/-2;
}
.book--bigGroups h3 {
  padding-bottom: var(--sp-2);
}

@media all and (min-width: 1024px) {
  .guided-visits--book h2 {
    padding-block-end: var(--sp-6);
  }
  .book--smallGroups {
    grid-column: 2/6;
  }
  .book--bigGroups {
    grid-column: 7/-2;
  }
}
@media all and (min-width: 1440px) {
  .book--smallGroups {
    grid-column: 2/7;
  }
  .book--bigGroups {
    grid-column: 8/-2;
  }
}
.section:has(.guided-visits--eat) {
  padding-block-end: calc(var(--section-spacing) * 2 + var(--br-m));
}

.guided-visits--eat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-image: url(../medias/img/casse-croute.jpg);
  background-size: cover;
  background-position: center;
  padding: var(--sp-10) var(--sp-2);
  border-radius: var(--br-m);
  grid-column: 2/-2;
}

.guided-visits--eat-link {
  background-color: var(--color-white-100);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--br-l);
  transition: all 0.2s ease;
  text-align: center;
}

.guided-visits--eat-link * {
  color: var(--color-red-100);
  font-size: var(--txt-2);
  font-weight: 700;
  transition: all 0.2s ease;
}

@media all and (min-width: 768px) {
  .guided-visits--eat {
    grid-column: 3/-3;
  }
  .guided-visits--eat-link {
    padding: var(--sp-3) var(--sp-5);
  }
  .guided-visits--eat-link * {
    font-size: var(--txt-3);
  }
}
@media all and (min-width: 1024px) {
  .guided-visits--eat {
    padding: calc(var(--sp-10) * 2) var(--sp-2);
  }
}
/* DYNAMIC */
.guided-visits--eat-link:hover {
  background-color: var(--color-red-100);
}

.guided-visits--eat-link:hover * {
  color: var(--color-white-100);
  font-weight: 700;
}

.guided-visits--book {
  background-color: var(--color-olive-500);
}

/* Form */
.guided-visits--form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.guided-visits--form section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.guided-visits--form button {
  color: var(--color-red-100);
  font-family: var(--font-family-p);
}
.guided-visits--form button:hover {
  color: var(--color-white-100);
}

.guided-visits--form fieldset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  border: 0;
}

.guided-visits--form fieldset legend {
  font-family: var(--font-family-h5);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--font-line-height-h5);
  color: var(--text-color-100);
  padding-block: var(--sp-2);
}

.guided-visits--form fieldset p {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
  width: 100%;
}

.guided-visits--form fieldset p input,
.guided-visits--form fieldset p select {
  width: 100%;
  border: 0;
  padding: var(--sp-1) var(--sp-2);
  box-sizing: border-box;
}

.form--label {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--font-line-height-p);
  color: var(--text-color-100);
}

.form--visit-type p {
  flex-direction: row !important;
  gap: var(--sp-2) !important;
}

.form--visit-type p input {
  width: auto !important;
  cursor: pointer;
}

.guided-visits--information {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.guided-visits--notice {
  font-weight: 600;
}

.guided-visits--form select {
  font: inherit;
  color: var(--text-color-100);
  background-color: var(--color-white-100);
}

.info-contact {
  background-color: var(--color-olive-500);
  padding-block-start: var(--sp-6);
}

@media all and (min-width: 1024px) {
  .info-contact {
    padding-block: 0;
  }
}
.info-contact--map {
  position: relative;
  width: 100%;
  grid-column: 1/-1;
}

.info-contact--POI {
  grid-column: 2/-2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

@media all and (min-width: 768px) {
  .info-contact--map {
    grid-column: 1/-1;
  }
  .info-contact--POI {
    grid-column: 3/-3;
  }
}
@media all and (min-width: 1024px) {
  .info-contact--map {
    grid-column: 1/7;
  }
  .info-contact--POI {
    grid-column: 7/-2;
  }
}
@media all and (min-width: 1440px) {
  .info-contact--map {
    grid-column: 1/9;
  }
  .info-contact--POI {
    grid-column: 10/-2;
  }
}
.POI--list {
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--br-m);
  box-sizing: border-box;
}

@media all and (min-width: 768px) {
  .POI--list {
    padding: var(--sp-4);
  }
}
.POI--item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border-radius: var(--br-s);
  background-color: var(--color-olive-500);
  padding: var(--sp-2) var(--sp-2);
  box-sizing: border-box;
}

@media all and (min-width: 768px) {
  .POI--item {
    padding: var(--sp-2) var(--sp-4);
  }
}
.POI--header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

.POI--icon {
  width: var(--sp-5);
  height: var(--sp-5);
}

.POI--name {
  font-weight: 800;
  font-size: var(--txt-2);
  color: var(--color-red-100);
}

@media all and (min-width: 768px) {
  .POI--icon {
    width: var(--sp-6);
    height: var(--sp-6);
  }
  .POI--name {
    font-size: var(--txt-3);
  }
}
.accessibility--title {
  text-align: center;
  padding-block-end: var(--sp-10);
}

.accessibility--list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-grid-gap);
  row-gap: var(--sp-6);
  grid-column: 2/-2;
}

@media all and (min-width: 768px) {
  .accessibility--list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-column: 2/-2;
  }
}
@media all and (min-width: 1024px) {
  .accessibility--list {
    grid-column: 3/-3;
  }
}
.accessibility--item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
}

.accessibility--header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.accessibility--icon {
  width: var(--sp-8);
  height: var(--sp-8);
}

.accessibility-points--list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.accessibility-points--item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

.accessibility-points--item::before {
  content: "";
  width: var(--sp-2);
  height: var(--sp-2);
  display: block;
  border-radius: var(--br-m);
}

.accessibility-points--no::before {
  background-color: var(--color-red-100);
}

.accessibility-points--yes::before {
  background-color: var(--color-green-100);
}