fix style gauge container margin top

api/cache/donorbox_data.json

@@ -1,14 +1,15 @@
 {
-    "total_raised": "35825.53",
+    "total_raised": "37001.02",
-    "goal_amt": "50000.0",
+    "goal_amt": "0.0",
     "currency": "eur",
-    "donations_count": 533,
+    "donations_count": 621,
-    "recurring_donors_count": 56,
+    "recurring_donors_count": 76,
-    "campaign_name": "Soutenez Index avant le 31 d\u00e9cembre 2025 !",
+    "campaign_name": "Rejoignez les Soutiens d'Index",
-    "updated_at": "2026-03-06T09:53:03+00:00",
+    "updated_at": "2026-04-22T08:38:57+00:00",
     "plans_detail": {
-        "cancelled|monthly": 36,
+        "active|monthly": 76,
-        "active|monthly": 56,
+        "cancelled|monthly": 37,
-        "failed|monthly": 19
+        "failed|monthly": 20,
+        "paused|monthly": 1
     }
 }

assets/css/components/_gauge.scss

@@ -1,3 +1,7 @@
+.hero-heading p {
+  margin: 0 !important;
+}
+
 .gauge-container {
   width: 100%;
   display: flex;
@@ -8,6 +12,7 @@
   top: calc(var(--spacing) * 0.25);
 
   padding: 0 calc(var(--spacing) * 0.5);
+  padding-top: calc(var(--spacing) * 1);
 }
 
 #gauge {
@@ -68,7 +73,6 @@
   }
 }
 
-
 @media #{$small-up} {
   #gauge {
     --gauge-h: 18px;

assets/css/components/_text.scss

@@ -1,9 +1,8 @@
-[data-template="subscription-newsletter"],
+[data-template='subscription-newsletter'],
-[data-template="thanks"],
+[data-template='thanks'],
-[data-template="support"],
+[data-template='support'],
-[data-template="store"]{
+[data-template='store'] {
-
+  .hero-heading p {
-    .hero-heading{
     font-family: var(--title);
     font-size: var(--fs-big);
     font-weight: var(--fw-bold);
@@ -27,7 +26,6 @@
       &:hover {
         text-decoration: underline 2px;
         text-underline-offset: 4px;
-            
       }
     }
   }
@@ -59,10 +57,9 @@
     margin-bottom: calc(var(--spacing) * 1);
   }
 
-    ul, ol{
+  ul,
+  ol {
     margin-left: 3ch;
     margin-bottom: 0.5em;
   }
-
 }
- 

assets/css/template/support/_layout.scss

@@ -1,5 +1,4 @@
-[data-template="support"]{
+[data-template='support'] {
-
   section {
     display: flex;
     flex-direction: column;
@@ -38,9 +37,7 @@
     }
   }
 
-
   @media #{$medium-up} {
-
     main {
       display: grid;
       grid-template-columns: 50% 50%;
@@ -63,10 +60,6 @@
       padding: calc(var(--spacing) * 0.5) 0;
     }
 
-        .gauge-container{
-            padding-top: calc(var(--spacing)*1);
-        }
-
     .col-left,
     .col-right {
       padding-top: calc(var(--spacing) * 1);
@@ -82,10 +75,8 @@
       grid-row: 1;
       overflow: hidden;
     }
-
   }
 
-
   @media #{$medium} {
     main {
       display: flex;
@@ -100,7 +91,6 @@
       width: 100%;
     }
 
-
     .col-left,
     .col-right {
       display: contents;
@@ -124,12 +114,9 @@
     #section__questions {
       order: 6;
       margin-bottom: calc(var(--spacing) * 2);
-       
     }
-
   }
 
-
   @media #{$paysage} {
     .col-left,
     .col-right {
@@ -163,15 +150,10 @@
       grid-row: 4;
       grid-column: 1;
       border-bottom: var(--border-light);
-
     }
     #section__questions {
       grid-row: 5;
       grid-column: 1;
     }
-
   }
-
-
-
 }

