Fix: homepage styles

configs/ecospheres/config.yaml

@@ -64,7 +64,7 @@ website:
     display: false
     name:
     link:
-  footer_phrase: "Ce site est une déclinaison thématique de data.gouv.fr sur les données relatives à la transition écologique et énergétique, réalisé par le Ministère en charge de l'environnement"
+  footer_phrase: "Ce site est une déclinaison thématique de data.gouv.fr sur les données relatives à la transition écologique et énergétique, réalisé par le ministère en charge de l'environnement"
   footer_external_links:
     - label: 'data.gouv.fr'
       href: 'https://www.data.gouv.fr'

public/ecospheres/pages/about.md

@@ -6,7 +6,7 @@ _ecologie_.**data.gouv**._fr_ est un catalogue permettant la centralisation des
 
 ## À qui s'adresse cette plateforme ?
 
-_ecologie_.**data.gouv**._fr_ s'adresse aux agents publics des administrations centrales, services déconcentrés et des collectivités territoriales oeuvrant à déployer les politiques publiques portées par le [Ministère en charge de l’environnement](https://www.ecologie.gouv.fr/). L'accès aux données brutes permet également à la société civile, au secteur privé ou encore à l'administration de s'en emparer dans un but de réutilisation.
+_ecologie_.**data.gouv**._fr_ s'adresse aux agents publics des administrations centrales, services déconcentrés et des collectivités territoriales oeuvrant à déployer les politiques publiques portées par le [ministère en charge de l’environnement](https://www.ecologie.gouv.fr/). L'accès aux données brutes permet également à la société civile, au secteur privé ou encore à l'administration de s'en emparer dans un but de réutilisation.
 
 ## Les données ouvertes : qu'est-ce que c'est ?
 

public/ecospheres/pages/accessibility.md

@@ -1,6 +1,6 @@
 # Déclaration d’accessibilité
 
