@gouvfr/dsfr 1.14.1 → 1.14.2-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.14.1",
+  "version": "1.14.2-rc.1",
   "description": "Système de Design de l'Etat - DSFR",
   "repository": "git@github.com:GouvernementFR/dsfr.git",
   "author": "Service d'Information du Gouvernement <maxime.beaugrand@pm.gouv.fr>",

package/publiccode.yml

@@ -4,8 +4,8 @@ url: https://github.com/GouvernementFR/dsfr
 landingURL: https://www.systeme-de-design.gouv.fr/
 creationDate: 2021-04-08
 latestRelease:
-  date: 2025-08-29
-  version: "1.14.1"
+  date: 2025-09-11
+  version: "1.14.2"
 logo: |-
   https://www.systeme-de-design.gouv.fr/uploads/banner_img_aaa47076b8.png
 usedBy:
@@ -60,7 +60,7 @@ metadataFiles:
   changelog: CHANGELOG.md
   codeOfConduct: null
   governance: null
-lastUpdated: 2025-08-29
+lastUpdated: 2025-09-11
 screenshots: |-
   https://www.systeme-de-design.gouv.fr/uploads/composants_groupe_de_boutons_6db9a05d35.png
 genericName: dsfr

package/src/dsfr/component/badge/_part/doc/design/index.md

@@ -109,7 +109,7 @@ Ne pas changer l’icône et la couleur d’un badge système.
 La couleur des badges standard peut être personnalisée, parmi les couleurs illustratives autorisées uniquement.
 
 :::fr-table[Tableau personnalisation design]{valign=top multiline=true caption=false}
-| Éléments | Indice thème claire | Indice thème sombre |
+| Éléments | Indice thème clair | Indice thème sombre |
 |:-----|:-----|:-----|
 | **Fond** | Indice **950**<br>_exemple : `$pink-tuile-950`_ | Indice **100**<br>_exemple : `$pink-tuile-100`_ |
 | **Texte** | Indice **sun**<br>_exemple : `$pink-tuile-sun-425`_ | Indice **moon**<br>_exemple : `$pink-tuile-moon-750`_ |

package/src/dsfr/component/badge/template/stories/badge.stories.js

@@ -102,7 +102,7 @@ export const EllipsisStory = {
   render: () => renders([
     {
       ellipsis: true,
-      label: 'Label très long qui sera tronqué lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus'
+      label: 'Libellé très long qui sera tronqué lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus'
     }
   ])
 };

package/src/dsfr/component/button/_part/doc/code/index.md

@@ -48,20 +48,24 @@ Le composant **Bouton** est un élément interactif permettant de déclencher de
 
 #### Groupes de boutons
 
-Les boutons peuvent être regroupés pour former des ensembles d'actions. Le groupe est formé par la succession de boutons enveloppés par l'élément HTML `<div>` et la classe `fr-btns-group`.
+Les boutons peuvent être regroupés pour former des ensembles d'actions. Le groupe est formé par la succession de boutons structurés sous forme de liste par l'élément HTML `<ul>` et la classe `fr-btns-group`.
 Un groupe est dit **hiérarchisé** s'il dispose d'un bouton primaire et de boutons secondaires. Sauf cas exceptionnel, n'utiliser qu'un seul bouton primaire dans un groupe. Un groupe **non hiérarchisé** est lui constitué uniquement de boutons secondaires, tertiaires, et/ou tertiaires sans contours.
 
 **Exemple de groupe de boutons**
 
 ```HTML
-<div class="fr-btns-group">
+<ul class="fr-btns-group">
+  <li>
     <button class="fr-btn" type="button">
         Bouton 1
     </button>
+  </li>
+  <li>
     <button class="fr-btn fr-btn--secondary" type="button">
         Bouton 2
     </button>
-</div>
+  </li>
+</ul>
 ```
 
 ---

package/src/dsfr/component/checkbox/_part/doc/code/index.md

