<div class="body360 body360--center open">
  <div class="body360-content">
    <div class="body360-title">
      Formulaire de contact<br /><i><small>Contact Form</small></i>
    </div>
    <div class="body360-form">
      <form method="POST" onsubmit="return submitter('form_contact');">
        <label class="input--small"><input type="text" name="nom" placeholder="<strong>Nom</strong> / <i>Name</i>" required="required" value="" /><span><strong>Nom</strong> / <i>Name</i>&nbsp;<span class="mandatory">*</span></span></label><label class="input--small"><input type="text" name="prenom" placeholder="<strong>Prénom</strong> / <i>First Name</i> " required="required" value="" /><span><strong>Prénom</strong> / <i>First Name</i> &nbsp;<span class="mandatory">*</span></span></label><label><input type="text" name="societe" placeholder="<strong>Entreprise</strong> / <i>Company</i> " required="required" value="" /><span><strong>Entreprise</strong> / <i>Company</i> &nbsp;<span class="mandatory">*</span></span></label><label><select name="pays" required="required">
            <option value=""></option>
            <option value="1">France</option>
            <option value="2">Arménie (l')</option>
            <option value="3">Azerbaïdjan (l')</option>
            <option value="4">Bélarus (le)</option>
            <option value="5">Géorgie (la)</option>
            <option value="6">Kazakhstan (le)</option>
            <option value="7">Kirghizistan (le)</option>
            <option value="8">Ouzbékistan (l')</option>
            <option value="9">Russie (la Fédération de)</option>
            <option value="10">Tadjikistan (le)</option>
            <option value="11">Turkménistan (le)</option>
            <option value="12">Ukraine (l')</option>
            <option value="13">Afghanistan (l')</option>
            <option value="14">Afrique du Sud (l')</option>
            <option value="15">Åland(les Îles)</option>
            <option value="16">Algérie (l')</option>
            <option value="17">Angola (l')</option>
            <option value="18">Arabie saoudite (l')</option>
            <option value="19">Bahreïn</option>
            <option value="20">Bangladesh (le)</option>
            <option value="21">Bénin (le)</option>
            <option value="22">Bhoutan (le)</option>
            <option value="23">Botswana (le)</option>
            <option value="24">Burkina Faso (le)</option>
            <option value="25">Burundi (le)</option>
            <option value="26">Cabo Verde</option>
            <option value="27">Cameroun (le)</option>
            <option value="28">Comores (les)</option>
            <option value="29">Congo (la République démocratique du)</option>
            <option value="30">Congo (le)</option>
            <option value="31">Côte d'Ivoire (la)</option>
            <option value="32">Danemark (le)</option>
            <option value="33">Djibouti</option>
            <option value="34">Égypte (l')</option>
            <option value="35">Émirats arabes unis (les)</option>
            <option value="36">Érythrée (l')</option>
            <option value="37">Éthiopie (l')</option>
            <option value="38">Féroé (les Îles)</option>
            <option value="39">Finlande (la)</option>
            <option value="40">Gabon (le)</option>
            <option value="41">Gambie (la)</option>
            <option value="42">Ghana (le)</option>
            <option value="43">Gibraltar</option>
            <option value="44">Groenland (le)</option>
            <option value="45">Guernesey</option>
            <option value="46">Guinée (la)</option>
            <option value="47">Guinée équatoriale (la)</option>
            <option value="48">Guinée-Bissau (la)</option>
            <option value="49">Île de Man</option>
            <option value="50">Inde (l')</option>
            <option value="51">
              Indien (le&nbsp;Territoire britannique de l'océan)
            </option>
            <option value="52">Iran (République Islamique d')</option>
            <option value="53">Iraq (l')</option>
            <option value="54">Irlande (l')</option>
            <option value="55">Israël</option>
            <option value="56">Jersey</option>
            <option value="57">Jordanie (la)</option>
            <option value="58">Kenya (le)</option>
            <option value="59">Koweït (le)</option>
            <option value="60">Lesotho (le)</option>
            <option value="61">Liban (le)</option>
            <option value="62">Libéria (le)</option>
            <option value="63">Libye</option>
            <option value="64">Madagascar</option>
            <option value="65">Malawi (le)</option>
            <option value="66">Maldives (les)</option>
            <option value="67">Mali (le)</option>
            <option value="68">Maroc (le)</option>
            <option value="69">Maurice</option>
            <option value="70">Mauritanie (la)</option>
            <option value="71">Mayotte</option>
            <option value="72">Mozambique (le)</option>
            <option value="73">Namibie (la)</option>
            <option value="74">Niger (le)</option>
            <option value="75">Nigéria (le)</option>
            <option value="76">Norvège (la)</option>
            <option value="77">Oman</option>
            <option value="78">Ouganda (l')</option>
            <option value="79">Pakistan (le)</option>
            <option value="80">Palestine, État de</option>
            <option value="81">Qatar (le)</option>
            <option value="82">République arabe syrienne (la)</option>
            <option value="83">République centrafricaine (la)</option>
            <option value="84">Royaume-Uni (le)</option>
            <option value="85">Rwanda (le)</option>
            <option value="86">Sahara occidental (le)*</option>
            <option value="87">Sao Tomé-et-Principe</option>
            <option value="88">Sénégal (le)</option>
            <option value="89">Seychelles (les)</option>
            <option value="90">Sierra Leone (la)</option>
            <option value="91">Somalie (la)</option>
            <option value="92">Soudan (le)</option>
            <option value="93">Soudan du Sud (le)</option>
            <option value="94">Sri Lanka (le)</option>
            <option value="95">Suède (la)</option>
            <option value="96">Svalbard et l'Île Jan Mayen (le)</option>
            <option value="97">Swaziland (le)</option>
            <option value="98">Tanzanie, République-Unie de</option>
            <option value="99">Tchad (le)</option>
            <option value="100">Togo (le)</option>
            <option value="101">Tunisie (la)</option>
            <option value="102">Turquie (la)</option>
            <option value="103">Yémen (le)</option>
            <option value="104">Zambie (la)</option>
            <option value="105">Zimbabwe (le)</option>
            <option value="106">Italie (l')</option>
            <option value="107">Albanie (l')</option>
            <option value="108">Australie (l')</option>
            <option value="109">Bosnie-Herzégovine (la)</option>
            <option value="110">Brunei (le)</option>
            <option value="111">Bulgarie (la)</option>
            <option value="112">Cambodge (le)</option>
            <option value="113">Chine (la)</option>
            <option value="114">Chypre</option>
            <option value="115">Cook (les Îles)</option>
            <option value="116">Corée (la République de)</option>
            <option value="117">
              Corée (la&nbsp;République populaire démocratique de&nbsp;)
            </option>
            <option value="118">Croatie (la)</option>
            <option value="119">Estonie (l')</option>
            <option value="120">Fidji (les)</option>
            <option value="121">Grèce (la)</option>
            <option value="122">Guam</option>
            <option value="123">Hong Kong</option>
            <option value="124">Hongrie (la)</option>
            <option value="125">Indonésie (l')</option>
            <option value="126">Islande (l')</option>
            <option value="127">Japon (le)</option>
            <option value="128">Kiribati (les)</option>
            <option value="129">Lao, République démocratique populaire</option>
            <option value="130">Lettonie (la)</option>
            <option value="131">Lituanie (la)</option>
            <option value="132">Macao</option>
            <option value="133">
              Macédoine (l'ex‑République yougoslave de)
            </option>
            <option value="134">Malaisie (la)</option>
            <option value="135">Malte</option>
            <option value="136">Mariannes du Nord (les Îles)</option>
            <option value="137">Marshall (Îles)</option>
            <option value="138">Micronésie, États fédérés de</option>
            <option value="139">Moldova&nbsp;, République de</option>
            <option value="140">Mongolie (la)</option>
            <option value="141">Monténégro (le)</option>
            <option value="142">Myanmar (le)</option>
            <option value="143">Nauru</option>
            <option value="144">Népal (le)</option>
            <option value="145">Niue</option>
            <option value="146">Norfolk (l'Île)</option>
            <option value="147">Nouvelle-Zélande (la)</option>
            <option value="148">Palaos (les)</option>
            <option value="149">Papouasie-Nouvelle-Guinée (la)</option>
            <option value="150">Philippines (les)</option>
            <option value="151">Pitcairn</option>
            <option value="152">Pologne (la)</option>
            <option value="153">Polynésie française (la)</option>
            <option value="154">Portugal (le)</option>
            <option value="155">Roumanie (la)</option>
            <option value="156">Saint-Marin</option>
            <option value="157">
              Saint-Siège (le) [État de la Cité du Vatican (l')]
            </option>
            <option value="158">Salomon (Îles)</option>
            <option value="159">Samoa (les)</option>
            <option value="160">Samoa américaines (les)</option>
            <option value="161">Serbie</option>
            <option value="162">Singapour</option>
            <option value="163">Slovaquie (la)</option>
            <option value="164">Slovénie (la)</option>
            <option value="165">Taïwan (Province de Chine)</option>
            <option value="166">tchèque (la&nbsp;République)</option>
            <option value="167">Thaïlande (la)</option>
            <option value="168">Timor-Leste (le)</option>
            <option value="169">Tokelau (les)</option>
            <option value="170">Tonga (les)</option>
            <option value="171">Tuvalu (les)</option>
            <option value="172">Vanuatu (le)</option>
            <option value="173">Viet Nam (le)</option>
            <option value="174">Wallis-et-Futuna</option>
            <option value="175">Belgique (la)</option>
            <option value="176">Pays-Bas (les)</option>
            <option value="177">Anguilla</option>
            <option value="178">Antarctique (l')</option>
            <option value="179">Antigua-et-Barbuda</option>
            <option value="180">Argentine (l')</option>
            <option value="181">Aruba</option>
            <option value="182">Bahamas (les)</option>
            <option value="183">Barbade (la)</option>
            <option value="184">Belize (le)</option>
            <option value="185">Bermudes (les)</option>
            <option value="186">Bolivie, l'État plurinational de la</option>
            <option value="187">Bonaire, Saint-Eustache et Saba</option>
            <option value="188">Bouvet (l'Île)</option>
            <option value="189">Brésil (le)</option>
            <option value="190">Caïmans (les&nbsp;Îles)</option>
            <option value="191">Chili (le)</option>
            <option value="192">Christmas (l'Île)</option>
            <option value="193">
              Cocos (les&nbsp;Îles)/ Keeling (les&nbsp;Îles)
            </option>
            <option value="194">Colombie (la)</option>
            <option value="195">Costa Rica (le)</option>
            <option value="196">Cuba</option>
            <option value="197">Curaçao</option>
            <option value="198">dominicaine (la&nbsp;République)</option>
            <option value="199">Dominique (la)</option>
            <option value="200">Équateur (l')</option>
            <option value="201">
              Falkland (les Îles)/Malouines (les Îles)
            </option>
            <option value="202">
              Géorgie du Sud-et-les Îles Sandwich du Sud (la)
            </option>
            <option value="203">Grenade (la)</option>
            <option value="204">Guadeloupe (la)</option>
            <option value="205">Guatemala (le)</option>
            <option value="206">Guyana (le)</option>
            <option value="207">Haïti</option>
            <option value="208">Heard-et-Îles MacDonald (l'Île)</option>
            <option value="209">Honduras (le)</option>
            <option value="210">Iles Vierges Britanniques</option>
            <option value="211">Jamaïque (la)</option>
            <option value="212">Mexique (le)</option>
            <option value="213">Montserrat</option>
            <option value="214">Nicaragua (le)</option>
            <option value="215">Panama (le)</option>
            <option value="216">Paraguay (le)</option>
            <option value="217">Pérou (le)</option>
            <option value="218">Porto Rico</option>
            <option value="219">
              Sainte-Hélène, Ascension et Tristan da Cunha
            </option>
            <option value="220">Saint-Kitts-et-Nevis</option>
            <option value="221">Saint-Martin (partie néerlandaise)</option>
            <option value="222">Saint-Pierre-et-Miquelon</option>
            <option value="223">Saint-Vincent-et-les-Grenadines</option>
            <option value="224">Salvador (le)</option>
            <option value="225">Suriname (le)</option>
            <option value="226">Terres australes françaises (les)</option>
            <option value="227">Trinité-et-Tobago (la)</option>
            <option value="228">Turks-et-Caïcos (les Îles)</option>
            <option value="229">Uruguay (l')</option>
            <option value="230">
              Venezuela, République bolivarienne du&nbsp;
            </option>
            <option value="231">Vierges britanniques (les&nbsp;Îles)</option>
            <option value="232">Vierges des États-Unis (les Îles)</option>
            <option value="233">Luxembourg (le)</option>
            <option value="234">Andorre (l')</option>
            <option value="235">Espagne (l')</option>
            <option value="236">Guyane française (la&nbsp;)</option>
            <option value="237">Martinique (la)</option>
            <option value="238">Nouvelle-Calédonie (la)</option>
            <option value="239">Réunion (La)</option>
            <option value="240">Saint-Barthélemy</option>
            <option value="241">Sainte-Lucie</option>
            <option value="242">Saint-Martin (partie française)</option>
            <option value="243">Allemagne (l')</option>
            <option value="244">Autriche (l')</option>
            <option value="245">Liechtenstein (le)</option>
            <option value="246">Suisse (la)</option>
            <option value="247">Canada (le)</option>
            <option value="248">États-Unis (les)</option>
            <option value="249">
              Îles mineures éloignées des États-Unis (les)
            </option>
          </select><span style="opacity: 1"><strong>Pays</strong> / <i>Country</i> &nbsp;<span class="mandatory">*</span></span></label><label><select name="departement" disabled="disabled">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">21</option>
            <option value="21">22</option>
            <option value="22">23</option>
            <option value="23">24</option>
            <option value="24">25</option>
            <option value="25">26</option>
            <option value="26">27</option>
            <option value="27">28</option>
            <option value="28">29</option>
            <option value="29">30</option>
            <option value="30">31</option>
            <option value="31">32</option>
            <option value="32">33</option>
            <option value="33">34</option>
            <option value="34">35</option>
            <option value="35">36</option>
            <option value="36">37</option>
            <option value="37">38</option>
            <option value="38">39</option>
            <option value="39">40</option>
            <option value="40">41</option>
            <option value="41">42</option>
            <option value="42">43</option>
            <option value="43">44</option>
            <option value="44">45</option>
            <option value="45">46</option>
            <option value="46">47</option>
            <option value="47">48</option>
            <option value="48">49</option>
            <option value="49">50</option>
            <option value="50">51</option>
            <option value="51">52</option>
            <option value="52">53</option>
            <option value="53">54</option>
            <option value="54">55</option>
            <option value="55">56</option>
            <option value="56">57</option>
            <option value="57">58</option>
            <option value="58">59</option>
            <option value="59">60</option>
            <option value="60">61</option>
            <option value="61">62</option>
            <option value="62">63</option>
            <option value="63">64</option>
            <option value="64">65</option>
            <option value="65">66</option>
            <option value="66">67</option>
            <option value="67">68</option>
            <option value="68">69</option>
            <option value="69">70</option>
            <option value="70">71</option>
            <option value="71">72</option>
            <option value="72">73</option>
            <option value="73">74</option>
            <option value="74">75</option>
            <option value="75">76</option>
            <option value="76">77</option>
            <option value="77">78</option>
            <option value="78">79</option>
            <option value="79">80</option>
            <option value="80">81</option>
            <option value="81">82</option>
            <option value="82">83</option>
            <option value="83">84</option>
            <option value="84">85</option>
            <option value="85">86</option>
            <option value="86">87</option>
            <option value="87">88</option>
            <option value="88">89</option>
            <option value="89">90</option>
            <option value="90">91</option>
            <option value="91">92</option>
            <option value="92">93</option>
            <option value="93">94</option>
            <option value="94">95</option>
          </select><span style="opacity: 1"><strong>Département *</strong> / <i>Department</i></span></label><label><input type="email" name="email" placeholder="<strong>E-mail</strong> " required="required" value="" /><span><strong>E-mail</strong> &nbsp;<span class="mandatory">*</span></span></label><label><input type="text" name="sujet" placeholder="<strong>Sujet</strong> / <i>Object</i> " required="required" value="" /><span><strong>Sujet</strong> / <i>Object</i> &nbsp;<span class="mandatory">*</span></span></label><label>
          <textarea name="message" required="required"></textarea><span> &nbsp;<span class="mandatory">*</span></span></label>
      </form>
      <div class="sender">
        <div class="sender-txt"><strong>Envoyer</strong> / <i>Send</i></div>
        <div class="sender-btn">
          <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571 413.09">
            <polygon points="178.1 255.69 230.57 412.59 285.5 294.48 570.5 0.5 178.1 255.69"></polygon>
            <polygon points="570.5 0.5 285.5 294.48 285.5 294.48 502.1 372.73 570.5 0.5"></polygon>
            <polygon points="570.5 0.5 0.5 191.53 178.1 255.68 178.1 255.68 570.5 0.5"></polygon>
            <polygon points="230.57 412.59 365.15 322.31 286.54 293.4 230.57 412.59"></polygon>
          </svg>
        </div>
      </div>
      <div class="body360-form-sendingdisplay">
        <div class="loader">
          <div class="loader-point loader-point--1"></div>
          <div class="loader-point loader-point--2"></div>
          <div class="loader-point loader-point--3"></div>
        </div>
        <div class="body360-form-sendingdisplay-txt">
          <strong>Envoi en cours</strong> / <i>Sending</i>
        </div>
      </div>
    </div>
  </div>
  <div class="popUp-closer" onclick="closePopUp()">
    <div class="popUp-closer-barre"></div>
    <div class="popUp-closer-barre"></div>
    <div class="popUp-closer-barre"></div>
    <div class="popUp-closer-barre"></div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap");
$c-primary: #98b0db;
$c-secondary: #c1c1c1;
$c-tercary: #7393c0;
$c-green: #008d36;
$c-red: #e20d1c;
* {
  font-family: Oswald;
}
.body360 {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: transparent;
  pointer-events: none;
  &--center {
    .body360-content {
      right: 50%;
      transform: translate(50%, 0);
    }
  }
  &-content {
    overflow-x: hidden;
    color: $c-secondary;
    position: absolute;
    pointer-events: all;
    top: 2em;
    right: 2em;
    background-color: #fff;
    width: calc(100% - 4em);
    border-radius: 1em;
    height: calc(100% - 4em);
    overflow-y: scroll;
    text-align: center;
    &::-webkit-scrollbar {
      width: 1em;
    }
    /* Track */
    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 0.5em;
    }
    /* Handle */
    &::-webkit-scrollbar-thumb {
      border-top-right-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
      border-top-left-radius: 0.15em;
      border-bottom-left-radius: 0.15em;
      background: $c-secondary;
      &:hover {
        background: $c-primary;
      }
    }
  }
  &-cartouche {
    width: 50%;
    margin: 0 auto;
  }
  &-title {
    font-weight: 400;
    padding-top: 1em;
    margin: 0 auto;
    width: 50%;
    text-align: center;
    font-size: 30px;
    color: $c-tercary;
  }
  &-subtitle {
    font-size: 24px;
    font-weight: bold;
  }
  &-message {
    color: $c-green;
    background-color: rgba($color: $c-green, $alpha: 0.2);
  }
  &-error {
    color: $c-red;
    background-color: rgba($color: $c-red, $alpha: 0.2);
  }
  &-message,
  &-error {
    font-style: italic;
    display: inline-block;
    margin: 0 auto;
    max-width: calc(100% - 2em);
    padding: 1em;
    border-radius: 2em;
    font-size: 18px;
  }
  &-texte {
    padding: 0 1em;
  }
  &-form {
    padding: 1em 2em;
    text-align: center;
    position: relative;
    label {
      font-size: 22px;
      clear: both;
      position: relative;
      display: block;
      margin: 1em 0;
      > span {
        font-weight: 700;
        bottom: 0;
        left: 0;
        transition: 0.3s;
        position: absolute;
        color: $c-secondary;
        i {
          font-weight: normal;
        }
      }
    }
    input,
    select {
      outline: none;
      color: #555;
      margin-bottom: 0 !important;
      font-size: inherit;
      border: none;
      width: 100%;
      border-bottom: solid thin $c-secondary;
      font-weight: 700;
      &:disabled {
        display: none;
        & + span {
          display: none;
        }
      }
      &::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        opacity: 1; /* Firefox */
        color: transparent;
        pointer-events: none;
        opacity: 0;
      }
      &:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        pointer-events: none;
        color: transparent;
        opacity: 0;
      }
      &::-ms-input-placeholder {
        /* Microsoft Edge */
        pointer-events: none;
        color: transparent;
        opacity: 0;
      }
      &[type="submit"] {
        width: calc(45% + 1.5em);
        border-radius: 2em;
        background-color: $c-primary;
        color: #fff;
        margin: 2em auto 2em auto;
        display: block;
        padding: 0.75em 2em;
      }
      option {
        color: black;
      }
      & + span {
        pointer-events: none !important;
        transform-origin: 0% 0%;
      }
      &:focus {
        border-bottom-width: 2px;
        & + span {
          transform: scale(0.75) translate(0, -1.25em);
        }
      }
    }
    input {
      &:not(:placeholder-shown) {
        // color: red;
        & ~ span {
          color: transparent;
          pointer-events: none;
        }
      }
    }
    .input--small {
      clear: none;
      width: 45%;
      float: left;
      & > span {
        white-space: nowrap;
      }
      & + .form_errors {
        min-width: 45%;
        margin-left: 0;
      }
      &:nth-of-type(2n) {
        float: right;
        & + .form_errors {
          margin-left: auto;
          margin-right: 0;
        }
      }
    }
    label.input--large {
      display: block;
      width: 100%;
      padding: 0 2em;
      & > span {
        left: 2em;
      }
      input {
        width: 100%;
      }
    }
    a {
      color: $c-secondary;
      font-size: 20px;
      display: block;
      margin: 1em;
    }
    .fieldset_checkbox {
      border: 0;
      font-size: 12px;
      input {
        -moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        margin: 0;
        border: solid 2px $c-primary;
        height: 1em;
        width: 1em;
        vertical-align: middle;
        transition: 0.3s;
        font-weight: 400;
        font-style: italic;
        margin-right: 0.5em;
        &::before {
          content: "✓";
          color: white;
          position: relative;
          top: -5px;
        }
        &:checked {
          background-color: $c-primary;
        }
      }
      a {
        font-size: inherit;
        display: inline;
        padding: 0;
        margin: 0;
      }
      label {
        font-size: inherit;
      }
      legend {
        display: none;
      }
    }
    &--register {
      input,
      select,
      label {
        font-size: 18px;
      }
    }
    .form_errors {
      font-family: inherit;
      color: $c-red;
      clear: both;
      list-style-type: none;
      width: fit-content;
      margin: 0 auto;
      li {
        width: fit-content;
        margin: 0;
      }
      ul li {
        width: 100%;
        text-align: left;
      }
    }
    textarea {
      width: 100%;
      min-height: 8em;
      border: solid thin $c-secondary;
      & + span {
        display: none;
      }
    }
    &-sendingdisplay {
      background-color: #fff;
      position: absolute;
      top: calc(50% - 2em);
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 1.5em;
      opacity: 0;
      pointer-events: none !important;
      transition: 0.3s 0s;
      &-txt {
        position: relative;
        margin-top: 2em;
      }
    }
  }
  a {
    font-weight: normal;
  }
}

//Ipad Pro debout / Ipad couché
@media only screen and (min-width: 1024px) {
  .body360 {
    &-content {
      color: $c-secondary;
      position: absolute;
      pointer-events: all;
      top: 2em;
      right: 4em;
      background-color: #fff;
      width: 500px;
      max-width: calc(100% - 8em);
      border-radius: 1em;
      height: calc(100% - 4em);
      overflow-y: scroll;
      text-align: center;
    }
    &-form {
      label {
        margin: 1.5em 0;
      }
    }
  }
}

//Ipad pro couché et pc portable
@media only screen and (min-width: 1366px) {
  .body360 {
    &-content {
      width: 550px;
    }
    &-title {
      padding: 1em 0;
    }
  }
}
.loader {
  height: 3em;
  width: 3em;
  margin: 0 auto;
  position: relative;
  animation: slideLoader 2s linear 0s infinite normal;
  left: 0.75em;
  pointer-events: none;
  * {
    pointer-events: none;
  }
  &-point {
    top: 0;
    left: 0;
    height: 1rem;
    width: 1rem;
    position: absolute;
    background-color: $c-primary;
    border-radius: 50%;
    &--1 {
      left: -1.5em;
    }
    &--2 {
      animation: rotateLoader 2s linear 0s infinite normal;
    }
    &--3 {
      left: 1.5em;
    }
  }
}

@keyframes slideLoader {
  0% {
    transform: translateX(0.5em);
  }
  25% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(1em);
  }
  100% {
    transform: translateX(0.5em);
  }
}

@keyframes rotateLoader {
  0% {
    transform: rotate(0deg);
    transform-origin: calc(50% + 1.5em) 50%;
  }
  50% {
    transform: rotate(360deg);
    transform-origin: calc(50% + 1.5em) 50%;
  }
  51% {
    transform: rotate(360deg);
    transform-origin: calc(50% - 1.5em) 50%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: calc(50% - 1.5em);
  }
}
.sender {
  cursor: pointer;
  &-btn {
    margin: 0.5em;
    background-color: transparent;
    padding: 0.5em 0em;
    border-radius: 2em;
    width: calc(45% + 1.5em);
    height: 3em;
    margin: 0 auto;
    transition: width 0.3s 0s, background-color 0.1s 0.3s;
    z-index: 10;
    &::before {
      border-radius: 2em;
      content: "";
      position: absolute;
      width: calc(45% + 1.5em);
      height: 3em;
      display: block;
      background-color: $c-primary;
      left: 50%;
      top: calc(100% - 4em);
      transform: translate(-50%, 0%);
      transition: 0.3s;
      z-index: 5;
    }
    svg {
      height: 2em;
      position: absolute;
      left: 50%;
      bottom: 1.5em;
      z-index: 6;
      transform: translate(-50%, 0%);
      polygon {
        fill: $c-primary;
        stroke: #fff;
        stroke-width: 4px;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    }
  }
}
.body360-message-sended {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sending {
  form,
  .sender-txt {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s 0s;
  }
  .body360-form-sendingdisplay {
    opacity: 1;
    pointer-events: all;
    transition: 0.3s;
  }
  & + .popUp-closer {
    &,
    & * {
      pointer-events: none;
      filter: saturate(0.5);
    }
  }
}
.isSend {
  padding-right: 1em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: stretch;
  .body360-message-sended {
    opacity: 1;
    transition: opacity 0.3s 1.4s;
  }

  form,
  .sender-txt {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s 0.4s;
    * {
      pointer-events: none !important;
    }
  }
  .sender .sender-btn {
    &::before {
      animation: beforeanim 1.5s linear 0s 1 normal forwards;
    }
    svg {
      transform: translate(500px, -250px);
      transition: transform 0.4s 1.28s ease-in;

      polygon {
        animation: plane 1.4s linear 0s 1 normal forwards;
      }
    }
  }
}

@keyframes beforeanim {
  0% {
    border-radius: 2em;
  }
  5% {
    top: calc(100% - 4em);
    transform: translate(-50%, 0%) scale(1);
    width: 3em;
    transform-origin: 50% 100%;
    border-radius: 2em;
  }
  10% {
    top: calc(100% - 4em);
    transform: translate(-50%, 0%) scale(0.75, 1.5);
  }
  14% {
    transform: translate(-50%, 0%) scale(0.75, 1.4);
  }
  26% {
    transform: translate(-50%, 0%) scale(0.75, 1.4);
    top: calc(100% - 12em);
    transform-origin: 50% 0%;
  }
  30% {
    transform: translate(-50%, 0%) scale(1.1, 0.9);
  }
  44% {
    transform: translate(-50%, 0%) scale(1, 1) rotateY(360deg);
  }
  56% {
    transform: translate(-50%, 0%) scale(1, 2.5);
  }
  65% {
    top: calc(100% - 12em);
    transform: translate(-50%, 0%) scale(0.75, 1.5);
  }
  72% {
    transform: translate(-50%, 0%) scale(0.75, 1.4);
    height: 2em;
    width: 2em;
  }
  78% {
    height: 0.5em;
    width: 0.5em;
    top: calc(100% - 4em);
    transform-origin: 50% 100%;
    background-color: $c-primary;
    box-shadow: none;
  }
  83% {
    top: calc(100% - 4em);
    width: 0.5em;
    height: 0.25em;
    transform: translate(-50%, 0%) scale(1);
    background-color: white;
    box-shadow: 0.5em 0 inset #fff, -0.5em 0 inset #fff;
  }
  85% {
    top: calc(100% - 3em);
    width: 4em;
    height: 0.25em;
    transform: translate(-50%, 0%) scale(1);
    background-color: white;
    box-shadow: 0.5em 0 inset #fff, -0.5em 0 inset #fff;
  }
  86% {
    box-shadow: 0.5em 0 inset #fff, -0.5em 0 inset #fff;
    transform-origin: 50% 50%;
    transform: translate(-50%, 0%) scale(1) rotateZ(35deg);
  }
  90% {
    box-shadow: 0.5em 0 inset $c-primary, -0.5em 0 inset $c-primary;
  }
  100% {
    box-shadow: 0.1em 0 inset #fff, -0.1em 0 inset #fff;
    transform: translate(-50%, 0%) scale(1) rotateZ(35deg);
    background-color: white;
    top: calc(100% - 3em);
    width: 4em;
    height: 0.25em;
  }
}

@keyframes plane {
  0% {
    fill: transparent;
    stroke: #fff;
  }
  20% {
    stroke: #fff;
  }
  21% {
    stroke: $c-primary;
  }
  90% {
    fill: transparent;

    stroke: $c-primary;
  }
  91% {
    stroke: #fff;
    fill: $c-primary;
  }
  100% {
    stroke: #fff;
    fill: $c-primary;
  }
}
View Compiled
function initSelect() {
  var selects = document.querySelectorAll("select");
  for (let index = 0; index < selects.length; index++) {
    const select = selects[index];
    select.addEventListener("change", (event) => {
      selectChange(event.currentTarget);
    });
    selectChange(select);
  }
}
function selectChange(select) {
  if (select.value != "") {
    select.closest("label").querySelector("span").style.opacity = 0;
    if (select.getAttribute("name") == "categorie") {
      document.querySelector('input[name="autre_explic"]').disabled =
        select.value != "rev_autre";
    }
  } else {
    select.closest("label").querySelector("span").style.opacity = 1;
  }
}
var formElement;
var feedBackElement = [];
function initForm() {
  var sender = document.querySelector(".sender");
  sender.addEventListener("click", sendForm);
  formElement = document.querySelector("form");
}

async function sendForm(event) {
  document.querySelector(".body360-content").classList.add("sending");
  setTimeout(() => {
    formIsGreat();
  }, 1500);
}

function formIsGreat() {
  document.querySelector(".body360-content").classList.remove("sending");
  var msg = document.createElement("div");
  msg.classList.add("body360-message");
  msg.classList.add("body360-message-sended");
  msg.innerHTML = "Message envoyé";
  feedBackElement.push(msg);
  document.querySelector(".body360-form").append(msg);
  document.querySelector(".body360-content").classList.add("isSend");
}

window.addEventListener("load", function () {
  initSelect();
  initForm();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.