add share buttons rapport

assets/css/components/_modal-share.scss

@@ -103,13 +103,15 @@
             }
         }
 
-        button{
+        .copy-link__btn{
             background-color: var(--color-txt);
             color: var(--color-bg);
             border-radius: var(--radius-btn);
             padding: 0 1ch;
             font-size: var(--fs-small);
             padding-top: 2px;
+            white-space: nowrap;
+
             &:hover{
                 background-color: var(--color-accent);
 
@@ -120,3 +122,29 @@
 }
 
 
+
+
+// SHARE ACTIONS --------------------------------------------------
+// ----------------------------------------------------------------
+
+#share-banner__content,
+#share-banner__aside,
+#share-banner__desktop{ 
+    display: none; 
+}
+#share-banner__content ~ .modal--share,
+#share-banner__aside ~ .modal--share,
+#share-banner__desktop ~ .modal--share{
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s ease-in;
+}
+
+#share-banner__content:checked ~ .modal--share,
+#share-banner__aside:checked ~ .modal--share,
+#share-banner__desktop:checked ~ .modal--share{
+    opacity: 1;
+    pointer-events: auto;
+}
+
+

assets/css/style.css

@@ -964,18 +964,40 @@ button:disabled {
   border-color: var(--color-txt);
   outline: none;
 }
-.modal--share .copy-link button {
+.modal--share .copy-link .copy-link__btn {
   background-color: var(--color-txt);
   color: var(--color-bg);
   border-radius: var(--radius-btn);
   padding: 0 1ch;
   font-size: var(--fs-small);
   padding-top: 2px;
+  white-space: nowrap;
 }
-.modal--share .copy-link button:hover {
+.modal--share .copy-link .copy-link__btn:hover {
   background-color: var(--color-accent);
 }
 
+#share-banner__content,
+#share-banner__aside,
+#share-banner__desktop {
+  display: none;
+}
+
+#share-banner__content ~ .modal--share,
+#share-banner__aside ~ .modal--share,
+#share-banner__desktop ~ .modal--share {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in;
+}
+
+#share-banner__content:checked ~ .modal--share,
+#share-banner__aside:checked ~ .modal--share,
+#share-banner__desktop:checked ~ .modal--share {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .page__title {
   font-size: var(--fs-big);
   font-weight: normal;
@@ -1674,21 +1696,6 @@ body main {
   text-underline-offset: 3px;
 }
 
-#share-banner__desktop {
-  display: none;
-}
-
-#share-banner__desktop ~ .modal--share {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-in;
-}
-
-#share-banner__desktop:checked ~ .modal--share {
-  opacity: 1;
-  pointer-events: auto;
-}
-
 @media screen and (max-width: 768px) {
   [data-template=investigation-summary] main header {
     padding-top: calc(var(--spacing) * 1);
@@ -1843,6 +1850,7 @@ body main {
   margin: 0 auto;
   max-width: calc(var(--max-w-content) + var(--rapport-w));
 }
+
 #rapport .rapport__header {
   margin-top: calc(var(--spacing) * 2);
   max-width: var(--max-w-content);
@@ -1866,6 +1874,7 @@ body main {
   font-weight: normal;
 }
 #rapport .rapport__header .rapport__figure {
+  display: none;
   width: 100%;
   aspect-ratio: 2/1;
   margin-top: calc(var(--spacing) * 2);
@@ -1904,6 +1913,16 @@ body main {
 #rapport .rapport__header .btn--group {
   display: flex;
   gap: calc(var(--spacing) * 0.5);
+  position: relative;
+}
+#rapport .rapport__header label {
+  position: relative;
+}
+#rapport .rapport__header .modal-share {
+  max-width: 220px;
+  position: absolute;
+  top: 30px;
+  left: 0px;
 }
 #rapport .rapport__header .thumbnail {
   max-width: 260px;
@@ -1946,6 +1965,7 @@ body main {
   height: 15px;
   fill: var(--color-txt);
 }
+
 #rapport .rapport__content {
   max-width: var(--max-w-content);
   margin-top: calc(var(--spacing) * 3);
@@ -2031,9 +2051,29 @@ body main {
 #rapport__aside #toc a {
   text-decoration: none;
 }
-#rapport__aside #download-pdf {
+#rapport__aside .btn--group {
-  margin: 0 auto;
   margin-top: calc(var(--spacing) * 0.5);
