From 943e457ae2cb5aeace2d6ac4aaabcc3e88e965f9 Mon Sep 17 00:00:00 2001
From: Keryan SANIE <keryan.sanie@gmail.com>
Date: Mon, 3 Jul 2023 20:12:50 +0200
Subject: [PATCH 1/8] fix(card, tile): sans liens, target blank, ajouts
 exemples

---
 src/component/card/example/download/index.ejs |  8 ++++
 .../example/download/sample/card-download.ejs |  4 +-
 .../download/sample/sample-assess-file.ejs    |  7 +++
 .../download/sample/sample-content.ejs        |  2 -
 .../example/download/sample/sample-lang.ejs   |  4 ++
 src/component/card/example/index.ejs          |  6 ++-
 .../card/example/sample/card-default.ejs      | 16 +++++--
 .../card/example/sample/sample-enlarge.ejs    |  6 +++
 .../card/example/sample/sample-no-link.ejs    |  3 ++
 src/component/card/style/_legacy.scss         |  2 +-
 src/component/card/style/_scheme.scss         |  6 ++-
 src/component/card/style/module/_content.scss |  4 +-
 src/component/card/style/module/_default.scss | 23 ++++++----
 src/component/card/style/module/_lg.scss      |  4 ++
 src/component/card/style/module/_sm.scss      |  6 +++
 src/component/tile/example/download/index.ejs | 46 +++++++++++++++++--
 .../download/sample/sample-assess-file.ejs    |  7 +++
 .../download/sample/sample-content.ejs        |  5 ++
 .../example/download/sample/sample-lang.ejs   |  3 ++
 .../example/download/sample/sample-no-img.ejs |  3 ++
 .../example/download/sample/sample-sizes.ejs  |  5 ++
 .../download/sample/sample-vertical.ejs       |  5 ++
 src/component/tile/example/index.ejs          |  8 ++++
 src/component/tile/example/layout-english.ejs |  0
 .../tile/example/sample/sample-content.ejs    | 10 ++--
 .../tile/example/sample/sample-disabled.ejs   |  3 ++
 .../tile/example/sample/sample-enlarge.ejs    |  2 +-
 .../tile/example/sample/sample-grid.ejs       |  4 +-
 .../tile/example/sample/sample-horizontal.ejs | 10 ++--
 .../tile/example/sample/sample-icon.ejs       |  4 +-
 .../tile/example/sample/sample-no-img.ejs     |  8 ++--
 .../tile/example/sample/sample-no-link.ejs    |  3 ++
 .../tile/example/sample/sample-sizes.ejs      |  4 +-
 .../tile/example/sample/tile-default.ejs      | 27 +++++++++--
 src/component/tile/index.scss                 |  2 +
 src/component/tile/style/_scheme.scss         |  4 ++
 src/component/tile/style/_tool.scss           |  1 +
 src/component/tile/style/module/_default.scss |  9 ++++
 src/component/tile/style/module/_sm.scss      |  2 +
 src/component/tile/template/ejs/content.ejs   |  5 +-
 40 files changed, 232 insertions(+), 49 deletions(-)
 create mode 100644 src/component/card/example/download/sample/sample-assess-file.ejs
 create mode 100644 src/component/card/example/download/sample/sample-lang.ejs
 create mode 100755 src/component/card/example/sample/sample-no-link.ejs
 create mode 100644 src/component/tile/example/download/sample/sample-assess-file.ejs
 create mode 100644 src/component/tile/example/download/sample/sample-content.ejs
 create mode 100644 src/component/tile/example/download/sample/sample-lang.ejs
 create mode 100644 src/component/tile/example/download/sample/sample-no-img.ejs
 create mode 100644 src/component/tile/example/download/sample/sample-sizes.ejs
 create mode 100644 src/component/tile/example/download/sample/sample-vertical.ejs
 create mode 100644 src/component/tile/example/layout-english.ejs
 create mode 100755 src/component/tile/example/sample/sample-disabled.ejs
 create mode 100755 src/component/tile/example/sample/sample-no-link.ejs

diff --git a/src/component/card/example/download/index.ejs b/src/component/card/example/download/index.ejs
index 9da63b6cb..bfe04e5c8 100644
--- a/src/component/card/example/download/index.ejs
+++ b/src/component/card/example/download/index.ejs
@@ -19,6 +19,14 @@
       title: 'Contenu',
       path: 'sample-content'
     },
+    {
+      title: 'Remplissage automatique des détails',
+      path: 'sample-assess-file'
+    },
+    {
+      title: 'Fichier en langue étrangère',
+      path: 'sample-lang'
+    },
   ];
 
   const accordions = [];
diff --git a/src/component/card/example/download/sample/card-download.ejs b/src/component/card/example/download/sample/card-download.ejs
index 338e211dd..062451911 100755
--- a/src/component/card/example/download/sample/card-download.ejs
+++ b/src/component/card/example/download/sample/card-download.ejs
@@ -1,13 +1,15 @@
 <%
 
 const card = locals.card || {}
+const content = card.content || {}
 const data = {
   img: imgData('img/placeholder.A4.png', 'unknown'),
   title: "Télécharger le/la [Typologie de document] « [Nom du document] »",
   href: '/example/img/placeholder.3x4.png',
   download: true,
   content: {
-    description: "Texte de description (facultatif)"
+    description: "Texte de description (facultatif)",
+    ...content,
   },
   ...card
 } %>
diff --git a/src/component/card/example/download/sample/sample-assess-file.ejs b/src/component/card/example/download/sample/sample-assess-file.ejs
new file mode 100644
index 000000000..636ad3a59
--- /dev/null
+++ b/src/component/card/example/download/sample/sample-assess-file.ejs
@@ -0,0 +1,7 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true, details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}]} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)'}); %>
+
+<div lang="en">
+  <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, './card-download', { card: {title:'Download the french document lorem ipsum', description: false, content: { details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}], lang: 'fr', assess: 'bytes' } } }, true); %>
+</div>
\ No newline at end of file
diff --git a/src/component/card/example/download/sample/sample-content.ejs b/src/component/card/example/download/sample/sample-content.ejs
index 7fa99cc57..5da601b4d 100644
--- a/src/component/card/example/download/sample/sample-content.ejs
+++ b/src/component/card/example/download/sample/sample-content.ejs
@@ -5,5 +5,3 @@
 <%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {}); %>
 
 <%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {}); %>
-
-<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)'}); %>
diff --git a/src/component/card/example/download/sample/sample-lang.ejs b/src/component/card/example/download/sample/sample-lang.ejs
new file mode 100644
index 000000000..40ef78654
--- /dev/null
+++ b/src/component/card/example/download/sample/sample-lang.ejs
@@ -0,0 +1,4 @@
+<% const sample = getSample(include); %>
+
+<%- section('Fichier d\'une autre langue', 'Si la langue du fichier à télécharger est différente de celle de la page courante, il est nécéssaire d\'ajouter l\'attribut <b>hreflang</b> avec comme valeur le code langue (ex: hreflang="en") sur le lien. L’attribut prend pour valeur le code langue selon la norme ISO 639-1 (<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1" target="_blank">Liste des codes ISO 639-1</a>).<br> Il faut aussi <b>ajouter le nom de la langue dans les détails</b> (sauf remplissage automatique en js)', 0) %>
+<%- sample('', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true) %>
diff --git a/src/component/card/example/index.ejs b/src/component/card/example/index.ejs
index 6b7902c37..80c962866 100755
--- a/src/component/card/example/index.ejs
+++ b/src/component/card/example/index.ejs
@@ -35,7 +35,11 @@
       path: 'sample-content'
     },
     {
-      title: 'Desactivé',
+      title: 'Sans lien',
+      path: 'sample-no-link'
+    },
+    {
+      title: 'Desactivée',
       path: 'sample-disabled'
     },
     {
diff --git a/src/component/card/example/sample/card-default.ejs b/src/component/card/example/sample/card-default.ejs
index c50345758..5c5fbb016 100755
--- a/src/component/card/example/sample/card-default.ejs
+++ b/src/component/card/example/sample/card-default.ejs
@@ -8,7 +8,7 @@ const data = {
   },
   id: card.id || uniqueId('card'),
   size: card.size,
-  enlarge: card.enlarge !== false && card.footer === undefined,
+  enlarge: card.enlarge !== false && card.footer === undefined && !card.noLink,
   icon: card.icon,
   variations: card.variations
 }
