--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.086" viewBox="0 0 33.5 29.086">
+ <g id="Groupe_47" data-name="Groupe 47" transform="translate(-4417.889 997.75)">
+ <g id="Groupe_45" data-name="Groupe 45" transform="translate(4435.19 -984.862)">
+ <circle id="Ellipse_13" data-name="Ellipse 13" cx="3.022" cy="3.022" r="3.022" transform="translate(4.702 4.702)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
+ <path id="Tracé_33" data-name="Tracé 33" d="M4460.729-960.9a7.681,7.681,0,0,1-4.365,1.344,7.725,7.725,0,0,1-7.725-7.724,7.725,7.725,0,0,1,7.725-7.724,7.724,7.724,0,0,1,7.724,7.724v.671a2.351,2.351,0,0,1-2.352,2.351,2.351,2.351,0,0,1-2.351-2.351v-.671" transform="translate(-4448.639 975)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
+ </g>
+ <g id="Groupe_46" data-name="Groupe 46" transform="translate(4418.639 -997)">
+ <path id="Tracé_34" data-name="Tracé 34" d="M4430.777-978.241h-10.482a1.655,1.655,0,0,1-1.656-1.655v-14.9a2.213,2.213,0,0,1,2.207-2.207h24.276a2.213,2.213,0,0,1,2.207,2.207v6.069" transform="translate(-4418.639 997)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <path id="Tracé_35" data-name="Tracé 35" d="M4447.239-996l-13.6,11.034L4419.515-996" transform="translate(-4419.032 996.552)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1.5"/>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.109" viewBox="0 0 33.5 29.109">
+ <g id="Groupe_48" data-name="Groupe 48" transform="translate(-4644.654 1067.424)">
+ <path id="Tracé_36" data-name="Tracé 36" d="M4697.908-1041.295a2.3,2.3,0,0,1-2.207,2.207l-9.931.024a2.319,2.319,0,0,1-2.207-2.231v-23.172a2.3,2.3,0,0,1,2.207-2.207h9.931a2.276,2.276,0,0,1,2.207,2.183Z" transform="translate(-29.355)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
+ <line id="Ligne_92" data-name="Ligne 92" x2="14.345" transform="translate(4654.208 -1062.26)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
+ <line id="Ligne_93" data-name="Ligne 93" x2="14.345" transform="translate(4654.208 -1043.502)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
+ <line id="Ligne_94" data-name="Ligne 94" y2="16.696" transform="translate(4649.794 -1059.358)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <line id="Ligne_95" data-name="Ligne 95" y2="13.913" transform="translate(4645.405 -1057.966)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <line id="Ligne_96" data-name="Ligne 96" y2="16.696" transform="translate(4672.967 -1062.14)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <line id="Ligne_97" data-name="Ligne 97" y2="13.913" transform="translate(4677.405 -1060.749)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ </g>
+</svg>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport"
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="../../css/app.css">
+ <link href="https://fonts.googleapis.com/css?family=Barlow:600|Muli&display=swap" rel="stylesheet">
+ <title>pmi</title>
+</head>
+<body id="contact-module">
+
+<div class="module flex items-center justify-between">
+ <img class="icon-size" src="img/icon-phone.svg" alt="">
+ <p class="text-white"><a class="text-white" href="tel:+330146919332">01 46 91 93 32</a></p>
+</div>
+
+<div class="wrapper-module flex flex-col">
+ <div class="module-mail flex items-center justify-between">
+ <img class="icon-size" src="img/icon-mail.svg" alt="">
+ <p class="text-white"><a class="text-white" href="mailto:contact@pm-instrumentation.com">contact@pm-instrumentation.com</a></p>
+ </div>
+ <div class="module-mail module-reveal flex flex-col items-center justify-center">
+ <p class="text-white">Utilisez notre <a class="text-white underline" href="">formulaire de contact</a></p>
+ </div>
+</div>
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+$h3 = 24px
+$barlow = 'Barlow', sans-serif
+$muli = 'Muli', sans-serif
+$dark = #6B7287
+$lightblue = #0EAADA
+*
+ padding: 0
+ box-sizing: border-box
+ margin: 0
+ font-family: $muli
+
+#contact-module
+ .module
+ width: 175px
+ padding: 0 12px
+ height: 48px
+ position: fixed
+ right: 0
+ background: $lightblue
+ top: 11.2vw
+ transform: translateX(127px)
+ transition: 500ms all ease
+ cursor: pointer
+ &:hover
+ transform: translateX(0px)
+ .icon-size
+ width: 26px;
+ height: 22px;
+ .wrapper-module
+ top: 13.75vw
+ width: 313px
+ height: 96px
+ position: fixed
+ right: 0
+ //background red
+ margin-top: 10px
+ transition: 500ms all ease
+ //transform: translateX(0px)
+ transform: translateX(265px)
+ &:hover
+ transform: translateX(0px)
+ .module-reveal
+ transform: translateX(0px)
+ .module-mail
+ background : $lightblue
+ height: 48px
+ width: 100%
+ padding: 0 12px
+ .module-reveal
+ transform: translateX(48px)
+ transition: 300ms all ease
+ position relative
+ &::after
+ content: ''
+ display block
+ height 1px
+ width 90%
+ background #079ECC
+ position absolute
+ top: 0
+
+
+
--- /dev/null
+* {
+ padding: 0;
+ box-sizing: border-box;
+ margin: 0;
+ font-family: 'Muli', sans-serif;
+}
+#cookie-banner {
+ height: 72px;
+ width: 100vw;
+ font-size: 14px;
+ background-color: rgba(21,47,78,0.8);
+ position: fixed;
+ bottom: 0;
+}
+#cookie-banner p:not(:last-child) {
+ margin-bottom: 0;
+}
+#cookie-banner p {
+ margin-right: 3.5vw;
+}
+#cookie-banner .cookie-btn {
+ background-color: #0eaada;
+ padding: 9px 13px;
+ border-radius: 3px;
+}