+  display: flex;
+  gap: var(--padding-inner);
+}
+#rapport__aside .btn--group [for=share-banner__aside] {
+  cursor: pointer;
+}
+#rapport__aside .btn--group #download-pdf a {
+  padding-left: 1ch;
+  padding-right: 1ch;
+}
+#rapport__aside .modal--share {
+  position: absolute;
+  bottom: calc(var(--h-block) * -1.5);
+  right: calc(-100% + var(--padding-inner));
+}
+#rapport__aside .modal--share::before {
+  content: "◀";
+  font-size: 10px;
+  position: absolute;
+  bottom: calc(var(--h-block) * 0.25);
+  left: -9px;
 }
 
 #tab-print, #tab-toc {

assets/css/template/_investigation-summary.scss

@@ -96,23 +96,6 @@
 
 
 
-// SHARE ACTIONS --------------------------------------------------
-// ----------------------------------------------------------------
-
-#share-banner__desktop{ display: none; }
-#share-banner__desktop ~ .modal--share{
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .2s ease-in;
-}
-
-#share-banner__desktop:checked ~ .modal--share{
-    opacity: 1;
-    pointer-events: auto;
-}
-
-
-
 
 
 

assets/css/template/_rapport.scss

@@ -2,143 +2,152 @@
     --rapport-w: 280px;
 }
 
+
 #rapport{
     margin-bottom: 20vh;
     padding-left: var(--rapport-w);
     padding-bottom: 10vh;
     margin: 0 auto;
     max-width: calc(var(--max-w-content) + var(--rapport-w));
+} 
 