@@ -51,6 +51,7 @@ if (card.content) {
   if (card.content.assess) data.content.assess = card.content.assess;
   if (card.content.disabled) data.content.disabled = card.content.disabled;
   if (card.content.blank) data.content.blank = card.content.blank;
+  if (card.content.lang) data.content.lang = card.content.lang;
 
   if (card.content.description !== false) data.content.description = card.content.description || lorem('', 160);
 
@@ -70,6 +71,10 @@ if (card.content) {
       if (typeof detail === 'string') {
         if (detail.indexOf('icon') > -1) d.icon = 'warning-fill';
         if (detail.indexOf('end') > -1) d.position = 'end';
+      } else if (typeof detail === 'object') {
+        d.label = detail.label || d.label;
+        d.icon = detail.icon || undefined;
+        d.position = detail.position || 'end';
       }
       data.content.details.push(d);
     }
@@ -78,8 +83,13 @@ if (card.content) {
 
 if (card.download) {
   data.download = true;
-  if (!data.content.details) data.content.details = [];
-  data.content.details.push({ label: 'PNG - 1,1 ko', position: 'end'});
+  if (!data.content.details) {
+    data.content.details = [];
+    data.content.details.push({ label: 'PNG - 1,1 ko', position: 'end'});
+  } else {
+    const hasEnd = data.content.details.find(detail => detail.position === 'end');
+    if (!hasEnd) data.content.details.push({ label: 'PNG - 1,1 ko', position: 'end'});
+  }
 }
 
 if (card.footer) {
diff --git a/src/component/card/example/sample/sample-enlarge.ejs b/src/component/card/example/sample/sample-enlarge.ejs
index 2607cba92..e0602122b 100755
--- a/src/component/card/example/sample/sample-enlarge.ejs
+++ b/src/component/card/example/sample/sample-enlarge.ejs
@@ -1,3 +1,9 @@
 <% const sample = getSample(include); %>
 
 <%- sample('Carte verticale sans lien étendu à la carte', './card-default', { card : { img: true, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>
+
+<%- sample('Carte verticale sans lien étendu et ouverture dans une nouvelle fenêtre', './card-default', { card : { img: true, content: {blank:true}, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>
+
+<%- sample('Carte verticale SM sans lien étendu et ouverture dans une nouvelle fenêtre', './card-default', { card : { size: 'sm', img: true, content: {blank:true}, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>
+
+<%- sample('Carte verticale LG sans lien étendu et ouverture dans une nouvelle fenêtre', './card-default', { card : { size: 'lg', img: true, content: {blank:true}, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>
diff --git a/src/component/card/example/sample/sample-no-link.ejs b/src/component/card/example/sample/sample-no-link.ejs
new file mode 100755
index 000000000..9af053b92
--- /dev/null
+++ b/src/component/card/example/sample/sample-no-link.ejs
@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Carte sans lien', './card-default', { card : { title: 'Intitulé de la carte', img: true, noLink:true }}, true, './card-layout', {col: {md:4}}); %>
diff --git a/src/component/card/style/_legacy.scss b/src/component/card/style/_legacy.scss
index 184468c9d..809904471 100644
--- a/src/component/card/style/_legacy.scss
+++ b/src/component/card/style/_legacy.scss
@@ -20,7 +20,7 @@
 
     &__title {
       @include target-blank {
-        @include icon-size-legacy(lg, after);
+        @include icon-size-legacy(md, after);
       }
     }
 
diff --git a/src/component/card/style/_scheme.scss b/src/component/card/style/_scheme.scss
index 658542510..2a4b53f3c 100644
--- a/src/component/card/style/_scheme.scss
+++ b/src/component/card/style/_scheme.scss
@@ -42,7 +42,11 @@
     }
 
     &__title {
-      @include color.text(action-high blue-france, (legacy:$legacy));
+      @include color.text(default grey, (legacy:$legacy));
+
+      a[href] {
+        @include color.text(action-high blue-france, (legacy:$legacy));
+      }
 
       @include disabled.selector((can-be-link: true), (legacy: $legacy, text: true, background: true));
     }
diff --git a/src/component/card/style/module/_content.scss b/src/component/card/style/module/_content.scss
index fb42bb10b..1e0fa5897 100644
--- a/src/component/card/style/module/_content.scss
+++ b/src/component/card/style/module/_content.scss
@@ -19,7 +19,9 @@
     @include margin-bottom(0);
 
     @include target-blank {
-      @include icon-size(md, after);
+      @include after {
+        --icon-size: 1.375rem;
+      }
     }
   }
 
diff --git a/src/component/card/style/module/_default.scss b/src/component/card/style/module/_default.scss
index d3b4de5df..05cc8923e 100644
--- a/src/component/card/style/module/_default.scss
+++ b/src/component/card/style/module/_default.scss
@@ -7,15 +7,18 @@
   @include display-flex(column);
   @include relative();
 
-  &__title {
-    a {
-      @include icon(arrow-right-line, md, after) {
-        @include absolute(null, 8v, 8v);
+  
+  &#{ns(enlarge-link)} {
+    &__title {
+      a {
+        @include icon(arrow-right-line, md, after) {
+          @include absolute(null, 8v, 8v);
+        }
+      }
+      
+      a[target=_blank] {
+        @include icon(external-link-line, md, after);
       }
-    }
-
-    a[target=_blank] {
-      @include icon(external-link-line, md, after);
     }
   }
 
@@ -29,7 +32,9 @@
   &--no-icon,
   &:not(#{ns(enlarge-link)}) {
     #{ns(card__title a)} {
-      @include after(none);
+      &:not([target="_blank"]) {
+        @include after(none);
+      }
     }
   }
 
diff --git a/src/component/card/style/module/_lg.scss b/src/component/card/style/module/_lg.scss
index 7e0cacc2c..0e5b81d93 100644
--- a/src/component/card/style/module/_lg.scss
+++ b/src/component/card/style/module/_lg.scss
@@ -11,6 +11,10 @@
 
   &--lg &__title {
     @include title-style(h4);
+
+    @include target-blank {
+      @include icon-size(md, after);
+    }
   }
 
   &--lg &__desc {
diff --git a/src/component/card/style/module/_sm.scss b/src/component/card/style/module/_sm.scss
index bccef8c17..44851eff9 100644
--- a/src/component/card/style/module/_sm.scss
+++ b/src/component/card/style/module/_sm.scss
@@ -15,6 +15,12 @@
 
   &--sm &__title {
     @include title-style(h6);
+
+    @include target-blank {
+      @include after {
+        --icon-size: 1.25rem;
+      }
+    }
   }
 
   &--sm &__desc {
diff --git a/src/component/tile/example/download/index.ejs b/src/component/tile/example/download/index.ejs
index 73edc03a9..7c811f09d 100644
--- a/src/component/tile/example/download/index.ejs
+++ b/src/component/tile/example/download/index.ejs
@@ -1,7 +1,47 @@
+
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: true} }}, true, '../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
+<%
+  const elements = [
+    {
+      title: 'Contenu',
+      path: 'sample-content'
+    },
+    {
+      title: 'Tailles',
+      path: 'sample-sizes'
+    },
+    {
+      title: 'Sans image',
+      path: 'sample-no-img'
+    },
+    {
+      title: 'Vertical',
+      path: 'sample-vertical'
+    },
+    {
+      title: 'Remplissage automatique des détails',
+      path: 'sample-assess-file'
+    },
+    {
+      title: 'Fichier en langue étrangère',
+      path: 'sample-lang'
+    },
+  ];
+
+  const accordions = [];
+
+  for (let element of elements) {
+    accordions.push({
+      label: element.title,
+      id: uniqueId('tile-download'),
+      content: include(`./sample/${element.path}`)
+    })
+  }
 
-<%- sample('Tuile de téléchargement avec détail renseigné automatiquement', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', assess: true, details: 'Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'} }}, true, '../sample/tile-layout', {col: {md:6}}); %>
+  const data = {
+    accordions: accordions
+  }
+ %>
 
-<%- sample('Tuile de téléchargement vertical à partir de md', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', vertical: 'md'} }}, true, '../sample/tile-layout', {col: {md:6}}); %>
+<%- include('../../../accordion/template/ejs/accordions-group', {accordionsGroup: data }); %>
diff --git a/src/component/tile/example/download/sample/sample-assess-file.ejs b/src/component/tile/example/download/sample/sample-assess-file.ejs
new file mode 100644
index 000000000..32c3f27d8
--- /dev/null
+++ b/src/component/tile/example/download/sample/sample-assess-file.ejs
@@ -0,0 +1,7 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement avec détail renseigné automatiquement', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide')} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
+
+<div lang="en">
+    <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, '../../sample/tile-default', { tile: {pictogram: 'document-download', download: true, content: { href: '../../img/image.jpg', downloadable: true, title:'Download the french document lorem ipsum', details: ' ', hreflang: 'fr', assess: 'bytes' }} }, true, '../../sample/tile-layout', {col: {md:6}}); %>
+</div>
diff --git a/src/component/tile/example/download/sample/sample-content.ejs b/src/component/tile/example/download/sample/sample-content.ejs
new file mode 100644
index 000000000..3ac94bb92
--- /dev/null
+++ b/src/component/tile/example/download/sample/sample-content.ejs
@@ -0,0 +1,5 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement, cas max', '../../sample/tile-default', { tile : { pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
+
+<%- sample('Tuile de téléchargement, contenu minimum', '../../sample/tile-default', { tile : { download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
diff --git a/src/component/tile/example/download/sample/sample-lang.ejs b/src/component/tile/example/download/sample/sample-lang.ejs
new file mode 100644
index 000000000..4f36951cd
--- /dev/null
+++ b/src/component/tile/example/download/sample/sample-lang.ejs
@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement avec fichier en langue étrangère ', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../img/image.jpg', lang: 'en', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide')} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
diff --git a/src/component/tile/example/download/sample/sample-no-img.ejs b/src/component/tile/example/download/sample/sample-no-img.ejs
new file mode 100644
index 000000000..1545b7c0b
--- /dev/null
+++ b/src/component/tile/example/download/sample/sample-no-img.ejs
@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement', '../../sample/tile-default', { tile : {download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
diff --git a/src/component/tile/example/download/sample/sample-sizes.ejs b/src/component/tile/example/download/sample/sample-sizes.ejs
new file mode 100644
index 000000000..cc92a65d1
--- /dev/null
+++ b/src/component/tile/example/download/sample/sample-sizes.ejs
@@ -0,0 +1,5 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement MD, taille par défaut', '../../sample/tile-default', { tile : { pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
+
+<%- sample('Tuile de téléchargement SM', '../../sample/tile-default', { tile : { size: 'sm', pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
diff --git a/src/component/tile/example/download/sample/sample-vertical.ejs b/src/component/tile/example/download/sample/sample-vertical.ejs
new file mode 100644
index 000000000..6f686832a
--- /dev/null
+++ b/src/component/tile/example/download/sample/sample-vertical.ejs
@@ -0,0 +1,5 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement vertical à partir du breakpoint md', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'md', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:4}}); %>
+
+<%- sample('Tuile de téléchargement vertical à partir du breakpoint lg', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'lg', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6, lg: '3'}}); %>
diff --git a/src/component/tile/example/index.ejs b/src/component/tile/example/index.ejs
index f5056e4a8..cd7347046 100755
--- a/src/component/tile/example/index.ejs
+++ b/src/component/tile/example/index.ejs
@@ -14,6 +14,14 @@
       title: 'Contenu',
       path: 'sample-content'
     },
+    {
+      title: 'Sans lien',
+      path: 'sample-no-link'
+    },
+    {
+      title: 'Désactivée',
+      path: 'sample-disabled'
+    },
     {
       title: 'Icône',
       path: 'sample-icon'
diff --git a/src/component/tile/example/layout-english.ejs b/src/component/tile/example/layout-english.ejs
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/component/tile/example/sample/sample-content.ejs b/src/component/tile/example/sample/sample-content.ejs
index 12fe769ce..a3e5aeef4 100755
--- a/src/component/tile/example/sample/sample-content.ejs
+++ b/src/component/tile/example/sample/sample-content.ejs
@@ -1,11 +1,11 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile verticale avec badge dans le contenu', './tile-default', { tile : { pictogram: true, content: { badge: true, description: true } }}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile verticale avec badge dans le contenu', './tile-default', { tile : { pictogram: true, content: { badge: true, description: true } }}, true, './tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile verticale avec tag dans le contenu', './tile-default', { tile : { pictogram: true, content: { tag: true, description: true } }}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile verticale avec tag dans le contenu', './tile-default', { tile : { pictogram: true, content: { tag: true, description: true } }}, true, './tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile verticale avec détail', './tile-default', { tile : { pictogram: true, content: { details: true } }}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile verticale avec détail', './tile-default', { tile : { pictogram: true, content: { details: true } }}, true, './tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile verticale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', content: { badge: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3}}); %>
+<%- sample('Tuile verticale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', content: { badge: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3, lg:2}}); %>
 
-<%- sample('Tuile verticale sm avec détails et tag', './tile-default', { tile : { pictogram: true, size: 'sm', content: { tag: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3}}); %>
+<%- sample('Tuile verticale sm avec détails et tag', './tile-default', { tile : { pictogram: true, size: 'sm', content: { tag: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3, lg:2}}); %>
diff --git a/src/component/tile/example/sample/sample-disabled.ejs b/src/component/tile/example/sample/sample-disabled.ejs
new file mode 100755
index 000000000..3cc9b9965
--- /dev/null
+++ b/src/component/tile/example/sample/sample-disabled.ejs
@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile désactivée', './tile-default', {tile: {pictogram: true, content: {disabled: true} }}, true, './tile-layout', {col: {md:4}}); %>
diff --git a/src/component/tile/example/sample/sample-enlarge.ejs b/src/component/tile/example/sample/sample-enlarge.ejs
index 8efb3c308..28974a3bf 100755
--- a/src/component/tile/example/sample/sample-enlarge.ejs
+++ b/src/component/tile/example/sample/sample-enlarge.ejs
@@ -1,3 +1,3 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile verticale sans lien étendu à la tuile', './tile-default', { tile: { pictogram: true, enlarge: false }}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile verticale sans lien étendu à la tuile', './tile-default', { tile: { pictogram: true, enlarge: false }}, true, './tile-layout', {col: {md:4, lg:3}}); %>
diff --git a/src/component/tile/example/sample/sample-grid.ejs b/src/component/tile/example/sample/sample-grid.ejs
index 4d016da6e..38dea9aa6 100755
--- a/src/component/tile/example/sample/sample-grid.ejs
+++ b/src/component/tile/example/sample/sample-grid.ejs
@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
 <%
- const tile = { pictogram: true, col: {md:'6', lg:'4'}};
+ const tile = { pictogram: true, col: {md:'4', lg:'3'}};
  %>
 <%- sample('Grilles de tuiles verticales', './tiles-grid', { tiles : [
         { ...tile, content: { tag: true, description: true, details: true }},
@@ -11,7 +11,7 @@
     ]}, true, './tiles-layout'); %>
 
 <%
-const tileSm = { pictogram: true, size:'sm', col: {sm:'6', md:'4', lg:'3'}};
+const tileSm = { pictogram: true, size:'sm', col: {sm:'6', md:'3', lg:'2'}};
 %>
 <%- sample('Grilles de tuiles verticales sm', './tiles-grid', { tiles : [
         { ...tileSm, content: { tag: true, description: true, details: true }},
diff --git a/src/component/tile/example/sample/sample-horizontal.ejs b/src/component/tile/example/sample/sample-horizontal.ejs
index 155ed9013..2e2d97317 100755
--- a/src/component/tile/example/sample/sample-horizontal.ejs
+++ b/src/component/tile/example/sample/sample-horizontal.ejs
@@ -2,12 +2,12 @@
 
 <%- sample('Tuile horizontale avec détails et tag', './tile-default', { tile : { pictogram: true, horizontal: true, content: { tag: true, details: true } }}, true, './tile-layout', {col: {md:'6', lg:'4'}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Tuile sm horizontale avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, content: { badge: true, details: true }}}, true, './tile-layout', {col: {md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+<%- sample('Tuile sm horizontale avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, content: { badge: true, details: true }}}, true, './tile-layout', {col: {md:'4', lg:'3'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Tuile horizontale puis vertical en md', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+<%- sample('Tuile horizontale puis vertical à partir du breakpoint md', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'4', lg:'3'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Tuile sm horizontale puis vertical en md', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+<%- sample('Tuile sm horizontale puis vertical à partir du breakpoint md', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'3', lg:'2'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Tuile horizontale puis vertical en lg', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+<%- sample('Tuile horizontale puis vertical à partir du breakpoint lg', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Tuile sm horizontale puis vertical en lg', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+<%- sample('Tuile sm horizontale puis vertical à partir du breakpoint lg', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'4', lg:'2'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
diff --git a/src/component/tile/example/sample/sample-icon.ejs b/src/component/tile/example/sample/sample-icon.ejs
index 6e62da005..3702dfbf3 100755
--- a/src/component/tile/example/sample/sample-icon.ejs
+++ b/src/component/tile/example/sample/sample-icon.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile sans icone', './tile-default', { tile : { pictogram: true, icon: false }}, true, './tile-layout', {col: {md:6}}); %>
+<%- sample('Tuile sans icone', './tile-default', { tile : { pictogram: true, icon: false }}, true, './tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile avec icone lien externe', './tile-default', { tile : { pictogram: true, content: { blank: true } }}, true, './tile-layout', {col: {md:6}}); %>
+<%- sample('Tuile avec icone lien externe', './tile-default', { tile : { pictogram: true, content: { blank: true } }}, true, './tile-layout', {col: {md:4, lg:3}}); %>
diff --git a/src/component/tile/example/sample/sample-no-img.ejs b/src/component/tile/example/sample/sample-no-img.ejs
index 3c45056be..572eb1a8c 100755
--- a/src/component/tile/example/sample/sample-no-img.ejs
+++ b/src/component/tile/example/sample/sample-no-img.ejs
@@ -1,9 +1,9 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile sans image', './tile-default', {}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile sans image cas max', './tile-default', {tile: {content: {description:true, badge: true, details: true}}}, true, './tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile titre et description', './tile-default', {content: {description: true}}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile sans image, minimum', './tile-default', {}, true, './tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile titre et détails', './tile-default', {tile: {content: {details: true}}}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile titre et description', './tile-default', {tile: { content: {description:true} } }, true, './tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile sans image full contenu', './tile-default', {tile: {content: {description:true, badge: true, details: true}}}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile titre et détails', './tile-default', {tile: {content: {details: true}}}, true, './tile-layout', {col: {md:4, lg:3}}); %>
diff --git a/src/component/tile/example/sample/sample-no-link.ejs b/src/component/tile/example/sample/sample-no-link.ejs
new file mode 100755
index 000000000..4fbd21191
--- /dev/null
+++ b/src/component/tile/example/sample/sample-no-link.ejs
@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile sans lien', './tile-default', {tile: {pictogram: true, noLink: true}}, true, './tile-layout', {col: {md:4, lg:3}}); %>
diff --git a/src/component/tile/example/sample/sample-sizes.ejs b/src/component/tile/example/sample/sample-sizes.ejs
index 36f93b447..646b1248e 100755
--- a/src/component/tile/example/sample/sample-sizes.ejs
+++ b/src/component/tile/example/sample/sample-sizes.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('tuile verticale md, taille par défaut', './tile-default', { tile : { pictogram: true, content: {details: true, description: true} }}, true, './tile-layout', {col: {start: 9, md:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
+<%- sample('tuile verticale md, taille par défaut', './tile-default', { tile : { pictogram: true, content: {details: true, description: true} }}, true, './tile-layout', {col: {start: 9, md:4, lg:3}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
 
-<%- sample('tuile taille sm', './tile-default', { tile: { pictogram: true, size: 'sm', content: {details: true, description: true} }}, true, './tile-layout', {col: {start: 6, md:3}, desc: 'dans une grille sur 3 à 4 colonnes en version desktop'}); %>
+<%- sample('tuile taille sm', './tile-default', { tile: { pictogram: true, size: 'sm', content: {details: true, description: true} }}, true, './tile-layout', {col: {start: 6, md:3, lg:2}, desc: 'dans une grille sur 2 à 4 colonnes en version desktop'}); %>
diff --git a/src/component/tile/example/sample/tile-default.ejs b/src/component/tile/example/sample/tile-default.ejs
index 4d2bbb123..b88674cba 100755
--- a/src/component/tile/example/sample/tile-default.ejs
+++ b/src/component/tile/example/sample/tile-default.ejs
@@ -8,7 +8,7 @@ const data = {
     ...(content.description && {description: content.description === true ? lorem('', 60) : content.description})
   },
   size: tile.size,
-  enlarge: tile.enlarge !== false && tile.footer === undefined,
+  enlarge: tile.enlarge !== false && tile.footer === undefined && !tile.noLink,
   icon: tile.icon,
   download: tile.download,
 }
@@ -21,22 +21,39 @@ if (tile.vertical) {
   data.vertical = tile.vertical;
 }
 
-if (tile.pictogram === true) {
+if (tile.pictogram) {
   data.header = {};
-  data.header.pictogram = {name: 'city-hall'};
+  data.header.pictogram = {};
+  switch (typeof tile.pictogram) {
+    case 'string':
+      data.header.pictogram.name = tile.pictogram;
+      break;
+
+    case 'object':
+      data.header.pictogram = tile.pictogram;
+      break;
+  
+    default:
+      data.header.pictogram = {name: 'city-hall'};
+      break;
+  }
 }
 
+if (tile.noLink) data.content.noLink = true;
+
 if (tile.content) {
+  if (tile.content.disabled) data.content.disabled = tile.content.disabled;
+
   if (tile.content.details) {
     data.content.details = content.details === true ? 'Détail (optionel)' : tile.content.details
   }
 
   if (tile.content.badge) {
-    data.content.badge = { size: 'sm', label: 'label badge', accent: 'purple-glycine'};
+    data.content.badge = { label: 'label badge', accent: 'purple-glycine'};
   }
 
   if (tile.content.tag) {
-    data.content.tag = { size: 'sm', label: 'label tag'};
+    data.content.tag = { label: 'label tag'};
   }
 }
 
diff --git a/src/component/tile/index.scss b/src/component/tile/index.scss
index f655195ac..c36aa2b08 100644
--- a/src/component/tile/index.scss
+++ b/src/component/tile/index.scss
@@ -5,3 +5,5 @@
 
 @import '../../core/index';
 @import 'style/tool';
+@import '../badge/index';
+@import '../tag/index';
diff --git a/src/component/tile/style/_scheme.scss b/src/component/tile/style/_scheme.scss
index 0bf6accaf..d09392fb1 100644
--- a/src/component/tile/style/_scheme.scss
+++ b/src/component/tile/style/_scheme.scss
@@ -14,6 +14,10 @@
     &__title {
       @include disabled.selector((can-be-link: true), (legacy: $legacy, text: true, background: true));
 
+      @include before {
+        @include color.background-image((border plain grey), (legacy: $legacy));
+      }
+
       a {
         @include color.text(action-high blue-france, (legacy: $legacy));
 
diff --git a/src/component/tile/style/_tool.scss b/src/component/tile/style/_tool.scss
index 9cf91d79e..7c4d0abc3 100644
--- a/src/component/tile/style/_tool.scss
+++ b/src/component/tile/style/_tool.scss
@@ -9,6 +9,7 @@
 @mixin build-tile-horizontal() {
   flex-direction: row;
   align-items: flex-start;
+  justify-content: center;
   text-align: left;
 
   #{ns(tile__header)} {
diff --git a/src/component/tile/style/module/_default.scss b/src/component/tile/style/module/_default.scss
index aea1f53f8..7aff8c9b1 100644
--- a/src/component/tile/style/module/_default.scss
+++ b/src/component/tile/style/module/_default.scss
@@ -56,6 +56,15 @@
     @include margin-bottom(2v);
     order: 2;
 
+    @include before('', block) {
+      @include absolute(0, 0, 0, 0, 100%, 100%);
+      @include z-index(over);
+      pointer-events: none;
+      background-position: 0 100%;
+      background-size: 100% spacing.space(1v);
+      background-repeat: no-repeat;
+    }
+
     a {
       @include before {
         background-position: 0 100%;
diff --git a/src/component/tile/style/module/_sm.scss b/src/component/tile/style/module/_sm.scss
index 7dece2b95..465c6e427 100644
--- a/src/component/tile/style/module/_sm.scss
+++ b/src/component/tile/style/module/_sm.scss
@@ -5,6 +5,8 @@
 
 #{ns(tile--sm)} {
   @include padding(6v 6v 7v);
+  @include nest-badge(sm);
+  @include nest-tag(sm);
 
   #{ns(tile)} {
     &__title {
diff --git a/src/component/tile/template/ejs/content.ejs b/src/component/tile/template/ejs/content.ejs
index 868b7a2eb..5daaf64a8 100644
--- a/src/component/tile/template/ejs/content.ejs
+++ b/src/component/tile/template/ejs/content.ejs
@@ -29,6 +29,7 @@ let start = {};
 const markup = content.markup || 'h3';
 const href = content.href || '#';
 const attributes = {}
+const hasLink = !content.noLink;
 if (content.assess === true) {
     attributes[`data-${prefix}-assess-file`] = '';
 } else if (typeof(content.assess) === 'string') {
@@ -49,7 +50,9 @@ if (content.badge) start.badge = content.badge;
 
 <div class="<%= prefix %>-tile__content">
   <<%= markup %> class="<%= prefix %>-tile__title">
-    <a <%- includeAttrs(attributes) %>><%- content.title %></a>
+      <% if (hasLink) { %><a <%- includeAttrs(attributes) %>><% } %>
+        <%- content.title %></a>
+      <% if (hasLink) { %></a><% } %>
   </<%= markup %>>
 
   <% if (content.description !== undefined) { %>

From 6e7389e5ac586abc713a41a9362d498baf958e55 Mon Sep 17 00:00:00 2001
From: Keryan SANIE <keryan.sanie@gmail.com>
Date: Mon, 3 Jul 2023 21:21:46 +0200
Subject: [PATCH 2/8] fix(tile): </a> en trop

---
 src/component/tile/template/ejs/content.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component/tile/template/ejs/content.ejs b/src/component/tile/template/ejs/content.ejs
index 5daaf64a8..771df8359 100644
--- a/src/component/tile/template/ejs/content.ejs
+++ b/src/component/tile/template/ejs/content.ejs
@@ -51,7 +51,7 @@ if (content.badge) start.badge = content.badge;
 <div class="<%= prefix %>-tile__content">
   <<%= markup %> class="<%= prefix %>-tile__title">
       <% if (hasLink) { %><a <%- includeAttrs(attributes) %>><% } %>
-        <%- content.title %></a>
+        <%- content.title %>
       <% if (hasLink) { %></a><% } %>
   </<%= markup %>>
 

From 31cddcc8ef40b5a27248d1b72b6dfcd38be0d96f Mon Sep 17 00:00:00 2001
From: Keryan SANIE <keryan.sanie@gmail.com>
Date: Tue, 4 Jul 2023 15:10:40 +0200
Subject: [PATCH 3/8] fix(card): tailles des examples

---
 .../card/example/download/sample/sample-assess-file.ejs     | 6 +++---
 .../card/example/download/sample/sample-content.ejs         | 6 +++---
 src/component/card/example/download/sample/sample-img.ejs   | 6 +++---
 src/component/card/example/download/sample/sample-lang.ejs  | 2 +-
 .../card/example/download/sample/sample-no-img.ejs          | 4 ++--
 src/component/card/example/download/sample/sample-sizes.ejs | 6 +++---
 src/component/card/example/sample/sample-sizes.ejs          | 6 +++---
 src/component/card/style/module/_default.scss               | 2 +-
 8 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/component/card/example/download/sample/sample-assess-file.ejs b/src/component/card/example/download/sample/sample-assess-file.ejs
index 636ad3a59..bd2240371 100644
--- a/src/component/card/example/download/sample/sample-assess-file.ejs
+++ b/src/component/card/example/download/sample/sample-assess-file.ejs
@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true, details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}]} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)'}); %>
+<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true, details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}]} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)', col: {md:8}}); %>
 
 <div lang="en">
-  <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, './card-download', { card: {title:'Download the french document lorem ipsum', description: false, content: { details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}], lang: 'fr', assess: 'bytes' } } }, true); %>
-</div>
\ No newline at end of file
+  <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, './card-download', { card: {title:'Download the french document lorem ipsum', description: false, content: { details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}], lang: 'fr', assess: 'bytes' } } }, true, '../../sample/card-layout', {col: {md:8}}); %>
+</div>
diff --git a/src/component/card/example/download/sample/sample-content.ejs b/src/component/card/example/download/sample/sample-content.ejs
index 5da601b4d..96c541ebe 100644
--- a/src/component/card/example/download/sample/sample-content.ejs
+++ b/src/component/card/example/download/sample/sample-content.ejs
@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {col: {md:8}}); %>
 
-<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {col: {md:8}}); %>
 
-<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {col: {md:8}}); %>
diff --git a/src/component/card/example/download/sample/sample-img.ejs b/src/component/card/example/download/sample/sample-img.ejs
index 39c648401..9960f7c2e 100644
--- a/src/component/card/example/download/sample/sample-img.ejs
+++ b/src/component/card/example/download/sample/sample-img.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {}); %>
-<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {}); %>
-<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:8}}); %>
diff --git a/src/component/card/example/download/sample/sample-lang.ejs b/src/component/card/example/download/sample/sample-lang.ejs
index 40ef78654..c282c39b5 100644
--- a/src/component/card/example/download/sample/sample-lang.ejs
+++ b/src/component/card/example/download/sample/sample-lang.ejs
@@ -1,4 +1,4 @@
 <% const sample = getSample(include); %>
 
 <%- section('Fichier d\'une autre langue', 'Si la langue du fichier à télécharger est différente de celle de la page courante, il est nécéssaire d\'ajouter l\'attribut <b>hreflang</b> avec comme valeur le code langue (ex: hreflang="en") sur le lien. L’attribut prend pour valeur le code langue selon la norme ISO 639-1 (<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1" target="_blank">Liste des codes ISO 639-1</a>).<br> Il faut aussi <b>ajouter le nom de la langue dans les détails</b> (sauf remplissage automatique en js)', 0) %>
-<%- sample('', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true) %>
+<%- sample('', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true, '../../sample/card-layout', {col: {md:8}}) %>
diff --git a/src/component/card/example/download/sample/sample-no-img.ejs b/src/component/card/example/download/sample/sample-no-img.ejs
index 1a22cba86..3abd19129 100644
--- a/src/component/card/example/download/sample/sample-no-img.ejs
+++ b/src/component/card/example/download/sample/sample-no-img.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {col: {md:8}}); %>
 
-<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {col: {md:8}}); %>
diff --git a/src/component/card/example/download/sample/sample-sizes.ejs b/src/component/card/example/download/sample/sample-sizes.ejs
index 938102ad4..a7fa701fb 100644
--- a/src/component/card/example/download/sample/sample-sizes.ejs
+++ b/src/component/card/example/download/sample/sample-sizes.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement sm', './card-download', { card : { size: 'sm' }}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
-<%- sample('Carte de téléchargement md', './card-download', { card : { size: 'md' }}, true, '../../sample/card-layout', {col: {md:8}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
-<%- sample('Carte de téléchargement lg', './card-download', { card : { size: 'lg' }}, true, '../../sample/card-layout', {desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>
+<%- sample('Carte de téléchargement sm', './card-download', { card : { size: 'sm' }}, true, '../../sample/card-layout', {col: {md:6, lg:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
+<%- sample('Carte de téléchargement md', './card-download', { card : { size: 'md' }}, true, '../../sample/card-layout', {col: {md:8, lg:6}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
+<%- sample('Carte de téléchargement lg', './card-download', { card : { size: 'lg' }}, true, '../../sample/card-layout', {col: {lg:8}, desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>
diff --git a/src/component/card/example/sample/sample-sizes.ejs b/src/component/card/example/sample/sample-sizes.ejs
index 3f0a801a7..e4d495752 100755
--- a/src/component/card/example/sample/sample-sizes.ejs
+++ b/src/component/card/example/sample/sample-sizes.ejs
@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte verticale md, taille par défaut', './card-default', { card : { img: true }}, true, './card-layout', {col: {md:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
+<%- sample('Carte verticale md, taille par défaut', './card-default', { card : { img: true }}, true, './card-layout', {col: {md:6, lg:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Carte taille sm', './card-default', { card: { img: true, size: 'sm' }}, true, './card-layout', {col: {md:3}, desc: 'dans une grille sur 3 à 4 colonnes en version desktop'}); %>
+<%- sample('Carte taille sm', './card-default', { card: { img: true, size: 'sm' }}, true, './card-layout', {col: {md:4, lg:3}, desc: 'dans une grille sur 3 à 4 colonnes en version desktop'}); %>
 
-<%- sample('Carte taille lg', './card-default', { card: { img: true, size: 'lg' } }, true, './card-layout', {col: {md:6}, desc: 'dans une grille sur 6 à 12 colonnes en version desktop'}); %>
+<%- sample('Carte taille lg', './card-default', { card: { img: true, size: 'lg' } }, true, './card-layout', {col: {md:8, lg:6}, desc: 'dans une grille sur 6 à 12 colonnes en version desktop'}); %>
diff --git a/src/component/card/style/module/_default.scss b/src/component/card/style/module/_default.scss
index 05cc8923e..6dc906923 100644
--- a/src/component/card/style/module/_default.scss
+++ b/src/component/card/style/module/_default.scss
@@ -9,7 +9,7 @@
 
   
   &#{ns(enlarge-link)} {
-    &__title {
+    #{ns(card)}__title {
       a {
         @include icon(arrow-right-line, md, after) {
           @include absolute(null, 8v, 8v);

From 8d01ccdc538f4eaafc711972834fd11b9f6e795e Mon Sep 17 00:00:00 2001
From: Keryan SANIE <keryan.sanie@gmail.com>
Date: Tue, 4 Jul 2023 18:10:42 +0200
Subject: [PATCH 4/8] =?UTF-8?q?fix(card):=20taille=20icone=20lien=20non=20?=
 =?UTF-8?q?=C3=A9largi=20blank?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/card/style/module/_content.scss | 4 +---
 src/component/card/style/module/_sm.scss      | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/component/card/style/module/_content.scss b/src/component/card/style/module/_content.scss
index 1e0fa5897..8e106ce2a 100644
--- a/src/component/card/style/module/_content.scss
+++ b/src/component/card/style/module/_content.scss
@@ -19,9 +19,7 @@
     @include margin-bottom(0);
 
     @include target-blank {
-      @include after {
-        --icon-size: 1.375rem;
-      }
+      @include icon-size(sm, after);
     }
   }
 
diff --git a/src/component/card/style/module/_sm.scss b/src/component/card/style/module/_sm.scss
index 44851eff9..7dc42d9c4 100644
--- a/src/component/card/style/module/_sm.scss
+++ b/src/component/card/style/module/_sm.scss
@@ -17,9 +17,7 @@
     @include title-style(h6);
 
     @include target-blank {
-      @include after {
-        --icon-size: 1.25rem;
-      }
+      @include icon-size(sm, after);
     }
   }
 

From d98ec097dd7f1285f33dfc0457f3840c4a245e0f Mon Sep 17 00:00:00 2001
From: Keryan SANIE <keryan.sanie@gmail.com>
Date: Tue, 4 Jul 2023 19:34:11 +0200
Subject: [PATCH 5/8] =?UTF-8?q?fix(card,tile):=20icone=20des=20liens=20non?=
 =?UTF-8?q?=20=C3=A9tendus,=20et=20grille?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../download/sample/sample-assess-file.ejs    |  4 +--
 .../example/download/sample/sample-img.ejs    |  6 ++--
 .../example/download/sample/sample-lang.ejs   |  2 +-
 .../example/download/sample/sample-no-img.ejs |  4 +--
 src/component/card/style/module/_content.scss |  6 +++-
 src/component/card/style/module/_default.scss |  8 ++---
 .../card/style/module/_download.scss          |  8 ++---
 src/component/card/style/module/_lg.scss      |  2 +-
 src/component/card/style/module/_sm.scss      |  2 +-
 .../download/sample/sample-assess-file.ejs    |  4 +--
 .../example/download/sample/sample-lang.ejs   |  2 +-
 src/component/tile/example/index.ejs          |  4 +++
 .../tile/example/sample/sample-enlarge.ejs    |  2 ++
 src/component/tile/style/module/_default.scss | 33 +++++++++++--------
 src/component/tile/style/module/_sm.scss      | 16 ++++++---
 15 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/src/component/card/example/download/sample/sample-assess-file.ejs b/src/component/card/example/download/sample/sample-assess-file.ejs
index bd2240371..ab45a1b91 100644
--- a/src/component/card/example/download/sample/sample-assess-file.ejs
+++ b/src/component/card/example/download/sample/sample-assess-file.ejs
@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true, details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}]} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)', col: {md:8}}); %>
+<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true, details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}]} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)', col: {md:8, lg:6}}); %>
 
 <div lang="en">
-  <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, './card-download', { card: {title:'Download the french document lorem ipsum', description: false, content: { details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}], lang: 'fr', assess: 'bytes' } } }, true, '../../sample/card-layout', {col: {md:8}}); %>
+  <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, './card-download', { card: {title:'Download the french document lorem ipsum', description: false, content: { details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}], assess: 'bytes' } } }, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
 </div>
diff --git a/src/component/card/example/download/sample/sample-img.ejs b/src/component/card/example/download/sample/sample-img.ejs
index 9960f7c2e..ec905a3fb 100644
--- a/src/component/card/example/download/sample/sample-img.ejs
+++ b/src/component/card/example/download/sample/sample-img.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {col: {md:8}}); %>
-<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:8}}); %>
-<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
+<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
+<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
diff --git a/src/component/card/example/download/sample/sample-lang.ejs b/src/component/card/example/download/sample/sample-lang.ejs
index c282c39b5..347ecf328 100644
--- a/src/component/card/example/download/sample/sample-lang.ejs
+++ b/src/component/card/example/download/sample/sample-lang.ejs
@@ -1,4 +1,4 @@
 <% const sample = getSample(include); %>
 
 <%- section('Fichier d\'une autre langue', 'Si la langue du fichier à télécharger est différente de celle de la page courante, il est nécéssaire d\'ajouter l\'attribut <b>hreflang</b> avec comme valeur le code langue (ex: hreflang="en") sur le lien. L’attribut prend pour valeur le code langue selon la norme ISO 639-1 (<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1" target="_blank">Liste des codes ISO 639-1</a>).<br> Il faut aussi <b>ajouter le nom de la langue dans les détails</b> (sauf remplissage automatique en js)', 0) %>
-<%- sample('', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true, '../../sample/card-layout', {col: {md:8}}) %>
+<%- sample('', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}) %>
diff --git a/src/component/card/example/download/sample/sample-no-img.ejs b/src/component/card/example/download/sample/sample-no-img.ejs
index 3abd19129..e391d2ad3 100644
--- a/src/component/card/example/download/sample/sample-no-img.ejs
+++ b/src/component/card/example/download/sample/sample-no-img.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
 
-<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
diff --git a/src/component/card/style/module/_content.scss b/src/component/card/style/module/_content.scss
index 8e106ce2a..770f14e2e 100644
--- a/src/component/card/style/module/_content.scss
+++ b/src/component/card/style/module/_content.scss
@@ -18,8 +18,12 @@
     @include font-weight(bold);
     @include margin-bottom(0);
 
+    a {
+      @include icon(arrow-right-line, sm, after);
+    }
+
     @include target-blank {
-      @include icon-size(sm, after);
+      @include icon(external-link-line, sm, after);
     }
   }
 
diff --git a/src/component/card/style/module/_default.scss b/src/component/card/style/module/_default.scss
index 6dc906923..e72f6953b 100644
--- a/src/component/card/style/module/_default.scss
+++ b/src/component/card/style/module/_default.scss
@@ -11,14 +11,10 @@
   &#{ns(enlarge-link)} {
     #{ns(card)}__title {
       a {
-        @include icon(arrow-right-line, md, after) {
+        @include icon-size(md, after) {
           @include absolute(null, 8v, 8v);
         }
       }
-      
-      a[target=_blank] {
-        @include icon(external-link-line, md, after);
-      }
     }
   }
 
@@ -30,7 +26,7 @@
   }
 
   &--no-icon,
-  &:not(#{ns(enlarge-link)}) {
+  &:not(#{ns(enlarge-link)}):not(#{ns(card--download)}) {
     #{ns(card__title a)} {
       &:not([target="_blank"]) {
         @include after(none);
diff --git a/src/component/card/style/module/_download.scss b/src/component/card/style/module/_download.scss
index c41dca849..eb6ea95da 100644
--- a/src/component/card/style/module/_download.scss
+++ b/src/component/card/style/module/_download.scss
@@ -40,11 +40,11 @@
     }
   }
 
-  &#{ns(enlarge-link)} {
-    #{ns(card__title a)} {
-      @include icon(download-line, null, after);
-    }
+  #{ns(card__title a)} {
+    @include icon(download-line, null, after);
+  }
 
+  &#{ns(enlarge-link)} {
     @include hover-media-query {
       &:hover {
         #{ns(card__header)} {
diff --git a/src/component/card/style/module/_lg.scss b/src/component/card/style/module/_lg.scss
index 0e5b81d93..070a4eb3e 100644
--- a/src/component/card/style/module/_lg.scss
+++ b/src/component/card/style/module/_lg.scss
@@ -12,7 +12,7 @@
   &--lg &__title {
     @include title-style(h4);
 
-    @include target-blank {
+    a {
       @include icon-size(md, after);
     }
   }
diff --git a/src/component/card/style/module/_sm.scss b/src/component/card/style/module/_sm.scss
index 7dc42d9c4..c7767137b 100644
--- a/src/component/card/style/module/_sm.scss
+++ b/src/component/card/style/module/_sm.scss
@@ -16,7 +16,7 @@
   &--sm &__title {
     @include title-style(h6);
 
-    @include target-blank {
+    a {
       @include icon-size(sm, after);
     }
   }
diff --git a/src/component/tile/example/download/sample/sample-assess-file.ejs b/src/component/tile/example/download/sample/sample-assess-file.ejs
index 32c3f27d8..010ff74da 100644
--- a/src/component/tile/example/download/sample/sample-assess-file.ejs
+++ b/src/component/tile/example/download/sample/sample-assess-file.ejs
@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement avec détail renseigné automatiquement', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide')} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
+<%- sample('Tuile de téléchargement avec détail renseigné automatiquement', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide')} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
 
 <div lang="en">
-    <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, '../../sample/tile-default', { tile: {pictogram: 'document-download', download: true, content: { href: '../../img/image.jpg', downloadable: true, title:'Download the french document lorem ipsum', details: ' ', hreflang: 'fr', assess: 'bytes' }} }, true, '../../sample/tile-layout', {col: {md:6}}); %>
+    <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, '../../sample/tile-default', { tile: {pictogram: 'document-download', download: true, content: { href: '../../../img/image.jpg', downloadable: true, title:'Download the french document lorem ipsum', details: ' ', hreflang: 'fr', assess: 'bytes' }} }, true, '../../sample/tile-layout', {col: {md:6}}); %>
 </div>
diff --git a/src/component/tile/example/download/sample/sample-lang.ejs b/src/component/tile/example/download/sample/sample-lang.ejs
index 4f36951cd..1f082129b 100644
--- a/src/component/tile/example/download/sample/sample-lang.ejs
+++ b/src/component/tile/example/download/sample/sample-lang.ejs
@@ -1,3 +1,3 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement avec fichier en langue étrangère ', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../img/image.jpg', lang: 'en', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide')} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
+<%- sample('Tuile de téléchargement avec fichier en langue étrangère ', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../../img/image.jpg', lang: 'en', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide')} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
diff --git a/src/component/tile/example/index.ejs b/src/component/tile/example/index.ejs
index cd7347046..feb413947 100755
--- a/src/component/tile/example/index.ejs
+++ b/src/component/tile/example/index.ejs
@@ -18,6 +18,10 @@
       title: 'Sans lien',
       path: 'sample-no-link'
     },
+    {
+      title: 'Sans lien étendu',
+      path: 'sample-enlarge'
+    },
     {
       title: 'Désactivée',
       path: 'sample-disabled'
diff --git a/src/component/tile/example/sample/sample-enlarge.ejs b/src/component/tile/example/sample/sample-enlarge.ejs
index 28974a3bf..a3a31bdea 100755
--- a/src/component/tile/example/sample/sample-enlarge.ejs
+++ b/src/component/tile/example/sample/sample-enlarge.ejs
@@ -1,3 +1,5 @@
 <% const sample = getSample(include); %>
 
 <%- sample('Tuile verticale sans lien étendu à la tuile', './tile-default', { tile: { pictogram: true, enlarge: false }}, true, './tile-layout', {col: {md:4, lg:3}}); %>
+
+<%- sample('Tuile verticale sans lien étendu à la tuile, nouvelle fenêtre', './tile-default', { tile: { pictogram: true, enlarge: false, content: {blank: true}}}, true, './tile-layout', {col: {md:4, lg:3}}); %>
diff --git a/src/component/tile/style/module/_default.scss b/src/component/tile/style/module/_default.scss
index 7aff8c9b1..526cf87dd 100644
--- a/src/component/tile/style/module/_default.scss
+++ b/src/component/tile/style/module/_default.scss
@@ -4,7 +4,6 @@
 ////
 
 @use 'module/spacing';
-@use 'module/media-query';
 
 #{ns(tile)} {
   @include relative;
@@ -51,6 +50,16 @@
     flex: 1 1 auto;
   }
 
+  &#{ns(enlarge-link)} {
+    #{ns(tile)}__title {
+      a {
+        @include icon-size(md, after) {
+          @include absolute(null, 8v, 9v);
+        }
+      }
+    }
+  }
+
   @include title {
     @include title-style(h6);
     @include margin-bottom(2v);
@@ -66,30 +75,26 @@
     }
 
     a {
+      @include icon(arrow-right-line, sm, after);
+
       @include before {
         background-position: 0 100%;
         background-size: 100% spacing.space(1v);
         background-repeat: no-repeat;
       }
+    }
 
-      @include icon(arrow-right-line, md, after) {
-        @include absolute(null, 6v, 7v);
-
-        @include media-query.respond-from(md) {
-          @include absolute(null, 8v, 9v);
-        }
-      }
-
-      &[target=_blank] {
-        @include icon(external-link-line, md, after);
-      }
+    @include target-blank {
+      @include icon(external-link-line, sm, after);
     }
   }
 
   &--no-icon,
