css form proposer operation

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

@@ -222,14 +222,16 @@ header {
       grid-column: 1;
       width: 200px;
       min-width: 100px;
-      padding-left: 4rem;
+      padding-left: 80px;
+      padding-top: 30px;
       height: 100%; }
       header .region-header #block-reha-logoministere img {
         max-width: 100%;
         object-fit: contain; }
       @media (max-width: 891px) {
         header .region-header #block-reha-logoministere {
-          padding-left: 1rem; } }
+          padding-left: 80px;
+          padding-top: 20px; } }
     header .region-header #block-reha-logoreha {
       display: none;
       grid-column: 2;
@@ -273,7 +275,10 @@ header {
           padding: 5% 10% 5% 5%; }
           @media (max-width: 891px) {
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
-              top: 15px; } }
+              top: 50px;
+              right: -250px;
+              width: 500px;
+              height: fit-content; } }
           @media (max-width: 500px) {
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
               top: 15px;
@@ -365,7 +370,7 @@ header {
             header .region-header #block-reha-config-pages .contacts .contacts-full {
               right: 0px;
               top: 100%;
-              width: 100vw;
+              width: 500px;
               padding-left: 0;
               padding-top: 1rem;
               height: fit-content; } }
@@ -375,21 +380,25 @@ header {
               header .region-header #block-reha-config-pages .contacts .contacts-full .titre {
                 padding-left: 1.5rem; } }
             header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
-              left: 320px; }
+              left: 290px; }
               @media (max-width: 891px) {
                 header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
                   left: 242px; } }
               @media (max-width: 500px) {
                 header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
-                  left: 175px; } }
+                  left: 150px; } }
         header .region-header #block-reha-config-pages .contacts .field__item {
           display: flex;
           flex-direction: column;
           padding-left: 3rem; }
-          @media (max-width: 500px) {
+          @media (max-width: 891px) {
             header .region-header #block-reha-config-pages .contacts .field__item {
-              padding-left: 1.5rem;
               padding-bottom: 2rem; } }
+          @media (max-width: 500px) {
+            header .region-header #block-reha-config-pages .contacts .field__item {
+              padding-left: 2rem;
+              padding-bottom: 2rem;
+              padding-right: 1.5rem; } }
   header #block-reha-views-block-current-user-block-block-1 {
     grid-column: 9;
     display: flex;
@@ -460,7 +469,7 @@ header {
     content: url(../images/noun-cross-1151731.svg);
     float: right;
     position: relative;
-    left: 90px;
+    left: 70px;
     cursor: pointer; }
 
 footer {
@@ -482,7 +491,7 @@ footer {
   footer h2 {
     font-size: 1.3rem; }
   footer section:not(:first-of-type) {
-    border-left: #fdc300 solid 5px;
+    border-left: #fdc300 solid 2px;
     padding-left: 2rem; }
     @media (max-width: 891px) {
       footer section:not(:first-of-type) {
@@ -519,6 +528,7 @@ footer {
       width: 40%; } }
   @media (max-width: 520px) {
     #footer-left {
+      width: 100%;
       margin-left: 1rem;
       padding-left: 2rem; } }
   #footer-left div {
@@ -538,6 +548,11 @@ footer {
   #footer-middle {
     width: 40%; } }
 
+@media (max-width: 520px) {
+  #footer-middle {
+    width: 100%;
+    margin-right: 1rem; } }
+
 #footer-middle #block-reha-operateurduprogramme {
   display: flex;
   flex-direction: column; }
@@ -573,6 +588,9 @@ input {
   height: 2rem;
   width: 50%; }
 
+.description {
+  width: 50%; }
+
 .form-submit {
   height: 4rem !important;
   margin-bottom: 1rem;
@@ -806,6 +824,8 @@ input {
 
 #block-reha-contenudelapageprincipale .node-operation-form {
   width: 70%; }
+  #block-reha-contenudelapageprincipale .node-operation-form #edit-title-wrapper input {
+    width: 100%; }
   #block-reha-contenudelapageprincipale .node-operation-form #edit-field-fiche-candidature-wrapper {
     background-color: rgba(153, 147, 174, 0) !important;
     border: none;
