/* -------------------------- GÉNÉRAL -------------------------- */

:root {
  --color-primary: #045829;
  --color-secondary: #00C674;
  --color-tertiary: #E5EEEA;

  --color-black: #0B0B0B;
  --color-white: #FFFFFF;
  --color-grey: #D4D4D4;
}

html{
  overflow-x: hidden;
  scroll-behavior: smooth;
  accent-color: var(--color-primary);
}

body {
  font-size: 16px;
  background-color: var(--color-white);
  font-family: "Rubik", sans-serif;
}

main{
  position: relative;
  z-index: 0;
}

html.menuOpen,
body.menuOpen{
  overflow-y: hidden;  
}

@media (min-width: 993px){
  .desktopDisplayNone{
    display: none !important;
  }
}

@media (max-width: 992px){
  .mobileDisplayNone{
    display: none !important;
  }
}

/* ---------------- CONTAINER ---------------- */

.container{
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: 80px;
}

@media (max-width: 1100px) {
  .container{
    padding-inline: 20px;
  }
}

/* ---------------- BOUTON ---------------- */

.btn,
input[type="submit"]{
  font-size: 14px !important;
  line-height: normal !important;
  padding: 10px 16px !important;
  border-radius: 100px !important;
  outline: 0 !important;
  width: fit-content !important;
  height: fit-content !important;
  display: flex;
  align-items: center !important;
  gap: 16px !important;
  border: solid 2px !important;
  position: relative !important;
  transition: 300ms ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.btn-primary::after{
  content: "" !important;
  display: block !important;
  width: 7px !important;
  min-width: 7px !important;
  height: 12px !important;
  background-color: currentColor !important;
  transition: 300ms ease !important;
  transform: translateX(0px) !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.00025 6.00025C7.00025 5.74425 6.90225 5.48825 6.70725 5.29325L1.70725 0.29325C1.31625 -0.09775 0.68425 -0.09775 0.29325 0.29325C-0.09775 0.68425 -0.09775 1.31625 0.29325 1.70725L4.58625 6.00025L0.29325 10.2933C-0.09775 10.6842 -0.09775 11.3162 0.29325 11.7072C0.68425 12.0982 1.31625 12.0982 1.70725 11.7072L6.70725 6.70725C6.90225 6.51225 7.00025 6.25625 7.00025 6.00025Z' fill='white'/%3E%3C/svg%3E") !important;
}

/* ----- PRIMARY ----- */

.btn-primary,
input[type="submit"]{
  color: var(--color-white) !important;
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

@media (pointer: fine){
  .btn-primary:hover,
  input[type="submit"]:hover{
    background-color: var(--color-primary) !important;
    border-color: var(--color-white) !important;
  }
}

/* ----- SECONDARY ----- */

.btn-secondary{
  color: var(--color-primary) !important;
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
}

@media (pointer: fine){
  .btn-secondary:hover{
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
  }
}

/* ---------------- TITRE ---------------- */

h1, h2, h3, h4, h5, h6{
  color: var(--color-primary);
  font-family: "Aleo", serif;
  font-weight: 600;
  line-height: normal;
}

h1{
  font-size: 36px;
  line-height: normal;
}

h2{
  font-size: 28px;
  line-height: normal;
}

@media (max-width: 1300px){
  h1{
    font-size: 31px;
  }
  h2{
    font-size: 25px;
  }
}

@media (max-width: 992px){
  h1{
    font-size: 26px;
  }
  h2{
    font-size: 22px;
  }
}

/* ---------------- PARAGRAPHE ---------------- */

.paragraphe{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.paragraphe,
.paragraphe *{
	color: var(--color-black);
	font-size: 16px;
	line-height: 1.4em;
}

ul{
  list-style: none;
}

.paragraphe ul{
	padding-left: 20px;
	list-style: disc;
}

.paragraphe ul li{
	margin-bottom: 10px;
}

@media (max-width: 1300px){
	.paragraphe *{
		font-size: 15px;
	}
}

/* ---------------- IMAGE ---------------- */

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

/* ---------------- BREADCRUMBS ---------------- */

.breadcrumbs li *,
.breadcrumbs{
  color: var(--color-black);
  font-size: 13px;
  line-height: 20px;
}

.breadcrumb li::after{
  content: ">" !important;
  display: inline-block;
  margin-inline: 6px !important;
}

/* ------------------ CONNEXION ------------------ */

.custom-password-form__message{
    font-size: 18px;
    line-height: 1.2em;
    margin-bottom: 20px;
}

.custom-password-form__field{
    display: flex;
    align-items: center;
    gap: 20px 30px;
    margin-bottom: 30px;
}

.custom-password-form__input{
    width: 400px;
    display: block;
    padding: 18px;
    border: 0px;
    border-bottom: solid 1px var(--color-grey) !important;
    border-radius: 0px;
    outline: none;
    resize: none;
    background: none !important;
}

.custom-password-form__input,
.custom-password-form__input::placeholder{
    color: var(--color-secondary);
    font-size: 18px;
    line-height: 22px;
}

.custom-password-form__submit{
    resize: none;
    background: none !important;
    font-size: 16px;
    line-height: 26px;
    padding: 11px 30px;
    border-radius: 30px;
    outline: 0;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 30px;
    border: none;
    position: relative;
    transition: 300ms ease;
    background-color: var(--color-secondary) !important;
    color: var(--color-white);
    border: none !important;
    cursor: pointer;
}

.custom-password-form__submit:hover{
    background-color: var(--color-primary) !important;
}

.custom-password-form__error{
    color: var(--wp--preset--color--vivid-red);
    font-size: 18px;
    line-height: 1.2em;
}

@media (max-width: 700px) {
    .custom-password-form__field{
        flex-direction: column;
    }
    .custom-password-form__input,
    .custom-password-form__submit{
        width: 100%;
        justify-content: center;
    }
}