:root {
  --accessibility-arguments-grid-template: 1fr;
  --list-padding: 5vw;
  --argument-corner-size: 4vh;
  --argument-corner-width: 3px;
  --argument-padding: 3vh 6vw;
  --argument-gap: 1.5vh;
  --habilitation-and-partner-grid-template-column: repeat(5, 1fr);
  --habilitation-and-partner-column-gap: 2vw;
  --habilitation-and-partner-row-gap: 1vh;
  --habilitation-and-partner-padding: 1vh 2vw;
  --rates-grid-template: 1fr;
  --rate-card-grid-gap: 3vh 2vw;
  --rate-card-padding: 3vh 4vw;
  --rate-card-header-gap: 2vw;
  --rate-card-gap: 4vh;
  --rate-card-figure-padding: 15px;
  --progress-circle-width: 50%;
  --testimony-card-padding: 3vh 6vw;
  --testimonial-gap: 2vw;
  --testimonial-row-gap: 4vh;
  --arrow-squarred-button-padding: 0.2vh 4vw;
  --testimony-card-gap: 3vh;
  --small-svg-width: 6vw;
  --medium-svg-width: 8vw;
  --big-svg-width: 10vw;
  --testimony-rate-padding: 1.5vh 2vw;
  --testimony-rate-gap: 1.5vw;
}

#hero {
  position: relative;
}

.hero-media img {
  object-fit: cover;
  object-position: 70% 50%;
  width: 100vw;
  aspect-ratio: 1;
}

.hero-content {
  position: absolute;
  z-index: 1;
  top: 0;
  padding: 5vh 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.hero-content h1 {
  padding-left: 7vw;
  padding-right: 3vw;
  border-radius: 0 100px 100px 0;
  background-color: rgba(255, 255, 255, 0.7);
  width: fit-content;
}

.hero-content h1 span {
  font-size: var(--display-medium-font-size);
  line-height: var(--display-medium-line-height);
}

.hero-content h1 span:nth-child(odd) {
  color: #f28a1c;
}

.hero-content h1 span:nth-child(even) {
  color: #0066cc;
}

#hero-contact {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1vh 7vw;
  background-color: rgba(255, 255, 255, 0.7);
}

#hero-contact span {
  padding: 0 1vw;
  color: #484646;
  width: max-content;
  text-align: center;
  overflow-x: hidden;
  font-weight: var(--bold-weight);
  font-size: var(--headline-small-font-size);
  line-height: var(--headline-small-line-height);
}

.content_section {
  padding: 7.5vh 10vw;
}

.content_section--title {
  font-size: var(--display-small-font-size);
  line-height: var(--display-small-line-height);
  border-left: 1.5px solid var(--primary);
  padding-left: 2vw;
  margin-bottom: 1.5rem;
}

.content_section--subtitle {
  font-size: var(--headline-large-font-size);
  line-height: var(--headline-large-line-height);
  margin-bottom: 1rem;
}

.content_section--body {
  margin-bottom: 0.75rem;
}

#our-commitments p,
#our-commitments span {
  font-size: var(--headline-medium-font-size);
  line-height: var(--headline-medium-line-height);
}

#our-commitments p span {
  font-weight: var(--bold-weight);
  color: var(--primary);
}

#accessibility {
  background-color: var(--secondary-container);
}

.accessibility-link {
  color: var(--secondary);
  font-weight: var(--bold-weight);
  text-decoration: underline;
}

#accessibility #arguments {
  display: grid;
  gap: 2vh;
  grid-template-columns: var(--accessibility-arguments-grid-template);
}

#accessibility ul {
  font-size: var(--body-large-font-size);
  line-height: var(--body-large-line-height);
  list-style-type: none;
  text-align: center;
}

#accessibility ul span {
  color: var(--secondary);
  font-weight: var(--bold-weight);
}

#accessibility #arguments article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: start;
  justify-content: start;
  gap: var(--argument-gap);
  height: 100%;
  min-height: 30vh;
  border: var(--argument-corner-width) solid var(--primary);
  padding: var(--argument-padding);
  background-color: var(--secondary-container) content-box;
  mask:
    conic-gradient(#000 0 0) content-box,
    conic-gradient(at var(--argument-corner-size) var(--argument-corner-size),
      #0000 75%,
      #000 0) 0 0 / calc(100% - var(--argument-corner-size)) calc(100% - var(--argument-corner-size));
}

#accessibility svg {
  align-self: center;
  justify-self: center;
  fill: var(--secondary);
  stroke: unset;
  width: 40%;
  flex: 1;
}

#projects #posts-container,
#blogs #posts-container {
  display: grid;
  gap: 2vh;
}

