@charset "UTF-8";
/**
 * Style principal du thu00e8me Don en Famille (frontend)
 * Du00e9veloppu00e9 par JmSilone @lagenceoueb
 * Le : 2025-05-23
 *
 * @since 1.0.0
 */
:root :where(.is-layout-flow) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

footer, main#wp--skip-link--target {
  margin-block-start: 0 !important;
}

.--position-relative {
  position: relative !important;
}

.--z-index-1 {
  z-index: 2 !important;
  pointer-events: none;
}

.--z-index--999 {
  z-index: 999 !important;
  position: relative !important;
}

.--def-header {
  background-size: min(760px, 47%) auto !important;
  background-position: bottom right !important;
  max-height: 760px !important;
  position: relative !important;
  z-index: 1 !important;
}
.--def-header--left {
  background-position: bottom left !important;
  background-size: auto 443px !important;
  position: relative !important;
  z-index: 0 !important;
}
.--def-header--left_button {
  z-index: 3 !important;
  position: relative !important;
}

.--def-full-left-bg {
  background-size: min(600px, 47%) auto !important;
  background-position: bottom left !important;
}

.--def-full-right-bg {
  background-position: bottom right !important;
  background-size: max(917px, 80%) auto !important;
}

/*--- share icons social share ---*/
div.wpsr-counter,
span.sr-share-menu {
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.sr-pad > * {
  margin-right: 0;
}

.sr-pad {
  gap: 0.3rem;
  justify-content: flex-end;
  transform: translateX(0.6rem);
}

.wpsr-share-icons.wpsr-flex-center .wpsr-si-inner {
  justify-content: flex-end;
}

.wpsr-share-icons .socializer {
  margin-left: 0 !important;
}

.sr-instagram a,
.sr-x a,
.sr-facebook a,
.sr-email a,
.sr-whatsapp a {
  background-color: white !important;
  border-radius: 10px !important;
}

*.sr-40px a {
  font-size: 1.6875rem !important;
}

.sr-facebook a > i::before {
  color: #0766ff !important;
}

.sr-instagram a > i::before {
  color: #ff0000 !important;
}

.sr-x a > i::before {
  color: #000 !important;
}

.sr-email a > i::before {
  color: #db4a39 !important;
}

.sr-whatsapp a > i::before {
  color: #25d366 !important;
}

.--hover-inverse > a.has-primary-green-background-color:hover, .--hover-inverse > a:hover {
  background-color: white !important;
  color: #006a65 !important;
}

.--def-chaque-mois {
  background-size: min(100%, 600px) auto !important;
}

/* --- input form ---*/
input {
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Cache les contrôles par défaut de WebKit */
  margin: 0; /* Important pour supprimer l'espace réservé par les boutons */
}

.number-input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.number-input input[type=number] {
  border: none !important;
  border-radius: unset !important;
  background: transparent !important;
  color: #f9a841 !important;
  text-align: center;
  font-family: Mulish;
  font-size: 50px;
  font-style: normal;
  font-weight: 1000;
  line-height: 85%; /* 42.5px */
  text-transform: uppercase;
  width: 70px;
}
.number-input .number-input-label {
  color: #fff;
  text-align: center;
  font-family: "Playpen Sans";
  font-size: 38px;
  font-style: normal;
  font-weight: 800;
  line-height: 85%; /* 32.3px */
  text-transform: uppercase;
  margin-right: 20px;
}
.number-input button.decrement,
.number-input button.increment {
  display: flex !important;
  padding: 0px 11px 14px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #f9a841;
  color: #fff;
  text-align: center;
  font-family: Mulish;
  font-size: 80px;
  font-style: normal;
  font-weight: 1000;
  line-height: 85%; /* 68px */
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.number-input .number-input button:hover {
  background: #217dbb;
}

.donation-result {
  display: inline-flex;
  padding: 11px 28px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 79px;
  background: #f9a841;
  color: #006a65;
  text-align: center;
  font-family: Mulish;
  font-size: 70px;
  font-style: normal;
  font-weight: 1000;
  line-height: 85%; /* 59.5px */
  text-transform: uppercase;
}

.monthly-donation {
  padding: 50px 0;
}
.monthly-donation p {
  margin-bottom: 0;
  margin-top: 0;
}
.monthly-donation .monthly-amount {
  color: #f9a841;
  font-family: Mulish;
  font-size: 23px;
  font-style: normal;
  font-weight: 800;
  line-height: 115%; /* 26.45px */
  text-transform: uppercase;
}
.monthly-donation .tax-deduction {
  color: #fff;
  font-family: Mulish;
  font-size: 23px;
  font-style: normal;
  font-weight: 800;
  line-height: 115%;
  text-transform: uppercase;
}

.--w-90 {
  text-align: center;
}
.--w-90 > p {
  width: 90px;
  min-width: 90px;
  height: 90px;
  min-height: 90px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  outline: solid;
  outline-width: 1px;
  outline-color: #006a65;
  outline-offset: -7px;
}

.wp-container-core-group-is-layout-36b0e217 {
  position: unset !important;
}

.--has-plein-circle {
  position: relative !important;
}
.--has-plein-circle .--ellipse {
  position: absolute;
  bottom: -30px !important;
  right: 0 !important;
}

.--comment-faire-left {
  background-size: 247px auto !important;
  background-position: top 200px left 0 !important;
}

.--comment-faire-right {
  background-size: min(30%, 480px) auto !important;
  background-position: bottom 100px right 0 !important;
}

.--vous-revient-a {
  min-width: 250px !important;
  background-size: 100% auto !important;
  background-position: top 5px center 0 !important;
}

.tax-calculation-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  max-width: 100%;
}
.tax-calculation-wrapper > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tax-calculation-wrapper .tax-input-field,
.tax-calculation-wrapper .tax-result-field {
  background-color: #f9a841;
  color: #006a65;
}
.tax-calculation-wrapper .tax-input-field input[type=number] .tax-placeholder,
.tax-calculation-wrapper .tax-result-field .tax-placeholder {
  color: #006a65;
  font-size: 3.125rem;
}
.tax-calculation-wrapper .tax-input-field {
  border-radius: 50%;
  max-width: 185px;
  width: 185px;
  max-height: 185px;
  height: 185px;
  min-width: 185px;
  min-height: 185px;
  outline: solid;
  outline-width: 1px;
  outline-color: #006a65;
  outline-offset: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tax-calculation-wrapper .tax-input-field > div {
  max-width: 100%;
  text-align: center;
}
.tax-calculation-wrapper .tax-input-field > div p {
  color: #006a65;
  text-align: center;
  font-size: 1.4375rem;
  font-weight: 800;
  font-family: "Mulish", sans-serif;
  line-height: 85%;
  text-transform: uppercase;
  margin: 15px auto;
}
.tax-calculation-wrapper .tax-input-field input {
  max-width: 45%;
  background-color: transparent;
  border: none;
  text-align: center;
  font-weight: 1000;
  font-size: 3.125rem;
  padding: 0;
  margin: 0 !important;
  color: #006a65;
}
.tax-calculation-wrapper .tax-input-field input::placeholder {
  font-family: "Mulish", sans-serif;
  color: #006a65;
  font-size: 3.125rem;
}
.tax-calculation-wrapper .tax-result-field {
  border-radius: 50%;
  min-width: 213px;
  min-height: 213px;
  height: 213px;
  width: 213px;
  outline: solid;
  outline-width: 1px;
  outline-color: #006a65;
  outline-offset: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tax-calculation-wrapper .tax-result-field > div {
  max-width: 100%;
  text-align: center;
}
.tax-calculation-wrapper .tax-result-field > div p {
  color: #006a65;
  text-align: center;
  font-size: 1.4375rem;
  font-weight: 800;
  font-family: "Mulish", sans-serif;
  line-height: 100%;
  text-transform: uppercase;
  margin: 15px auto;
}

.tax-input-field input,
.tax-suffix,
.tax-input-field input::placeholder,
.tax-result-field span {
  text-align: center;
  font-weight: 1000;
  font-size: 3.125rem;
  padding: 0;
  margin: 0 !important;
  color: #006a65;
}

span.tax-calculation-result.input-famille {
  font-size: 30px !important;
}

.--half-bg-primary {
  width: 100%;
  background: linear-gradient(to right, transparent 0 50%, #006a65 50% 100%);
  background-size: 50% 427.4px;
  background-repeat: no-repeat;
  background-position: bottom right;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.defi-input:hover {
  cursor: pointer;
}

.defi-checkbox {
  height: 23px;
  width: 23px;
  min-height: 23px;
  min-width: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .defi-input:hover, */
.defi-input.checked .defi-checkbox::before {
  content: "✓";
  color: #006a65;
  font-size: 20px;
  font-weight: 800;
  font-family: "Playpen Sans", cursive;
  line-height: 100%;
  text-transform: uppercase;
  margin: 15px auto;
}

.wp-block-column #hidden-defi,
.wp-block-column #displayed-defi {
  transition: all 500ms ease;
}

.wp-block-column #displayed-defi {
  display: none;
  /* height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0; */
}

/* .wp-block-column:has(.defi-input:hover) + .wp-block-column #hidden-defi, */
.wp-block-column:has(.defi-input.checked) + .wp-block-column #hidden-defi {
  display: none;
  /* height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0; */
}

/* .wp-block-column:has(.defi-input:hover) + .wp-block-column #displayed-defi, */
.wp-block-column:has(.defi-input.checked) + .wp-block-column #displayed-defi {
  display: flex;
  flex-direction: column;
  /*   height: auto;
    opacity: 1;
    margin: initial;
    padding-top: initial; */
}

@media (max-width: 767px) {
  .--cochez-mobile {
    background-size: 50% !important;
  }
}
@media (min-width: 1366px) {
  .--def-header {
    background-size: max(760px, 55%) auto !important;
  }
  .--def-full-left-bg {
    background-size: max(600px, 47%) auto !important;
  }
}
@media (min-width: 1600px) {
  .--def-header {
    background-size: max(760px, 48%) auto !important;
  }
  .--def-full-left-bg {
    background-size: max(600px, 48%) auto !important;
  }
}
@media (min-width: 1800px) {
  .--def-header,
  .--def-full-left-bg {
    background-size: max(760px, 40%) auto !important;
  }
  .--def-full-right-bg {
    background-size: auto 95% !important;
  }
}
@media (max-width: 1460px) {
  .--def-full-right-bg {
    background-size: auto 90% !important;
  }
}
@media (max-width: 980px) {
  .--half-bg-primary {
    background: none !important;
  }
  .--def-chaque-mois {
    background-size: min(65%, 640px) auto !important;
  }
}
@media (max-width: 767px) {
  .--is-mobile-centered {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  h1, h2 {
    font-size: 45px !important;
  }
  .logo-mobile {
    z-index: 1000 !important;
  }
  .wp-container-core-group-is-layout-b10706b6 {
    gap: 40px;
    padding-right: 50px !important;
    margin-top: -80px;
    margin-bottom: 30px;
  }
  .wp-container-core-group-is-layout-adf2fe09 {
    padding-top: initial !important;
  }
  .wp-elements-a5b48b0bf25ed0d1c5ed992d46dae70f {
    margin-bottom: 3rem !important;
  }
  .wp-container-core-group-is-layout-9b5fd1f6 {
    padding-left: initial;
  }
  .cases {
    background-image: url("https://def.lagenceoueb.dev/wp-content/uploads/2025/05/decouvrir-le-defi-def.svg");
    background-repeat: no-repeat;
    background-position: top -50px right 215px;
    background-size: contain !important;
    padding-left: 25px !important;
    margin-top: -70px;
  }
  .wp-container-core-group-is-layout-f647b52c {
    margin-left: 20px !important;
  }
  .wp-container-core-group-is-layout-b620ee48 {
    border: none;
  }
  .notre-famille h2 {
    font-size: 40px !important;
  }
  .notre-famille {
    padding-top: 50px;
  }
  #reduction-fiscale {
    border-radius: 110px 110px 0 0;
  }
  .wp-elements-d009768d8a3fa1e62a0ef03c92214020 {
    margin-top: 60px !important;
  }
  .defi-famille, .notre-famille {
    border-radius: 110px 110px 0 0;
  }
  .defi-famille {
    background-size: 43% !important;
  }
  .defi-famille-p {
    padding: 0% 10% 0% 10%;
    font-size: 1.44rem !important;
  }
  #coeur-defi img {
    width: 157px;
    height: 133px;
    margin-left: 40px;
    margin-top: -85px;
    position: absolute;
  }
  .mains {
    margin-top: -150px;
  }
  .mains img {
    z-index: 1000;
    position: relative;
  }
  .number-input .number-input-label {
    font-size: 15px;
  }
  /* .--has-after {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .comment-faire .wp-block-buttons a::after {
    content: ">";
    position: relative;
    margin-left: 10px;
    color: #006a65;
    font-weight: 900;
    font-size: 20px;
  } */
  .--hover-inverse > a.has-primary-green-background-color:hover, .--hover-inverse > a:hover .bouton:hover {
    background-color: #006a65 !important;
    color: #ffffff !important;
  }
  .eurosparfamille {
    margin-top: -10px !important;
  }
  .parpersonne {
    margin-top: -20px !important;
  }
  .adulteenfant {
    width: 320px;
  }
  #monthly-donation {
    text-align: center;
  }
  #donmensuel {
    font-size: 1.44rem !important;
  }
  .revenu {
    margin-left: 20% !important;
  }
  footer h2 {
    padding-top: 50px !important;
  }
  .tax-calculation-wrapper {
    gap: 5px;
  }
  .--cochez-mobile {
    background-size: 50% !important;
  }
  .--z-index-3 {
    z-index: 3 !important;
    position: relative !important;
    pointer-events: none !important;
  }
  .--comment-faire-left {
    background-size: 100px !important;
    background-position: top 50px left 0 !important;
  }
}
@media (max-width: 926px) {
  h1, h2 {
    font-size: 45px !important;
  }
  #coeur-defi img {
    margin-left: 50px;
  }
  .--hover-inverse > a.has-primary-green-background-color:hover, .--hover-inverse > a:hover .bouton:hover {
    background-color: #006a65 !important;
    color: #ffffff !important;
  }
}
.site {
  overflow-x: hidden;
}

/*# sourceMappingURL=style.css.map */