buttons rapport

assets/css/components/_buttons.scss

@@ -70,10 +70,17 @@ button:disabled{
     line-height: 1;
     overflow: hidden;
     white-space: nowrap;
+    svg{
+        width: 18px;
+        height: 18px;
+        position: relative;
+        top: -1px;
+    }
     a{
         display: flex;
         align-items: center;
         justify-content: center;
+        gap: 1ch;
         width: 100%;
         height: 100%;
         padding: 0 2ch;
@@ -83,10 +90,12 @@ button:disabled{
         display: flex;
         align-items: center;
         justify-content: center;
+        gap: 1ch;
         padding: 0 2ch;
         padding-top: 4px;
 
     }
+ 
     
 }
 
@@ -95,29 +104,33 @@ button:disabled{
 .btn--bold{
     background-color: var(--color-txt);
     color: var(--color-bg);
+    svg{ fill: var(--color-bg); }
     &:hover{
         background-color: var(--color-accent);
         border-color: var(--color-accent);
         a{
             color: var(--color-bg);  
         }
+        svg{ fill: var(--color-bg); }
     }
   
 }
 
 .btn--bold-inline{
     background-color: var(--color-bg);
-}
+    svg{ fill: var(--color-txt); }
-
+    &:hover{
-.btn--bold-inline:hover{
-    background-color: var(--grey-800);
-    color: var(--color-txt);
-    a{
         background-color: var(--grey-800);
         color: var(--color-txt);
+        a{
+            background-color: var(--grey-800);
+            color: var(--color-txt);
+        }
     }
+    
 }
 
+
 .btn--light{
     border: var(--border-light);
 }
@@ -151,7 +164,6 @@ button:disabled{
 
     cursor: pointer;
 
-
     .icon, .txt{ z-index: 10; }
 
     .icon{

assets/css/style.css

@@ -332,11 +332,19 @@ button:disabled {
   overflow: hidden;
   white-space: nowrap;
 }
+.btn--bold svg,
+.btn--bold-inline svg {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  top: -1px;
+}
 .btn--bold a,
 .btn--bold-inline a {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1ch;
   width: 100%;
   height: 100%;
   padding: 0 2ch;
@@ -347,6 +355,7 @@ button:disabled {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1ch;
   padding: 0 2ch;
   padding-top: 4px;
 }
@@ -355,6 +364,9 @@ button:disabled {
   background-color: var(--color-txt);
   color: var(--color-bg);
 }
+.btn--bold svg {
+  fill: var(--color-bg);
+}
 .btn--bold:hover {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
@@ -362,11 +374,16 @@ button:disabled {
 .btn--bold:hover a {
   color: var(--color-bg);
 }
+.btn--bold:hover svg {
+  fill: var(--color-bg);
+}
 
 .btn--bold-inline {
   background-color: var(--color-bg);
 }
-
+.btn--bold-inline svg {
+  fill: var(--color-txt);
+}
 .btn--bold-inline:hover {
   background-color: var(--grey-800);
   color: var(--color-txt);
@@ -1864,9 +1881,14 @@ body main {
   gap: calc(var(--spacing) * 0.5);
   margin-top: calc(var(--spacing) * 1);
 }
+#rapport .rapport__header .btn--group {
+  display: flex;
+  gap: calc(var(--spacing) * 0.5);
+}
 #rapport .rapport__header .thumbnail {
   max-width: 260px;
   display: grid;
+  display: none;
   grid-template-columns: 2fr 3fr;
   -moz-column-gap: calc(var(--padding-inner) * 1);
        column-gap: calc(var(--padding-inner) * 1);
@@ -1874,7 +1896,6 @@ body main {
   border: var(--border-light);
 }
 #rapport .rapport__header .thumbnail figure {
-  border: var(--border-medium);
   display: flex;
   aspect-ratio: 4/3;
   grid-column: 1;

assets/css/template/_rapport.scss

@@ -70,18 +70,23 @@
             gap: calc(var(--spacing)*0.5);
             margin-top: calc(var(--spacing)*1);
         }
+
+   
+
+        .btn--group{
+            display: flex;
+            gap: calc(var(--spacing)*0.5);
+        }
+
         .thumbnail{ 
             max-width: 260px;
             display: grid;
+            display: none;
             grid-template-columns: 2fr 3fr;
             column-gap: calc(var(--padding-inner)*1);
             padding: calc(var(--padding-inner)*0.5);
             border: var(--border-light);
-            // font-size: var(--fs-small);
-
-         
             figure{
-                border: var(--border-medium);
                 display: flex;
                 aspect-ratio: 4/3;
                 grid-column: 1;

site/templates/investigation.php

@@ -80,6 +80,27 @@
                 <a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"></a>
             </div>
         </div>
+
+
+
+        <div class="btn--group">
+            <button class="btn--bold">
+                <a href="#">
+                <span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
+                <span class="text">Télégarcher le&nbsp;PDF</span>
+                </a>
+            </button>
+
+            <button class="btn--bold-inline">
+                <a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">
+                <span class="icon"><?= svg('assets/icons/play.svg') ?></span>
+                <span class="text">Voir la&nbsp;synthèse</span>
+                </a>
+            </button>
+        </div>
+
+               
+      
     </header>