@gouvfr/dsfr 1.4.0 → 1.4.1

package/dist/component/component.css

@@ -1,5 +1,5 @@
 /*!
- * DSFR v1.4.0 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ * DSFR v1.4.1 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
  */
 @charset "UTF-8";
 
@@ -5195,6 +5195,20 @@ a.fr-tag--dismiss.fr-tag--sm::after, button.fr-tag--dismiss.fr-tag--sm::after, i
   margin-bottom: 1.5rem;
 }
 
+.fr-tag[aria-pressed="false"] {
+  color: var(--text-action-high-blue-france);
+  background-color: var(--background-action-low-blue-france);
+  --hover: var(--background-action-low-blue-france-hover);
+  --active: var(--background-action-low-blue-france-active);
+}
+
+.fr-tag.fr-tag--dismiss {
+  color: var(--text-inverted-grey);
+  background-color: var(--background-action-high-blue-france);
+  --hover: var(--background-action-high-blue-france-hover);
+  --active: var(--background-action-high-blue-france-active);
+}
+
 a.fr-tag, button.fr-tag, input[type="button"].fr-tag, input[type="image"].fr-tag, input[type="reset"].fr-tag, input[type="submit"].fr-tag {
   color: var(--text-action-high-blue-france);
   background-color: var(--background-action-low-blue-france);
@@ -5321,13 +5335,6 @@ a.fr-tag--beige-gris-galet, button.fr-tag--beige-gris-galet, input[type="button"
   --active: var(--background-action-low-beige-gris-galet-active);
 }
 
-a.fr-tag[aria-pressed="false"], button.fr-tag[aria-pressed="false"], input[type="button"].fr-tag[aria-pressed="false"], input[type="image"].fr-tag[aria-pressed="false"], input[type="reset"].fr-tag[aria-pressed="false"], input[type="submit"].fr-tag[aria-pressed="false"] {
-  color: var(--text-action-high-blue-france);
-  background-color: var(--background-action-low-blue-france);
-  --hover: var(--background-action-low-blue-france-hover);
-  --active: var(--background-action-low-blue-france-active);
-}
-
 a.fr-tag[aria-pressed="true"]:hover, button.fr-tag[aria-pressed="true"]:hover, input[type="button"].fr-tag[aria-pressed="true"]:hover, input[type="image"].fr-tag[aria-pressed="true"]:hover, input[type="reset"].fr-tag[aria-pressed="true"]:hover, input[type="submit"].fr-tag[aria-pressed="true"]:hover {
   background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.57812rem, var(--background-action-high-blue-france-hover) 0.625rem);
 }
@@ -5341,14 +5348,15 @@ a.fr-tag[aria-pressed="true"]:disabled, button.fr-tag[aria-pressed="true"]:disab
 }
 
 a.fr-tag[aria-pressed="true"].fr-tag--sm, button.fr-tag[aria-pressed="true"].fr-tag--sm, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm {
-  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--hsla) 0.5rem), radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
 }
 
