@charset "UTF-8";
:root {
  scroll-padding-top: 75px;
}

body {
  --bs-primary: #e79D2E;
  --bg-primary: #e79D2E;
  --bs-btn-bg: #e79D2E;
  --bs-btn-active-bg: #e79D2E;
  --body-color: #555;
  --bs-primary-rgb: 231, 157, 46;
  --color-lightgray: rgb(200,200,200);
}

main {
  padding-block: 2.5rem;
}
main > section:not(:last-of-type):not(:empty) {
  margin-bottom: 3rem;
}

/* FONTS */
/* COLORS */
/* GRADIENTS */
/* BREAKPOINTS */
.stickers {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 5vw, 1.5rem);
}

/* 
Un sticker a :

- border-radius
- un titre
- optionnellement, un badge coloré en orange avec un chiffre dedans
- une taille variable

*/
.sticker {
  --sticker-bg-color: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  border: none;
  border-radius: 10px;
  padding: clamp(0.5rem, 3vw, 2rem);
  cursor: pointer;
  background-color: var(--sticker-bg-color);
  font-size: clamp(1rem, 3vw, 1.3rem);
}
.sticker:hover {
  scale: 1.01;
}
.sticker__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Margarine, sans-serif;
  font-size: 1.5em;
  margin: 0;
}
.sticker__title > .fa-solid.fa-wifi {
  rotate: 45deg;
}
.sticker__description {
  font-size: clamp(0.7em, 3vw, 1rem);
}
.sticker__badge {
  position: absolute;
  inset: 0 0 auto auto;
  transform: translate(15%, -15%);
  text-align: center;
  color: white;
  display: block;
  min-width: clamp(2.4em, 12vw, 2.75em);
  padding-block: clamp(0px, 5vw - 16px, 4px);
  background-color: var(--bs-primary);
  border-radius: 100px;
  border: 3px solid var(--sticker-bg-color);
}

.sticker--garden {
  --sticker-bg-color: #ABD934;
  margin-bottom: 1rem;
}
.sticker--garden .sticker__title {
  color: white;
}
.sticker--garden .sticker__content {
  color: green;
}
.sticker--garden .call-to-action {
  display: flex;
  gap: 0.75em;
  position: absolute;
  inset: 100% auto auto 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 0.75em;
  color: black;
  white-space: nowrap;
  background-color: white;
  padding: 0.4rem 2rem;
  border-radius: 100px;
  box-shadow: 0 0 5px lightgray;
}
.sticker--garden .call-to-action > img {
  width: 0.9em;
  rotate: -25deg;
}

.sticker--agribac .sticker__title {
  color: black;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.sticker--agribac .sticker__title .rounded-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.5rem, 3vw, 1rem);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  padding: 0.35rem 0.75em;
  background-color: #578F31;
}
.sticker--agribac .devices-data {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
}
.sticker--agribac .device-data__svg svg {
  width: clamp(80px, 15vw, 120px);
}
.sticker--agribac .device-data__text {
  white-space: nowrap;
  max-width: 50px;
}

.sticker--member {
  background-color: white;
  border: none;
  box-shadow: 0 2px 5px 2px var(--color-lightgray);
  border-radius: 10px;
  padding: clamp(0.5rem, 3vw, 2rem);
}
.sticker--member .sticker__title {
  color: var(--bs-primary);
  justify-content: center;
}

