.elementor-539 .elementor-element.elementor-element-77333ae{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:150px;--padding-bottom:75px;--padding-left:0px;--padding-right:0px;}.elementor-539 .elementor-element.elementor-element-77333ae:not(.elementor-motion-effects-element-type-background), .elementor-539 .elementor-element.elementor-element-77333ae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-539 .elementor-element.elementor-element-eef1bac{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-539 .elementor-element.elementor-element-77333ae{--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-539 .elementor-element.elementor-element-77333ae{--content-width:1920px;}}/* Start custom CSS for html, class: .elementor-element-eef1bac */#dynamic-form {
    font-family: 'Arial', sans-serif;
    background-color: transparent;
    margin: 0 auto;
    max-width: 1920;
    text-align: center;

}

/* Sélection genres */

#dynamic-form .gender-step {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Texte sélection genres */

#dynamic-form .gender-step .gender-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 76px 32px 16px 32px;
    background-color: #D8CFC3;
}

#dynamic-form .gender-step .gender-text .titles h1 {
    color: #714930;
    text-align: center;
    font-family: "Cormorant Garamond";
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 1em;
}

#dynamic-form .gender-step .gender-text .titles p {
    color: #C46A45;
    text-align: center;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 2.34px;
    text-transform: uppercase;
}

#dynamic-form .gender-step .gender-text .select {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    
    color: #714930;
    text-align: center;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 2.34px;
    text-transform: uppercase;
}

#dynamic-form .gender-step .gender-text .legals {
    color: #F6F1EA;
    text-align: center;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5em;
}

/* Titre */

#dynamic-form h2 {
    font-size: 24px;
    color: #e9642d;
    margin-bottom: 20px;
}

/* Paragraphes */

#dynamic-form p {
    font-size: 16px;
    color: #333;
}

/* Conteneur des boutons */

#dynamic-form .selection {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* Style des boutons */

#dynamic-form .button.gender-button {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/14;
    z-index: 1;
    border-radius: 0;
    overflow: hidden;
    
    justify-content: center;
    align-items: center;
    
    padding-bottom: inherit;
}

#dynamic-form .button {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    z-index: 1;
    border-radius: 0;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    
    padding-bottom: 30px;
}

#dynamic-form .back-button {
    all: unset;
    color: var(--brique, #C46A45);
    text-align: center;
    
    /* sous titre */
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 2.34px;
    text-transform: uppercase;
    
    cursor: pointer;
}

#dynamic-form .back-button:hover {
    text-decoration: underline;
}

/* Images à l'intérieur des boutons */

#dynamic-form .button img, #dynamic-form .gender-button img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    border-radius: 0;
    object-fit: cover;
    transition: .3s ease-in-out;
}

/* Filtre pour l'image à l'intérieur des boutons */
#dynamic-form .button .filter, #dynamic-form .gender-button .filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(113, 73, 48, 0.5);
}

/* Ajout d'un effet au survol */
#dynamic-form .button:hover img, #dynamic-form .gender-button:hover img {
    transform: scale(1.075);
    
}

/* Texte des boutons */
#dynamic-form .button.gender-button span {
    font-family: "Cormorant Garamond";
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: normal;
    letter-spacing: inherit;
    text-transform: inherit;
}


#dynamic-form .button span {
    color: #FFF;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 2.52px;
    text-transform: uppercase;
}

   
/* Steps */
#dynamic-form .step .selection {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: center;
    gap: 10px;
}


/* Cache les éléments */
#dynamic-form .hidden, #dynamic-form .selection.hidden {
    display: none;
}
	
/* Transition fluide entre les étapes */
.step {
  transition: all 0.3s ease-in-out;
}

/* Header steps */
#dynamic-form .step .header {
    background-color: #D8CFC3;
    margin-block: 60px;
    padding-block: 75px;
}

#dynamic-form .step .header .titles {
    margin-bottom: 40px;
}

#dynamic-form .step .header .titles h2 {
   color: #714930;
    text-align: center;
    
    /* titre */
    font-family: "Cormorant Garamond";
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    
    margin-bottom: 0;
}

#dynamic-form .step .header .titles span {
    color: #C46A45;
    text-align: center;
    
    /* sous titre */
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 2.34px;
    text-transform: uppercase;
}

#dynamic-form .step .header h3 {
    color: #714930;
    text-align: center;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 2.34px;
    text-transform: uppercase;
}

/* --------------------------- */
/* 📌 RESPONSIVE : Adaptation mobile 📌 */
/* --------------------------- */
  @media (max-width: 768px) {
  /* Transforme le conteneur en grille */
  .selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes */
    gap: 10px !important; /* Espacement entre les boutons */
    align-items: center !important;
    justify-items: center !important;
  }

  /* Ajuster la taille des boutons */
  .zone-button,
  .symptom-button {
    width: 45% !important;
    height: auto !important;
  }

  #dynamic-form {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 5px;
    padding: 10px;
    font-weight: 900 !important;
  }
}/* End custom CSS */