/* Colors */
/* Font Weights */
body {
  height: 100%;
}

h1 {
  font-size: 2.4rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.6rem;
}

p,
a,
li {
  font-size: 1.2rem;
}

.icon-text {
  font-size: 1.4rem;
}

td {
  border: 0px solid #FFFFFF;
  background-clip: padding-box;
}

tr > td + td {
  border-left-width: 5px;
}

tr > td {
  border-top-width: 5px;
}

.mentions,
.finance {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2em;
  line-height: 1.6;
  padding: 16em 2em 4em 2em;
}
.mentions h1,
.finance h1 {
  font-weight: 700;
  color: #008F70;
  text-transform: uppercase;
}
.mentions .legales p,
.finance .legales p {
  font-weight: 500;
}
.mentions .legales p a,
.finance .legales p a {
  color: #008F70;
  text-decoration: none;
  font-weight: 700;
}
.mentions .legales p:first-child,
.finance .legales p:first-child {
  padding-bottom: 1em;
}
.mentions .img-container,
.finance .img-container {
  width: 100%;
}
.mentions .img-container img,
.finance .img-container img {
  width: 100%;
}

.data,
.cookies,
.engagements {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2em;
  line-height: 1.6;
}
.data h2,
.cookies h2,
.engagements h2 {
  font-weight: 700;
  color: #008F70;
  text-transform: uppercase;
}
.data h3,
.cookies h3,
.engagements h3 {
  font-weight: 700;
  color: #1F1F1F;
}
.data p,
.cookies p,
.engagements p {
  font-weight: 500;
}
.data p a,
.cookies p a,
.engagements p a {
  color: #008F70;
  text-decoration: none;
  font-weight: 700;
}
.data p:first-child,
.cookies p:first-child,
.engagements p:first-child {
  padding-bottom: 1em;
}

.engagements {
  padding: 2em 2em 16em 2em;
}
.engagements .avantages {
  display: grid;
  padding-top: 4em;
  gap: 4em;
}
.engagements .avantages .icon-container {
  display: grid;
  justify-items: center;
  gap: 3em;
}
.engagements .avantages .icon-container .icon-img {
  width: 113px;
  height: 113px;
}
.engagements .avantages .icon-container .icon-img img {
  width: 100%;
}
.engagements .avantages .icon-container .icon-text {
  height: 64px;
  width: 50%;
  display: grid;
  place-content: center;
  font-weight: 700;
  color: #008F70;
  text-transform: uppercase;
}

.normal-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  text-align: center;
  align-items: center;
}
.normal-section h2 {
  font-weight: 700;
  color: #008F70;
  padding-bottom: 30px;
}
.normal-section .img-container {
  width: 100%;
}
.normal-section .img-container img {
  width: 100%;
}
.normal-section .text-container {
  padding-top: 30px;
  width: 100%;
}
.normal-section .text-container p {
  color: #01040D;
}
.normal-section .text-container p span {
  font-weight: 700;
  text-decoration: underline;
}
.normal-section .text-container p:first-child {
  padding-bottom: 30px;
}
.normal-section .text-container ul {
  text-align: left;
  list-style-position: outside;
  padding: 0px 15px;
  list-style-image: url("../icons/bullet.svg");
}
.normal-section .text-container ul li {
  padding-bottom: 20px;
}

.etapes {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  text-align: center;
  align-items: center;
}
.etapes h2 {
  font-weight: 700;
  color: #008F70;
  padding-bottom: 60px;
}
.etapes .video-container {
  height: 300px;
  width: 100%;
  margin-bottom: 60px;
}
.etapes .video-container iframe {
  border-radius: 10px;
}

.contact-section {
  display: grid;
  padding: 16em 2em;
}
.contact-section .contact {
  display: grid;
  text-align: center;
  gap: 2em;
  line-height: 1.6;
  padding-bottom: 2em;
}
.contact-section .contact h1 {
  font-weight: 700;
  color: #008F70;
  text-transform: uppercase;
}
.contact-section .contact .img-container {
  width: 100%;
}
.contact-section .contact .img-container img {
  width: 100%;
}

.form-section p {
  border-bottom: 1px solid #C4B9B9;
  padding-bottom: 1em;
}

