From 086f40dc4c27ad3c712755b7065c6b425bdcb3ec Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Wed, 25 Oct 2023 20:29:24 +0200
Subject: [PATCH 1/9] add accessibility module for highcharts

---
 .../components/chart-components/chart.js      | 13 +++++
 .../components/higher-education/charts.json   | 54 ++++++++++++-------
 2 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/client/src/pages/country/components/chart-components/chart.js b/client/src/pages/country/components/chart-components/chart.js
index 9660a3c..6ac4c62 100644
--- a/client/src/pages/country/components/chart-components/chart.js
+++ b/client/src/pages/country/components/chart-components/chart.js
@@ -1,5 +1,8 @@
 import { Col } from '@dataesr/react-dsfr';
 import Highcharts from 'highcharts';
+import HCExportingData from 'highcharts/modules/export-data';
+import HCExporting from 'highcharts/modules/exporting';
+// import HCAccessibility from 'highcharts/modules/accessibility';
 import HighchartsReact from 'highcharts-react-official';
 import PropTypes from 'prop-types';
 
@@ -7,6 +10,10 @@ import useFetchData from './hooks/useFetchData';
 
 import './custom-style.scss';
 
+HCExporting(Highcharts);
+HCExportingData(Highcharts);
+require('highcharts/modules/accessibility')(Highcharts);
+
 export default function Chart({ countryCode, data, hasDataHandler, otherCodes }) {
   const { options } = useFetchData({
     base100: data.base100,
@@ -27,6 +34,12 @@ export default function Chart({ countryCode, data, hasDataHandler, otherCodes })
   if (nbEmpty === options.series.length) {
     return null;
   }
+
+  options.accessibility = {
+    enabled: true,
+    description: data.description,
+  };
+
   hasDataHandler(true);
 
   return (
diff --git a/client/src/pages/country/components/higher-education/charts.json b/client/src/pages/country/components/higher-education/charts.json
index 62fb865..9420ad9 100644
--- a/client/src/pages/country/components/higher-education/charts.json
+++ b/client/src/pages/country/components/higher-education/charts.json
@@ -8,7 +8,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": true,
-    "theme": "niveau"
+    "theme": "niveau",
+    "description": ""
   },
   {
     "title": "Effectif total scolarisé en licence ou équivalent (niveau 6 de la CITE)",
@@ -19,7 +20,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": true,
-    "theme": "niveau"
+    "theme": "niveau",
+    "description": ""
   },
   {
     "title": "Effectif total scolarisé en master ou équivalent (niveau 7 de la CITE)",
@@ -30,7 +32,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": true,
-    "theme": "niveau"
+    "theme": "niveau",
+    "description": ""
   },
   {
     "title": "Effectif total scolarisé en doctorat ou équivalent (niveau 8 de la CITE)",
@@ -41,7 +44,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": true,
-    "theme": "niveau"
+    "theme": "niveau",
+    "description": ""
   },
   {
     "title": "Effectif total scolarisé dans l'enseignement supérieur",
@@ -52,7 +56,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": true,
-    "theme": "niveau"
+    "theme": "niveau",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans d'autres domaines d'études que les Sciences",
@@ -63,7 +68,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Agriculture, sylviculture, halieutique et sciences vétérinaire\"",
@@ -74,7 +80,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Commerce, administration et droit\"",
@@ -85,7 +92,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés au domaine d'études non-spécifié",
@@ -96,7 +104,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Education\"",
@@ -107,7 +116,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Ingénierie, industries de transformation et construction\"",
@@ -118,7 +128,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Lettres et Arts\"",
@@ -129,7 +140,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Santé et Protection sociale\"",
@@ -140,7 +152,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Sciences naturelles, mathématiques et statistiques\"",
@@ -151,7 +164,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Sciences sociales, journalisme et information\"",
@@ -162,7 +176,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Sciences, Technologies, Ingénierie et Mathématiques\"",
@@ -173,7 +188,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Services\"",
@@ -184,7 +200,8 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   },
   {
     "title": "Part des diplômés dans le domaine d'études \"Technologies de l’information et de la communication\"",
@@ -195,6 +212,7 @@
     "type": "line",
     "source": "Unesco",
     "base100": false,
-    "theme": "domaine"
+    "theme": "domaine",
+    "description": ""
   }
 ]
\ No newline at end of file

From 436395b5dd8694a3f25a68afd6f45b055c87b20e Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Thu, 26 Oct 2023 21:40:26 +0200
Subject: [PATCH 2/9] add skip link

---
 client/src/components/search-bar/index.js |   1 +
 client/src/index.scss                     |   8 ++
 client/src/layout/header/index.js         | 135 +++++++++++++---------
 client/src/layout/index.js                |   2 +-
 client/src/pages/homepage/index.js        |   2 +-
 5 files changed, 91 insertions(+), 57 deletions(-)

diff --git a/client/src/components/search-bar/index.js b/client/src/components/search-bar/index.js
index 87f36ed..13d5d52 100644
--- a/client/src/components/search-bar/index.js
+++ b/client/src/components/search-bar/index.js
@@ -100,6 +100,7 @@ const SearchBar = forwardRef((props, ref) => {
       onFocus={() => setShowOptions(true)}
       role="search"
       className={classNames(styles.form, _className)}
+      id="a11ySearch"
     >
       <div className={styles.searchbar}>
         <label className={_classNameLabel} htmlFor={inputId.current}>
diff --git a/client/src/index.scss b/client/src/index.scss
index a513502..2776da2 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -51,6 +51,7 @@ code {
   --CCI-color: #3e3e3E;
   --embassy-color: #cac426;
 }
+
 .not-bold {
   font-weight: normal;
 }
@@ -126,4 +127,11 @@ code {
 .highcharts-subtitle {
   fill: var(--text-default-grey) !important;
   font-family: 'Marianne' !important;
+}
+
+// accessibilité
+.skipLinks-a11y {
+  position: absolute;
+  left: -1000px;
+  top: -1000px;
 }
\ No newline at end of file
diff --git a/client/src/layout/header/index.js b/client/src/layout/header/index.js
index ac82321..d1dff6b 100644
--- a/client/src/layout/header/index.js
+++ b/client/src/layout/header/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable indent */
 import { useEffect, useState } from 'react';
 import {
   Link as RouterLink,
@@ -57,64 +58,88 @@ export default function Header({ switchTheme }) {
   };
 
   return (
-    <HeaderWrapper>
-      <HeaderBody>
-        <Logo splitCharacter={9}>
-          Gouvernement
-        </Logo>
-        <Service
-          title={(
-            <>
-              CurieXplore
-              {headerTag && <Badge text={headerTag} type={(!headerTagColor) ? 'info' : undefined} isSmall colorFamily={headerTagColor} />}
-            </>
-          )}
-          description="La plateforme d'exploration des systèmes d'enseignement supérieur,
+    <>
+      <ul className="skipLinks-a11y" title="Liens d'accès rapide">
+        <li>
+          <a href="/" title="Aller à l'accueil">
+            Aller à l'accueil du site
+          </a>
+        </li>
+        <li>
+          <a href="#a11ySearch">
+            Aller à la recherche de pays
+          </a>
+        </li>
+        <li>
+          <a href="/annuaire">
+            Aller à l'annuaire des pays
+          </a>
+        </li>
+        <li>
+          <a href="#a11ycontent">
+            Aller au contenu de la page
+          </a>
+        </li>
+      </ul>
+      <HeaderWrapper>
+        <HeaderBody>
+          <Logo splitCharacter={9}>
+            Gouvernement
+          </Logo>
+          <Service
+            title={(
+              <>
+                CurieXplore
+                {headerTag && <Badge text={headerTag} type={(!headerTagColor) ? 'info' : undefined} isSmall colorFamily={headerTagColor} />}
+              </>
+            )}
+            description="La plateforme d'exploration des systèmes d'enseignement supérieur,
           de recherche et d'innovation à l'international"
-        />
-        <Tool closeButtonLabel="fermer" className="extend">
-          <ToolItemGroup>
-            <ToolItem
-              type="button"
-              className="fr-btn fr-btn--icon-left fr-icon-theme-fill"
-              aria-controls="fr-theme-modal"
-              data-fr-opened={isOpen}
-              onClick={() => setIsOpen(true)}
-            >
-              Changer le thème
-            </ToolItem>
-          </ToolItemGroup>
+          />
+          <Tool closeButtonLabel="fermer" className="extend">
+            <ToolItemGroup>
+              <ToolItem
+                type="button"
+                className="fr-btn fr-btn--icon-left fr-icon-theme-fill"
+                aria-controls="fr-theme-modal"
+                data-fr-opened={isOpen}
+                onClick={() => setIsOpen(true)}
+              >
+                Changer le thème
+              </ToolItem>
+            </ToolItemGroup>
 
-          <SearchBar
-            size="md"
-            buttonLabel="Rechercher"
-            hideLabel
-            value={query}
-            label="Rechercher un pays"
-            placeholder="Rechercher..."
-            onChange={(e) => {
-              setQuery(e.target.value);
-            }}
-            options={options}
-            onSearch={handleSearch}
-            onSelect={handleSearchRedirection}
-            isSearching={isSearching}
+            <SearchBar
+              size="md"
+              buttonLabel="Rechercher"
+              hideLabel
+              value={query}
+              label="Rechercher un pays"
+              placeholder="Rechercher..."
+              onChange={(e) => {
+                setQuery(e.target.value);
+              }}
+              options={options}
+              onSearch={handleSearch}
+              onSelect={handleSearchRedirection}
+              isSearching={isSearching}
+            />
+          </Tool>
+        </HeaderBody>
+        <HeaderNav path={pathname}>
+          <NavItem
+            title="Accueil"
+            asLink={<RouterLink to="/">Accueil</RouterLink>}
+            current={pathname === '/'}
+          />
+          <NavItem
+            title="Annuaire"
+            asLink={<RouterLink to="/annuaire">Annuaire</RouterLink>}
+            current={pathname === '/annuaire'}
           />
-        </Tool>
-      </HeaderBody>
-      <HeaderNav path={pathname}>
-        <NavItem
-          title="Accueil"
-          asLink={<RouterLink to="/">Accueil</RouterLink>}
-          current={pathname === '/'}
-        />
-        <NavItem
-          title="Annuaire"
-          asLink={<RouterLink to="/annuaire">Annuaire</RouterLink>}
-          current={pathname === '/annuaire'}
-        />
-      </HeaderNav>
-    </HeaderWrapper>
+        </HeaderNav>
+      </HeaderWrapper>
+    </>
   );
 }
 
diff --git a/client/src/layout/index.js b/client/src/layout/index.js
index 0061d2f..c7c3fb8 100644
--- a/client/src/layout/index.js
+++ b/client/src/layout/index.js
@@ -14,7 +14,7 @@ export default function Layout() {
       <Header switchTheme={{ isOpen: isSwitchThemeOpen, setIsOpen: setIsSwitchThemeOpen }} />
       <SwitchTheme isOpen={isSwitchThemeOpen} setIsOpen={setIsSwitchThemeOpen} />
       <div role="alert" id="notice-container" />
-      <Container as="main" role="main" fluid>
+      <Container as="main" role="main" fluid id="a11yContent">
         <Outlet />
       </Container>
       <ScrollToTop />
diff --git a/client/src/pages/homepage/index.js b/client/src/pages/homepage/index.js
index 92f3b60..c8662be 100644
--- a/client/src/pages/homepage/index.js
+++ b/client/src/pages/homepage/index.js
@@ -13,7 +13,7 @@ export default function HomePage() {
   return (
     <>
       <Container fluid aria-hidden>
-        <Row gutters>
+        <Row>
           <Col n="12">
             <MapContainer
               zoomControl={false}

From 4769a55f842b5cdf23cfab05618e25695d35a41f Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Thu, 26 Oct 2023 21:51:42 +0200
Subject: [PATCH 3/9] add text for changing context

---
 client/src/pages/homepage/components/region-filters.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/homepage/components/region-filters.js b/client/src/pages/homepage/components/region-filters.js
index 43f0d7f..99353aa 100644
--- a/client/src/pages/homepage/components/region-filters.js
+++ b/client/src/pages/homepage/components/region-filters.js
@@ -1,4 +1,4 @@
-import { Container, Tag, TagGroup, Title } from '@dataesr/react-dsfr';
+import { Container, Tag, TagGroup, Text, Title } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 import regions from '../utils/regions';
 
@@ -6,6 +6,11 @@ export default function RegionFilters({ region, setRegion }) {
   return (
     <Container className="fr-py-3w">
       <Title as="h1" look="h5" className="fr-mb-1w" bold>Zoom sur...</Title>
+      <Text>
+        <i>
+          Cliquez sur un bouton pour filtrer la carte et la liste ci-dessous
+        </i>
+      </Text>
       <TagGroup>
         {
           Object.entries(regions).map(([label, key]) => (

From 0ecf30e12b6c73fc0a8c189c6cf7582fe8a4708d Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Thu, 26 Oct 2023 22:13:02 +0200
Subject: [PATCH 4/9] ordered markup

---
 client/src/components/generic-card/index.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/src/components/generic-card/index.js b/client/src/components/generic-card/index.js
index b22dafc..c118894 100644
--- a/client/src/components/generic-card/index.js
+++ b/client/src/components/generic-card/index.js
@@ -1,4 +1,4 @@
-import { Badge, BadgeGroup, Text } from '@dataesr/react-dsfr';
+import { Badge, Text } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 
 export default function PopulationCard({
@@ -9,17 +9,15 @@ export default function PopulationCard({
   return (
     <div className="fr-card fr-card--no-border fr-card--shadow text-center fr-card-container">
       <div className="fr-card__content">
-        <div className="badge-container">
-          <BadgeGroup>
-            <Badge text={badgeLabel} className="" />
-          </BadgeGroup>
-        </div>
         <Text as="h3" className="not-bold">
           {description}
         </Text>
         <p>
           {indicator}
         </p>
+        <div className="badge-container" title="Année concernée">
+          <Badge text={badgeLabel} />
+        </div>
       </div>
     </div>
   );

From 7b24c98a014a95664b396bcefa4fc63002f079f1 Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Thu, 26 Oct 2023 22:18:22 +0200
Subject: [PATCH 5/9] title in country language

---
 .../pages/country/components/country-links/components/tile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/country/components/country-links/components/tile.js b/client/src/pages/country/components/country-links/components/tile.js
index c9c0873..cc13518 100644
--- a/client/src/pages/country/components/country-links/components/tile.js
+++ b/client/src/pages/country/components/country-links/components/tile.js
@@ -9,10 +9,10 @@ export default function RessourceTile({ pictogram, title, href, description, bad
         <div className="fr-badge-group">
           <Badge isSmall text={badge} colorFamily={colorFamily} />
         </div>
-        <h2 className="fr-tile__title fr-m-0">
+        <h2 className="fr-tile__title fr-m-0" title="Titre dans la langue du pays">
           <a className="fr-tile__link" target="_blank" rel="noopener noreferrer" href={href}>{title}</a>
         </h2>
-        <p className="fr-card__detail">{description}</p>
+        <p className="fr-card__detail" title="Description dans la langue du pays">{description}</p>
         <p className="fr-card__detail">{date}</p>
       </div>
       <div className="fr-tile__img tile-img">

From 6dc33fa54736c9fdac2ddfed4af7621689f1a3ae Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Fri, 27 Oct 2023 09:12:06 +0200
Subject: [PATCH 6/9] fix responsive

---
 .../components/chart-components/chart.js      |  2 +-
 .../components/chart-components/population.js |  2 +-
 .../components/education-index/index.js       |  4 +--
 .../components/overview/index.js              | 16 +++++----
 .../pages/country/components/profile/index.js |  6 ++--
 .../research/components/overview/index.js     | 36 +++++++++++--------
 6 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/client/src/pages/country/components/chart-components/chart.js b/client/src/pages/country/components/chart-components/chart.js
index 6ac4c62..cb50a01 100644
--- a/client/src/pages/country/components/chart-components/chart.js
+++ b/client/src/pages/country/components/chart-components/chart.js
@@ -43,7 +43,7 @@ export default function Chart({ countryCode, data, hasDataHandler, otherCodes })
   hasDataHandler(true);
 
   return (
-    <Col n="6">
+    <Col n="12 md-6">
       <HighchartsReact
         highcharts={Highcharts}
         options={options}
diff --git a/client/src/pages/country/components/chart-components/population.js b/client/src/pages/country/components/chart-components/population.js
index 3fc17f3..dd2095b 100644
--- a/client/src/pages/country/components/chart-components/population.js
+++ b/client/src/pages/country/components/chart-components/population.js
@@ -30,7 +30,7 @@ export default function PopulationComponent({ data, isoCode }) {
 
   return (
     (evolution.data !== null) ? (
-      <Col n="4">
+      <Col n="12 md-4">
         <PopulationCard
           badgeLabel={lastYear}
           description={description}
diff --git a/client/src/pages/country/components/higher-education/components/education-index/index.js b/client/src/pages/country/components/higher-education/components/education-index/index.js
index 25af573..83c25c5 100644
--- a/client/src/pages/country/components/higher-education/components/education-index/index.js
+++ b/client/src/pages/country/components/higher-education/components/education-index/index.js
@@ -46,7 +46,7 @@ export default function EducationIndex({ data }) {
       <Row gutters className="fr-mb-1w">
         {
           MOYSCO.year && (
-            <Col n="6">
+            <Col n="12 md-6">
               <IndicatorCard
                 badgeLabel={MOYSCO.year}
                 indicator={getIndicator(MOYSCO)}
@@ -57,7 +57,7 @@ export default function EducationIndex({ data }) {
         }
         {
           ESPSCO.year && (
-            <Col n="6">
+            <Col n="12 md-6">
               <IndicatorCard
                 badgeLabel={ESPSCO.year}
                 indicator={getIndicator(ESPSCO)}
diff --git a/client/src/pages/country/components/higher-education/components/overview/index.js b/client/src/pages/country/components/higher-education/components/overview/index.js
index f2ce594..5f0a97c 100644
--- a/client/src/pages/country/components/higher-education/components/overview/index.js
+++ b/client/src/pages/country/components/higher-education/components/overview/index.js
@@ -15,10 +15,12 @@ export default function Overview({ data }) {
   const MOYSCO = { ...data.find((el) => el.fields.code === 'MOYSCO')?.fields };
 
   // Effectif total supérieur
-  const total = { ...data
-    // récupérer la donnée la plus récente
-    .sort((a, b) => b.fields.year - a.fields.year)
-    .find((el) => el.fields.code === '25053')?.fields };
+  const total = {
+    ...data
+      // récupérer la donnée la plus récente
+      .sort((a, b) => b.fields.year - a.fields.year)
+      .find((el) => el.fields.code === '25053')?.fields,
+  };
 
   // Effectif par domaine d'études
   for (let j = 0; j < charts.length; j += 1) {
@@ -74,7 +76,7 @@ export default function Overview({ data }) {
       <Row gutters className="fr-mb-1w">
         {
           (Object.keys(total).length !== 0) ? (
-            <Col n="4">
+            <Col n="12 md-4">
               <IndicatorCard
                 badgeLabel={total.year}
                 indicator={getIndicator(total)}
@@ -85,7 +87,7 @@ export default function Overview({ data }) {
         }
         {
           ((Object.keys(seriesCountry[0]).length !== 0) && (seriesCountry[0].value !== 0)) ? (
-            <Col n="4">
+            <Col n="12 md-4">
               <IndicatorCard
                 badgeLabel={seriesCountry[0].year}
                 indicator={getIndicator(seriesCountry[0])}
@@ -96,7 +98,7 @@ export default function Overview({ data }) {
         }
         {
           (Object.keys(MOYSCO).length !== 0) ? (
-            <Col n="4">
+            <Col n="12 md-4">
               <IndicatorCard
                 badgeLabel={MOYSCO.year}
                 indicator={getIndicator(MOYSCO)}
diff --git a/client/src/pages/country/components/profile/index.js b/client/src/pages/country/components/profile/index.js
index 262853c..24ec8cd 100644
--- a/client/src/pages/country/components/profile/index.js
+++ b/client/src/pages/country/components/profile/index.js
@@ -90,7 +90,7 @@ export default function CountryProfilePage() {
             <PopulationComponent isoCode={isoCode} data={el} key={isoCode} />
           ))}
         {Object.keys(RNB).length !== 0 ? (
-          <Col n="4">
+          <Col n="12 md-4">
             <GenericCard
               badgeLabel={RNB.year}
               indicator={getNumber(RNB)}
@@ -99,7 +99,7 @@ export default function CountryProfilePage() {
           </Col>
         ) : null}
         {Object.keys(IDH).length !== 0 ? (
-          <Col n="4">
+          <Col n="12 md-4">
             <GenericCard
               badgeLabel={IDH.year}
               indicator={getNumber(IDH)}
@@ -108,7 +108,7 @@ export default function CountryProfilePage() {
           </Col>
         ) : null}
         {Object.keys(ESPVIE).length !== 0 ? (
-          <Col n="4">
+          <Col n="12 md-4">
             <GenericCard
               badgeLabel={ESPVIE.year}
               indicator={getNumber(ESPVIE)}
diff --git a/client/src/pages/country/components/research/components/overview/index.js b/client/src/pages/country/components/research/components/overview/index.js
index 1a087b2..1ff426f 100644
--- a/client/src/pages/country/components/research/components/overview/index.js
+++ b/client/src/pages/country/components/research/components/overview/index.js
@@ -11,22 +11,28 @@ export default function Overview({ data }) {
   const ID_DIRD = 'G_XGDP';
 
   // Effectif total personnel R-D
-  const totalRD = { ...data
-    // récupérer la donnée la plus récente
-    .sort((a, b) => b.fields.year - a.fields.year)
-    .find((el) => el.fields.code === ID_TOTAL_PERSO)?.fields };
+  const totalRD = {
+    ...data
+      // récupérer la donnée la plus récente
+      .sort((a, b) => b.fields.year - a.fields.year)
+      .find((el) => el.fields.code === ID_TOTAL_PERSO)?.fields,
+  };
 
   // Total des Crédits budgétaires
-  const totalCB = { ...data
-    // récupérer la donnée la plus récente
-    .sort((a, b) => b.fields.year - a.fields.year)
-    .find((el) => el.fields.code === ID_CREDITS)?.fields };
+  const totalCB = {
+    ...data
+      // récupérer la donnée la plus récente
+      .sort((a, b) => b.fields.year - a.fields.year)
+      .find((el) => el.fields.code === ID_CREDITS)?.fields,
+  };
 
   // DIRD en % du PIB
-  const totalDIRD = { ...data
-    // récupérer la donnée la plus récente
-    .sort((a, b) => b.fields.year - a.fields.year)
-    .find((el) => el.fields.code === ID_DIRD)?.fields };
+  const totalDIRD = {
+    ...data
+      // récupérer la donnée la plus récente
+      .sort((a, b) => b.fields.year - a.fields.year)
+      .find((el) => el.fields.code === ID_DIRD)?.fields,
+  };
 
   const getIndicator = (code) => {
     if (code.code === ID_TOTAL_PERSO) {
@@ -66,7 +72,7 @@ export default function Overview({ data }) {
       <Row gutters className="fr-mb-1w">
         {
           (Object.keys(totalRD).length !== 0) ? (
-            <Col n="4">
+            <Col n="12 md-4">
               <IndicatorCard
                 badgeLabel={totalRD.year}
                 indicator={getIndicator(totalRD)}
@@ -77,7 +83,7 @@ export default function Overview({ data }) {
         }
         {
           (Object.keys(totalCB).length !== 0) ? (
-            <Col n="4">
+            <Col n="12 md-4">
               <IndicatorCard
                 badgeLabel={totalCB.year}
                 indicator={getIndicator(totalCB)}
@@ -88,7 +94,7 @@ export default function Overview({ data }) {
         }
         {
           (Object.keys(totalDIRD).length !== 0) ? (
-            <Col n="4">
+            <Col n="12 md-4">
               <IndicatorCard
                 badgeLabel={totalDIRD.year}
                 indicator={getIndicator(totalDIRD)}

From 1549d83e0681b56e2652cdec323bec8caba2a701 Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Fri, 27 Oct 2023 09:14:14 +0200
Subject: [PATCH 7/9] fix responsive

---
 client/src/components/adaptative-list/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/adaptative-list/index.js b/client/src/components/adaptative-list/index.js
index 8abb8dd..abd0a2a 100644
--- a/client/src/components/adaptative-list/index.js
+++ b/client/src/components/adaptative-list/index.js
@@ -29,7 +29,7 @@ export default function AdaptativeList({ elements, defaultN }) {
     <>
       {list}
       {isMore && (
-        <Col n="3">
+        <Col n="12 md-3">
           <Button
             secondary
             onClick={handleMore}
@@ -39,7 +39,7 @@ export default function AdaptativeList({ elements, defaultN }) {
         </Col>
       )}
       {isLess && (
-        <Col n="3">
+        <Col n="12 md-3">
           <Button
             secondary
             onClick={handleLess}

From a8cb33a5e4ebb48998ac4ae6126d4c912d19d720 Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Fri, 27 Oct 2023 09:22:45 +0200
Subject: [PATCH 8/9] add message to notify of context change

---
 .../src/pages/country/components/chart-components/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/country/components/chart-components/index.js b/client/src/pages/country/components/chart-components/index.js
index 9256ec7..fd94bc4 100644
--- a/client/src/pages/country/components/chart-components/index.js
+++ b/client/src/pages/country/components/chart-components/index.js
@@ -1,4 +1,4 @@
-import { Button, Col, Row, Modal, ModalContent, ModalTitle, Icon } from '@dataesr/react-dsfr';
+import { Button, Col, Row, Modal, ModalContent, ModalTitle, Icon, Text } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useOutletContext, useParams } from 'react-router-dom';
@@ -53,6 +53,11 @@ export default function ChartComponents({ charts, title, icon }) {
       <Modal isOpen={showModal} size="lg" hide={() => setShowModal(false)}>
         <ModalTitle>Sélection d'un ou plusieurs pays</ModalTitle>
         <ModalContent>
+          <Text>
+            <i>
+              Cliquez sur un pays ou un groupe de pays afin de mettre à jour les graphiques. Plusieurs sélections sont possibles.
+            </i>
+          </Text>
           <Filters
             bordersIsoCodes={bordersIsoCodes}
             currentIsoCode={isoCode}

From 15bc9cd8a022decdadd3366c476b23479e07bce8 Mon Sep 17 00:00:00 2001
From: Mihoub Debache <debache.mihoub@gmail.com>
Date: Fri, 27 Oct 2023 10:26:48 +0200
Subject: [PATCH 9/9] fix(structure-card): add title and ul in modal structure
 card

---
 .../directory-blocs/structure-card.js         | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/src/components/directory-blocs/structure-card.js b/client/src/components/directory-blocs/structure-card.js
index cb8a969..a420a69 100644
--- a/client/src/components/directory-blocs/structure-card.js
+++ b/client/src/components/directory-blocs/structure-card.js
@@ -15,23 +15,29 @@ function AddressCard({ address, displayName }) {
     <div className="fr-card fr-card--grey fr-mb-2w">
       <div className="fr-card__body">
         <div className="fr-card__content">
-          <Icon name="ri-map-pin-line" size="xl">
-            <strong>{displayName}</strong>
-          </Icon>
-          <div className="fr-pt-3w">
-            {address.address && <Text className="d-inline">{address.address}</Text>}
-            {' - '}
-            {address.city && <Text className="d-inline" bold>{address.city}</Text>}
-          </div>
-          <div>
-            {address.phonenumber && (
-              <Text className="d-inline">
-                <Icon name="ri-phone-fill">
-                  {address.phonenumber}
+          <ul>
+            <li>
+              <Text as="h2">
+                <Icon name="ri-map-pin-line" size="xl">
+                  <strong>{displayName}</strong>
                 </Icon>
               </Text>
-            )}
-          </div>
+              <div className="fr-pt-3w">
+                {address.address && <Text className="d-inline">{address.address}</Text>}
+                <br />
+                {address.city && <Text className="d-inline" bold>{address.city}</Text>}
+              </div>
+              <div>
+                {address.phonenumber && (
+                  <Text className="d-inline">
+                    <Icon name="ri-phone-fill">
+                      {address.phonenumber}
+                    </Icon>
+                  </Text>
+                )}
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
     </div>