base

components/site-footer.html

@@ -0,0 +1,64 @@
+<div class="site-footer__container">
+    <div class="footer__newsletter">
+        <div class="logo" w3-include-html="/assets/index-logo.svg"></div>
+      <p>
+        Recevez les dernières enquêtes et actualités d’Index directement
+        dans votre boîte mail.
+      </p>
+      <p>Inscrivez-vous à la newsletter</p>
+
+      <form class="form__newsletter">
+        <input
+          type="email"
+          name="email"
+          placeholder="Votre adresse e-mail"
+          required
+        />
+        <button class="btn--bold" type="submit" aria-label="s’inscrire">
+          <span class="txt">S’inscrire</span>
+          <span class="icon">
+            <svg
+              clip-rule="evenodd"
+              fill-rule="evenodd"
+              stroke-linejoin="round"
+              stroke-miterlimit="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z"
+                fill-rule="nonzero"
+              />
+            </svg>
+          </span>
+        </button>
+      </form>
+
+      <p class="p__small">
+        En vous inscrivant, vous acceptez les
+        <a target="_blank" href="https://www.index.ngo/mentions-legales/"
+          >conditions d’utilisation</a
+        >
+        d’Index qui vous informent notamment des droits dont vous disposez
+        sur vos données personnelles.
+      </p>
+    </div>
+
+    <div class="footer__socials">
+      <p>Suivez Index sur les réseaux sociaux</p>
+      <div class="container" w3-include-html="/components/socials.html">
+
+      </div>
+
+
+
+  
+    </div>
+
+    <div class="footer__mentions">
+      <p>
+        © 2025 Index Investigation |
+        <a target="_blank" href="https://www.index.ngo/mentions-legales/">Mentions légales</a>
+      </p>
+    </div>
+  </div>

components/site-header.html

@@ -0,0 +1,42 @@
+
+<h1 id="site-title">
+    <a
+    href="https://www.index.ngo/"
+    aria-label="Retour à l’accueil"
+    title="aller au site d'Index"
+    w3-include-html="/assets/index-logo.svg">
+    </a>
+</h1>
+
+
+<nav id="nav-highlight">
+    <ul>
+        <li><a href="#">Enquêtes</a></li>
+        <li><a href="#">Impact</a></li>
+    </ul>
+</nav>
+
+<button id="btn--soutenir">
+    <a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a>
+</button>
+
+
+
+  
+<button id="theme-toggle">
+    <svg style="fill: var(--color-txt)" class="switch" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
+        3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
+        13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"></path>
+      </svg> 
+</button>
+
+<div id="lang-toggle">
+    <button disabled>FR</button>
+    <button><a href="/en">EN</a></button>
+</div>
+
+<button id="menu-toggle">
+    <span class="open" w3-include-html="assets/icons/menu.svg"></span>
+    <span class="close" w3-include-html="assets/icons/menu-close.svg"></span>
+</button>

components/socials.html

@@ -0,0 +1,45 @@
+<ul class="list-socials" aria-label="Liste des réseaux sociaux d’Index">
+    <li>
+        <a href="https://x.com/index_ngo" target="_blank" rel="noopener noreferrer">
+            <span class="icon" w3-include-html="/assets/icons/socials/x-social.svg"></span>
+            <span class="text">X</span>
+        </a>
+    </li>
+    <li>
+        <a href="https://www.instagram.com/index.ngo/" target="_blank" rel="noopener noreferrer">
+            <span class="icon" w3-include-html="/assets/icons/socials/instagram.svg"></span>
+            <span class="text">Instagram</span>
+        </a>
+    </li>
+    <li>
+        <a href="https://www.facebook.com/index.ngo/" target="_blank" rel="noopener noreferrer">
+            <span class="icon" w3-include-html="/assets/icons/socials/facebook.svg"></span>
+            <span class="text">Facebook</span>
+        </a>
+    </li>
+
+    <li>
+        <a href="https://www.youtube.com/index-ngo" target="_blank" rel="noopener noreferrer">
+            <span class="icon" w3-include-html="/assets/icons/socials/youtube.svg"></span>
+            <span class="text">Youtube</span>
+        </a>
+    </li>
+    <li>
+        <a href="https://fr.linkedin.com/company/index-ngo" target="_blank" rel="noopener noreferrer">
+            <span class="icon" w3-include-html="/assets/icons/socials/linkedin.svg"></span>
+            <span class="text">LinkedIn</span>
+        </a>
+    </li>
+    <li>
+        <a href="https://bsky.app/profile/index-ngo.bsky.social" target="_blank" rel="noopener noreferrer">
+            <span class="icon" w3-include-html="/assets/icons/socials/bluesky.svg"></span>
+            <span class="text">Bluesky</span>
+        </a>
+    </li>
+    <li>
+        <a href="https://mastodon.design/@index_ngo@mastodon.social" target="_blank" rel="noopener noreferrer">
+            <span class="icon" w3-include-html="/assets/icons/socials/mastodon.svg"></span>
+            <span class="text">Mastodon</span>
+        </a>
+    </li>
+</ul>