*/* ┌┬┐┌─┐┌┬┐┌─┐ */
/*  ││├┤ ││││ │ */
/* ─┴┘└─┘┴ ┴└─┘ */
#demo {
  display: flex;
  align-items: flex-start;
}

#demo > * {
  flex: 1 1 50%;
}

#demo figure {
  /* définition de la div de gauche contenant le gif */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 100vh;
  background-color: var(--secondary-background-color);
}

#demo figure h2 {
  /* définition de l'aspect du titre sur la partie gauche de la section */
  align-self: flex-start;
  flex-basis: 100%;
  text-align: right;
  padding: 1em 0.2em;
}

#demo > div h2 {
  /* définition de l'aspect du titre sur la partie droite de la section */
  flex-basis: 100%;
  padding: 1em 0.2em;
}

#demo figure h2 span {
  display: none;
}

#demo > div {
  /* définition de la div de droite contenant le formulaire */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

#demo form {
  /* définition globale du formulaire */
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
  max-width: 500px;
  gap: 25px;
  padding-top: 2em;
  --form-font-size: 14px;
}

#demo form div label {
  /* définition de l'aspect des différents label */
  line-height: 1.5em;
  font-variant: small-caps;
  font-size: var(--form-font-size);
}

#demo form div select {
  /* définition du champ du sélecteur */
  outline-style: none;
  background-color: transparent;
  transition: ease var(--transition-speed);
  opacity: 1;
  cursor: pointer;
  border-bottom: 1px solid var(--default-text-color);
  width: 100%;
}

#demo form div fieldset {
  column-count: 3;
}

#demo form div fieldset > div {
  /* disposition des options de sélection pour le "rôle au sein de la structure" */
  display: inline-block;
  width: 100%;
}

#demo form input[type=checkbox] {
  /* mise en forme des checkbox avec un curseur pointeur */
  width: fit-content;
  vertical-align: middle;
  cursor: pointer;
}

#demo form label {
  /* change l'aspect du curseur en pointeur pour tous les label du formulaire */
  cursor: pointer;
}

#demo form div input, #demo form div textarea {
  /* définition des zones de texte pour les input et le textarea */
  width: 100%;
  outline-style: none;
  resize: none;
  background-color: var(--default-background-color);
  border-bottom: 1px solid var(--default-text-color);
  font-size: var(--form-font-size);
}

#demo form div textarea::placeholder {
  /* création texte d'indication dans le textarea, masqué par défaut */
  transition: ease var(--transition-speed);
  opacity: 0;
}

#demo form div textarea:hover::placeholder {
  /* révélation du texte d'indication du textarea avec une opacité de 0.6 */
  opacity: 0.6;
}

#demo form > * {
  flex-basis: 100%;
}

#demo form .form-row {
  flex-basis: calc(50% - 25px);
}

#demo form select, #demo form #phone {
  /* renvoie aux balises select et input (téléphone) pour alignement */
  height: 1.4em;
}

#demo form .large-row {
  flex-basis: 100%;
}

#demo form div textarea {
  /* définition taille du textarea */
  width: 100%;
}

#demo form div.more-send {
  /* définition du positionnement des 2 boutons "more/less details et "envoyer" du formulaire */
  display: flex;
  justify-content: space-between;
}

#demo form div.more-send button {
  /* dimensionnement du texte dans les boutons ainsi que leur transparence colométrique */
  font-variant: small-caps;
  background-color: transparent;
  font-size: var(--form-font-size);
}

#demo form div.more-send button span {
  font-size: var(--form-font-size);
}

.extra-row {
  /* définition de l'apparence des champs cachés */
  display: none;
}

.visible-details .extra-row {
  /* permet d'afficher les détails cachés lorsque le bouton "more details" est utilisé */
  display: initial;
}

#demo form .less {
  /* permet de cacher le texte "less details" lorsque non nécessaire*/
  display: none;
}

#demo.visible-details form .less {
  /* permet de rendre visible le texte "less details" lorsque nécessaire */
  display: initial;
}

#demo.visible-details form .more {
  /* permet de cacher le texte "more details" lorsque non nécessaire*/
  display: none;
}

#demo form div.captcha {
  display: flex;
  gap: 20px;
}

#demo form div.captcha input[type="text"] {
  width: 80px;
}

#more-details-button img {
  /* alignement de l'image "chevron-up" à l'intérieur du bouton ainsi que son opacité */
  vertical-align: middle;
  transition: transform var(--transition-speed);
  height: var(--form-font-size);
  opacity: 0.3;
}

#more-details-button:hover img {
  /* permet d'agrandir l'image "chevron-up" et d'augmenter son opacité lorsqu'on le survole */
  transform: scale(1.25);
  opacity: 1;
}

#send-submit {
  /* dimmensionnement du bouton "envoyer" */
  border: 1px solid var(--default-text-color);
  padding: 0.5em 1em;
}

#send-submit img {
  /* position, dimmensionnement et opacité de l'image "send" dans le bouton "envoyer" */
  transition: transform var(--transition-speed);
  opacity: 0.3;
  height: var(--form-font-size);
  vertical-align: middle;
  margin-left: 0.25em;
}

#send-submit:hover img {
  /* permet d'agrandir l'image "send" et d'augmenter son opacité lorsqu'on le survole */
  transform: scale(1.25);
  opacity: 1;
}


/*---------MOBILE---------*/
@media (max-width:800px) {
  #demo {
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
  }
  #demo figure {
    justify-content: center;
  }
  #demo figure h2 {
    font-size: 1.4em;
    text-align: center;
  }
  #demo figure h2 span {
    display: contents;
    font-size: 1em;
  }
  #demo div h2 {
    display: none;
  }
  #demo figure img {
    height: auto;
    width: 100%;
  }
}