@@ -836,7 +856,8 @@ input {
     #block-reha-contenudelapageprincipale .node-operation-form #edit-field-dossier-de-candidature-wrapper .description {
       text-transform: lowercase;
       order: 2;
-      font-style: italic; }
+      font-style: italic;
+      width: 100%; }
     #block-reha-contenudelapageprincipale .node-operation-form #edit-field-dossier-de-candidature-wrapper #edit-field-dossier-de-candidature-0--description > br:first-of-type {
       display: none; }
     #block-reha-contenudelapageprincipale .node-operation-form #edit-field-dossier-de-candidature-wrapper #edit-field-dossier-de-candidature-0--description > ul.main {
@@ -851,14 +872,21 @@ input {
     margin-bottom: 1rem;
     margin-top: 1rem; }
   #block-reha-contenudelapageprincipale .node-operation-form #edit-field-commentaire-0-value {
-    width: 80%; }
+    width: 100%; }
+  #block-reha-contenudelapageprincipale .node-operation-form #edit-field-adresse-0-address input {
+    width: 100%; }
   #block-reha-contenudelapageprincipale .node-operation-form #edit-field-adresse-0-address-container2 {
     display: flex;
     flex-direction: row;
-    width: 100%; }
+    width: 100%;
+    margin-right: 0;
+    justify-content: space-between; }
+    #block-reha-contenudelapageprincipale .node-operation-form #edit-field-adresse-0-address-container2 input {
+      width: 100%; }
     #block-reha-contenudelapageprincipale .node-operation-form #edit-field-adresse-0-address-container2 .form-item {
       display: flex;
-      flex-direction: row; }
+      flex-direction: column;
+      margin-right: 0; }
   #block-reha-contenudelapageprincipale .node-operation-form .form-item {
     display: flex;
     flex-direction: column; }

web/themes/custom/reha/scss/pages/_proposer-une-operation.scss

@@ -2,6 +2,12 @@
 #block-reha-contenudelapageprincipale{
     .node-operation-form{
         width: 70%;
+    
+        #edit-title-wrapper{
+            input{
+                width: 100%;
+            }
+        }
         #edit-field-fiche-candidature-wrapper{
             background-color: rgba(153, 147, 174, 0) !important;
             border: none;
@@ -47,7 +53,7 @@
                 text-transform: lowercase;
                 order: 2;
                 font-style: italic;
-                // font-weight: 800;
+                width: 100%;
             }
             #edit-field-dossier-de-candidature-0--description>br:first-of-type{
                 display: none;
@@ -74,15 +80,26 @@
             margin-top: 1rem;
         }
         #edit-field-commentaire-0-value{
-            width: 80%;
+            width: 100%;
+        }
+        #edit-field-adresse-0-address{
+            input{
+                width: 100%;
+            }
         }
         #edit-field-adresse-0-address-container2{
             display: flex;
             flex-direction: row;
             width: 100%;
+            margin-right: 0;
+            justify-content:space-between;
+            input{
+                width: 100%;
+            }
             .form-item{
                 display: flex;
-                flex-direction: row;
+                flex-direction: column;
+                margin-right: 0;
             }
         }
         .form-item{
@@ -91,12 +108,12 @@
         }
         #edit-field-commentaire-wrapper{
             margin-bottom: 2rem;
-
         }
         .counter{
             font-style: italic;
         }
     }
+    
     .form-managed-file{
     text-transform: lowercase;                
     }

web/themes/custom/reha/scss/partials/_footer.scss