-Le Ministère en charge de l’environnement s’engage à rendre son service accessible, conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.
+Le ministère en charge de l’environnement s’engage à rendre son service accessible, conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.
 
 Cette déclaration d’accessibilité s’applique à **ecologie.data.gouv.fr** (https://ecologie.data.gouv.fr).
 

src/assets/main.css

@@ -5,6 +5,7 @@
   --blue-france-950-100: var(--blue-cumulus-950-100);
   --blue-france-950-100-hover: var(--blue-cumulus-950-100-hover);
   --blue-france-950-100-active: var(--blue-cumulus-950-100-active);
+  --blue-france-sun-113: #000091;
   --blue-france-sun-113-625: var(--blue-cumulus-sun-368-moon-732);
   --blue-france-sun-113-625-hover: var(--blue-cumulus-sun-368-moon-732-hover);
   --blue-france-sun-113-625-active: var(--blue-cumulus-sun-368-moon-732-active);
@@ -99,7 +100,7 @@ body {
 }
 
 .actionTile {
-  background: #000092;
+  background: var(--blue-france-sun-113);
   .fr-tile__link {
     color: white;
   }
@@ -185,6 +186,10 @@ body {
   margin-bottom: 1.5rem;
 }
 
+.datagouv-components :where(.fr-link, a:not(.fr-btn)) {
+  color: var(--blue-france-sun-113);
+}
+
 /* Button color contrast fix */
 .fr-btn:not(
     .fr-btn--close,
@@ -210,3 +215,9 @@ body {
     margin-bottom: 0;
   }
 }
+
+/* Flex gap utility (missing from DSFR) */
+
+.flex-gap {
+  gap: var(--gap, 0.5rem);
+}

src/components/bouquets/BouquetCard.vue

@@ -47,9 +47,7 @@ const { themeColors } = useThemeOptions(theme)
 </script>
 
 <template>
-  <article
-    class="fr-my-1w fr-px-3w fr-py-2w border border-default-grey fr-enlarge-link"
-  >
+  <article class="fr-px-3w fr-py-2w border border-default-grey fr-enlarge-link">
     <div
       v-if="bouquet.private"
       class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v"
@@ -64,27 +62,26 @@ const { themeColors } = useThemeOptions(theme)
         />
       </div>
     </div>
-    <div class="fr-grid-row fr-pt-2v align-center flex-nowrap">
-      <div class="fr-col-12 fr-col-sm-2 bouquet-card-col-logo">
-        <OrganizationLogo
-          v-if="bouquet.organization"
-          :size="43"
-          :object="bouquet"
-        />
-        <div v-else class="border fr-p-1-5v fr-mr-1-5v inline-block">
-          <img
-            :src="getOwnerAvatar(bouquet)"
-            alt=""
-            loading="lazy"
-            class="owner-avatar"
-            height="42"
-            width="42"
-          />
-        </div>
-      </div>
-      <div
-        class="fr-col-12 fr-col-sm-10 fr-pl-2v overflow-hidden flex-1-1-auto"
-      >
+    <div
+      class="fr-mt-2v fr-grid-row align-center flex-nowrap flex-gap owner-info"
+    >
+      <OrganizationLogo
+        v-if="bouquet.organization"
+        :size="42"
+        :object="bouquet"
+      />
+
+      <img
+        v-else
+        :src="getOwnerAvatar(bouquet)"
+        alt=""
+        loading="lazy"
+        class="border fr-p-1-5v owner-avatar"
+        height="56"
+        width="56"
+      />
+
+      <div class="overflow-hidden flex-1-1-auto">
         <h3 class="fr-mb-1v fr-grid-row h4">
           <RouterLink :to="bouquetLink" class="text-grey-500">
             {{ bouquet.name }}
@@ -94,7 +91,7 @@ const { themeColors } = useThemeOptions(theme)
           v-if="bouquet.organization || bouquet.owner"
           class="fr-m-0 fr-text--sm"
         >
-          Par
+          <span class="fr-sr-only">Par</span>
           <template v-if="bouquet.organization">
             <OrganizationNameWithCertificate
               :organization="bouquet.organization"
@@ -116,8 +113,8 @@ const { themeColors } = useThemeOptions(theme)
       Mis à jour {{ formatRelativeIfRecentDate(bouquet.last_modified) }}
     </p>
 
-    <div class="fr-grid-row">
-      <span class="fr-tag fr-mr-2v fr-mb-2v">
+    <div class="fr-grid-row flex-gap">
+      <span class="fr-tag">
         <VIconCustom
           name="database-line"
           class="fr-mr-1v"
@@ -131,7 +128,7 @@ const { themeColors } = useThemeOptions(theme)
         </span>
       </span>
 
-      <span v-if="spatialCoverage" class="fr-tag fr-mb-2v">
+      <span v-if="spatialCoverage" class="fr-tag">
         <VIconCustom
           name="road-map-line"
           class="fr-mr-1v"
@@ -147,9 +144,17 @@ const { themeColors } = useThemeOptions(theme)
 </template>
 
 <style scoped>
+.owner-info {
+  --gap: 0.75rem;
+  .fr-text--sm {
+    line-height: 1.4 !important;
+  }
+  & > :first-child {
+    flex: 0 0 auto;
+  }
+}
 .owner-avatar {
-  margin-bottom: -6px;
-  display: inline-block;
+  background-color: #fff;
 }
 .card__tag {
   color: v-bind('themeColors.color');
@@ -166,15 +171,12 @@ const { themeColors } = useThemeOptions(theme)
   line-height: inherit;
 }
 
-.bouquet-card-col-logo {
-  max-width: 4.25rem;
-}
-
 .description p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 </style>

src/components/bouquets/BouquetDatasetList.vue

@@ -137,7 +137,7 @@ onMounted(() => {
 
 <template>
   <!-- Header and buttons -->
-  <div class="list-header fr-grid-row fr-grid-row--middle justify-between">
+  <div class="flex-gap fr-grid-row fr-grid-row--middle justify-between">
     <h2 class="fr-col-auto fr-m-0">
       Composition du {{ topicsName }} de données
     </h2>
@@ -262,8 +262,8 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.list-header {
-  gap: 1rem;
+.flex-gap {
+  --gap: 1rem;
 }
 details {
   border-block: 1px solid var(--border-default-grey, #ddd);

src/components/bouquets/BouquetList.vue

@@ -170,8 +170,8 @@ defineExpose({
       </div>
     </div>
   </div>
-  <div class="bouquets-list-container fr-container fr-mb-4w border-top">
-    <ul class="fr-mt-3w fr-pl-0" role="list">
+  <div class="fr-mb-4w border-top">
+    <ul class="fr-grid-row flex-gap fr-mt-3w fr-pl-0" role="list">
       <li v-for="bouquet in bouquets" :key="bouquet.id" class="fr-col-12">
         <BouquetCard :bouquet="bouquet" />
       </li>
@@ -180,9 +180,7 @@ defineExpose({
 </template>
 
 <style scoped>
-/* "revert" gutters — simpler than w/o gutters */
-.bouquets-list-container {
-  padding-right: 0;
-  padding-left: 0;
+.fr-grid-row {
+  --gap: 1rem;
 }
 </style>

src/components/forms/bouquet/BouquetOwnerForm.vue

@@ -110,7 +110,7 @@ watch(choice, () => {
       :legend="`Choisissez si vous souhaitez gérer ce ${topicsName} :`"
       name="owner"
     />
-    <div v-if="choice === 'organization'" class="organizations">
+    <div v-if="choice === 'organization'" class="flex-gap">
       <DsfrSelect
         id="ownerOrg"
         v-model="selectedOwnOrganization"
@@ -169,7 +169,7 @@ watch(choice, () => {
 </template>
 
 <style scoped>
-.organizations {
-  gap: 1rem;
+.flex-gap {
+  --gap: 1rem;
 }
 </style>

src/components/header/HeaderComponent.vue

@@ -191,6 +191,7 @@ const badgeCss = 'fr-badge fr-badge--sm fr-badge--' + props.badgeStyle
             >
               <p v-if="userName" class="fr-py-1w fr-mr-2v fr-text--sm">
                 {{ userName }}
+                <VIconCustom name="account-circle-line" />
               </p>
               <DsfrHeaderMenuLinks
                 v-if="!headerModalOpened && quickLinks?.length"

src/custom/ecospheres/components/HomeFaq.vue

@@ -5,7 +5,7 @@ const activeAccordion = ref<number>()
 const faqEcologieDataGouvHtml: string = config.website.formatted_title
 const faqDataGouvHtml = '<b>data.gouv</b><i>.fr</i>'
 const faqMinisterLink =
-  "<a href='https://www.ecologie.gouv.fr/' class='fr-link' rel='noreferrer noopener' title='Ministère en charge de l&rsquo;environnement - nouvelle fenêtre' target='_blank'>Ministère en charge de l&rsquo;environnement</a>"
+  "<a href='https://www.ecologie.gouv.fr/' class='fr-link' rel='noreferrer noopener' title='Ministère en charge de l&rsquo;environnement - nouvelle fenêtre' target='_blank'>ministère en charge de l&rsquo;environnement</a>"
 </script>
 
 <template>
@@ -245,6 +245,9 @@ const faqMinisterLink =
 </template>
 
 <style scoped>
+:deep(.fr-accordion .fr-collapse) {
+  padding-inline: clamp(0.5rem, 0.3276rem + 0.8621vw, 1rem);
+}
 :deep(.fr-accordion__btn) {
   color: #000091;
 }