-    .rapport__header{
+#rapport .rapport__header{
-
+    margin-top: calc(var(--spacing)*2);
-        // display: grid;
+    max-width: var(--max-w-content);
-        // grid-template-columns: 1fr 140px;
+    padding-bottom: calc(var(--spacing)*0.5);
-        // column-gap: calc(var(--spacing)*1.5);
-        // row-gap: calc(var(--spacing)*2);
-
-        margin-top: calc(var(--spacing)*2);
-        max-width: var(--max-w-content);
-        padding-bottom: calc(var(--spacing)*0.5);
 
 
-        .rapport__title-group{
+    .rapport__title-group{
-            grid-column: span 2;
+        grid-column: span 2;
 
-            .title{
+        .title{
-                text-transform: uppercase;
+            text-transform: uppercase;
-                font-weight: normal;
+            font-weight: normal;
-                font-size: var(--fs-big);
+            font-size: var(--fs-big);
-                line-height: var(--leading-tight);
+            line-height: var(--leading-tight);
-                font-weight: normal;
+            font-weight: normal;
-                margin-top: calc(var(--spacing)*1);
+            margin-top: calc(var(--spacing)*1);
-            }
+        }
 
-            .subtitle{
+        .subtitle{
-                font-size: var(--fs-big);
+            font-size: var(--fs-big);
-                line-height: var(--leading-tight);
+            line-height: var(--leading-tight);
-                margin-top: calc(var(--spacing)*0.5);
+            margin-top: calc(var(--spacing)*0.5);
-                font-weight: normal;
+            font-weight: normal;
-           
-            }
        
         }
 
+    }
 
- 
+    .rapport__figure{
-
+        display: none;
-        .rapport__figure{
+        width: 100%;
+        aspect-ratio: 2/1;
+        margin-top: calc(var(--spacing)*2);
+        img{
             width: 100%;
-            aspect-ratio: 2/1;
+            height: 100%;
-            margin-top: calc(var(--spacing)*2);
+            object-fit: cover;
+        }
+
+    }
+
+    .rapport__dl{
+        align-self: start;
+        font-size: var(--fs-small);
+        border-bottom: var(--border-light);
+        flex-grow: 2;
+        align-items: flex-start;
+        margin-top: calc(var(--spacing)*0.5);
+        .dl__group{
+            @include grid-content();
+            border-top: var(--border-light);
+            padding: calc(var(--spacing)*0.5) 0;
+        }
+
+        dt{
+            color: var(--color-txt-light);
+            padding-right: 1ch;
+        }
+    }
+
+
+    .thumbnail--group{
+        display: flex;
+        gap: calc(var(--spacing)*0.5);
+        margin-top: calc(var(--spacing)*1);
+    }
+
+
+
+    .btn--group{
+        display: flex;
+        gap: calc(var(--spacing)*0.5);
+        position: relative;
+
+    }
+
+    label{
+        position: relative;
+    }
+
+    .modal-share{
+        max-width: 220px;
+        position: absolute;
+        top: 30px;
+        left: 0px;
+    }
+
+    .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);
+        figure{
+            display: flex;
+            aspect-ratio: 4/3;
+            grid-column: 1;
+            grid-row: 1/3;
             img{
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
             }
-
         }
 
-        .rapport__dl{
+        .thumbnail__title{
-            align-self: start;
+            padding-top: calc(var(--padding-inner)*0.5);
-            font-size: var(--fs-small);
+            a{
-            border-bottom: var(--border-light);
+                text-decoration: none;
-            flex-grow: 2;
-            align-items: flex-start;
-            margin-top: calc(var(--spacing)*0.5);
-            .dl__group{
-                @include grid-content();
-                border-top: var(--border-light);
-                padding: calc(var(--spacing)*0.5) 0;
-            }
-
-            dt{
-                color: var(--color-txt-light);
-                padding-right: 1ch;
             }
         }
 
-
+        button{
-        .thumbnail--group{
+            align-self: end;
             display: flex;
-            gap: calc(var(--spacing)*0.5);
+            align-items: end;
-            margin-top: calc(var(--spacing)*1);
+            justify-content: end;
+            padding-right: calc(var(--padding-inner)*0.5);
+            padding-bottom: calc(var(--padding-inner)*0.5);
         }
 
 
-
+        button svg{
-        .btn--group{
+            width: 15px;
-            display: flex;
+            height: 15px;
-            gap: calc(var(--spacing)*0.5);
+            fill: var(--color-txt);
         }
     
-        .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);
-            figure{
-                display: flex;
-                aspect-ratio: 4/3;
-                grid-column: 1;
-                grid-row: 1/3;
-                img{
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-            }
-
-            .thumbnail__title{
-                padding-top: calc(var(--padding-inner)*0.5);
-                a{
-                    text-decoration: none;
-                }
-            }
-
-            button{
-                align-self: end;
-                display: flex;
-                align-items: end;
-                justify-content: end;
-                padding-right: calc(var(--padding-inner)*0.5);
-                padding-bottom: calc(var(--padding-inner)*0.5);
-            }
- 
-
-            button svg{
-                width: 15px;
-                height: 15px;
-                fill: var(--color-txt);
-            }
-        
-        }
-        
-
     }
     
+
+}
+
+#rapport{
+ 
     .rapport__content{
         max-width: var(--max-w-content);
         margin-top: calc(var(--spacing)*3);
@@ -264,10 +273,39 @@
 
     }
 
-    #download-pdf{
+    .btn--group{
-        margin: 0 auto;
         margin-top: calc(var(--spacing)*0.5);
+        display: flex;
+        gap: var(--padding-inner);
+
+        [for="share-banner__aside"]{
+            cursor: pointer;
+        }
+
+        #download-pdf{
+            a{
+                padding-left: 1ch;
+                padding-right: 1ch;
+            }
+        }
     }
+
+    .modal--share{
+        position: absolute;
+        bottom: calc(var(--h-block) * -1.5);
+        right: calc(-100% + var(--padding-inner));
+    
+        &::before{
+            content: "◀";
+            font-size: 10px;
+            position: absolute;
+            bottom: calc(var(--h-block) * 0.25);
+            left: -9px;
+        }
+
+    }
+
+
 }
 
 

assets/icons/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>

site/templates/investigation.php

@@ -40,12 +40,22 @@
 
     </div>
 
-    <button id="download-pdf" class="btn--bold">
+    <div class="btn--group">
-                <a href="#">
+        <button id="download-pdf" class="btn--bold">
-                <span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
+            <a href="#">
-                <span class="text">Télégarcher le&nbsp;PDF</span>
+            <span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
-                </a>
+            <span class="text">Télégarcher le&nbsp;PDF</span>
-            </button>
+            </a>
+        </button>
+        <label for="share-banner__aside" class="btn--bold-inline no-link">
+            <span class="icon"><?= svg('assets/icons/share.svg') ?></span>
+            <span class="text">Partager</span>
+        </label>
+
+    </div>
+
+    <input type="checkbox" id="share-banner__aside">
+    <?php snippet('modal-share') ?>
 </aside>
 
 
@@ -105,10 +115,20 @@
                 <span class="text">Voir la&nbsp;synthèse</span>
                 </a>
             </button>
+            
+
+            <label for="share-banner__content" class="btn--bold-inline btn--light no-link">
+                <span class="icon"><?= svg('assets/icons/share.svg') ?></span>
+                <span class="text">Partager</span>
+            </label>
+            <input type="checkbox" id="share-banner__content">
+            <?php snippet('modal-share') ?>
+
         </div>
 
       
  
+      
     </header>