-  &:not(#{ns(enlarge-link)}) {
+  &:not(#{ns(enlarge-link)}):not(#{ns(tile--download)}) {
     #{ns(tile__title a)} {
-      @include after(none);
+      &:not([target="_blank"]) {
+        @include after(none);
+      }
     }
   }
 
diff --git a/src/component/tile/style/module/_sm.scss b/src/component/tile/style/module/_sm.scss
index 465c6e427..206bad633 100644
--- a/src/component/tile/style/module/_sm.scss
+++ b/src/component/tile/style/module/_sm.scss
@@ -14,9 +14,7 @@
       @include margin-bottom(1v);
 
       a {
-        @include icon-size(sm, after) {
-          @include absolute(null, 6v, 7v);
-        }
+        @include icon-size(sm, after);
       }
     }
 
@@ -45,7 +43,15 @@
     }
   }
 
-  &#{ns(enlarge-link)}:not(#{ns(tile--no-icon)}) #{ns(tile__content)} {
-    @include padding-bottom(8v);
+  &#{ns(enlarge-link)}:not(#{ns(tile--no-icon)}) {
+    #{ns(tile__title)} a {
+      @include icon-size(sm, after) {
+        @include absolute(null, 6v, 7v);
+      }
+    }
+
+    #{ns(tile__content)} {
+      @include padding-bottom(8v);
+    }
   }
 }