.contact-form {
  display: flex;
  flex-direction: column;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea,
.contact-form .contact-submit {
  width: 100%;
  height: 60px;
  font-size: 1.5rem;
  margin-bottom: 1.5em;
  padding: 1em 15% 1em 1em;
  border: 1px solid #9b9b9b;
  background: #FFFFFF;
}
.contact-form textarea {
  height: 100%;
}
.contact-form .contact-submit {
  padding: 0;
  background: #008F70;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
  border: none;
}
.contact-form .civilite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2em 0;
}
.contact-form .civilite .radio-container {
  display: flex;
  align-items: center;
}
.contact-form .civilite .radio-container input[type=radio] {
  height: 27px;
  width: 27px;
  background: #008F70;
  margin-right: 2em;
}
.contact-form .civilite .radio-container input[type=radio]:after {
  width: 27px;
  height: 27px;
  border-radius: 25px;
  top: 0px;
  left: 0px;
  position: relative;
  background-color: #FFFFFF;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 2px solid #C4B9B9;
}
.contact-form .civilite .radio-container input[type=radio]:checked:after {
  width: 27px;
  height: 27px;
  border-radius: 25px;
  top: 0px;
  left: 0px;
  position: relative;
  background-color: #008F70;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 2px solid #008F70;
  box-shadow: inset 0 0 0px 3px #FFFFFF;
}
.contact-form .civilite .radio-container label {
  font-size: 1.4rem;
}
.contact-form .form-check {
  margin-bottom: 1.5em;
  line-height: 1.8;
}
.contact-form .form-check label {
  font-size: 1.4rem;
  display: inline;
  margin-bottom: 0;
}
.contact-form .form-check a {
  font-size: 1.4rem;
  color: #008F70;
}
.contact-form .form-check input[type=checkbox] {
  margin-right: 5px;
  filter: hue-rotate(308deg);
}
.contact-form .protection {
  padding-bottom: 1.5em;
}
.contact-form .protection label {
  font-size: 1.4rem;
  display: inline;
  margin-bottom: 0;
}

.infos {
  display: grid;
  gap: 4em;
  line-height: 1.6;
  padding: 14em 2em 8em 2em;
}
.infos h1 {
  font-weight: 700;
  color: #008F70;
  text-transform: uppercase;
  text-align: center;
}
.infos .dropdown-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.infos .dropdown-section .dropdown-title {
  display: flex;
  background: #008F70;
  height: 72px;
  align-items: center;
  padding: 0 2em;
  position: relative;
}
.infos .dropdown-section .dropdown-title:after {
  content: url("../icons/minus-circle.svg");
  margin-right: 2em;
  position: absolute;
  right: 0;
  height: 26px;
  width: 26px;
}
.infos .dropdown-section .dropdown-title h3 {
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
}
.infos .dropdown-section .dropdown-title.collapsed:after {
  content: url("../icons/plus-circle.svg");
}
.infos .dropdown-section .dropdown-content {
  display: flex;
  flex-direction: column;
  border: 1px solid #C4B9B9;
  border-top: none;
  max-height: 4000px;
  transition: all 400ms ease-in-out;
}
.infos .dropdown-section .dropdown-content .content-block {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #C4B9B9;
}
.infos .dropdown-section .dropdown-content .content-block:nth-child(even) {
  background: #F4F4F4;
}
.infos .dropdown-section .dropdown-content .text-container {
  padding: 2em;
}
.infos .dropdown-section .dropdown-content .text-container h4 {
  color: #008F70;
  font-weight: 700;
}
.infos .dropdown-section .dropdown-content .text-container a {
  color: #008F70;
  line-height: 2;
}
.infos .dropdown-section .dropdown-content .text-container p {
  overflow: hidden;
}
.infos .dropdown-section .dropdown-content .text-container p img {
  margin-right: 5px;
  position: relative;
  top: 4px;
}
.infos .dropdown-section .dropdown-content .text-container p:not(:last-child) {
  padding-bottom: 1em;
}
.infos .dropdown-section .dropdown-content .text-container ul {
  text-align: left;
  list-style-position: outside;
  padding-left: 15px;
  list-style-image: url("../icons/bullet.svg");
}
.infos .dropdown-section .dropdown-content .text-container ul li {
  padding-bottom: 20px;
  padding-left: 5px;
}
.infos .dropdown-section .dropdown-content .text-container .tarif {
  overflow-x: auto;
  padding: 2em 0;
}
.infos .dropdown-section .dropdown-content .text-container .tarif table {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  border-collapse: collapse;
}
.infos .dropdown-section .dropdown-content .text-container .tarif table tr:first-child {
  font-weight: bold;
}
.infos .dropdown-section .dropdown-content .text-container .tarif table thead {
  background: #d9d9d9;
  font-weight: 700;
}
.infos .dropdown-section .dropdown-content .text-container .tarif table thead tr th {
  background: #d9d9d9;
  padding: 11px 0;
}
.infos .dropdown-section .dropdown-content .text-container .tarif table thead tr td {
  padding: 1rem 2.5rem;
  height: 50px;
  white-space: nowrap;
}
.infos .dropdown-section .dropdown-content .text-container .tarif table tbody tr td {
  background-color: #f8f5f5;
  padding: 1rem 2.5rem;
  height: 50px;
  white-space: nowrap;
}
.infos .dropdown-section .dropdown-content .text-container .tarif table tbody tr td:first-child {
  background-color: #d9d9d9;
  font-weight: bold;
}
.infos .dropdown-section .dropdown-content .img-container {
  text-align: center;
  margin-bottom: 2em;
  display: grid;
  place-content: center;
}
.infos .dropdown-section .dropdown-content.collapsed {
  max-height: 0;
  overflow: hidden;
  transition: all 400ms ease-in-out;
}

