callage des élément dans la page de ressources

web/themes/custom/popsu/css/styles.css

@@ -1344,10 +1344,18 @@ footer {
     text-align: center; }
   .path-centre-de-ressources form {
     display: grid;
-    grid-template-columns: 10% repeat(4, 20%); }
+    column-gap: 1rem;
+    grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
     .path-centre-de-ressources form > div:first-child {
       grid-column-start: 2; }
-    .path-centre-de-ressources form select {
+    .path-centre-de-ressources form .form-item-combine {
+      grid-row: 1 / span 1;
+      grid-column-start: 2; }
+    .path-centre-de-ressources form .form-item-programme {
+      grid-column-start: 2; }
+    .path-centre-de-ressources form .form-item-items-per-page {
+      grid-column-start: 2; }
+    .path-centre-de-ressources form select, .path-centre-de-ressources form input {
       display: inline-block;
       width: auto;
       width: 100%;
@@ -1356,41 +1364,72 @@ footer {
       height: auto; }
     .path-centre-de-ressources form div {
       display: inline-block;
-      width: auto;
-      padding: .5rem 1rem; }
-  .path-centre-de-ressources .views-view-grid .views-row {
-    display: grid;
-    grid-template-columns: 10% 20% 20% 20% 20% 10%; }
-    .path-centre-de-ressources .views-view-grid .views-row .views-col:first-child {
-      grid-column-start: 2; }
-  .path-centre-de-ressources .views-view-grid .views-col {
-    background-color: white;
-    background-clip: content-box;
-    width: 100% !important;
-    padding: .3rem; }
-    .path-centre-de-ressources .views-view-grid .views-col a {
-      text-decoration: none; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field:not(:first-child) {
-      padding: 0 0 0 .4rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme {
-      font-weight: 600;
-      display: inline-block;
-      width: auto;
-      color: white;
-      background: red;
-      padding: .15rem .3rem;
-      margin-bottom: 1rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-type-de-ressource {
-      text-transform: uppercase;
-      font-size: 600;
-      margin-bottom: .5rem;
-      font-size: 0.45rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-title {
-      font-style: italic; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-sous-titre {
-      margin-bottom: 1rem; }
-    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-theme {
-      font-size: 0.45rem; }
+      width: auto; }
+    .path-centre-de-ressources form .form-actions {
+      grid-column: 4 / span 2;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      column-gap: 1rem; }
+      .path-centre-de-ressources form .form-actions input {
+        background-color: white;
+        border: solid 1px black;
+        box-shadow: none; }
+  .path-centre-de-ressources .views-view-grid {
+    margin-top: 3rem; }
+    .path-centre-de-ressources .views-view-grid .views-row {
+      display: grid;
+      column-gap: 1rem;
+      row-gap: 1rem;
+      grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
+      .path-centre-de-ressources .views-view-grid .views-row .views-col:first-child {
+        grid-column-start: 2; }
+    .path-centre-de-ressources .views-view-grid .views-col {
+      display: grid;
+      grid-template-columns: 20%  80%;
+      align-items: stretch;
+      background-color: white;
+      background-clip: content-box;
+      width: 100% !important;
+      padding: .3rem; }
+      .path-centre-de-ressources .views-view-grid .views-col a {
+        text-decoration: none; }
+        .path-centre-de-ressources .views-view-grid .views-col a:hover {
+          text-decoration: underline; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field:not(:first-child) {
+        padding: 0 0 0 .4rem; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-image {
+        grid-row: 2 / span 2; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme {
+        grid-row: 1 / span 1;
+        grid-column: 1 / span 2; }
+        .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme .field-content {
+          font-weight: 600;
+          display: inline-block;
+          width: auto;
+          color: white;
+          background: red;
+          padding: .15rem .3rem;
+          margin-bottom: 1rem; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-type-de-ressource {
+        text-transform: uppercase;
+        font-size: 600;
+        margin-bottom: .5rem;
+        font-size: 0.45rem;
+        grid-row: 2 / span 1;
+        grid-column: 2 / span 1; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-title {
+        font-style: italic;
+        grid-row: 3 / span 1;
+        grid-column: 2 / span 1; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-sous-titre {
+        margin-bottom: 1rem;
+        grid-row: 4 / span 1;
+        grid-column: 2 / span 1; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-theme {
+        grid-row: 5 / span 1;
+        grid-column: 1 / span 2;
+        font-size: 0.45rem; }
 
 article h2 {
   font-family: "trueno";