From eccd73c93eecfc1f8f392c7516d1491d65ff2334 Mon Sep 17 00:00:00 2001
From: Keryan SANIE <keryan.sanie@gmail.com>
Date: Wed, 5 Jul 2023 10:27:56 +0200
Subject: [PATCH 6/8] fix(car): sample size

---
 src/component/tile/example/download/sample/sample-content.ejs | 4 ++--
 .../tile/example/download/sample/sample-vertical.ejs          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/component/tile/example/download/sample/sample-content.ejs b/src/component/tile/example/download/sample/sample-content.ejs
index 3ac94bb92..d88b63460 100644
--- a/src/component/tile/example/download/sample/sample-content.ejs
+++ b/src/component/tile/example/download/sample/sample-content.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement, cas max', '../../sample/tile-default', { tile : { pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
+<%- sample('Tuile de téléchargement, cas max', '../../sample/tile-default', { tile : { pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:8, lg:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
 
-<%- sample('Tuile de téléchargement, contenu minimum', '../../sample/tile-default', { tile : { download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}}); %>
+<%- sample('Tuile de téléchargement, contenu minimum', '../../sample/tile-default', { tile : { download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:8, lg:6}}); %>
diff --git a/src/component/tile/example/download/sample/sample-vertical.ejs b/src/component/tile/example/download/sample/sample-vertical.ejs
index 6f686832a..ab69d6602 100644
--- a/src/component/tile/example/download/sample/sample-vertical.ejs
+++ b/src/component/tile/example/download/sample/sample-vertical.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement vertical à partir du breakpoint md', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'md', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile de téléchargement vertical à partir du breakpoint md', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'md', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:4, lg:3}}); %>
 