backup/260311/assets/css/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 :root {
-  --font: "Executive", Arial, sans-serif;
+  --font: 'Executive', Arial, sans-serif;
-  --title: "System", Arial, sans-serif;
+  --title: 'System', Arial, sans-serif;
   --fs-x-small: 10px;
   --fs-small: 12px;
   --fs-normal: 16px;
@@ -9,6 +9,14 @@
   --fs-big: 30px;
   --fs-x-big: 38px;
   --fs-button-bold: 22px;
+}
+@media screen and (max-width: 720px) {
+  :root {
+    --fs-medium: 20px;
+    --fs-big: 26px;
+  }
+}
+:root {
   --leading-tight: 1;
   --leading-normal: 1.2;
   --fw-normal: 400;
@@ -34,12 +42,6 @@
   --h-block: 30px;
   --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-@media screen and (max-width: 720px) {
-  :root {
-    --fs-medium: 20px;
-    --fs-big: 26px;
-  }
-}
 
 * {
   margin: 0;
@@ -489,15 +491,17 @@ main {
   z-index: 900;
   width: calc(100vw - var(--padding-body) * 2);
   height: var(--header-h);
-  background-color: var(--color-bg);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 #site-header.is-shrinked {
   height: var(--header-h-shrinked);
   border-bottom: var(--border-light);
 }
+#site-header {
+  background-color: var(--color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 #site-header .site-title {
   display: flex;
   width: 120px;
@@ -633,11 +637,13 @@ main {
 @media screen and (max-width: 720px) {
   #site-footer .footer__mentions {
     padding-top: calc(var(--spacing) * 1);
-    text-align: center;
   }
   #site-footer .footer__mentions p {
     margin-top: 0;
   }
+  #site-footer .footer__mentions {
+    text-align: center;
+  }
 }
 
 [data-template=support] section {
@@ -791,7 +797,6 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: calc(var(--padding-body) * 0.75);
-  display: none;
 }
 @media screen and (min-width: 1080px) {
   #section__donation .btn--donation__container {
@@ -807,6 +812,9 @@ main {
 #section__donation .btn--donation__container .btn--donation__grow-2 {
   grid-column: span 2;
 }
+#section__donation .btn--donation__container {
+  display: none;
+}
 #section__donation .btn--donation__container.is-selected {
   display: grid;
 }
@@ -933,12 +941,14 @@ main {
   gap: 1ch;
   font-weight: var(--fw-medium);
   text-decoration: none;
-  cursor: pointer;
 }
 #section__video .btn__deploy:hover {
   background-color: var(--grey-800);
   border-color: var(--color-txt);
 }
+#section__video .btn__deploy {
+  cursor: pointer;
+}
 #section__video .btn__deploy svg {
   fill: var(--color-txt);
   width: 10px;

en/index.php

@@ -55,7 +55,7 @@ $data = getContent('en');
     <main>
       <div class="col-left">
         <section id="section__hero">
-          <p class="hero-heading"><?= $data['heroHeading'] ?? '' ?></p>
+          <div class="hero-heading"><?= $data['heroHeading'] ?? '' ?></div>
 
           <div class="gauge-container">
             <div id="gauge" style="--pourcent: 0%"></div>
@@ -69,10 +69,12 @@ $data = getContent('en');
             </div>
           </div>
 
-          <p class="hero-heading">
+          <div class="hero-heading">
+            <p>
               <?= htmlspecialchars($data['subtitleBlack'] ?? '') ?>
               <?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?>
             </p>
+          </div>
         </section>
 
         <section id="section__baseline">

index.php

@@ -55,7 +55,7 @@ $data = getContent('fr');
     <main>
       <div class="col-left">
         <section id="section__hero">
-          <p class="hero-heading"><?= $data['heroHeading'] ?? '' ?></p>
+          <div class="hero-heading"><?= $data['heroHeading'] ?? '' ?></div>
 
           <div class="gauge-container">
             <div id="gauge" style="--pourcent: 0%"></div>
@@ -69,10 +69,12 @@ $data = getContent('fr');
             </div>
           </div>
 
-          <p class="hero-heading">
+          <div class="hero-heading">
+            <p>
               <?= htmlspecialchars($data['subtitleBlack'] ?? '') ?>
               <?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?>
             </p>
+          </div>
         </section>
 
         <section id="section__baseline">

merci/index.php

@@ -45,7 +45,7 @@ $data = getContent('fr');
     </header>
 
     <main>
-      <p class="hero-heading"><?= htmlspecialchars($data['thanksHeading'] ?? 'Un grand merci !') ?></p>
+      <div class="hero-heading"><p><?= htmlspecialchars($data['thanksHeading'] ?? 'Un grand merci !') ?></p></div>
 
       <?= $data['thanksText'] ?? '' ?>
 

thanks/index.php

@@ -45,7 +45,7 @@ $data = getContent('en');
     </header>
 
     <main>
-      <p class="hero-heading"><?= htmlspecialchars($data['thanksHeading'] ?? 'Thank you!') ?></p>
+      <div class="hero-heading"><p><?= htmlspecialchars($data['thanksHeading'] ?? 'Thank you!') ?></p></div>
 
       <?= $data['thanksText'] ?? '' ?>