/* Start - DEVICE DATA */
.device-data {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: black;
  opacity: 0;
  scale: 1;
  transition: opacity 500ms, scale 250ms;
}
.device-data--garden {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
  color: rgb(50, 50, 50);
  font-weight: bold;
  opacity: 1;
}
.device-data--garden > svg {
  height: clamp(30px, 8vw, 50px);
  width: auto;
  aspect-ratio: 1;
  fill: var(--path-color);
}
.device-data--garden > svg > path[fill-rule=evenodd] {
  fill: rgb(50, 50, 50);
}
.device-data--garden > svg > :not(path[fill-rule=evenodd]) {
  fill: var(--path-color);
}
.device-data--garden > p {
  margin: 0;
}
.device-data__svg {
  /* Obtenu grâce à element.getTotalLength() */
  --path-length: 645px;
  --default-fill-color: #B2B2B2;
  position: relative;
  aspect-ratio: 1;
  isolation: isolate;
  width: fit-content;
}
.device-data__svg .device-data__marker {
  --min-angle: -45deg;
  --max-angle: 225deg;
  --angle-gap: calc(var(--max-angle) - var(--min-angle));
  --angle: calc(var(--angle-gap) * var(--fill-percentage, 0) / 100 + var(--min-angle));
  --offset: 2px;
  --height: 35%;
  fill: var(--path-color);
  position: absolute;
  top: calc(50% - (50% - var(--css-stroke-width) / 2 + var(--offset)) * sin(var(--angle)));
  left: calc(50% - (50% - var(--css-stroke-width) / 2 + var(--offset)) * cos(var(--angle)));
  translate: -50% -50%;
  /* rotate : calc(var(--angle) - 90deg); */
  height: var(--height);
}
.device-data__svg svg {
  width: 80px;
}
.device-data__icon {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  font-size: 1.65rem;
}
.device-data__text {
  position: absolute;
  top: 50%;
  translate: 0% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  margin-bottom: 0;
}
.device-data__text > :first-child {
  max-width: 60px;
  font-weight: 700;
}
.device-data > :first-child path:nth-child(1) {
  stroke: var(--default-fill-color);
}
.device-data > :first-child path:nth-of-type(2) {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: calc(var(--path-length) * (100 - var(--fill-percentage)) / 100);
}

button.device-data {
  background-color: transparent;
  padding: 0;
  border: none;
}

.membership-notice {
  position: relative;
  border: 2px dotted grey;
  border-radius: 20px;
  background-color: rgb(241, 241, 241);
  padding: 1rem 1rem 2rem 1rem;
  margin-bottom: 1rem;
}
.membership-notice__btn {
  position: absolute;
  inset: 100% auto auto 50%;
  translate: -50% -50%;
  border-radius: 25px;
  border: none;
  padding: 0.4rem 4.5rem;
  color: white;
  font-weight: bold;
  background: linear-gradient(-90deg, rgb(147, 191, 32), rgb(184, 231, 62));
  transition: transform 0.2s; /* Animation */
}
.membership-notice__btn:hover {
  color: white;
  background: linear-gradient(90deg, rgba(251, 255, 0, 0.5), transparent), var(--main-color);
  --main-color: var(--bs-primary);
  transform: scale(1.2);
}

