bouton contact

web/themes/custom/reha/css/reha.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*reha*/
 /*global*/
 /* Colors used for REHA */
@@ -9,6 +10,14 @@
   margin-bottom: 1rem;
   background-color: white; }
 
+.bouton {
+  background-color: white !important;
+  border: none !important;
+  cursor: pointer; }
+
+.mailto {
+  text-decoration: underline; }
+
 /*marianne*/
 @font-face {
   font-family: 'Marianne';
@@ -104,8 +113,7 @@
   display: flex;
   flex-flow: row wrap; }
   .layout-container header {
-    flex: 0 0 100%;
-    height: 150px; }
+    flex: 0 0 100%; }
   .layout-container main {
     position: relative; }
   .layout-container footer {
@@ -133,13 +141,14 @@ a {
 /*partials*/
 header {
   display: block;
+  height: 150px;
   background-color: white;
-  position: fixed;
   z-index: 99;
   width: 100vw;
   position: -webkit-sticky;
   position: sticky;
-  top: 0; }
+  top: 0;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
   header div {
     display: flex;
     flex-direction: row;
@@ -151,23 +160,37 @@ header {
     header div #block-reha-connexionutilisateur {
       display: flex;
       flex-direction: column;
-      width: 15%; }
+      width: 15%;
+      height: 150px; }
       header div #block-reha-connexionutilisateur .user-login-form {
         display: none; }
       header div #block-reha-connexionutilisateur ul {
         display: none; }
     header div #block-reha-config-pages {
-      width: 15%;
+      width: 35%;
       display: flex;
-      flex-direction: column; }
+      flex-direction: column;
+      height: 150px; }
+      header div #block-reha-config-pages .bouton {
+        align-self: flex-end;
+        width: 50%; }
       header div #block-reha-config-pages .config_pages--contact--full {
         display: none;
-        /* Cacher initialement le contenu */ }
-      header div #block-reha-config-pages .open {
-        display: block; }
+        /* Cacher initialement le contenu */
+        height: 0;
+        /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
+        width: 100%; }
       header div #block-reha-config-pages .field--type-text-long {
         transition: height 0.5s;
-        /* Animation de 0.5 seconde lors de l'expansion vers le bas */ }
+        /* Animation de 0.5 seconde lors de l'expansion vers le bas */
+        background-color: white;
+        display: block;
+        width: 100%;
+        height: 100vh;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+        clip-path: inset(0px -10px -10px -10px); }
+        header div #block-reha-config-pages .field--type-text-long .field__item {
+          padding: 5% 10% 5% 5%; }
 
 footer {
   background-color: white;