@@ -97,7 +97,6 @@ Pour **regrouper plusieurs checkboxes liées**, utilisez un élément `<fieldset
             <label class="fr-label" for="checkboxes-3">
                 Libellé case à cocher
             </label>
-            </div>
         </div>
     </div>
     <div class="fr-messages-group" id="checkboxes-messages" aria-live="polite">

package/src/dsfr/component/display/deprecated/example/index.ejs

@@ -36,7 +36,7 @@ let dataFooter = {
       links: [
         {label: 'legifrance.gouv.fr'},
         {label: 'gouvernement.fr'},
-        {label: 'service-public.fr'},
+        {label: 'service-public.gouv.fr'},
         {label: 'data.gouv.fr'}
       ]
     },

package/src/dsfr/component/display/example/index.ejs

@@ -34,7 +34,7 @@ let dataFooter = {
       desc: lorem(),
       links: [
         {label: 'info.gouv.fr', href: 'https://info.gouv.fr', blank: true, attributes: { title: getBlankTitle('info.gouv.fr') }},
-        {label: 'service-public.fr', href: 'https://service-public.fr', blank: true, attributes: { title: getBlankTitle('service-public.fr') }},
+        {label: 'service-public.gouv.fr', href: 'https://service-public.gouv.fr', blank: true, attributes: { title: getBlankTitle('service-public.gouv.fr') }},
         {label: 'legifrance.gouv.fr', href: 'https://legifrance.gouv.fr', blank: true, attributes: { title: getBlankTitle('legifrance.gouv.fr') }},
         {label: 'data.gouv.fr', href: 'https://data.gouv.fr', blank: true, attributes: { title: getBlankTitle('data.gouv.fr') }}
       ]

package/src/dsfr/component/footer/_part/doc/code/index.md

@@ -52,7 +52,7 @@ Le composant **Pied de page** est constitué d'un élément `<footer>` de classe
     - Un bloc de contenu, un élément `<div>` de classe `fr-footer__content` contenant :
       - Une description du site, optionnelle, un élément `<p>` de classe `fr-footer__content-desc`. La description doit être concise et informative, ne pas dépasser 3 lignes.
       - Une liste de liens, **obligatoire et non modifiable**, `<ul>` de classe `fr-footer__content-list`, avec des `<li>` de classe `fr-footer__content-item`, et des liens `<a>` de classe `fr-footer__content-link`.
-        - Les liens doivent être ordonnés dans cet ordre : info.gouv.fr, service-public.fr, legifrance.gouv.fr, data.gouv.fr
+        - Les liens doivent être ordonnés dans cet ordre : info.gouv.fr, service-public.gouv.fr, legifrance.gouv.fr, data.gouv.fr
         - Les liens doivent pointer vers les sites respectifs en s'ouvrant dans une nouvelle fenêtre.
   - Le bloc logos partenaires, optionnel, une `<div>`de classe `fr-footer__partners`. Ce bloc contient :
     - Un titre `<h2>`, ou autre niveau d'entête, de classe `fr-footer__partners-title`.
@@ -88,7 +88,7 @@ Le composant **Pied de page** est constitué d'un élément `<footer>` de classe
                         <a title="info.gouv.fr - nouvelle fenêtre" href="https://info.gouv.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">info.gouv.fr</a>
                     </li>
                     <li class="fr-footer__content-item">
-                        <a title="service-public.fr - nouvelle fenêtre" href="https://service-public.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">service-public.fr</a>
+                        <a title="service-public.gouv.fr - nouvelle fenêtre" href="https://service-public.gouv.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">service-public.gouv.fr</a>
                     </li>
                     <li class="fr-footer__content-item">
                         <a title="legifrance.gouv.fr - nouvelle fenêtre" href="https://legifrance.gouv.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">legifrance.gouv.fr</a>
@@ -309,7 +309,7 @@ Cet exemple inclut un bloc de navigation, un bloc-marque avec logo opérateur, e
                         <a title="info.gouv.fr - nouvelle fenêtre" href="https://info.gouv.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">info.gouv.fr</a>
                     </li>
                     <li class="fr-footer__content-item">
-                        <a title="service-public.fr - nouvelle fenêtre" href="https://service-public.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">service-public.fr</a>
+                        <a title="service-public.gouv.fr - nouvelle fenêtre" href="https://service-public.gouv.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">service-public.gouv.fr</a>
                     </li>
                     <li class="fr-footer__content-item">
                         <a title="legifrance.gouv.fr - nouvelle fenêtre" href="https://legifrance.gouv.fr" target="_blank" rel="noopener external" class="fr-footer__content-link">legifrance.gouv.fr</a>

package/src/dsfr/component/footer/example/sample/footer.ejs

@@ -24,7 +24,7 @@ if (footer.content === true) data.content = {
   desc: lorem('', 240),
   links: [
     {label: 'info.gouv.fr', href: 'https://info.gouv.fr', blank: true, attributes: { title: getBlankTitle('info.gouv.fr') }},
-    {label: 'service-public.fr', href: 'https://service-public.fr', blank: true, attributes: { title: getBlankTitle('service-public.fr') }},
+    {label: 'service-public.gouv.fr', href: 'https://service-public.gouv.fr', blank: true, attributes: { title: getBlankTitle('service-public.gouv.fr') }},
     {label: 'legifrance.gouv.fr', href: 'https://legifrance.gouv.fr', blank: true, attributes: { title: getBlankTitle('legifrance.gouv.fr') }},
     {label: 'data.gouv.fr', href: 'https://data.gouv.fr', blank: true, attributes: { title: getBlankTitle('data.gouv.fr') }}
   ]

package/src/dsfr/component/footer/template/stories/footer-arg-types.js

@@ -240,7 +240,7 @@ const footerArgs = {
   contentDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.',
   contentLinks: [
     { label: 'info.gouv.fr', href: 'https://info.gouv.fr', blank: true, attributes: { title: 'info.gouv.fr - nouvelle fenêtre' } },
-    { label: 'service-public.fr', href: 'https://service-public.fr', blank: true, attributes: { title: 'service-public.fr - nouvelle fenêtre' } },
+    { label: 'service-public.gouv.fr', href: 'https://service-public.gouv.fr', blank: true, attributes: { title: 'service-public.gouv.fr - nouvelle fenêtre' } },
     { label: 'legifrance.gouv.fr', href: 'https://legifrance.gouv.fr', blank: true, attributes: { title: 'legifrance.gouv.fr - nouvelle fenêtre' } },
     { label: 'data.gouv.fr', href: 'https://data.gouv.fr', blank: true, attributes: { title: 'data.gouv.fr - nouvelle fenêtre' } }
   ],

package/src/dsfr/component/modal/_part/doc/code/index.md

@@ -170,10 +170,14 @@ La modale avec une **zone d’action** permet de guider l’utilisateur vers des
                     </div>
                     <!-- Zone d'action de la modale -->
                     <div class="fr-modal__footer">
-                        <div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
-                            <button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
-                            <button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
-                        </div>
+                        <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+                            <li>
+                                <button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
+                            </li>
+                            <li>
+                                <button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
+                            <li>
+                        </ul>
                     </div>
                 </div>
             </div>

package/src/dsfr/component/modal/template/stories/modal-arg-types.js

@@ -1,7 +1,11 @@
-const footer = `<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+const footer = `<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+<li>
 <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
+</li>
+<li>
 <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
-</div>`;
+</li>
+</ul>`;
 
 const body = `<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>