-<%- sample('Tuile de téléchargement vertical à partir du breakpoint lg', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'lg', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6, lg: '3'}}); %>
+<%- sample('Tuile de téléchargement vertical à partir du breakpoint lg', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'lg', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6, lg:3}}); %>

From 886a0f04c7515f8f69b415afd84f68584cd55569 Mon Sep 17 00:00:00 2001
From: Keryan SANIE <keryan.sanie@gmail.com>
Date: Wed, 5 Jul 2023 10:37:48 +0200
Subject: [PATCH 7/8] fix(card, tile): sample size

---
 .../card/example/download/sample/sample-content.ejs         | 6 +++---
 .../tile/example/download/sample/sample-vertical.ejs        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/component/card/example/download/sample/sample-content.ejs b/src/component/card/example/download/sample/sample-content.ejs
index 96c541ebe..71fe5738b 100644
--- a/src/component/card/example/download/sample/sample-content.ejs
+++ b/src/component/card/example/download/sample/sample-content.ejs
@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
 
-<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
 
-<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {col: {md:8}}); %>
+<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
diff --git a/src/component/tile/example/download/sample/sample-vertical.ejs b/src/component/tile/example/download/sample/sample-vertical.ejs
index ab69d6602..6f686832a 100644
--- a/src/component/tile/example/download/sample/sample-vertical.ejs
+++ b/src/component/tile/example/download/sample/sample-vertical.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement vertical à partir du breakpoint md', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'md', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:4, lg:3}}); %>
+<%- sample('Tuile de téléchargement vertical à partir du breakpoint md', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'md', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:4}}); %>
 
