add fonts

.gitignore

@@ -1,2 +1 @@
 .DS_Store
-assets/fonts/*

assets/css/base/_var.scss

@@ -56,6 +56,8 @@
 
   --header-h: 80px;
   --header-h-shrinked: 50px;
+  --menu-w: 420px;
+
 
   // responsive
   --padding-body: 26px;

assets/css/components/_buttons.scss

@@ -31,6 +31,48 @@ button:disabled{
 
 
 
+.btn--bold, 
+.btn--bold-inline{
+    display: block;
+    height: calc(var(--h-block)*1);
+    border: var(--border);
+    border-radius: 4px;
+    font-size: var(--fs-small);
+    text-transform: uppercase;
+    line-height: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 2ch;
+        padding-top: 5px;
+    }
+    
+}
+
+.btn--bold{
+    background-color: var(--color-txt);
+    color: var(--color-bg);
+    &:hover{
+        background-color: var(--color-accent);
+        border-color: var(--color-accent);
+        a{
+            color: var(--color-bg);  
+        }
+    }
+  
+}
+
+.btn--bold-inline:hover{
+    a{
+        background-color: var(--grey-800);
+        color: var(--color-txt);
+    }
+}
 
 
 

assets/css/partials/_site-footer.scss

@@ -7,7 +7,6 @@
    .logo {
     margin-top: calc(var(--spacing)*0.25);
     margin-bottom: calc(var(--spacing)*1);
-    opacity: 0;
         svg{
             width: 100px;
         }

assets/css/partials/_site-header.scss

@@ -34,7 +34,6 @@
 
   #site-title {
     flex-grow: 2;
-    opacity: 0;
     svg{
       width: 100px;
     }

assets/css/partials/_site-menu.scss

@@ -1,22 +1,23 @@
 #site-menu{
     position: fixed;
-    width: 420px;
+    width: var(--menu-w);
     height: calc(100dvh - var(--header-h));
     height: calc(100vh - var(--header-h));
     top: var(--header-h);
-    right: 0;
+    right: calc(var(--menu-w)*-1);
+    transition: right .3s ease-in;
     background-color: var(--color-bg);
     border-left: var(--border-light);
     padding: var(--padding-body);
-    // background-color: red;
+    z-index: 1000;
 
     display: flex;
     flex-direction: column;
-    display: none;
+    // display: none;
 
-    .baseline{
+    // .baseline{
-        font-size: var(--fs-medium);
+    //     font-size: var(--fs-medium);
-    }
+    // }
 
     form{
         margin-top: calc(var(--spacing)*1);
@@ -68,13 +69,14 @@
             list-style-type: none;
             text-transform: uppercase;
             li{
-                font-size: var(--fs-medium);
+                font-size: var(--fs-normal);
                 a{
                     display: block;
                     text-decoration: none;
                     padding: 0.5em 0;
                     &:hover{
-                        color: var(--grey-200);
+                        text-decoration: underline;
+                        // color: var(--grey-200);
                     }
                 }
             }
@@ -85,3 +87,20 @@
         }
     }
 }
+
+body.menu-open{
+    overflow: hidden;
+    main, footer, #nav-highlight{
+        transition: opacity .3s ease-in;
+        opacity: 0.1;
+    }
+    #site-menu{
+        right: 0;
+    }
+
+    #menu-toggle{
+        .open{ display: none; }
+        .close{ display: block!important; }
+    }
+  
+}

assets/css/style.css

@@ -32,6 +32,7 @@
   --border-light: 1px solid var(--grey-800);
   --header-h: 80px;
   --header-h-shrinked: 50px;
+  --menu-w: 420px;
   --padding-body: 26px;
   --radius-small: 4px;
   --spacing: 30px;
@@ -120,7 +121,6 @@ body {
 }
 #site-header #site-title {
   flex-grow: 2;
-  opacity: 0;
 }
 #site-header #site-title svg {
   width: 100px;
@@ -179,6 +179,46 @@ button:disabled {
   text-decoration: underline !important;
 }
 
+.btn--bold,
+.btn--bold-inline {
+  display: block;
+  height: calc(var(--h-block) * 1);
+  border: var(--border);
+  border-radius: 4px;
+  font-size: var(--fs-small);
+  text-transform: uppercase;
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.btn--bold a,
+.btn--bold-inline a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 2ch;
+  padding-top: 5px;
+}
+
+.btn--bold {
+  background-color: var(--color-txt);
+  color: var(--color-bg);
+}
+.btn--bold:hover {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.btn--bold:hover a {
+  color: var(--color-bg);
+}
+
+.btn--bold-inline:hover a {
+  background-color: var(--grey-800);
+  color: var(--color-txt);
+}
+
 .btn__default {
   --size: calc(var(--h-block) - 8px);
   font-size: var(--fs-normal);
@@ -521,7 +561,6 @@ button:disabled {
 }
 #site-header #site-title {
   flex-grow: 2;
-  opacity: 0;
 }
 #site-header #site-title svg {
   width: 100px;
@@ -555,20 +594,18 @@ button:disabled {
 
 #site-menu {
   position: fixed;
-  width: 420px;
+  width: var(--menu-w);
   height: calc(100dvh - var(--header-h));
   height: calc(100vh - var(--header-h));
   top: var(--header-h);
-  right: 0;
+  right: calc(var(--menu-w) * -1);
+  transition: right 0.3s ease-in;
   background-color: var(--color-bg);
   border-left: var(--border-light);
   padding: var(--padding-body);
+  z-index: 1000;
   display: flex;
   flex-direction: column;
-  display: none;
-}
-#site-menu .baseline {
-  font-size: var(--fs-medium);
 }
 #site-menu form {
   margin-top: calc(var(--spacing) * 1);
@@ -624,7 +661,7 @@ button:disabled {
   text-transform: uppercase;
 }
 #site-menu nav ul li {
-  font-size: var(--fs-medium);
+  font-size: var(--fs-normal);
 }
 #site-menu nav ul li a {
   display: block;
@@ -632,12 +669,29 @@ button:disabled {
   padding: 0.5em 0;
 }
 #site-menu nav ul li a:hover {
-  color: var(--grey-200);
+  text-decoration: underline;
 }
 #site-menu nav ul .highlight {
   text-transform: uppercase;
 }
 
+body.menu-open {
+  overflow: hidden;
+}
+body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight {
+  transition: opacity 0.3s ease-in;
+  opacity: 0.1;
+}
+body.menu-open #site-menu {
+  right: 0;
+}
+body.menu-open #menu-toggle .open {
+  display: none;
+}
+body.menu-open #menu-toggle .close {
+  display: block !important;
+}
+
 #site-footer {
   background-color: var(--dark);
   padding: calc(var(--padding-body) * 2) var(--padding-body);
@@ -645,7 +699,6 @@ button:disabled {
 #site-footer .logo {
   margin-top: calc(var(--spacing) * 0.25);
   margin-bottom: calc(var(--spacing) * 1);
-  opacity: 0;
 }
 #site-footer .logo svg {
   width: 100px;
@@ -772,39 +825,47 @@ body main {
   -o-object-fit: cover;
      object-fit: cover;
 }
-.page-enquete .short {
-  font-size: var(--fs-medium);
-  margin: auto;
-  max-width: var(--max-w-content);
-}
-.page-enquete #section__synthese {
-  font-size: var(--fs-medium);
-}
-.page-enquete #section__synthese p + p {
-  margin-top: 0.5em;
-}
-.page-enquete #section__synthese h4 {
-  margin-top: 2em;
-  margin-bottom: 1em;
-  font-size: var(--fs-normal);
-  font-weight: normal;
-  -webkit-text-decoration: 1px underline var(--color-txt-light);
-          text-decoration: 1px underline var(--color-txt-light);
-  text-underline-offset: 3px;
-}
 .page-enquete #banner--page {
   height: calc(100vh - var(--header-h));
   height: calc(100dvh - var(--header-h));
   margin-bottom: calc((100vh - var(--header-h)) * -1);
   margin-bottom: calc((100dvh - var(--header-h)) * -1);
   padding-bottom: var(--padding-body);
+  padding-right: var(--padding-body);
   position: sticky;
   top: var(--header-h);
-  width: 240px;
+  width: calc((100% - var(--max-w-content)) / 2);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
+.page-enquete #banner--page .btn--group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--spacing) * 0.25);
+}
+.page-enquete #banner--page .btn--group button {
+  width: 100%;
+  max-width: 28ch;
+}
+.page-enquete #nav--page ul {
+  list-style: none;
+}
+.page-enquete #nav--page ul li {
+  text-align: center;
+  color: var(--color-txt-light);
+}
+.page-enquete #nav--page ul li a {
+  display: block;
+  padding: 0.3em 0;
+  text-decoration: none;
+}
+.page-enquete .short {
+  font-size: var(--fs-medium);
+  margin: auto;
+  max-width: var(--max-w-content);
+}
 .page-enquete #section__dl {
   margin-top: calc(var(--spacing) * 1.5);
   border-bottom: var(--border-light);
@@ -824,15 +885,18 @@ body main {
 .page-enquete #section__dl ul:not(.keywords) li {
   padding-bottom: 0.2em;
 }
-.page-enquete #nav--page ul {
+.page-enquete #section__synthese {
-  list-style: none;
+  font-size: var(--fs-medium);
 }
-.page-enquete #nav--page ul li {
+.page-enquete #section__synthese p + p {
-  text-align: center;
+  margin-top: 0.5em;
-  color: var(--color-txt-light);
 }
-.page-enquete #nav--page ul li a {
+.page-enquete #section__synthese h4 {
-  display: block;
+  margin-top: 2em;
-  padding: 0.3em 0;
+  margin-bottom: 1em;
-  text-decoration: none;
+  font-size: var(--fs-normal);
+  font-weight: normal;
+  -webkit-text-decoration: 1px underline var(--color-txt-light);
+          text-decoration: 1px underline var(--color-txt-light);
+  text-underline-offset: 3px;
 }/*# sourceMappingURL=style.css.map */

