Added Grid Structure + Language Panel

_config.yml

@@ -218,7 +218,7 @@ t:
         - title: "SDIS 77"
           url: "https://www.sdis77.fr/"
           logo: "/img/logo_sdis77.png"
-          content: "Notre partenaire en Seine&Marne afin de diversifier les tests terrains"
+          content: "Notre partenaire en Seine & Marne afin de diversifier les tests terrains"
           height: 75
 
     sponsors:
@@ -390,7 +390,7 @@ t:
         - title: "SDIS 77"
           url: "https://www.sdis77.fr/"
           logo: "/img/logo_sdis77.png"
-          content: "Our partner in Seine&Marne to diversify field tests"
+          content: "Our partner in Seine & Marne to diversify field tests"
           height: 75
 
     sponsors:
@@ -450,7 +450,7 @@ t:
       title: "Follow the Pyronear adventure"
       content: "To stay updated about our progress or to join the adventure, you can also reach us on social media!"
   es-ct:
-    label: es-ct
+    label: ES-CT
     icon: "<img src='/img/catalonia-flag.png' width='20' height='20'/>"
     description: "Detecció precoç d'incendis forestals"
     buttons:
@@ -558,7 +558,7 @@ t:
         - title: "SDIS 77"
           url: "https://www.sdis77.fr/"
           logo: "/img/logo_sdis77.png"
-          content: "El nostre soci a Seine&Marne per diversificar les proves de camp"
+          content: "El nostre soci a Seine & Marne per diversificar les proves de camp"
           height: 75
 
     sponsors:
@@ -726,7 +726,7 @@ t:
         - title: "SDIS 77"
           url: "https://www.sdis77.fr/"
           logo: "/img/logo_sdis77.png"
-          content: "Nuestro socio en Seine&Marne diversificará las pruebas sobre el terreno"
+          content: "Nuestro socio en Seine & Marne diversificará las pruebas sobre el terreno"
           height: 75
 
     sponsors:

_includes/medias.html

@@ -1,67 +1,4 @@
 <section id="media" class="section-style">
-  <style>
-    /* --- Media Section Cleanup --- */
-
-    #media .row {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 30px;
-    }
-
-    #media .col-md-4 {
-      flex: 0 1 300px; /* consistent width */
-      display: flex;
-    }
-
-    #media .service-box {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      text-align: center;
-      height: 100%;
-      padding: 20px;
-      box-sizing: border-box;
-      background: #fff; /* optional visual separation */
-      border-radius: 8px; /* optional for a smoother design */
-    }
-
-    #media .emoji img {
-      display: block;
-      max-width: 160px;
-      min-width: 120px; /* ensures SVGs with no intrinsic width remain visible */
-      min-height: 50px;
-      max-height: 100px;
-      width: auto;
-      height: auto;
-      object-fit: contain;
-      margin: 0 auto 15px;
-    }
-    #media .text-muted {
-      font-size: 0.95rem;
-      min-height: 40px; /* keeps text blocks aligned */
-    }
-
-    #media .service-box:hover {
-      transform: translateY(-4px);
-      transition: all 0.2s ease-in-out;
-    }
-
-    /* --- Responsive Tweaks --- */
-    @media (max-width: 992px) {
-      #media .col-md-4 {
-        flex: 0 1 45%; /* two per row on tablets */
-      }
-    }
-
-    @media (max-width: 576px) {
-      #media .col-md-4 {
-        flex: 0 1 90%; /* one per row on mobile */
-      }
-    }
-  </style>
-
   <div class="container">
     <div class="row">
       <div class="col-lg-12 text-center">
@@ -72,17 +9,17 @@ <h2 class="section-heading">{{ site.t.[layout.lang].medias.title }}</h2>
   </div>
 
   <div class="container">
-    <div class="row align-items-stretch">
+    <div class="grid grid--simple" id="media-grid">
       {% for media in site.medias.items %}
-      <div class="col-md-4 text-center">
+      <div class="grid-item">
         <div class="service-box">
           <p class="emoji">
             <a href="{{ media.url }}">
               <img
                 alt="{{ media.title }} logo"
                 src="{{ media.logo }}"
