drupal-reha/web/themes/custom/reha/scss/partials/_header.scss

header{                       
    display: block;
    height: $header-height;
    background-color: white;
    // position: fixed;
    z-index: 99;
    width: 100vw;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    // .sticky{
    //         position: fixed;
    // }
    div{
        display: inline-grid;
        align-items: center;
        grid-template-columns: repeat(10, 1fr) ;

        #block-reha-logoministere{
            grid-column: 1;
            width: fit-content;
            padding-left: 4rem;
            height: $header-height;
        }
        #block-reha-logoreha{
            grid-column: 2;
            max-height: 90%;
            height: $header-height;
            .field--name-field-logo{
                height: $header-height;
                .field__item{
                    height: $header-height;
                    img{
                        height: 150px;
                        width: fit-content;
                    }
                }
            }
        }

        #block-reha-connexionutilisateur{
            grid-column: 9;
            .bouton-connexion{
                padding-right: 3rem;

                :before{
                    content: url(../images/noun-contact-2495375.svg);
                    padding-right: 1rem;
                }
            }
            display: flex;
            flex-direction: column;
            height: fit-content;
            .connexion{
                float: right;
                // display: none; /* Cacher initialement le contenu */
                height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
                // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
                width: 100%;
                position: relative;
                .connexion-full{
                    display: none;
                    background-color: $white;
                    width: 400px;
                    height: 100vh;
                    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                    clip-path: inset(0px -10px -10px -10px);
                    padding: 5% 10% 5% 5%;
                    position: relative;
                    right:-150px;
                }
            }


            // .user-login-form{
            //     display: none;
            //     background-color: $white;
            //     width: 100%;
            //     height: 100vh;
            //     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            //     clip-path: inset(0px -10px -10px -10px);
            //     padding: 5% 10% 5% 5%;
            // }
            // ul{
            //     display: none;
            //     // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
            //     background-color: $white;
            //     width: 100%;
            //     height: 100vh;
            //     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            //     clip-path: inset(0px -10px -10px -10px);
            //     padding: 5% 10% 5% 5%;
            // }
        }
        #block-reha-config-pages{
            grid-column: 10;
            .bouton-contact{
                padding-right: 4rem;
                ::before{
                    content: url(../images/noun-letter-1064628.svg);
                    padding-right: 1rem;
                }
            }
            display: flex;
            flex-direction: column;
            height: fit-content;

            .config_pages--contact--full {
                float: right;
                display: none; /* Cacher initialement le contenu */
                height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
                // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
                width: 100%;
            } 
            
            .field--type-text-long {
                transition: height 0.5s; /* 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);
                .field__item{
                  	padding: 5% 10% 5% 5%;
                }
            } 
        }
    }

    .bouton{
        align-self: flex-end;
        width: fit-content;
        h2{
            text-transform: lowercase;
            display: inline-flex;
        }
    }
}





// pop in biographie

// .config_pages--contact--full {
// 	position: fixed;
// 	z-index: 1;
// 	top: $header-height;
// 	right: 0;
// 	bottom: 0;
// 	left: 0;
// 	display: none;
// }
// .config_pages--contact--full.open{
// 	display: block;
//   // .bouton {
//   //   border: solid !important;
//   //   background-color: transparent;
//   //   text-transform: uppercase;
//   //   align-self: flex-end;
//   //   margin:auto;
//   //   margin-bottom: 2rem;
//   // }
// }

// .config_pages--contact--full .field--type-text-long{
// 	position: absolute;
// 	background: white !important;
// 	top: 50%;
// 	left: 50%;
// 	transform: translateX(-50%) translateY(-50%);
// 	width: 50%;
// 	height: content;
// 	min-height: 50px;
//   border: solid;
//   color: black;

//   .field__item{
//   	padding: 5% 10% 5% 5%;
//   }

// //   a.close{
// //   	position: absolute;
// //   	right: 5%;
// //   	top:5%;
// //   	color: black;
// //   	font-size: 30px;
// //   }

// //   a.close:hover{
// //   	color: black;
// //   }

//   @media (max-width: 442px) {
//     transform: translateX(-50%) translateY(-50%);
//     width: 85%;
//     height: 80%;
//     overflow-y: scroll;
//     // a.close {
//     //   font-size: 0.8rem;
//     //   position: absolute;
//     //   right: 2%;
//     //   top:0.8%;
//     // }
//     p {
//       font-size: 0.8rem;
//       margin-top: 0;
//     }
//     .field__item{
//       padding: 5% 5% 5% 5%;
//     }

//   }
//   @media (max-width: 1024px) {
//     transform: translateX(-50%) translateY(-50%);
//     width: 75%;
//     height: 65%;
//     overflow-y: scroll;
//     a.close {
//       font-size: 0.8rem;
//       position: absolute;
//       right: 2%;
//       top:0.8%;
//     }
//     p {
//       font-size: 0.8rem;
//       margin-top: 0;
//     }
//     .field__item{
//       padding: 5% 5% 5% 5%;
//     }

//   }
// }