assets/css/template/_page-enquete.scss

@@ -29,6 +29,10 @@
         }
     }
 
+
+
+    // HER0 ----------------------------------------------------
+
     .hero{
         width: 100vw;
         position: relative;
@@ -60,30 +64,9 @@
     }
 
 
-    .short{
-        font-size: var(--fs-medium);
-        margin: auto;
-        max-width: var(--max-w-content);
-    }
 
-    #section__synthese{
-        font-size: var(--fs-medium);
 
-        p + p{
+    // banner-page -------------------------------------------------
-            margin-top: 0.5em;
-        }
-
-        h4{
-            margin-top: 2em;
-            margin-bottom: 1em;
-            font-size: var(--fs-normal);
-            font-weight: normal;
-            text-decoration: 1px underline var(--color-txt-light);
-            text-underline-offset: 3px;
-            
-        }
-        
-    }
 
     #banner--page{
         height: calc(100vh - var(--header-h));
@@ -91,12 +74,55 @@
         margin-bottom: calc((100vh - var(--header-h))*-1);
         margin-bottom: calc((100dvh - var(--header-h))*-1);
         padding-bottom: var(--padding-body);
+        padding-right: var(--padding-body);
         position: sticky;
         top: var(--header-h);
-        width: 240px;
+        width: calc((100% - var(--max-w-content))/2);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+
+        .btn--group{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: calc(var(--spacing)*0.25);
+            
+            button{
+                width: 100%;
+                max-width: 28ch;
+            }
+            
+        }
+   
+    }
+
+    #nav--page{
+        ul{
+            list-style: none;
+            
+            li{
+                text-align: center;
+                color: var(--color-txt-light);
+                // text-transform: uppercase;
+                
+                a{
+                    display: block;
+                    padding: 0.3em 0;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+
+
+    // DL -------------------------------------------------
+
+    .short{
+        font-size: var(--fs-medium);
+        margin: auto;
+        max-width: var(--max-w-content);
     }
 
     #section__dl{
@@ -124,22 +150,35 @@
     }
 
 
-    #nav--page{
-        ul{
-            list-style: none;
    
-            li{
-                text-align: center;
-                color: var(--color-txt-light);
-                // text-transform: uppercase;
 
-                a{
+
-                    display: block;
+
-                    padding: 0.3em 0;
+
-                    text-decoration: none;
+
-                }
+    // SYNTHESE ----------------------------------------------
+
+ 
+
+    #section__synthese{
+        font-size: var(--fs-medium);
+
+        p + p{
+            margin-top: 0.5em;
         }
+
+        h4{
+            margin-top: 2em;
+            margin-bottom: 1em;
+            font-size: var(--fs-normal);
+            font-weight: normal;
+            text-decoration: 1px underline var(--color-txt-light);
+            text-underline-offset: 3px;
+            
         }
+        
     }
 
+
+
 }

assets/fonts/stylesheet.css

@@ -0,0 +1,57 @@
+/* Executive - Regular */
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-55Regular.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-56Italic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-65Medium.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-66MediumIt.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "System";
+  src: url("System-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "System";
+  src: url("System-MediumItalic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+}
+
+
+@font-face {
+  font-family: "System";
+  src: url("System-Bold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "System";
+  src: url("System-BoldItalic.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+}

assets/js/onload.js

@@ -1,20 +1,51 @@
-window.onload = function () {
+// TEMP, with includeHTML() --------------------------------------
-  includeHTML();
+
-  headerToggle();
+window.onload = async function () {
+  await runIncludeHTML();   
+  initAfterLoad();         
 };
 
-window.onscroll = function () {
+function runIncludeHTML() {
-  headerShrink();
+  if (typeof includeHTML === "function") {
-};
+    const result = includeHTML();
 
+    if (result instanceof Promise) {
+      return result;
+    }
+  }
 
-
+  return Promise.resolve();
-function headerToggle() {
-  const header = document.getElementById('site-header');
-  const buttonToggle = document.querySelector('menu-toggle');
-  
-  console.log(buttonToggle);
-  
 }
 
 
+/// INIT --------------------------------------------------------
+
+// Note: une fois que IncludeHTML() est supprimé, on peut supprimer tout le temp au dessus
+// remplacer `function initAfterLoad()` par ↓
+// window.onload = async function () {
+
+function initAfterLoad() {
+  headerToggle();
+}
+
+
+
+
+
+
+
+// ===============================
+// HEADER
+// ===============================
+function headerToggle() {
+  const header = document.getElementById("site-header");
+  const buttonToggle = document.querySelector("#menu-toggle");
+  console.log(header);
+  console.log(buttonToggle);
+
+  if (!header || !buttonToggle) return;
+  buttonToggle.addEventListener("click", () => {
+    document.body.classList.toggle("menu-open");
+  });
+}
+

assets/js/temp/includeHtml.js

@@ -2,32 +2,34 @@
 // <header id="header" w3-include-html="components/header.html"></header>
 
 
-function includeHTML() {
+async function includeHTML() {
+  const elements = document.querySelectorAll("[w3-include-html]");
+
+  if (elements.length === 0) {
+    return; // Plus rien à charger
+  }
+
+  const promises = Array.from(elements).map(async (elmnt) => {
+    const file = elmnt.getAttribute("w3-include-html");
+    if (!file) return;
+
+    try {
+      const response = await fetch(file);
+      if (response.ok) {
+        const html = await response.text();
+        elmnt.innerHTML = html;
+      } else {
+        elmnt.innerHTML = "Page not found.";
+      }
+    } catch (error) {
+      console.error(`Error loading ${file}:`, error);
+      elmnt.innerHTML = "Error loading content.";
+    }
 
-  var z, i, elmnt, file, xhttp;
-  /* Loop through a collection of all HTML elements: */
-  z = document.getElementsByTagName("*");
-  for (i = 0; i < z.length; i++) {
-    elmnt = z[i];
-    /*search for elements with a certain atrribute:*/
-    file = elmnt.getAttribute("w3-include-html");
-    if (file) {
-      /* Make an HTTP request using the attribute value as the file name: */
-      xhttp = new XMLHttpRequest();
-      xhttp.onreadystatechange = function() {
-        if (this.readyState == 4) {
-          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
-          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
-          /* Remove the attribute, and call this function once more: */
     elmnt.removeAttribute("w3-include-html");
-          includeHTML();
+  });
-        }
-      }
-      xhttp.open("GET", file, true);
-      xhttp.send();
-      /* Exit the function: */
-      return;
-    }
-  }
 
+  // Attendre que tous les fichiers soient chargés
+  await Promise.all(promises);
+  await includeHTML();
 }

page-enquete/index.html

@@ -40,9 +40,9 @@
                     </ul>
                 </nav>
 
-                <div class="btn--group" id="btn-mobile">
+                <div class="btn--group">
                     <button class="btn--bold"><a href="#">Lire le rapport</a></button>
-                    <button class="btn"><a href="#">Partager</a></button>
+                    <button class="btn--bold-inline"><a href="#">Partager</a></button>
                 </div>
             </div>