.post_card {
  background-color: var(--surface-container);
  padding: 1rem 2rem;
  border-radius: 2px;
}

.post_card--body {
  display: grid;
  gap: 0.5rem;
}

.post_card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  padding: 2rem;
  aspect-ratio: 1;
}

.post_card h4 {
  color: var(--secondary);
}

.post_card a {
  color: var(--primary);
  font-weight: var(--bold-weight);
  text-align: right;
}

#badges div,
#habilitations div,
#partners div {
  display: grid;
  column-gap: var(--habilitation-and-partner-column-gap);
  row-gap: var(--habilitation-and-partner-row-gap);
  grid-template-columns: var(--habilitation-and-partner-grid-template-column);
  grid-template-rows: auto;
}

#badges div {
  grid-template-columns: 1fr;
}

#badges figure,
#habilitations figure,
#partners figure {
  background-color: #fff;
  display: flex;
  justify-items: center;
  align-items: center;
  padding: var(--habilitation-and-partner-padding);
  border-radius: var(--corner-radius);
  width: 100%;
}

#badges article {
  display: flex;
  gap: 1vh;
  flex-direction: column;
}

#badges img,
#habilitations img,
#partners img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.button-badge {
  background-color: var(--primary-container);
  border: 1px solid var(--primary);
  color: var(--on-primary-container);
  padding: 1px 2px;
  border-radius: 100px;
  font-weight: 600;
  text-align: center;
  font-size: var(--body-medium-font-size);
  line-height: var(--body-medium-line-height);
}

.button-badge::after {
  content: "Voir le badge";
}

.surface-container-var {
  background-color: var(--surface-container-var);
}

.testimonial-carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
}

.testimonial-button:first-child {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.testimonial-button:last-child {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

#testimonials-container {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  min-height: 90vh;
  overflow: hidden;
}

.testimonial-button:first-child svg {
  transform: rotateZ(180deg);
}

.testimonial-button {
  position: relative;
  padding: 8px 20px;
  background-color: var(--secondary);
  border: none;
  border-radius: 4px;
  width: fit-content;
}

.testimonial-button:disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.testimonial-button svg {
  fill: var(--on-secondary);
  stroke: none;
  width: 12px;
}

.testimony-card {
  position: absolute;
  width: 100%;
  max-width: 100%;
  background-color: var(--surface-container);
  border-radius: var(--corner-radius);
  padding: 15px 16px;
  gap: 15px;
  display: grid;
}

.testimony-inactive-l {
  transform: translateX(-150%);
  opacity: 0;
}

.testimony-inactive-r {
  transform: translateX(150%);
  opacity: 0;
}

.testimony-exit-left {
  animation: exit-to-left 1000ms ease-out forwards;
}

.testimony-exit-right {
  animation: exit-to-right 1000ms ease-out forwards;
}

.testimony-enter-from-left {
  animation: enter-from-left 1000ms ease-out forwards;
}

.testimony-enter-from-right {
  animation: enter-from-right 1000ms ease-out forwards;
}

.testimony-header {
  display: grid;
  grid-template-columns: 1fr 2.5fr 1.5fr;
  justify-items: center;
  align-items: center;
}

.testimony-header svg {
  width: 26px;
  fill: var(--secondary);
  stroke: var(--secondary);
}

.testimony-header h5 {
  text-decoration: underline var(--primary) 1px solid;
  text-underline-offset: 5px;
  text-align: center;
}

.testimony-rate {
  display: flex;
  background-color: var(--surface);
  width: min-content;
  justify-self: end;
  padding: 10px;
  gap: 12px;
  border-radius: var(--corner-radius);
}

.testimony-rate svg {
  width: 20px;
}

#satisfactions>div {
  display: grid;
  padding: 0 10vw;
  grid-template-columns: var(--rates-grid-template);
  justify-content: space-evenly;
  justify-items: center;
  align-items: center;
  gap: var(--rate-card-grid-gap);
}

.rate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--rate-card-padding);
  gap: var(--rate-card-gap);
  background-color: var(--surface-container);
}

.rate-card-header {
  display: flex;
  justify-items: center;
  align-items: center;
  gap: var(--rate-card-header-gap);
}

.rate-card-header figure {
  width: 25%;
  aspect-ratio: 1;
  background-color: white;
  border-radius: 100%;
  overflow: hidden;
  padding: var(--rate-card-figure-padding);
  border: 1px solid var(--secondary);
  display: flex;
  justify-items: center;
}