-<%- sample('Tuile de téléchargement vertical à partir du breakpoint lg', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'lg', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6, lg:3}}); %>
+<%- sample('Tuile de téléchargement vertical à partir du breakpoint lg', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'lg', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6, lg: '3'}}); %>

From bc2e5c8fdefd96dc3a775495e18471261c403fdb Mon Sep 17 00:00:00 2001
From: lab9 <lab9.fr@gmail.com>
Date: Wed, 5 Jul 2023 10:47:30 +0200
Subject: [PATCH 8/8] Apply suggestions from code review

---
 src/component/tile/example/download/sample/sample-content.ejs | 4 ++--
 .../tile/example/download/sample/sample-vertical.ejs          | 2 +-
 src/component/tile/example/sample/sample-horizontal.ejs       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/component/tile/example/download/sample/sample-content.ejs b/src/component/tile/example/download/sample/sample-content.ejs
index d88b63460..49ae7fd1d 100644
--- a/src/component/tile/example/download/sample/sample-content.ejs
+++ b/src/component/tile/example/download/sample/sample-content.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement, cas max', '../../sample/tile-default', { tile : { pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:8, lg:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
+<%- sample('Tuile de téléchargement, cas max', '../../sample/tile-default', { tile : { pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
 
-<%- sample('Tuile de téléchargement, contenu minimum', '../../sample/tile-default', { tile : { download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:8, lg:6}}); %>
+<%- sample('Tuile de téléchargement, contenu minimum', '../../sample/tile-default', { tile : { download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md: 6}}); %>
diff --git a/src/component/tile/example/download/sample/sample-vertical.ejs b/src/component/tile/example/download/sample/sample-vertical.ejs
index 6f686832a..a8c95a1d6 100644
--- a/src/component/tile/example/download/sample/sample-vertical.ejs
+++ b/src/component/tile/example/download/sample/sample-vertical.ejs
@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile de téléchargement vertical à partir du breakpoint md', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'md', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile de téléchargement vertical à partir du breakpoint md', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'md', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md: 4, lg: 3}}); %>
 
 <%- sample('Tuile de téléchargement vertical à partir du breakpoint lg', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, vertical: 'lg', content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md:6, lg: '3'}}); %>
diff --git a/src/component/tile/example/sample/sample-horizontal.ejs b/src/component/tile/example/sample/sample-horizontal.ejs
index 2e2d97317..cbae62e93 100755
--- a/src/component/tile/example/sample/sample-horizontal.ejs
+++ b/src/component/tile/example/sample/sample-horizontal.ejs
@@ -8,6 +8,6 @@
 
 <%- sample('Tuile sm horizontale puis vertical à partir du breakpoint md', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'3', lg:'2'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Tuile horizontale puis vertical à partir du breakpoint lg', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+<%- sample('Tuile horizontale puis vertical à partir du breakpoint lg', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'3'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
 
 <%- sample('Tuile sm horizontale puis vertical à partir du breakpoint lg', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'4', lg:'2'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>