-                width="{{ media.width }}"
-                height="{{ media.height }}"
+                {% if media.width %}width="{{ media.width }}"{% endif %}
+                {% if media.height %}height="{{ media.height }}"{% endif %}
               />
             </a>
           </p>

_includes/nav.html

@@ -23,17 +23,30 @@
       </a>
     </div>
 
+    <!-- Add base-url meta for JavaScript -->
+    <meta name="base-url" content="{{ site.base-url }}">
+
     <!-- Collect the nav links, forms, and other content for toggling -->
-    <div
-      class="collapse navbar-collapse lang"
-      id="bs-example-navbar-collapse-1"
-    >
+    <div class="collapse navbar-collapse lang" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav navbar-right">
-        {% for lang in site.languages %}
-        <li>
-          <a href="{{ site.base-url }}/{{ lang }}">{{ site.t.[lang].icon }}</a>
+        <!-- Language dropdown: default is site.lang (fr) -->
+        <li class="nav-item nav-lang">
+          <button class="lang-toggle" id="langToggle" aria-haspopup="true" aria-expanded="false">
+            <img src="{{ site.base-url }}/img/flags/{{ site.lang }}.svg" alt="{{ site.t.[site.lang].label }}" class="nav-flag" />
+            <span class="lang-name">{{ site.t.[site.lang].label | upcase }}</span>
+            <span class="caret"></span>
+          </button>
+          <ul class="lang-menu" id="langMenu" role="menu" aria-labelledby="langToggle">
+            {% for lang in site.languages %}
+            <li role="menuitem" class="lang-item{% if lang == site.lang %} active{% endif %}">
+              <a href="{{ site.base-url }}/{{ lang }}" class="lang-link">
+                <img src="{{ site.base-url }}/img/flags/{{ lang }}.svg" alt="{{ site.t.[lang].label }}" class="nav-flag" />
+                <span class="lang-label">{{ site.t.[lang].label | upcase }}</span>
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
         </li>
-        {% endfor %}
       </ul>
     </div>
     <!-- /.navbar-collapse -->

_includes/partners.html

@@ -1,74 +1,4 @@
 <section id="partners" class="section-style">
-  <style>
-    /* --- Partners Section Cleanup --- */
-
-    #partners .row {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 30px;
-    }
-
-    #partners .col-md-4 {
-      flex: 0 1 300px; /* consistent width for partner boxes */
-      display: flex;
-    }
-
-    #partners .service-box {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      text-align: center;
-      height: 100%;
-      padding: 20px;
-      box-sizing: border-box;
-      background: #fff; /* optional: helps each box stand out */
-      border-radius: 8px; /* optional aesthetic */
-    }
-
-    #partners .emoji img {
-      display: block;
-      max-width: 160px;
-      min-width: 130px; /* ensures SVGs with no intrinsic width remain visible */
-      max-height: 100px;
-      width: auto;
-      height: auto;
-      object-fit: contain;
-      margin: 0 auto 15px;
-    }
-
-    #partners h3 {
-      font-size: 1.2rem;
-      margin: 10px 0 8px;
-    }
-
-    #partners .text-muted {
-      font-size: 1.5rem;
-      font-weight: normal !important;
-      min-height: 40px; /* keeps descriptions more uniform */
-    }
-
-
-    #partners .service-box:hover {
-      transform: translateY(-4px);
-      transition: all 0.2s ease-in-out;
-    }
-
-    /* --- Responsive Tweaks --- */
-    @media (max-width: 992px) {
-      #partners .col-md-4 {
-        flex: 0 1 45%; /* two per row on tablets */
-      }
-    }
-
-    @media (max-width: 576px) {
-      #partners .col-md-4 {
-        flex: 0 1 90%; /* one per row on mobile */
-      }
-    }
-  </style>
-
   <div class="container">
     <div class="row">
       <div class="col-lg-12 text-center">
@@ -79,17 +9,17 @@ <h2 class="section-heading">{{ site.t.[layout.lang].partners.title }}</h2>
   </div>
 
   <div class="container">
-    <div class="row align-items-stretch">
+    <div class="grid" id="partners-grid">
       {% for partner in site.t.[layout.lang].partners.items %}