package/src/dsfr/component/pagination/_part/doc/index.md

@@ -48,4 +48,4 @@ Privilégier la pagination au rechargement automatique ou à un bouton “Voir p
 
 ### Règles éditoriales
 
-La pagination n’est régit par aucune règle éditoriale spécifique.
+La pagination n’est régie par aucune règle éditoriale spécifique.

package/src/dsfr/component/range/example/sample/range-double-step.ejs

@@ -6,6 +6,8 @@ let data = {
   ...range,
   isStep: true,
   isDouble: true,
+  minValueLabel: getText('label.min-value', 'range'),
+  maxValueLabel: getText('label.max-value', 'range'),
   step: isNaN(range.step) ? ((range.max - range.min) / 10) | 0 : range.step,
   value: isNaN(range.value) ? (range.max - range.min) * 0.25 + range.min : range.value,
   value2: isNaN(range.value2) ? (range.max - range.min) * 0.75 + range.min : range.value2

package/src/dsfr/component/range/example/sample/range-double.ejs

@@ -5,6 +5,8 @@ range.max = range.max ?? 100;
 let data = {
   ...range,
   isDouble: true,
+  minValueLabel: getText('label.min-value', 'range'),
+  maxValueLabel: getText('label.max-value', 'range'),
   value: isNaN(range.value) ? (range.max - range.min) * 0.25 + range.min : range.value,
   value2: isNaN(range.value2) ? (range.max - range.min) * 0.75 + range.min : range.value2
 };

package/src/dsfr/component/range/template/ejs/range.ejs

@@ -76,8 +76,8 @@ inputAttributes.name = range.name;
 inputAttributes.type = 'range';
 inputAttributes['aria-labelledby'] = label.attributes.id;
 if (range.isDouble) {
-  inputAttributes['aria-label'] = getText('label.min-value', 'range');
-  inputAttributes['aria-labelledby'] = `${range.id} ${label.attributes.id} `;
+  inputAttributes['aria-label'] = range.minValueLabel;
+  inputAttributes['aria-labelledby'] = `${range.id} ${label.attributes.id}`;
 }
 if (range.min) inputAttributes.min = range.min;
 if (range.max) inputAttributes.max = range.max;
@@ -89,7 +89,7 @@ const input2Attributes = {
   value: range.value2,
   id: `${range.id}-2`,
   name: `${range.name}-2`,
-  'aria-label': getText('label.max-value', 'range'),
+  'aria-label': range.maxValueLabel,
   'aria-labelledby': `${range.id}-2 ${label.attributes.id}`
 }
 

package/src/dsfr/component/range/template/stories/range-arg-types.js

@@ -82,7 +82,8 @@ const rangeArgTypes = {
     control: 'number',
     description: 'valeur initiale du curseur',
     type: {
-      value: 'integer'
+      value: 'integer',
+      required: true
     }
   },
   step: {
@@ -127,9 +128,36 @@ const rangeArgTypes = {
       eq: true
     },
     control: 'number',
-    description: '2eme valeur initiale pour le curseur double',
+    description: 'Deuxième valeur initiale pour le curseur double',
     type: {
-      value: 'integer'
+      value: 'integer',
+      required: true
+    },
+    table: { category: 'variant' }
+  },
+  minValueLabel: {
+    if: {
+      arg: 'isDouble',
+      eq: true
+    },
+    control: 'text',
+    description: 'Label pour le 1er curseur en mode double (attribut aria-label)',
+    type: {
+      value: 'string',
+      required: true
+    },
+    table: { category: 'variant' }
+  },
+  maxValueLabel: {
+    if: {
+      arg: 'isDouble',
+      eq: true
+    },
+    control: 'text',
+    description: 'Label pour le Deuxième curseur en mode double (attribut aria-label)',
+    type: {
+      value: 'string',
+      required: true
     },
     table: { category: 'variant' }
   },
@@ -169,6 +197,8 @@ const rangeArgs = {
   disabled: false,
   size: 'md',
   isDouble: false,
+  minValueLabel: 'Valeur minimale',
+  maxValueLabel: 'Valeur maximale',
   value2: 70,
   isStep: false,
   indicators: true,
@@ -190,6 +220,8 @@ const rangeProps = (args) => {
     prefix: args.prefix || rangeArgs.prefix,
     suffix: args.suffix || rangeArgs.suffix,
     isDouble: args.isDouble || false,
+    minValueLabel: args.isDouble ? args.minValueLabel || rangeArgs.minValueLabel : undefined,
+    maxValueLabel: args.isDouble ? args.maxValueLabel || rangeArgs.maxValueLabel : undefined,
     isStep: args.isStep || false,
     indicators: args.indicators || false,
     disabled: args.disabled || rangeArgs.disabled,

package/src/dsfr/component/tag/_part/doc/design/index.md

@@ -112,7 +112,7 @@ Seule la couleur des tags cliquables peut être personnalisée, parmi les couleu
 
 :::fr-table[Tableau personnalisation design]{valign=top multiline=true caption=false}
 
-|  Éléments | Indice thème clair | Indice thème clair |
+|  Éléments | Indice thème clair | Indice thème sombre |
 |:-----|:-----|:-----|
 | **Fond** | Indice **925**<br> exemple : `$pink-tuile-925` | Indice **125**<br> exemple : `$pink-tuile-125` |
 | **Texte et icône**| Indice **sun**<br> exemple : `$pink-tuile-sun-425` | Indice **moon**<br> exemple : `$pink-tuile-moon-750` |

package/src/dsfr/core/_part/doc/base/index.md

@@ -30,11 +30,12 @@ L’image de marque de l’État et la représentation que s’en fait le citoye
 
 ### En application
 
-1. Que vous utilisiez ou non les composants de la librairie, le respect des [fondamentaux](../index.md) du DSFR est obligatoire : ils sont le seul moyen d’assurer la cohérence des interfaces de l’État ;
-2. Vous avez l’obligation d’utiliser les [composants](../../../../component/_part/doc/index.md) du DSFR s’ils existent dans la librairie, en respectant scrupuleusement leurs règles d’utilisation ;
-3. Vous pouvez créer vos propres composants seulement s’ils n’existent pas dans la librairie
-4. Si vous pensez qu’un composant n’existe pas, pensez à interroger la communauté. Il y a de fortes chances qu’il ait déjà été créé par une autre équipe.
-5. Si vous créez un composant et si vous pensez qu’il pourrait être utile à d’autres équipes, pensez à nous le partager pour qu’il soit réintégré à la librairie.
+1. L’application du DSFR doit toujours être complète. Le détournement de composants, l’ajout de sur-couches graphiques quelconques ou la simple recherche de ressemblance avec le Système de Design ne sont pas autorisés.
+2. Que vous utilisiez ou non les composants de la librairie, le respect des [fondamentaux](../index.md) du DSFR est obligatoire : ils sont le seul moyen d’assurer la cohérence des interfaces de l’État ;
+3. Vous avez l’obligation d’utiliser les [composants](../../../../component/_part/doc/index.md) du DSFR s’ils existent dans la librairie, en respectant scrupuleusement leurs règles d’utilisation ;
+4. Vous pouvez créer vos propres composants seulement s’ils n’existent pas dans la librairie
+5. Si vous pensez qu’un composant n’existe pas, pensez à interroger la communauté. Il y a de fortes chances qu’il ait déjà été créé par une autre équipe.
+6. Si vous créez un composant et si vous pensez qu’il pourrait être utile à d’autres équipes, pensez à nous le partager pour qu’il soit réintégré à la librairie.
 
 ## Le détail des fondamentaux
 

package/src/dsfr/core/_part/doc/grid/index.md

@@ -15,11 +15,11 @@ order: 6
 :::fr-table[Caractéristiques de la grille]{valign=top multiline=true}
 | Mise en page | Valeurs en px | Résolution maquette en px | Token | Largeur max. du contenu | Tailles des gouttières (optionnelles) |
 | --- | --- | --- | --- | --- | --- |
-| XS | de 0 à 575 | 320 |  | / | 16 px |
-| SM | de 576 à 767 | 576 | `$bp-sm` | / | 16 px |
+| XS | de 0 à 575 | 320 |  | / | 16px |
+| SM | de 576 à 767 | 576 | `$bp-sm` | / | 16px |
 | MD | de 768 à 991 | 768 | `$bp-md` | / | 16px |
 | LG | de 992 à 1247 | 992 | `$bp-lg` | / | 24px |
-| XL | ≥ 1248 | 1440 | `$bp-xl` | 1200 | 24 px |
+| XL | ≥ 1248 | 1440 | `$bp-xl` | 1200 | 24px |
 :::
 
 ## Points de rupture

package/src/dsfr/core/_part/doc/icon/index.md

@@ -46,7 +46,7 @@ L’ancienne nomenclature des classes en `fr-fi` (remplacée par `fr-icon`) est
 
 **Ajout d'icônes personnalisées**
 
-Pour ajouter une icône qui ne serait pas présente dans le DSFR, il est possible de créer un fichier SVG ou de l’importer depuis la librairie Remixicon. Il faudra ensuite créer un fichier CSS pour associé une classe à cette icône, en suivant la nomenclature `fr-icon-[nom-de-l'icône]`. Par exemple, pour une icône nommée `custom-icon`, le fichier CSS contiendra :
+Pour ajouter une icône qui ne serait pas présente dans le DSFR, il est possible de créer un fichier SVG ou de le télécharger depuis la librairie Remixicon. Il faudra ensuite créer un fichier CSS pour associé une classe à cette icône, en suivant la nomenclature `fr-icon-[nom-de-l'icône]`. Par exemple, pour une icône nommée `custom-icon`, le fichier CSS contiendra :
 
 ```CSS
 .fr-icon-custom-icon::before,
@@ -56,7 +56,19 @@ Pour ajouter une icône qui ne serait pas présente dans le DSFR, il est possibl
 }
 ```
 
-Ne pas modifier directement les fichiers CSS du DSFR, mais plutôt créer un fichier CSS personnalisé pour vos icônes. De cette manière, vous pourrez monter de version du DSFR sans perdre vos modifications.
+[Facultatif] Pour fonctionner sur Internet Explorer 11, il faudra également ajouter, de préférence dans un autre fichier CSS, la règle suivante :
+
+```CSS
+@media screen and (min-width: 0\0) and (min-resolution: 72dpi) {
+  .fr-icon-custom-icon::before,
+  .fr-icon-custom-icon::after {
+    background-image: url("../icons/custom-icon.svg");
+  }
+}
+```
+
+>[!NOTE]
+>Ne pas modifier directement les fichiers CSS du DSFR, mais plutôt créer un fichier CSS personnalisé pour vos icônes. De cette manière, vous pourrez monter de version du DSFR sans perdre vos modifications.
 
 ## Sélection d’icônes
 
@@ -67,7 +79,7 @@ Les icônes classées dans dsfr sont soit des icônes créées spécialement, so
 
 ### Arrows
 
-#### Icônes créées par l'équipe DSFR
+#### Arrows - Icônes créées par l'équipe DSFR
 
 <div class="dsfr-doc-preview">
   <span class="fr-icon-arrow-left-s-first-line" aria-hidden="true"></span>
@@ -88,7 +100,7 @@ Les icônes classées dans dsfr sont soit des icônes créées spécialement, so
 
 :::
 
-#### Icônes proposées par RemixIcon
+#### Arrows - Icônes proposées par RemixIcon
 
 <div class="dsfr-doc-preview">
   <span class="fr-icon-arrow-left-s-fill" aria-hidden="true"></span>
@@ -1747,7 +1759,7 @@ Les icônes classées dans dsfr sont soit des icônes créées spécialement, so
 
 ### Editor
 
-#### Icônes créées par l'équipe DSFR
+#### Editor - Icônes créées par l'équipe DSFR
 
 <div class="dsfr-doc-preview">
   <span class="fr-icon-bold" aria-hidden="true"></span>
@@ -1770,7 +1782,7 @@ Les icônes classées dans dsfr sont soit des icônes créées spécialement, so
 
 :::
 
-#### Icônes proposées par RemixIcon
+#### Editor - Icônes proposées par RemixIcon
 
 <div class="dsfr-doc-preview">
   <span class="fr-icon-code-view" aria-hidden="true"></span>
@@ -2518,7 +2530,7 @@ Les icônes classées dans dsfr sont soit des icônes créées spécialement, so
 
 ### System
 
-#### Icônes créées par l'équipe DSFR
+#### System - Icônes créées par l'équipe DSFR
 
 <div class="dsfr-doc-preview">
   <span class="fr-icon-error-fill" aria-hidden="true"></span>
@@ -2552,7 +2564,7 @@ Les icônes classées dans dsfr sont soit des icônes créées spécialement, so
 
 :::
 
-#### Icônes proposées par RemixIcon
+#### System - Icônes proposées par RemixIcon
 
 <div class="dsfr-doc-preview">
   <span aria-hidden="true" class="fr-icon-add-line"></span>

package/src/dsfr/core/_part/doc/pictogram/index.md

@@ -138,7 +138,7 @@ La librairie de SVG se trouve dans **dist/artwork/pictograms**.
 
 ##### Utilisation des pictogrammes
 
-Pour intégrer ces pictogrammes, il convient d’utiliser une balise `<svg>` et d’importer à l’intérieur les 3 parties du svg. Chaque partie doit être insérée, à la manière des <span>spritesheet</span>, via une balise `<use>` et l’attribut href :
+Pour intégrer ces pictogrammes, il convient d’utiliser une balise `<svg>` et d’importer à l’intérieur les 3 parties du svg. Chaque partie doit être insérée, à la manière des <span lang="en">spritesheet</span>, via une balise `<use>` et l’attribut href :
 
 ```HTML
 <svg class="fr-artwork" aria-hidden="true" viewBox="0 0 80 80" width="80px" height="80px">