-a.fr-tag.fr-tag--dismiss, button.fr-tag.fr-tag--dismiss, input[type="button"].fr-tag.fr-tag--dismiss, input[type="image"].fr-tag.fr-tag--dismiss, input[type="reset"].fr-tag.fr-tag--dismiss, input[type="submit"].fr-tag.fr-tag--dismiss {
-  color: var(--text-inverted-grey);
-  background-color: var(--background-action-high-blue-france);
-  --hover: var(--background-action-high-blue-france-hover);
-  --active: var(--background-action-high-blue-france-active);
+a.fr-tag[aria-pressed="true"].fr-tag--sm:hover, button.fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm:hover {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-hover) 0.5rem);
+}
+
+a.fr-tag[aria-pressed="true"].fr-tag--sm:active, button.fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm:active {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-active) 0.5rem);
 }
 
 a.fr-tag:disabled, a.fr-tag:not([href]), button.fr-tag:disabled, input[type="button"].fr-tag:disabled, input[type="image"].fr-tag:disabled, input[type="reset"].fr-tag:disabled, input[type="submit"].fr-tag:disabled {
@@ -5359,7 +5367,15 @@ a.fr-tag:disabled, a.fr-tag:not([href]), button.fr-tag:disabled, input[type="but
 }
 
 .fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"] {
-  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--hsla) 0.5rem), radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
+}
+
+.fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"]:hover {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-hover) 0.5rem);
+}
+
+.fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"]:active {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-active) 0.5rem);
 }
 
 /* ¯¯¯¯¯¯¯¯¯ *\
@@ -7236,26 +7252,6 @@ textarea.fr-input {
   display: inline-flex;
   margin-right: 1rem;
   margin-bottom: 1rem;
-  background-color: transparent;
-  --hover: inherit;
-  --active: inherit;
-  color: var(--text-action-high-blue-france);
-}
-
-.fr-follow__social .fr-link .fr-btn {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  font-weight: 500;
-}
-
-.fr-follow__social .fr-link .fr-btn::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: none;
-}
-
-.fr-follow .fr-link--facebook {
   font-size: 1rem;
   line-height: 1.5rem;
   min-height: 2.5rem;
@@ -7268,18 +7264,20 @@ textarea.fr-input {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   font-weight: 500;
+  background-color: transparent;
+  --hover: inherit;
+  --active: inherit;
+  color: var(--text-action-high-blue-france);
 }
 
-.fr-follow .fr-link--facebook::before {
+.fr-follow__social .fr-link::before {
   font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
   margin-left: 0;
   margin-right: 0.5rem;
   font-size: 1.5rem;
 }
 
-.fr-follow .fr-links-group--lg .fr-link--facebook {
+.fr-follow__social .fr-links-group--lg .fr-link {
   font-size: 1.125rem;
   line-height: 1.75rem;
   min-height: 3rem;
@@ -7294,205 +7292,36 @@ textarea.fr-input {
   font-weight: 500;
 }
 
-.fr-follow .fr-links-group--lg .fr-link--facebook::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
+.fr-follow__social .fr-links-group--lg .fr-link::before {
+  font: normal 700 normal 2rem/1 dsfr-icon;
   margin-left: 0;
   margin-right: 0.5rem;
   font-size: 2rem;
 }
 
-.fr-follow .fr-link--twitter {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-link--twitter::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
+.fr-follow .fr-link--facebook::before {
+  content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
 }
 
-.fr-follow .fr-links-group--lg .fr-link--twitter {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--twitter::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
+.fr-follow .fr-link--twitter::before {
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
-}
-
-.fr-follow .fr-link--instagram {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
 }
 
 .fr-follow .fr-link--instagram::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--instagram {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--instagram::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
-}
-
-.fr-follow .fr-link--linkedin {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
 }
 
 .fr-follow .fr-link--linkedin::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--linkedin {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--linkedin::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
-}
-
-.fr-follow .fr-link--youtube {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
 }
 
 .fr-follow .fr-link--youtube::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--youtube {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--youtube::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
 }
 
 .fr-follow .fr-input {
@@ -10537,6 +10366,26 @@ textarea.fr-input {
   .fr-tag:active {
     background-color: #c1c1c1;
   }
+  .fr-tag[aria-pressed="false"] {
+    color: #000091;
+    background-color: #e3e3fd;
+  }
+  .fr-tag[aria-pressed="false"]:hover {
+    background-color: #c1c1fb;
+  }
+  .fr-tag[aria-pressed="false"]:active {
+    background-color: #adadf9;
+  }
+  .fr-tag.fr-tag--dismiss {
+    color: #fff;
+    background-color: #000091;
+  }
+  .fr-tag.fr-tag--dismiss:hover {
+    background-color: #1212ff;
+  }
+  .fr-tag.fr-tag--dismiss:active {
+    background-color: #2323ff;
+  }
   a.fr-tag, button.fr-tag, input[type="button"].fr-tag, input[type="image"].fr-tag, input[type="reset"].fr-tag, input[type="submit"].fr-tag {
     color: #000091;
     background-color: #e3e3fd;
@@ -10717,31 +10566,17 @@ textarea.fr-input {
   a.fr-tag--beige-gris-galet:active, button.fr-tag--beige-gris-galet:active, input[type="button"].fr-tag--beige-gris-galet:active, input[type="image"].fr-tag--beige-gris-galet:active, input[type="reset"].fr-tag--beige-gris-galet:active, input[type="submit"].fr-tag--beige-gris-galet:active {
     background-color: #c6b094;
   }
-  a.fr-tag[aria-pressed="false"], button.fr-tag[aria-pressed="false"], input[type="button"].fr-tag[aria-pressed="false"], input[type="image"].fr-tag[aria-pressed="false"], input[type="reset"].fr-tag[aria-pressed="false"], input[type="submit"].fr-tag[aria-pressed="false"] {
-    color: #000091;
-    background-color: #e3e3fd;
-  }
-  a.fr-tag[aria-pressed="false"]:hover, button.fr-tag[aria-pressed="false"]:hover, input[type="button"].fr-tag[aria-pressed="false"]:hover, input[type="image"].fr-tag[aria-pressed="false"]:hover, input[type="reset"].fr-tag[aria-pressed="false"]:hover, input[type="submit"].fr-tag[aria-pressed="false"]:hover {
-    background-color: #c1c1fb;
-  }
-  a.fr-tag[aria-pressed="false"]:active, button.fr-tag[aria-pressed="false"]:active, input[type="button"].fr-tag[aria-pressed="false"]:active, input[type="image"].fr-tag[aria-pressed="false"]:active, input[type="reset"].fr-tag[aria-pressed="false"]:active, input[type="submit"].fr-tag[aria-pressed="false"]:active {
-    background-color: #adadf9;
-  }
   a.fr-tag[aria-pressed="true"]::after, button.fr-tag[aria-pressed="true"]::after, input[type="button"].fr-tag[aria-pressed="true"]::after, input[type="image"].fr-tag[aria-pressed="true"]::after, input[type="reset"].fr-tag[aria-pressed="true"]::after, input[type="submit"].fr-tag[aria-pressed="true"]::after {
     color: #000091;
   }
   a.fr-tag[aria-pressed="true"].fr-tag--sm, button.fr-tag[aria-pressed="true"].fr-tag--sm, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm {
-    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--hsla) 0.5rem), radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #000091 0.5rem);
+    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #000091 0.5rem);
   }
-  a.fr-tag.fr-tag--dismiss, button.fr-tag.fr-tag--dismiss, input[type="button"].fr-tag.fr-tag--dismiss, input[type="image"].fr-tag.fr-tag--dismiss, input[type="reset"].fr-tag.fr-tag--dismiss, input[type="submit"].fr-tag.fr-tag--dismiss {
-    color: #fff;
-    background-color: #000091;
+  a.fr-tag[aria-pressed="true"].fr-tag--sm:hover, button.fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm:hover {
+    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #1212ff 0.5rem);
   }
-  a.fr-tag.fr-tag--dismiss:hover, button.fr-tag.fr-tag--dismiss:hover, input[type="button"].fr-tag.fr-tag--dismiss:hover, input[type="image"].fr-tag.fr-tag--dismiss:hover, input[type="reset"].fr-tag.fr-tag--dismiss:hover, input[type="submit"].fr-tag.fr-tag--dismiss:hover {
-    background-color: #1212ff;
-  }
-  a.fr-tag.fr-tag--dismiss:active, button.fr-tag.fr-tag--dismiss:active, input[type="button"].fr-tag.fr-tag--dismiss:active, input[type="image"].fr-tag.fr-tag--dismiss:active, input[type="reset"].fr-tag.fr-tag--dismiss:active, input[type="submit"].fr-tag.fr-tag--dismiss:active {
-    background-color: #2323ff;
+  a.fr-tag[aria-pressed="true"].fr-tag--sm:active, button.fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm:active {
+    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #2323ff 0.5rem);
   }
   a.fr-tag:disabled, a.fr-tag:not([href]), button.fr-tag:disabled, input[type="button"].fr-tag:disabled, input[type="image"].fr-tag:disabled, input[type="reset"].fr-tag:disabled, input[type="submit"].fr-tag:disabled {
     color: #929292;
@@ -10754,7 +10589,13 @@ textarea.fr-input {
     background-color: #b2b2b2;
   }
   .fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"] {
-    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--hsla) 0.5rem), radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #000091 0.5rem);
+    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #000091 0.5rem);
+  }
+  .fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"]:hover {
+    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #1212ff 0.5rem);
+  }
+  .fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"]:active {
+    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #2323ff 0.5rem);
   }
   /**
   * reset des marges dans l'alerte