.support-form {
  --form-accent-bg-color: #ABD934;
  --form-accent-gradient: linear-gradient(-90deg, #93BF20, #B8E73E);
  --form-accent-txt-color: #ABD934;
  background-color: rgb(240, 240, 240);
  padding: clamp(15px, 3vw, 30px);
  border-radius: 15px;
  max-width: 600px;
  margin-inline: auto;
}
.support-form > *:not(:last-child) {
  margin-bottom: 15px;
}
.support-form__footer > *:not(:last-child) {
  margin-bottom: 10px;
}
.support-form__footer .form-label {
  color: black;
}
.support-form .amount-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 10px;
  text-align: center;
}
.support-form .amount-choice {
  border: 2px solid grey;
  border-radius: 5px;
}
.support-form .amount-choice input {
  appearance: none;
}
.support-form .amount-choice label {
  display: inline-block;
  width: 100%;
  padding: 5px;
  cursor: pointer;
}
.support-form .amount-choice label:has(+ input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.support-form .amount-choice:has(input:checked) {
  color: white;
  border: none;
  background-color: var(--form-accent-bg-color);
}
.support-form .amount-choice:focus-within {
  /* A NE PAS SUPPRIMER - Accessibilité */
  outline: 3px solid lightblue;
}
.support-form .amount-choice--custom {
  padding: 0;
  position: relative;
}
.support-form .amount-choice--custom::before {
  position: absolute;
  content: "€";
  display: block;
  inset: 50% auto auto 0.5rem;
  transform: translateY(-50%);
}
.support-form .amount-choice--custom > input {
  appearance: none;
  border: none;
  text-align: center;
  font-weight: bold;
  width: 100%;
  border-radius: 5px;
  height: 100%;
  color: var(--form-accent-txt-color);
}
.support-form button[type=submit] {
  border: none;
  border-radius: 5px;
  background: var(--form-accent-gradient);
  color: white;
  padding: 0.5em;
}
.support-form .switch {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  background-color: rgb(225, 225, 225);
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  padding: 8px;
}
.support-form .switch-option {
  border-radius: 10px;
  color: var(--form-accent-txt-color);
  font-weight: bold;
  border: none;
  background-color: transparent;
  z-index: 1;
}
.support-form .switch-option > input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.support-form .switch-option > label {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding-block: 8px;
}
.support-form .switch-option:has(input:checked) {
  color: white;
}
.support-form .switch-option:focus-within {
  /* A NE PAS SUPPRIMER - Accessibilité */
  outline: 3px solid lightblue;
}
.support-form .switch::before {
  content: "";
  position: absolute;
  top: 8px;
  right: auto;
  bottom: 8px;
  width: calc(50% - 8px);
  border-radius: 10px;
  background-color: var(--form-accent-bg-color);
  transition: left 250ms, background-color 250ms;
}
.support-form:has(.switch > :first-child > input:checked) {
  --form-accent-bg-color: #ABD934;
  --form-accent-gradient: linear-gradient(-90deg, #93BF20, #B8E73E);
  --form-accent-txt-color: #ABD934;
}
.support-form:has(.switch > :first-child > input:checked) .switch::before {
  left: 8px;
}
.support-form:has(.switch > :first-child > input:checked) #donation-amounts > :last-child {
  display: none;
}
.support-form:has(.switch > :last-child > input:checked) {
  --form-accent-bg-color: #E99F13;
  --form-accent-gradient: linear-gradient(-90deg, #E99F13, #F1DC1C);
  --form-accent-txt-color: #E99F13;
}
.support-form:has(.switch > :last-child > input:checked) .switch::before {
  left: 50%;
}
.support-form:has(.switch > :last-child > input:checked) #donation-amounts > :first-child {
  display: none;
}

.registration-form {
  background-color: rgb(240, 240, 240);
  padding: clamp(1rem, 4vw, 2rem);
  background-color: rgb(240, 240, 240);
  padding: clamp(15px, 3vw, 30px);
  border-radius: 15px;
}
.registration-form > *:not(:last-child) {
  margin-bottom: 15px;
}
.registration-form__footer > *:not(:last-child) {
  margin-bottom: 10px;
}
.registration-form button[type=submit] {
  border: none;
  border-radius: 5px;
  background: linear-gradient(90deg, rgb(184, 231, 62) 0%, rgb(147, 191, 32) 50%);
  color: white;
  width: 100%;
  padding: 0.5em;
}

.btn-garden {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  padding: 0.5rem 2rem;
  color: white;
  border: none;
  border-radius: 100px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  background-color: #ABD934;
}
.btn-garden:hover {
  background-color: #ABD934;
}

.lab-btn-white {
  display: inline-block;
  background-color: white;
  color: #578F31;
  border-radius: 100px;
  text-align: center;
  padding: 8px 16px;
  font-weight: bold;
  font-size: clamp(0.85em, 3vw, 1em);
  white-space: nowrap;
}

.gardenapp-index .page-subtitle {
  color: black;
}
.gardenapp-index .page-title {
  color: black;
  margin-bottom: 0;
}
.gardenapp-index .paginator {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  margin-top: 3rem;
}
.gardenapp-index .paginator__btn {
  box-sizing: content-box;
  display: block;
  height: 1em;
  aspect-ratio: 1;
  background-color: transparent;
  text-align: center;
  line-height: 1;
  margin-inline: auto;
  padding: 0.4rem;
  border: 3px solid black;
  border-radius: 100px;
}
.gardenapp-index .paginator__count {
  text-align: center;
  font-weight: bold;
}

main:has(.gardenapp-garden) {
  background-color: #99c034;
}
main:has(.gardenapp-garden) .gardenapp-garden > div {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
main:has(.gardenapp-garden) .page-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: white;
}
main:has(.gardenapp-garden) .page-title > span:nth-child(2) {
  font-size: 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #578F31;
}
main:has(.gardenapp-garden) .back-to-previous {
  color: white;
}
main:has(.gardenapp-garden) #agribac-image {
  max-width: clamp(110px, 25vw, 300px);
}
main:has(.gardenapp-garden) #garden-team-button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 2rem;
  color: white;
  border: none;
  border-radius: 100px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  background-color: #ABD934;
}
main:has(.gardenapp-garden) #garden-team-button .team-members-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  min-width: 2ch;
  max-height: 2ch;
  aspect-ratio: 1;
  padding: 5px;
  background-color: #578F31;
  border-radius: 100%;
  font-size: 1em;
  font-weight: bolder;
  line-height: 1;
}
main:has(.gardenapp-garden) .garden-tasks {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
main:has(.gardenapp-garden) .garden-tasks .garden-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
  text-align: left;
  color: black;
  border: none;
  background-color: white;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 1.5rem);
}
main:has(.gardenapp-garden) .garden-tasks .garden-task > :nth-child(2) {
  flex-grow: 1;
}
main:has(.gardenapp-garden) .garden-tasks .garden-task:not(:last-child) {
  border-bottom: 1px solid black;
}
main:has(.gardenapp-garden) .garden-tasks > *:first-child {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
main:has(.gardenapp-garden) .garden-tasks > *:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Start - REGISTRATION-PAGE */
main:has(.registration-page) {
  background: rgb(184, 231, 62);
  background: linear-gradient(90deg, rgb(184, 231, 62) 0%, rgb(147, 191, 32) 50%);
}

.registration-page__title {
  position: relative;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 4rem;
  max-width: fit-content;
  margin-inline: auto;
  font-size: clamp(3rem, 9vw, 4rem);
}
.registration-page__title > .highlighted {
  font-weight: bold;
  font-family: "Margarine", sans-serif;
}
.registration-page__title > .decorative-img {
  position: absolute;
  max-width: 50px;
  box-sizing: content-box;
}
.registration-page__title > img:first-of-type {
  inset: calc(100% - 25px) calc(100% + 25px) auto auto;
}
.registration-page__title > img:last-of-type {
  inset: calc(50% - 25px) auto auto calc(100% + 25px);
  transform: scaleX(-1);
}

@media screen and (max-width: 900px) {
  .registration-page__title > img {
    display: none;
  }
}
.form-wrapper {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
}
.form-wrapper .registration-form {
  z-index: 1;
  grid-column: 1/3;
  grid-row: 1;
}
.form-wrapper .img-wrapper {
  grid-column: 2/4;
  grid-row: 1;
}
.form-wrapper .img-wrapper > img {
  height: 100%;
  object-fit: cover;
  border-radius: 0 15px 15px 0;
}
@media screen and (max-width: 900px) {
  .form-wrapper {
    display: block;
  }
  .form-wrapper .img-wrapper {
    display: none;
  }
}

.login-form button.lab-btn-register {
  border: none;
  background: none;
}

.login-form button.lab-btn-register a {
  color: white;
  text-align: center;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(251, 255, 0, 0.45), transparent), var(--bs-primary);
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  padding: 0.5rem min(2vw, 3rem);
}

/*# sourceMappingURL=gardenapp.output.css.map */