-      <div class="col-md-4 text-center">
+      <div class="grid-item">
         <div class="service-box">
           <p class="emoji">
             <a href="{{ partner.url }}">
               <img 
                 alt="{{ partner.title }}-logo"
                 src="{{ partner.logo }}"
-                width="{{ partner.width }}"
-                height="{{ partner.height }}"
+                {% if partner.width %}width="{{ partner.width }}"{% endif %}
+                {% if partner.height %}height="{{ partner.height }}"{% endif %}
               />
             </a>
           </p>

_includes/scripts.html

@@ -18,3 +18,6 @@
   type="text/javascript"
   src="{{ site.base-url }}/js/form-submission-handler.js"
 ></script>
+
+<!-- Language dropdown JS -->
+<script src="{{ site.base-url }}/js/lang-dropdown.js"></script>

_includes/sponsors.html

@@ -1,59 +1,4 @@
 <section id="sponsors" class="section-style">
-  <style>
-    #sponsors .row {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 30px;
-    }
-
-    #sponsors .col-md-4 {
-      flex: 0 1 300px; /* consistent width for sponsor boxes */
-      display: flex;
-    }
-
-    #sponsors .service-box {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      text-align: center;
-      height: 100%;
-      padding: 15px;
-      box-sizing: border-box;
-      background: #fff; /* optional: makes each sponsor block pop */
-      border-radius: 8px; /* optional aesthetic */
-    }
-
-    #sponsors .emoji img {
-      display: block;
-      max-width: 160px;
-      min-width: 130px; /* ensures SVGs with no intrinsic width remain visible */
-      max-height: 100px;
-      width: auto;
-      height: auto;
-      object-fit: contain;
-      margin: 0 auto 15px;
-    }
-
-    #sponsors h3 {
-      font-size: 2.5rem;
-      margin: 10px 0 8px;
-    }
-
-    #sponsors .text-muted {
-      font-size: 1.5rem;
-      font-weight: normal !important;
-      min-height: 40px; /* keeps descriptions more uniform */
-    }
-
-    /* Subtle hover effect */
-    #sponsors .service-box:hover {
-      transform: translateY(-4px);
-      transition: all 0.2s ease-in-out;
-    }
-  </style>
-
   <div class="container">
     <div class="row">
       <div class="col-lg-12 text-center">
@@ -64,17 +9,17 @@ <h2 class="section-heading">{{ site.t.[layout.lang].sponsors.title }}</h2>
   </div>
 
   <div class="container">
-    <div class="row align-items-stretch">
+    <div class="grid" id="sponsors-grid">
       {% for sponsor in site.t.[layout.lang].sponsors.items %}
-      <div class="col-md-4 text-center">
+      <div class="grid-item">
         <div class="service-box">
           <p class="emoji">
             <a href="{{ sponsor.url }}">
               <img 
                 alt="{{ sponsor.title }}-logo"
                 src="{{ sponsor.logo }}"
-                width="{{ sponsor.width }}"
-                height="{{ sponsor.height }}"
+                {% if sponsor.width %}width="{{ sponsor.width }}"{% endif %}
+                {% if sponsor.height %}height="{{ sponsor.height }}"{% endif %}
               />
             </a>
           </p>

_sass/_base.scss

@@ -3,6 +3,7 @@ body {
   height: 100%;
   width: 100%;
   letter-spacing: 0.1rem;
+  font-weight: normal;  /* Set normal weight as default for body text */
 }
 
 body {
@@ -41,6 +42,7 @@ p {
   font-size: 16px;
   line-height: 1.5;
   margin-bottom: 20px;
+  font-weight: normal;  /* Ensure normal weight for all paragraph text */
 }
 
 .bg-primary {
@@ -375,9 +377,17 @@ error-404 {
   }
 }
 
-.section-style b {
-  background-color: rgba(254, 235, 190, 87%); /* Yellow color */
-  font-weight: normal;
+.section-style {
+  /* Ensure normal weight for section content */
+  p, div {
+    font-weight: normal;
+  }
+
+  /* Style for highlighted text */
+  b {
+    background-color: rgba(254, 235, 190, 87%); /* Yellow color */
+    font-weight: normal;
+  }
 }
 
 .call-to-action {