.rate-card-header img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.progress-circle {
  align-self: center;
  aspect-ratio: 1;
  width: var(--progress-circle-width);
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--primary) 0,
      var(--primary) var(--progress, 0%),
      transparent var(--progress, 0%),
      transparent 100%) var(--primary-container);
  animation: progress-fill 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes progress-fill {
  from {
    --progress: 0%;
  }

  to {
    --progress: var(--percent);
  }
}

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.progress-overlay {
  top: 50%;
  left: 50%;
  display: flex;
  position: absolute;
  background: var(--surface-container);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  width: calc(100% - 15px);
  height: calc(100% - 15px);
}

@media (min-width: 768px) {
  :root {
    --accessibility-arguments-grid-template: 1fr 1fr;
    --argument-padding: 2.5vh 4vw;
    --argument-gap: 2vh;
    --rates-grid-template: repeat(2, min(38vw, 300px));
    --rate-card-padding: 1.5vh 2vw;
    --small-svg-width: 2vw;
    --medium-svg-width: 4vw;
    --big-svg-width: 5vw;
    --rate-card-figure-padding: 20px;
    --progress-circle-width: 40%;
    --arrow-squarred-button-padding: 0.2vh 3vw;
  }

  .hero-media img {
    aspect-ratio: 3/2;
  }

  .content_section--title {
    padding-left: 1vw;
  }

  #accessibility svg {
    width: 30%;
  }

  #projects #posts-container,
  #blogs #posts-container {
    grid-template-columns: repeat(2, 1fr);
  }

  #satisfactions>div {
    padding: unset;
  }

  #projects article:nth-child(even),
  #blogs article:nth-child(even) {
    transform: translateY(20vh);
  }

  #projects,
  #blogs {
    margin-bottom: 10vh;
  }

  #badges div {
    grid-template-columns: repeat(2, 1fr);
  }

  .button-badge {
    padding: 6px 24px;
  }

}

#testimonials-container {
  grid-column: unset;
  grid-row: unset;
  min-height: 70vh;
}

.testimonial-carousel {
  grid-template-columns: 1fr 5fr 1fr;
}

.testimonial-button {
  height: min-content;
  align-self: center;
  justify-self: center;
  cursor: pointer;
}

.testimonial-button:first-child {
  grid-column: unset;
  grid-row: unset;
}

.testimonial-button:last-child {
  grid-column: unset;
  grid-row: unset;
}

.testimony-header svg {
  width: 39px;
  justify-self: start;
}

.testimony-header span {
  justify-self: end;
}

.testimony-card {
  gap: 30px;
}

@media (min-width: 1024px) {
  :root {
    --argument-padding: 2vh 3vw;
    --argument-gap: 2.5vh;
    --habilitation-and-partner-grid-template-column: repeat(10, 1fr);
    --habilitation-and-partner-column-gap: 0.5vw;
    --habilitation-and-partner-padding: 0.5vh 0.75vw;
    --rates-grid-template: repeat(2, min(38vw, 400px));
    --rate-card-padding: 3vh 2vw;
    --rate-card-gap: 3vh;
    --rate-card-figure-padding: 5%;
    --arrow-squarred-button-padding: 0.2vh 2vw;
    --testimony-card-padding: 1vh 1.5vw;
    --testimony-rate-gap: 1vw;
    --testimony-rate-padding: 1vh 1.5vw;
  }

  .hero-media img {
    aspect-ratio: 16/6;
  }

  .hero-content {
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
  }

  #accessibility svg {
    width: 20%;
  }

  #posts-container {
    padding: 0 5vw;
  }

  #projects,
  #blogs {
    margin-bottom: 12vh;
  }

  .post_card--body {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "a b b b"
      "c c c c"
      "d d d d";
  }

  .post_card--body figure {
    grid-area: a;
  }

  .post_card img {
    padding: unset;
  }

  .post_card--body h4 {
    grid-area: b;
    align-self: center;
  }

  .post_card--body p {
    grid-area: c;
  }

  .post_card--body a {
    grid-area: d;
  }

  #badges div {
    grid-template-columns: repeat(5, 1fr);
  }

  .button-badge {
    padding: 4px 6px;
    transition:
      background-color 0.2s,
      color 0.2s,
      border-color 0.2s;
  }

  .button-badge:hover {
    background-color: var(--primary);
    border-color: var(--primary-container);
    color: var(--on-primary);
  }

  .button-badge::after {
    content: "Voir le badge";
  }

  .testimonial-carousel {
    grid-template-columns: 1fr 4fr 1fr;
  }

  .testimonial-button:disabled {
    cursor: unset;
  }

  #testimonials-container {
    grid-column: unset;
    grid-row: unset;
    min-height: 60vh;
  }
}