@@ -21,7 +21,7 @@ footer{
 
 
     section:not(:first-of-type){
-        border-left: $yellow-puca solid 5px;
+        border-left: $yellow-puca solid 2px;
         padding-left: 2rem;
         @media(max-width: 891px){
             margin-left: 1rem;
@@ -45,6 +45,7 @@ footer{
         }
         @media(max-width: 520px){
             padding-right: 0;
+            
         }
 
     }
@@ -65,20 +66,16 @@ margin-left: 10%;
     margin-left: 1rem;
     padding-left: 2rem;
     width: 40%;
-
 }
 @media(max-width: 520px){
+    width: 100%;
     margin-left: 1rem;
     padding-left: 2rem;
 }
     div{
     display: flex;
     flex-direction: column;
-    // padding-right: 2rem;
-    // @media(max-width: 891px){
 
-    //     padding-right: 0;
-    // }
         #block-reha-pieddepage {
             ul{
                 padding-left: 0;
@@ -101,6 +98,10 @@ margin-left: 10%;
     @media(max-width: 891px){
         width: 40%;
     }
+    @media(max-width: 520px){
+        width: 100%;
+        margin-right: 1rem;
+    }
     #block-reha-operateurduprogramme{
         display: flex;
         flex-direction: column;

web/themes/custom/reha/scss/partials/_forms.scss

@@ -9,6 +9,9 @@ input{
     height: 2rem;
     width: 50%;
 }
+.description{
+    width: 50%;
+}
 .form-submit{
 
     height: 4rem !important;

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

@@ -30,9 +30,9 @@ header{
         #block-reha-logoministere{
             grid-column: 1;
             width: 200px;
-
             min-width: 100px;
-            padding-left: 4rem;
+            padding-left: 80px;
+            padding-top: 30px;
             height: 100%;
                 img{
                     max-width: 100%;
@@ -40,7 +40,8 @@ header{
                 }
             @media (max-width:891px) {
                 // width: 10%;
-                padding-left: 1rem;
+                padding-left: 80px;
+                padding-top: 20px;
             }   
             
         }
@@ -62,8 +63,6 @@ header{
         }
 
         #block-reha-connexionutilisateur{
-             
-            
             grid-column: 9;
             display: flex;
             flex-direction: column;
@@ -102,8 +101,20 @@ header{
                     clip-path: inset(0px -10px -10px -10px);
                     padding: 5% 10% 5% 5%;
                     @media (max-width:891px) {
-                        top: 15px;
+                        top: 50px;
+                        right: -250px;
+                        width: 500px;
+                        height: fit-content;
+
                     }
+
+                    // @media(max-width: 891px){
+                    //     top: 100%;
+                    //     width: 500px;
+                    //     padding-left: 0;
+                    //     padding-top: 1rem;
+                    //     height: fit-content;
+                    // }
                     @media (max-width:500px) {
                         top: 15px;
                         right: -150px;
@@ -232,11 +243,12 @@ header{
                     @media(max-width: 891px){
                         right: 0px;
                         top: 100%;
-                        width: 100vw;
+                        width: 500px;
                         padding-left: 0;
                         padding-top: 1rem;
                         height: fit-content;
                     }
+                    
 
                     .titre{
                         padding-left:3rem ;
@@ -244,12 +256,12 @@ header{
                             padding-left: 1.5rem;
                         }
                         ::after{
-                            left: 320px;
+                            left: 290px;
                             @media(max-width: 891px){
                                 left: 242px;
                             }
                             @media (max-width:500px) {
-                                left: 175px;
+                                left: 150px;
                             }
                         }
                             
@@ -259,9 +271,13 @@ header{
                         display: flex;
                         flex-direction: column;
                         padding-left: 3rem;
+                        @media (max-width:891px) {
+                            padding-bottom: 2rem;
+                        }
                         @media (max-width:500px) {
-                            padding-left: 1.5rem;
+                            padding-left: 2rem;
                             padding-bottom: 2rem;
+                            padding-right: 1.5rem;
                         }
                     }
                 } 
@@ -352,7 +368,7 @@ header{
             content: url(../images/noun-cross-1151731.svg);
             float: right;
             position: relative;
-            left: 90px;
+            left: 70px;
             cursor: pointer;
             
     }