/* Media Queries */
@media only screen and (min-width: 320px) and (max-width: 360px) {
  h3 {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .mentions,
.finance {
    padding: 16em 4em 4em 4em;
  }

  .infos {
    padding: 14em 3em;
  }

  .engagements {
    padding: 2em 4em 16em 4em;
  }
  .engagements .avantages {
    gap: 5%;
    grid-template-columns: 30% 30% 30%;
  }
  .engagements .avantages .icon-container .icon-text {
    width: 85%;
    color: #008F70;
    text-transform: uppercase;
  }

  .normal-section {
    padding: 45px 30px;
  }
  .normal-section .img-container {
    width: 60%;
  }

  .etapes .video-container {
    height: 400px;
  }
}
@media only screen and (min-width: 901px) {
  h1 {
    font-size: 2.6rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3 {
    font-size: 2rem;
  }

  p,
a,
li {
    font-size: 1.4rem;
  }

  .icon-text {
    font-size: 1.8rem;
  }

  .mentions,
.finance {
    padding: 26em 4em 4em 4em;
    gap: 4em;
  }

  .data,
.cookies,
.engagements {
    gap: 4em;
  }

  .etapes .video-container {
    height: 542px;
  }

  .contact-section {
    grid-template-columns: 48% 48%;
    padding: 26em 6em 10em 6em;
    gap: 4%;
  }
  .contact-section .contact {
    text-align: left;
  }

  .infos {
    padding: 24em 6em;
  }
  .infos .dropdown-section .dropdown-content .content-block {
    flex-direction: row;
  }
  .infos .dropdown-section .dropdown-content .content-block .img-container {
    margin: 2em 6em;
  }
}
@media only screen and (min-width: 1280px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  h3 {
    font-size: 2.2rem;
  }

  p,
a,
li {
    font-size: 1.6rem;
  }

  .icon-text {
    font-size: 2rem;
  }

  .engagements .avantages .icon-container .icon-text {
    width: 65%;
  }

  .normal-section {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: 40% 60%;
    grid-template-areas: "img title" "img text";
    padding: 30px 80px;
    text-align: left;
  }
  .normal-section h2 {
    grid-area: title;
    align-self: end;
    padding-bottom: 0;
  }
  .normal-section .img-container {
    grid-area: img;
    width: 70%;
    justify-self: start;
  }
  .normal-section .text-container {
    grid-area: text;
    align-self: start;
  }

  .normal-section.flipped {
    grid-template-columns: 55% 45%;
    grid-template-rows: 28% 72%;
    grid-template-areas: "title img" "text img";
  }
  .normal-section.flipped .img-container {
    justify-self: end;
  }

  .etapes {
    padding: 30px 80px;
  }
  .etapes .video-container {
    height: 620px;
  }

  .contact-form .civilite {
    width: 50%;
  }
  .contact-form .civilite input[type=radio],
.contact-form .civilite label {
    cursor: pointer;
  }
  .contact-form .form-check input[type=checkbox],
.contact-form .form-check label {
    cursor: pointer;
  }
  .contact-form .contact-submit {
    width: 50%;
    cursor: pointer;
    transition: all 200ms linear;
  }
  .contact-form .contact-submit:hover {
    background: #1F1F1F;
    transition: all 200ms linear;
  }

  .infos {
    padding: 24em 5em;
  }
  .infos .dropdown-section .dropdown-title {
    cursor: pointer;
  }
}
@media only screen and (min-width: 1366px) {
  .etapes .video-container {
    height: 670px;
  }
}
@media only screen and (min-width: 1440px) {
  .etapes .video-container {
    height: 710px;
  }
}
@media only screen and (min-width: 1600px) {
  .etapes .video-container {
    height: 802px;
  }
}
@media only screen and (min-width: 1920px) {
  .etapes .video-container {
    height: 982px;
  }

  .contact-section {
    padding: 26em 9em 10em 9em;
  }
  .contact-section .contact .img-container {
    width: 75%;
  }

  .infos {
    padding: 24em 9em;
  }
}
@media only screen and (min-width: 2000px) {
  .etapes .video-container {
    height: 1342px;
  }
}/*# sourceMappingURL=extras.css.map */