@lab-anssi/ui-kit 1.24.0 → 1.25.1

package/dist/composants/Hero.svelte

@@ -0,0 +1,1073 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-hero",
+    props: {
+      titre: { attribute: "titre", type: "String" },
+      baliseTitre: { attribute: "balise-titre", type: "String" },
+      description: { attribute: "description", type: "String" },
+      actions: { attribute: "actions", type: "Object" },
+      inverse: { attribute: "inverse", type: "Boolean" },
+      urlImage: { attribute: "url-image", type: "String" },
+      sansImage: { attribute: "sans-image", type: "Boolean" },
+    },
+  }}
+/>
+
+<script lang="ts">import DsfrContainer from "../dsfr/DsfrContainer.svelte";
+let {
+  titre,
+  baliseTitre = "h1",
+  description,
+  inverse = false,
+  actions,
+  urlImage,
+  sansImage = false
+} = $props();
+</script>
+
+<section
+  class={[
+    "lab-anssi-hero",
+    { "lab-anssi-hero--inverse": inverse },
+    { "lab-anssi-hero--sans-image": sansImage },
+  ]}
+>
+  <DsfrContainer>
+    <div class="lab-anssi-hero__conteneur">
+      <div class="lab-anssi-hero__principal">
+        <svelte:element this={baliseTitre} class="lab-anssi-hero__titre">
+          {titre}
+        </svelte:element>
+        <p class="lab-anssi-hero__description">{description}</p>
+
+        {#if actions}
+          <div class="lab-anssi-hero__actions">
+            {@render actions()}
+          </div>
+        {/if}
+      </div>
+
+      {#if !sansImage}
+        <div class="lab-anssi-hero__aside">
+          <figure class="lab-anssi-hero__figure">
+            <img src={urlImage} class="lab-anssi-hero__image" alt="" />
+          </figure>
+        </div>
+      {/if}
+    </div>
+  </DsfrContainer>
+</section>
+
+<style>:root {
+  --background-default-grey: var(--grey-1000-50);
+  --background-default-grey-hover: var(--grey-1000-50-hover);
+  --background-default-grey-active: var(--grey-1000-50-active);
+  --background-alt-grey: var(--grey-975-75);
+  --background-alt-grey-hover: var(--grey-975-75-hover);
+  --background-alt-grey-active: var(--grey-975-75-active);
+  --background-alt-blue-france: var(--blue-france-975-75);
+  --background-alt-blue-france-hover: var(--blue-france-975-75-hover);
+  --background-alt-blue-france-active: var(--blue-france-975-75-active);
+  --background-alt-red-marianne: var(--red-marianne-975-75);
+  --background-alt-red-marianne-hover: var(--red-marianne-975-75-hover);
+  --background-alt-red-marianne-active: var(--red-marianne-975-75-active);
+  --background-alt-green-tilleul-verveine: var(--green-tilleul-verveine-975-75);
+  --background-alt-green-tilleul-verveine-hover: var(--green-tilleul-verveine-975-75-hover);
+  --background-alt-green-tilleul-verveine-active: var(--green-tilleul-verveine-975-75-active);
+  --background-alt-green-bourgeon: var(--green-bourgeon-975-75);
+  --background-alt-green-bourgeon-hover: var(--green-bourgeon-975-75-hover);
+  --background-alt-green-bourgeon-active: var(--green-bourgeon-975-75-active);
+  --background-alt-green-emeraude: var(--green-emeraude-975-75);
+  --background-alt-green-emeraude-hover: var(--green-emeraude-975-75-hover);
+  --background-alt-green-emeraude-active: var(--green-emeraude-975-75-active);
+  --background-alt-green-menthe: var(--green-menthe-975-75);
+  --background-alt-green-menthe-hover: var(--green-menthe-975-75-hover);
+  --background-alt-green-menthe-active: var(--green-menthe-975-75-active);
+  --background-alt-green-archipel: var(--green-archipel-975-75);
+  --background-alt-green-archipel-hover: var(--green-archipel-975-75-hover);
+  --background-alt-green-archipel-active: var(--green-archipel-975-75-active);
+  --background-alt-blue-ecume: var(--blue-ecume-975-75);
+  --background-alt-blue-ecume-hover: var(--blue-ecume-975-75-hover);
+  --background-alt-blue-ecume-active: var(--blue-ecume-975-75-active);
+  --background-alt-blue-cumulus: var(--blue-cumulus-975-75);
+  --background-alt-blue-cumulus-hover: var(--blue-cumulus-975-75-hover);
+  --background-alt-blue-cumulus-active: var(--blue-cumulus-975-75-active);
+  --background-alt-purple-glycine: var(--purple-glycine-975-75);
+  --background-alt-purple-glycine-hover: var(--purple-glycine-975-75-hover);
+  --background-alt-purple-glycine-active: var(--purple-glycine-975-75-active);
+  --background-alt-pink-macaron: var(--pink-macaron-975-75);
+  --background-alt-pink-macaron-hover: var(--pink-macaron-975-75-hover);
+  --background-alt-pink-macaron-active: var(--pink-macaron-975-75-active);
+  --background-alt-pink-tuile: var(--pink-tuile-975-75);
+  --background-alt-pink-tuile-hover: var(--pink-tuile-975-75-hover);
+  --background-alt-pink-tuile-active: var(--pink-tuile-975-75-active);
+  --background-alt-yellow-tournesol: var(--yellow-tournesol-975-75);
+  --background-alt-yellow-tournesol-hover: var(--yellow-tournesol-975-75-hover);
+  --background-alt-yellow-tournesol-active: var(--yellow-tournesol-975-75-active);
+  --background-alt-yellow-moutarde: var(--yellow-moutarde-975-75);
+  --background-alt-yellow-moutarde-hover: var(--yellow-moutarde-975-75-hover);
+  --background-alt-yellow-moutarde-active: var(--yellow-moutarde-975-75-active);
+  --background-alt-orange-terre-battue: var(--orange-terre-battue-975-75);
+  --background-alt-orange-terre-battue-hover: var(--orange-terre-battue-975-75-hover);
+  --background-alt-orange-terre-battue-active: var(--orange-terre-battue-975-75-active);
+  --background-alt-brown-cafe-creme: var(--brown-cafe-creme-975-75);
+  --background-alt-brown-cafe-creme-hover: var(--brown-cafe-creme-975-75-hover);
+  --background-alt-brown-cafe-creme-active: var(--brown-cafe-creme-975-75-active);
+  --background-alt-brown-caramel: var(--brown-caramel-975-75);
+  --background-alt-brown-caramel-hover: var(--brown-caramel-975-75-hover);
+  --background-alt-brown-caramel-active: var(--brown-caramel-975-75-active);
+  --background-alt-brown-opera: var(--brown-opera-975-75);
+  --background-alt-brown-opera-hover: var(--brown-opera-975-75-hover);
+  --background-alt-brown-opera-active: var(--brown-opera-975-75-active);
+  --background-alt-beige-gris-galet: var(--beige-gris-galet-975-75);
+  --background-alt-beige-gris-galet-hover: var(--beige-gris-galet-975-75-hover);
+  --background-alt-beige-gris-galet-active: var(--beige-gris-galet-975-75-active);
+  --background-contrast-grey: var(--grey-950-100);
+  --background-contrast-grey-hover: var(--grey-950-100-hover);
+  --background-contrast-grey-active: var(--grey-950-100-active);
+  --background-contrast-blue-france: var(--blue-france-950-100);
+  --background-contrast-blue-france-hover: var(--blue-france-950-100-hover);
+  --background-contrast-blue-france-active: var(--blue-france-950-100-active);
+  --background-contrast-red-marianne: var(--red-marianne-950-100);
+  --background-contrast-red-marianne-hover: var(--red-marianne-950-100-hover);
+  --background-contrast-red-marianne-active: var(--red-marianne-950-100-active);
+  --background-contrast-green-tilleul-verveine: var(--green-tilleul-verveine-950-100);
+  --background-contrast-green-tilleul-verveine-hover: var(--green-tilleul-verveine-950-100-hover);
+  --background-contrast-green-tilleul-verveine-active: var(--green-tilleul-verveine-950-100-active);
+  --background-contrast-green-bourgeon: var(--green-bourgeon-950-100);
+  --background-contrast-green-bourgeon-hover: var(--green-bourgeon-950-100-hover);
+  --background-contrast-green-bourgeon-active: var(--green-bourgeon-950-100-active);
+  --background-contrast-green-emeraude: var(--green-emeraude-950-100);
+  --background-contrast-green-emeraude-hover: var(--green-emeraude-950-100-hover);
+  --background-contrast-green-emeraude-active: var(--green-emeraude-950-100-active);
+  --background-contrast-green-menthe: var(--green-menthe-950-100);
+  --background-contrast-green-menthe-hover: var(--green-menthe-950-100-hover);
+  --background-contrast-green-menthe-active: var(--green-menthe-950-100-active);
+  --background-contrast-green-archipel: var(--green-archipel-950-100);
+  --background-contrast-green-archipel-hover: var(--green-archipel-950-100-hover);
+  --background-contrast-green-archipel-active: var(--green-archipel-950-100-active);
+  --background-contrast-blue-ecume: var(--blue-ecume-950-100);
+  --background-contrast-blue-ecume-hover: var(--blue-ecume-950-100-hover);
+  --background-contrast-blue-ecume-active: var(--blue-ecume-950-100-active);
+  --background-contrast-blue-cumulus: var(--blue-cumulus-950-100);
+  --background-contrast-blue-cumulus-hover: var(--blue-cumulus-950-100-hover);
+  --background-contrast-blue-cumulus-active: var(--blue-cumulus-950-100-active);
+  --background-contrast-purple-glycine: var(--purple-glycine-950-100);
+  --background-contrast-purple-glycine-hover: var(--purple-glycine-950-100-hover);
+  --background-contrast-purple-glycine-active: var(--purple-glycine-950-100-active);
+  --background-contrast-pink-macaron: var(--pink-macaron-950-100);
+  --background-contrast-pink-macaron-hover: var(--pink-macaron-950-100-hover);
+  --background-contrast-pink-macaron-active: var(--pink-macaron-950-100-active);
+  --background-contrast-pink-tuile: var(--pink-tuile-950-100);
+  --background-contrast-pink-tuile-hover: var(--pink-tuile-950-100-hover);
+  --background-contrast-pink-tuile-active: var(--pink-tuile-950-100-active);
+  --background-contrast-yellow-tournesol: var(--yellow-tournesol-950-100);
+  --background-contrast-yellow-tournesol-hover: var(--yellow-tournesol-950-100-hover);
+  --background-contrast-yellow-tournesol-active: var(--yellow-tournesol-950-100-active);
+  --background-contrast-yellow-moutarde: var(--yellow-moutarde-950-100);
+  --background-contrast-yellow-moutarde-hover: var(--yellow-moutarde-950-100-hover);
+  --background-contrast-yellow-moutarde-active: var(--yellow-moutarde-950-100-active);
+  --background-contrast-orange-terre-battue: var(--orange-terre-battue-950-100);
+  --background-contrast-orange-terre-battue-hover: var(--orange-terre-battue-950-100-hover);
+  --background-contrast-orange-terre-battue-active: var(--orange-terre-battue-950-100-active);
+  --background-contrast-brown-cafe-creme: var(--brown-cafe-creme-950-100);
+  --background-contrast-brown-cafe-creme-hover: var(--brown-cafe-creme-950-100-hover);
+  --background-contrast-brown-cafe-creme-active: var(--brown-cafe-creme-950-100-active);
+  --background-contrast-brown-caramel: var(--brown-caramel-950-100);
+  --background-contrast-brown-caramel-hover: var(--brown-caramel-950-100-hover);
+  --background-contrast-brown-caramel-active: var(--brown-caramel-950-100-active);
+  --background-contrast-brown-opera: var(--brown-opera-950-100);
+  --background-contrast-brown-opera-hover: var(--brown-opera-950-100-hover);
+  --background-contrast-brown-opera-active: var(--brown-opera-950-100-active);
+  --background-contrast-beige-gris-galet: var(--beige-gris-galet-950-100);
+  --background-contrast-beige-gris-galet-hover: var(--beige-gris-galet-950-100-hover);
+  --background-contrast-beige-gris-galet-active: var(--beige-gris-galet-950-100-active);
+  --background-contrast-info: var(--info-950-100);
+  --background-contrast-info-hover: var(--info-950-100-hover);
+  --background-contrast-info-active: var(--info-950-100-active);
+  --background-contrast-success: var(--success-950-100);
+  --background-contrast-success-hover: var(--success-950-100-hover);
+  --background-contrast-success-active: var(--success-950-100-active);
+  --background-contrast-warning: var(--warning-950-100);
+  --background-contrast-warning-hover: var(--warning-950-100-hover);
+  --background-contrast-warning-active: var(--warning-950-100-active);
+  --background-contrast-error: var(--error-950-100);
+  --background-contrast-error-hover: var(--error-950-100-hover);
+  --background-contrast-error-active: var(--error-950-100-active);
+  --background-flat-grey: var(--grey-200-850);
+  --background-flat-blue-france: var(--blue-france-sun-113-625);
+  --background-flat-red-marianne: var(--red-marianne-425-625);
+  --background-flat-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817);
+  --background-flat-green-bourgeon: var(--green-bourgeon-sun-425-moon-759);
+  --background-flat-green-emeraude: var(--green-emeraude-sun-425-moon-753);
+  --background-flat-green-menthe: var(--green-menthe-sun-373-moon-652);
+  --background-flat-green-archipel: var(--green-archipel-sun-391-moon-716);
+  --background-flat-blue-ecume: var(--blue-ecume-sun-247-moon-675);
+  --background-flat-blue-cumulus: var(--blue-cumulus-sun-368-moon-732);
+  --background-flat-purple-glycine: var(--purple-glycine-sun-319-moon-630);
+  --background-flat-pink-macaron: var(--pink-macaron-sun-406-moon-833);
+  --background-flat-pink-tuile: var(--pink-tuile-sun-425-moon-750);
+  --background-flat-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922);
+  --background-flat-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860);
+  --background-flat-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672);
+  --background-flat-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885);
+  --background-flat-brown-caramel: var(--brown-caramel-sun-425-moon-901);
+  --background-flat-brown-opera: var(--brown-opera-sun-395-moon-820);
+  --background-flat-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821);
+  --background-flat-info: var(--info-425-625);
+  --background-flat-success: var(--success-425-625);
+  --background-flat-warning: var(--warning-425-625);
+  --background-flat-error: var(--error-425-625);
+  --background-action-high-grey: var(--grey-200-850);
+  --background-action-high-grey-hover: var(--grey-200-850-hover);
+  --background-action-high-grey-active: var(--grey-200-850-active);
+  --background-action-high-blue-france: var(--blue-france-sun-113-625);
+  --background-action-high-blue-france-hover: var(--blue-france-sun-113-625-hover);
+  --background-action-high-blue-france-active: var(--blue-france-sun-113-625-active);
+  --background-action-high-red-marianne: var(--red-marianne-425-625);
+  --background-action-high-red-marianne-hover: var(--red-marianne-425-625-hover);
+  --background-action-high-red-marianne-active: var(--red-marianne-425-625-active);
+  --background-action-high-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817);
+  --background-action-high-green-tilleul-verveine-hover: var(--green-tilleul-verveine-sun-418-moon-817-hover);
+  --background-action-high-green-tilleul-verveine-active: var(--green-tilleul-verveine-sun-418-moon-817-active);
+  --background-action-high-green-bourgeon: var(--green-bourgeon-sun-425-moon-759);
+  --background-action-high-green-bourgeon-hover: var(--green-bourgeon-sun-425-moon-759-hover);
+  --background-action-high-green-bourgeon-active: var(--green-bourgeon-sun-425-moon-759-active);
+  --background-action-high-green-emeraude: var(--green-emeraude-sun-425-moon-753);
+  --background-action-high-green-emeraude-hover: var(--green-emeraude-sun-425-moon-753-hover);
+  --background-action-high-green-emeraude-active: var(--green-emeraude-sun-425-moon-753-active);
+  --background-action-high-green-menthe: var(--green-menthe-sun-373-moon-652);
+  --background-action-high-green-menthe-hover: var(--green-menthe-sun-373-moon-652-hover);
+  --background-action-high-green-menthe-active: var(--green-menthe-sun-373-moon-652-active);
+  --background-action-high-green-archipel: var(--green-archipel-sun-391-moon-716);
+  --background-action-high-green-archipel-hover: var(--green-archipel-sun-391-moon-716-hover);
+  --background-action-high-green-archipel-active: var(--green-archipel-sun-391-moon-716-active);
+  --background-action-high-blue-ecume: var(--blue-ecume-sun-247-moon-675);
+  --background-action-high-blue-ecume-hover: var(--blue-ecume-sun-247-moon-675-hover);
+  --background-action-high-blue-ecume-active: var(--blue-ecume-sun-247-moon-675-active);
+  --background-action-high-blue-cumulus: var(--blue-cumulus-sun-368-moon-732);
+  --background-action-high-blue-cumulus-hover: var(--blue-cumulus-sun-368-moon-732-hover);
+  --background-action-high-blue-cumulus-active: var(--blue-cumulus-sun-368-moon-732-active);
+  --background-action-high-purple-glycine: var(--purple-glycine-sun-319-moon-630);
+  --background-action-high-purple-glycine-hover: var(--purple-glycine-sun-319-moon-630-hover);
+  --background-action-high-purple-glycine-active: var(--purple-glycine-sun-319-moon-630-active);
+  --background-action-high-pink-macaron: var(--pink-macaron-sun-406-moon-833);
+  --background-action-high-pink-macaron-hover: var(--pink-macaron-sun-406-moon-833-hover);
+  --background-action-high-pink-macaron-active: var(--pink-macaron-sun-406-moon-833-active);
+  --background-action-high-pink-tuile: var(--pink-tuile-sun-425-moon-750);
+  --background-action-high-pink-tuile-hover: var(--pink-tuile-sun-425-moon-750-hover);
+  --background-action-high-pink-tuile-active: var(--pink-tuile-sun-425-moon-750-active);
+  --background-action-high-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922);
+  --background-action-high-yellow-tournesol-hover: var(--yellow-tournesol-sun-407-moon-922-hover);
+  --background-action-high-yellow-tournesol-active: var(--yellow-tournesol-sun-407-moon-922-active);
+  --background-action-high-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860);
+  --background-action-high-yellow-moutarde-hover: var(--yellow-moutarde-sun-348-moon-860-hover);
+  --background-action-high-yellow-moutarde-active: var(--yellow-moutarde-sun-348-moon-860-active);
+  --background-action-high-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672);
+  --background-action-high-orange-terre-battue-hover: var(--orange-terre-battue-sun-370-moon-672-hover);
+  --background-action-high-orange-terre-battue-active: var(--orange-terre-battue-sun-370-moon-672-active);
+  --background-action-high-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885);
+  --background-action-high-brown-cafe-creme-hover: var(--brown-cafe-creme-sun-383-moon-885-hover);
+  --background-action-high-brown-cafe-creme-active: var(--brown-cafe-creme-sun-383-moon-885-active);
+  --background-action-high-brown-caramel: var(--brown-caramel-sun-425-moon-901);
+  --background-action-high-brown-caramel-hover: var(--brown-caramel-sun-425-moon-901-hover);
+  --background-action-high-brown-caramel-active: var(--brown-caramel-sun-425-moon-901-active);
+  --background-action-high-brown-opera: var(--brown-opera-sun-395-moon-820);
+  --background-action-high-brown-opera-hover: var(--brown-opera-sun-395-moon-820-hover);
+  --background-action-high-brown-opera-active: var(--brown-opera-sun-395-moon-820-active);
+  --background-action-high-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821);
+  --background-action-high-beige-gris-galet-hover: var(--beige-gris-galet-sun-407-moon-821-hover);
+  --background-action-high-beige-gris-galet-active: var(--beige-gris-galet-sun-407-moon-821-active);
+  --background-action-high-info: var(--info-425-625);
+  --background-action-high-info-hover: var(--info-425-625-hover);
+  --background-action-high-info-active: var(--info-425-625-active);
+  --background-action-high-success: var(--success-425-625);
+  --background-action-high-success-hover: var(--success-425-625-hover);
+  --background-action-high-success-active: var(--success-425-625-active);
+  --background-action-high-warning: var(--warning-425-625);
+  --background-action-high-warning-hover: var(--warning-425-625-hover);
+  --background-action-high-warning-active: var(--warning-425-625-active);
+  --background-action-high-error: var(--error-425-625);
+  --background-action-high-error-hover: var(--error-425-625-hover);
+  --background-action-high-error-active: var(--error-425-625-active);
+  --background-action-low-blue-france: var(--blue-france-925-125);
+  --background-action-low-blue-france-hover: var(--blue-france-925-125-hover);
+  --background-action-low-blue-france-active: var(--blue-france-925-125-active);
+  --background-action-low-red-marianne: var(--red-marianne-925-125);
+  --background-action-low-red-marianne-hover: var(--red-marianne-925-125-hover);
+  --background-action-low-red-marianne-active: var(--red-marianne-925-125-active);
+  --background-action-low-green-tilleul-verveine: var(--green-tilleul-verveine-925-125);
+  --background-action-low-green-tilleul-verveine-hover: var(--green-tilleul-verveine-925-125-hover);
+  --background-action-low-green-tilleul-verveine-active: var(--green-tilleul-verveine-925-125-active);
+  --background-action-low-green-bourgeon: var(--green-bourgeon-925-125);
+  --background-action-low-green-bourgeon-hover: var(--green-bourgeon-925-125-hover);
+  --background-action-low-green-bourgeon-active: var(--green-bourgeon-925-125-active);
+  --background-action-low-green-emeraude: var(--green-emeraude-925-125);
+  --background-action-low-green-emeraude-hover: var(--green-emeraude-925-125-hover);
+  --background-action-low-green-emeraude-active: var(--green-emeraude-925-125-active);
+  --background-action-low-green-menthe: var(--green-menthe-925-125);
+  --background-action-low-green-menthe-hover: var(--green-menthe-925-125-hover);
+  --background-action-low-green-menthe-active: var(--green-menthe-925-125-active);
+  --background-action-low-green-archipel: var(--green-archipel-925-125);
+  --background-action-low-green-archipel-hover: var(--green-archipel-925-125-hover);
+  --background-action-low-green-archipel-active: var(--green-archipel-925-125-active);
+  --background-action-low-blue-ecume: var(--blue-ecume-925-125);
+  --background-action-low-blue-ecume-hover: var(--blue-ecume-925-125-hover);
+  --background-action-low-blue-ecume-active: var(--blue-ecume-925-125-active);
+  --background-action-low-blue-cumulus: var(--blue-cumulus-925-125);
+  --background-action-low-blue-cumulus-hover: var(--blue-cumulus-925-125-hover);
+  --background-action-low-blue-cumulus-active: var(--blue-cumulus-925-125-active);
+  --background-action-low-purple-glycine: var(--purple-glycine-925-125);
+  --background-action-low-purple-glycine-hover: var(--purple-glycine-925-125-hover);
+  --background-action-low-purple-glycine-active: var(--purple-glycine-925-125-active);
+  --background-action-low-pink-macaron: var(--pink-macaron-925-125);
+  --background-action-low-pink-macaron-hover: var(--pink-macaron-925-125-hover);
+  --background-action-low-pink-macaron-active: var(--pink-macaron-925-125-active);
+  --background-action-low-pink-tuile: var(--pink-tuile-925-125);
+  --background-action-low-pink-tuile-hover: var(--pink-tuile-925-125-hover);
+  --background-action-low-pink-tuile-active: var(--pink-tuile-925-125-active);
+  --background-action-low-yellow-tournesol: var(--yellow-tournesol-925-125);
+  --background-action-low-yellow-tournesol-hover: var(--yellow-tournesol-925-125-hover);
+  --background-action-low-yellow-tournesol-active: var(--yellow-tournesol-925-125-active);
+  --background-action-low-yellow-moutarde: var(--yellow-moutarde-925-125);
+  --background-action-low-yellow-moutarde-hover: var(--yellow-moutarde-925-125-hover);
+  --background-action-low-yellow-moutarde-active: var(--yellow-moutarde-925-125-active);
+  --background-action-low-orange-terre-battue: var(--orange-terre-battue-925-125);
+  --background-action-low-orange-terre-battue-hover: var(--orange-terre-battue-925-125-hover);
+  --background-action-low-orange-terre-battue-active: var(--orange-terre-battue-925-125-active);
+  --background-action-low-brown-cafe-creme: var(--brown-cafe-creme-925-125);
+  --background-action-low-brown-cafe-creme-hover: var(--brown-cafe-creme-925-125-hover);
+  --background-action-low-brown-cafe-creme-active: var(--brown-cafe-creme-925-125-active);
+  --background-action-low-brown-caramel: var(--brown-caramel-925-125);
+  --background-action-low-brown-caramel-hover: var(--brown-caramel-925-125-hover);
+  --background-action-low-brown-caramel-active: var(--brown-caramel-925-125-active);
+  --background-action-low-brown-opera: var(--brown-opera-925-125);
+  --background-action-low-brown-opera-hover: var(--brown-opera-925-125-hover);
+  --background-action-low-brown-opera-active: var(--brown-opera-925-125-active);
+  --background-action-low-beige-gris-galet: var(--beige-gris-galet-925-125);
+  --background-action-low-beige-gris-galet-hover: var(--beige-gris-galet-925-125-hover);
+  --background-action-low-beige-gris-galet-active: var(--beige-gris-galet-925-125-active);
+  --background-active-blue-france: var(--blue-france-sun-113-625);
+  --background-active-blue-france-hover: var(--blue-france-sun-113-625-hover);
+  --background-active-blue-france-active: var(--blue-france-sun-113-625-active);
+  --background-active-red-marianne: var(--red-marianne-425-625);
+  --background-active-red-marianne-hover: var(--red-marianne-425-625-hover);
+  --background-active-red-marianne-active: var(--red-marianne-425-625-active);
+  --background-open-blue-france: var(--blue-france-925-125);
+  --background-open-blue-france-hover: var(--blue-france-925-125-hover);
+  --background-open-blue-france-active: var(--blue-france-925-125-active);
+  --background-open-red-marianne: var(--red-marianne-925-125);
+  --background-open-red-marianne-hover: var(--red-marianne-925-125-hover);
+  --background-open-red-marianne-active: var(--red-marianne-925-125-active);
+  --background-disabled-grey: var(--grey-925-125);
+  --background-raised-grey: var(--grey-1000-75);
+  --background-raised-grey-hover: var(--grey-1000-75-hover);
+  --background-raised-grey-active: var(--grey-1000-75-active);
+  --background-overlap-grey: var(--grey-1000-100);
+  --background-overlap-grey-hover: var(--grey-1000-100-hover);
+  --background-overlap-grey-active: var(--grey-1000-100-active);
+  --background-lifted-grey: var(--grey-1000-75);
+  --background-lifted-grey-hover: var(--grey-1000-75-hover);
+  --background-lifted-grey-active: var(--grey-1000-75-active);
+  --background-alt-raised-grey: var(--grey-975-100);
+  --background-alt-raised-grey-hover: var(--grey-975-100-hover);
+  --background-alt-raised-grey-active: var(--grey-975-100-active);
+  --background-alt-overlap-grey: var(--grey-975-125);
+  --background-alt-overlap-grey-hover: var(--grey-975-125-hover);
+  --background-alt-overlap-grey-active: var(--grey-975-125-active);
+  --background-contrast-raised-grey: var(--grey-950-125);
+  --background-contrast-raised-grey-hover: var(--grey-950-125-hover);
+  --background-contrast-raised-grey-active: var(--grey-950-125-active);
+  --background-contrast-overlap-grey: var(--grey-950-150);
+  --background-contrast-overlap-grey-hover: var(--grey-950-150-hover);
+  --background-contrast-overlap-grey-active: var(--grey-950-150-active);
+  --text-default-grey: var(--grey-200-850);
+  --text-default-info: var(--info-425-625);
+  --text-default-success: var(--success-425-625);
+  --text-default-warning: var(--warning-425-625);
+  --text-default-error: var(--error-425-625);
+  --text-action-high-grey: var(--grey-50-1000);
+  --text-action-high-blue-france: var(--blue-france-sun-113-625);
+  --text-action-high-red-marianne: var(--red-marianne-425-625);
+  --text-action-high-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817);
+  --text-action-high-green-bourgeon: var(--green-bourgeon-sun-425-moon-759);
+  --text-action-high-green-emeraude: var(--green-emeraude-sun-425-moon-753);
+  --text-action-high-green-menthe: var(--green-menthe-sun-373-moon-652);
+  --text-action-high-green-archipel: var(--green-archipel-sun-391-moon-716);
+  --text-action-high-blue-ecume: var(--blue-ecume-sun-247-moon-675);
+  --text-action-high-blue-cumulus: var(--blue-cumulus-sun-368-moon-732);
+  --text-action-high-purple-glycine: var(--purple-glycine-sun-319-moon-630);
+  --text-action-high-pink-macaron: var(--pink-macaron-sun-406-moon-833);
+  --text-action-high-pink-tuile: var(--pink-tuile-sun-425-moon-750);
+  --text-action-high-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922);
+  --text-action-high-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860);
+  --text-action-high-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672);
+  --text-action-high-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885);
+  --text-action-high-brown-caramel: var(--brown-caramel-sun-425-moon-901);
+  --text-action-high-brown-opera: var(--brown-opera-sun-395-moon-820);
+  --text-action-high-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821);
+  --text-title-grey: var(--grey-50-1000);
+  --text-title-blue-france: var(--blue-france-sun-113-625);
+  --text-title-red-marianne: var(--red-marianne-425-625);
+  --text-label-grey: var(--grey-50-1000);
+  --text-label-blue-france: var(--blue-france-sun-113-625);
+  --text-label-red-marianne: var(--red-marianne-425-625);
+  --text-label-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817);
+  --text-label-green-bourgeon: var(--green-bourgeon-sun-425-moon-759);
+  --text-label-green-emeraude: var(--green-emeraude-sun-425-moon-753);
+  --text-label-green-menthe: var(--green-menthe-sun-373-moon-652);
+  --text-label-green-archipel: var(--green-archipel-sun-391-moon-716);
+  --text-label-blue-ecume: var(--blue-ecume-sun-247-moon-675);
+  --text-label-blue-cumulus: var(--blue-cumulus-sun-368-moon-732);
+  --text-label-purple-glycine: var(--purple-glycine-sun-319-moon-630);
+  --text-label-pink-macaron: var(--pink-macaron-sun-406-moon-833);
+  --text-label-pink-tuile: var(--pink-tuile-sun-425-moon-750);
+  --text-label-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922);
+  --text-label-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860);
+  --text-label-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672);
+  --text-label-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885);
+  --text-label-brown-caramel: var(--brown-caramel-sun-425-moon-901);
+  --text-label-brown-opera: var(--brown-opera-sun-395-moon-820);
+  --text-label-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821);
+  --text-active-grey: var(--grey-50-1000);
+  --text-active-blue-france: var(--blue-france-sun-113-625);
+  --text-active-red-marianne: var(--red-marianne-425-625);
+  --text-mention-grey: var(--grey-425-625);
+  --text-inverted-grey: var(--grey-1000-50);
+  --text-inverted-blue-france: var(--blue-france-975-sun-113);
+  --text-inverted-red-marianne: var(--red-marianne-975-75);
+  --text-inverted-info: var(--info-975-75);
+  --text-inverted-success: var(--success-975-75);
+  --text-inverted-warning: var(--warning-975-75);
+  --text-inverted-error: var(--error-975-75);
+  --text-inverted-green-tilleul-verveine: var(--green-tilleul-verveine-975-75);
+  --text-inverted-green-bourgeon: var(--green-bourgeon-975-75);
+  --text-inverted-green-emeraude: var(--green-emeraude-975-75);
+  --text-inverted-green-menthe: var(--green-menthe-975-75);
+  --text-inverted-green-archipel: var(--green-archipel-975-75);
+  --text-inverted-blue-ecume: var(--blue-ecume-975-75);
+  --text-inverted-blue-cumulus: var(--blue-cumulus-975-75);
+  --text-inverted-purple-glycine: var(--purple-glycine-975-75);
+  --text-inverted-pink-macaron: var(--pink-macaron-975-75);
+  --text-inverted-pink-tuile: var(--pink-tuile-975-75);
+  --text-inverted-yellow-tournesol: var(--yellow-tournesol-975-75);
+  --text-inverted-yellow-moutarde: var(--yellow-moutarde-975-75);
+  --text-inverted-orange-terre-battue: var(--orange-terre-battue-975-75);
+  --text-inverted-brown-cafe-creme: var(--brown-cafe-creme-975-75);
+  --text-inverted-brown-caramel: var(--brown-caramel-975-75);
+  --text-inverted-brown-opera: var(--brown-opera-975-75);
+  --text-inverted-beige-gris-galet: var(--beige-gris-galet-975-75);
+  --text-disabled-grey: var(--grey-625-425);
+  --text-black-white-grey: var(--grey-0-1000);
+  --border-default-grey: var(--grey-900-175);
+  --border-default-blue-france: var(--blue-france-main-525);
+  --border-default-red-marianne: var(--red-marianne-main-472);
+  --border-default-green-tilleul-verveine: var(--green-tilleul-verveine-main-707);
+  --border-default-green-bourgeon: var(--green-bourgeon-main-640);
+  --border-default-green-emeraude: var(--green-emeraude-main-632);
+  --border-default-green-menthe: var(--green-menthe-main-548);
+  --border-default-green-archipel: var(--green-archipel-main-557);
+  --border-default-blue-ecume: var(--blue-ecume-main-400);
+  --border-default-blue-cumulus: var(--blue-cumulus-main-526);
+  --border-default-purple-glycine: var(--purple-glycine-main-494);
+  --border-default-pink-macaron: var(--pink-macaron-main-689);
+  --border-default-pink-tuile: var(--pink-tuile-main-556);
+  --border-default-yellow-tournesol: var(--yellow-tournesol-main-731);
+  --border-default-yellow-moutarde: var(--yellow-moutarde-main-679);
+  --border-default-orange-terre-battue: var(--orange-terre-battue-main-645);
+  --border-default-brown-cafe-creme: var(--brown-cafe-creme-main-782);
+  --border-default-brown-caramel: var(--brown-caramel-main-648);
+  --border-default-brown-opera: var(--brown-opera-main-680);
+  --border-default-beige-gris-galet: var(--beige-gris-galet-main-702);
+  --border-contrast-grey: var(--grey-625-425);
+  --border-active-blue-france: var(--blue-france-sun-113-625);
+  --border-active-red-marianne: var(--red-marianne-425-625);
+  --border-action-high-grey: var(--grey-50-1000);
+  --border-action-high-blue-france: var(--blue-france-sun-113-625);
+  --border-action-high-red-marianne: var(--red-marianne-425-625);
+  --border-action-high-info: var(--info-425-625);
+  --border-action-high-success: var(--success-425-625);
+  --border-action-high-warning: var(--warning-425-625);
+  --border-action-high-error: var(--error-425-625);
+  --border-action-low-blue-france: var(--blue-france-850-200);
+  --border-action-low-red-marianne: var(--red-marianne-850-200);
+  --border-action-low-green-tilleul-verveine: var(--green-tilleul-verveine-850-200);
+  --border-action-low-green-bourgeon: var(--green-bourgeon-850-200);
+  --border-action-low-green-emeraude: var(--green-emeraude-850-200);
+  --border-action-low-green-menthe: var(--green-menthe-850-200);
+  --border-action-low-green-archipel: var(--green-archipel-850-200);
+  --border-action-low-blue-ecume: var(--blue-ecume-850-200);
+  --border-action-low-blue-cumulus: var(--blue-cumulus-850-200);
+  --border-action-low-purple-glycine: var(--purple-glycine-850-200);
+  --border-action-low-pink-macaron: var(--pink-macaron-850-200);
+  --border-action-low-pink-tuile: var(--pink-tuile-850-200);
+  --border-action-low-yellow-tournesol: var(--yellow-tournesol-850-200);
+  --border-action-low-yellow-moutarde: var(--yellow-moutarde-850-200);
+  --border-action-low-orange-terre-battue: var(--orange-terre-battue-850-200);
+  --border-action-low-brown-cafe-creme: var(--brown-cafe-creme-850-200);
+  --border-action-low-brown-caramel: var(--brown-caramel-850-200);
+  --border-action-low-brown-opera: var(--brown-opera-850-200);
+  --border-action-low-beige-gris-galet: var(--beige-gris-galet-850-200);
+  --border-open-blue-france: var(--blue-france-925-125);
+  --border-open-red-marianne: var(--red-marianne-925-125);
+  --border-plain-grey: var(--grey-200-850);
+  --border-plain-blue-france: var(--blue-france-sun-113-625);
+  --border-plain-red-marianne: var(--red-marianne-425-625);
+  --border-plain-info: var(--info-425-625);
+  --border-plain-success: var(--success-425-625);
+  --border-plain-warning: var(--warning-425-625);
+  --border-plain-error: var(--error-425-625);
+  --border-plain-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817);
+  --border-plain-green-bourgeon: var(--green-bourgeon-sun-425-moon-759);
+  --border-plain-green-emeraude: var(--green-emeraude-sun-425-moon-753);
+  --border-plain-green-menthe: var(--green-menthe-sun-373-moon-652);
+  --border-plain-green-archipel: var(--green-archipel-sun-391-moon-716);
+  --border-plain-blue-ecume: var(--blue-ecume-sun-247-moon-675);
+  --border-plain-blue-cumulus: var(--blue-cumulus-sun-368-moon-732);
+  --border-plain-purple-glycine: var(--purple-glycine-sun-319-moon-630);
+  --border-plain-pink-macaron: var(--pink-macaron-sun-406-moon-833);
+  --border-plain-pink-tuile: var(--pink-tuile-sun-425-moon-750);
+  --border-plain-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922);
+  --border-plain-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860);
+  --border-plain-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672);
+  --border-plain-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885);
+  --border-plain-brown-caramel: var(--brown-caramel-sun-425-moon-901);
+  --border-plain-brown-opera: var(--brown-opera-sun-395-moon-820);
+  --border-plain-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821);
+  --border-disabled-grey: var(--grey-925-125);
+  --artwork-major-blue-france: var(--blue-france-sun-113-625);
+  --artwork-major-blue-france-hover: var(--blue-france-sun-113-625-hover);
+  --artwork-major-blue-france-active: var(--blue-france-sun-113-625-active);
+  --artwork-major-red-marianne: var(--red-marianne-425-625);
+  --artwork-major-red-marianne-hover: var(--red-marianne-425-625-hover);
+  --artwork-major-red-marianne-active: var(--red-marianne-425-625-active);
+  --artwork-major-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817);
+  --artwork-major-green-tilleul-verveine-hover: var(--green-tilleul-verveine-sun-418-moon-817-hover);
+  --artwork-major-green-tilleul-verveine-active: var(--green-tilleul-verveine-sun-418-moon-817-active);
+  --artwork-major-green-bourgeon: var(--green-bourgeon-sun-425-moon-759);
+  --artwork-major-green-bourgeon-hover: var(--green-bourgeon-sun-425-moon-759-hover);
+  --artwork-major-green-bourgeon-active: var(--green-bourgeon-sun-425-moon-759-active);
+  --artwork-major-green-emeraude: var(--green-emeraude-sun-425-moon-753);
+  --artwork-major-green-emeraude-hover: var(--green-emeraude-sun-425-moon-753-hover);
+  --artwork-major-green-emeraude-active: var(--green-emeraude-sun-425-moon-753-active);
+  --artwork-major-green-menthe: var(--green-menthe-sun-373-moon-652);
+  --artwork-major-green-menthe-hover: var(--green-menthe-sun-373-moon-652-hover);
+  --artwork-major-green-menthe-active: var(--green-menthe-sun-373-moon-652-active);
+  --artwork-major-green-archipel: var(--green-archipel-sun-391-moon-716);
+  --artwork-major-green-archipel-hover: var(--green-archipel-sun-391-moon-716-hover);
+  --artwork-major-green-archipel-active: var(--green-archipel-sun-391-moon-716-active);
+  --artwork-major-blue-ecume: var(--blue-ecume-sun-247-moon-675);
+  --artwork-major-blue-ecume-hover: var(--blue-ecume-sun-247-moon-675-hover);
+  --artwork-major-blue-ecume-active: var(--blue-ecume-sun-247-moon-675-active);
+  --artwork-major-blue-cumulus: var(--blue-cumulus-sun-368-moon-732);
+  --artwork-major-blue-cumulus-hover: var(--blue-cumulus-sun-368-moon-732-hover);
+  --artwork-major-blue-cumulus-active: var(--blue-cumulus-sun-368-moon-732-active);
+  --artwork-major-purple-glycine: var(--purple-glycine-sun-319-moon-630);
+  --artwork-major-purple-glycine-hover: var(--purple-glycine-sun-319-moon-630-hover);
+  --artwork-major-purple-glycine-active: var(--purple-glycine-sun-319-moon-630-active);
+  --artwork-major-pink-macaron: var(--pink-macaron-sun-406-moon-833);
+  --artwork-major-pink-macaron-hover: var(--pink-macaron-sun-406-moon-833-hover);
+  --artwork-major-pink-macaron-active: var(--pink-macaron-sun-406-moon-833-active);
+  --artwork-major-pink-tuile: var(--pink-tuile-sun-425-moon-750);
+  --artwork-major-pink-tuile-hover: var(--pink-tuile-sun-425-moon-750-hover);
+  --artwork-major-pink-tuile-active: var(--pink-tuile-sun-425-moon-750-active);
+  --artwork-major-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922);
+  --artwork-major-yellow-tournesol-hover: var(--yellow-tournesol-sun-407-moon-922-hover);
+  --artwork-major-yellow-tournesol-active: var(--yellow-tournesol-sun-407-moon-922-active);
+  --artwork-major-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860);
+  --artwork-major-yellow-moutarde-hover: var(--yellow-moutarde-sun-348-moon-860-hover);
+  --artwork-major-yellow-moutarde-active: var(--yellow-moutarde-sun-348-moon-860-active);
+  --artwork-major-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672);
+  --artwork-major-orange-terre-battue-hover: var(--orange-terre-battue-sun-370-moon-672-hover);
+  --artwork-major-orange-terre-battue-active: var(--orange-terre-battue-sun-370-moon-672-active);
+  --artwork-major-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885);
+  --artwork-major-brown-cafe-creme-hover: var(--brown-cafe-creme-sun-383-moon-885-hover);
+  --artwork-major-brown-cafe-creme-active: var(--brown-cafe-creme-sun-383-moon-885-active);
+  --artwork-major-brown-caramel: var(--brown-caramel-sun-425-moon-901);
+  --artwork-major-brown-caramel-hover: var(--brown-caramel-sun-425-moon-901-hover);
+  --artwork-major-brown-caramel-active: var(--brown-caramel-sun-425-moon-901-active);
+  --artwork-major-brown-opera: var(--brown-opera-sun-395-moon-820);
+  --artwork-major-brown-opera-hover: var(--brown-opera-sun-395-moon-820-hover);
+  --artwork-major-brown-opera-active: var(--brown-opera-sun-395-moon-820-active);
+  --artwork-major-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821);
+  --artwork-major-beige-gris-galet-hover: var(--beige-gris-galet-sun-407-moon-821-hover);
+  --artwork-major-beige-gris-galet-active: var(--beige-gris-galet-sun-407-moon-821-active);
+  --artwork-minor-blue-france: var(--blue-france-main-525);
+  --artwork-minor-red-marianne: var(--red-marianne-main-472);
+  --artwork-minor-green-tilleul-verveine: var(--green-tilleul-verveine-main-707);
+  --artwork-minor-green-bourgeon: var(--green-bourgeon-main-640);
+  --artwork-minor-green-emeraude: var(--green-emeraude-main-632);
+  --artwork-minor-green-menthe: var(--green-menthe-main-548);
+  --artwork-minor-green-archipel: var(--green-archipel-main-557);
+  --artwork-minor-blue-ecume: var(--blue-ecume-main-400);
+  --artwork-minor-blue-cumulus: var(--blue-cumulus-main-526);
+  --artwork-minor-purple-glycine: var(--purple-glycine-main-494);
+  --artwork-minor-pink-macaron: var(--pink-macaron-main-689);
+  --artwork-minor-pink-tuile: var(--pink-tuile-main-556);
+  --artwork-minor-yellow-tournesol: var(--yellow-tournesol-main-731);
+  --artwork-minor-yellow-moutarde: var(--yellow-moutarde-main-679);
+  --artwork-minor-orange-terre-battue: var(--orange-terre-battue-main-645);
+  --artwork-minor-brown-cafe-creme: var(--brown-cafe-creme-main-782);
+  --artwork-minor-brown-caramel: var(--brown-caramel-main-648);
+  --artwork-minor-brown-opera: var(--brown-opera-main-680);
+  --artwork-minor-beige-gris-galet: var(--beige-gris-galet-main-702);
+  --artwork-decorative-grey: var(--grey-950-100);
+  --artwork-decorative-blue-france: var(--blue-france-950-100);
+  --artwork-decorative-red-marianne: var(--red-marianne-950-100);
+  --artwork-decorative-green-tilleul-verveine: var(--green-tilleul-verveine-950-100);
+  --artwork-decorative-green-bourgeon: var(--green-bourgeon-950-100);
+  --artwork-decorative-green-emeraude: var(--green-emeraude-950-100);
+  --artwork-decorative-green-menthe: var(--green-menthe-950-100);
+  --artwork-decorative-green-archipel: var(--green-archipel-950-100);
+  --artwork-decorative-blue-ecume: var(--blue-ecume-950-100);
+  --artwork-decorative-blue-cumulus: var(--blue-cumulus-950-100);
+  --artwork-decorative-purple-glycine: var(--purple-glycine-950-100);
+  --artwork-decorative-pink-macaron: var(--pink-macaron-950-100);
+  --artwork-decorative-pink-tuile: var(--pink-tuile-950-100);
+  --artwork-decorative-yellow-tournesol: var(--yellow-tournesol-950-100);
+  --artwork-decorative-yellow-moutarde: var(--yellow-moutarde-950-100);
+  --artwork-decorative-orange-terre-battue: var(--orange-terre-battue-950-100);
+  --artwork-decorative-brown-cafe-creme: var(--brown-cafe-creme-950-100);
+  --artwork-decorative-brown-caramel: var(--brown-caramel-950-100);
+  --artwork-decorative-brown-opera: var(--brown-opera-950-100);
+  --artwork-decorative-beige-gris-galet: var(--beige-gris-galet-950-100);
+  --artwork-background-grey: var(--grey-975-75);
+  --artwork-background-blue-france: var(--blue-france-975-75);
+  --artwork-background-red-marianne: var(--red-marianne-975-75);
+  --artwork-background-green-tilleul-verveine: var(--green-tilleul-verveine-975-75);
+  --artwork-background-green-bourgeon: var(--green-bourgeon-975-75);
+  --artwork-background-green-emeraude: var(--green-emeraude-975-75);
+  --artwork-background-green-menthe: var(--green-menthe-975-75);
+  --artwork-background-green-archipel: var(--green-archipel-975-75);
+  --artwork-background-blue-ecume: var(--blue-ecume-975-75);
+  --artwork-background-blue-cumulus: var(--blue-cumulus-975-75);
+  --artwork-background-purple-glycine: var(--purple-glycine-975-75);
+  --artwork-background-pink-macaron: var(--pink-macaron-975-75);
+  --artwork-background-pink-tuile: var(--pink-tuile-975-75);
+  --artwork-background-yellow-tournesol: var(--yellow-tournesol-975-75);
+  --artwork-background-yellow-moutarde: var(--yellow-moutarde-975-75);
+  --artwork-background-orange-terre-battue: var(--orange-terre-battue-975-75);
+  --artwork-background-brown-cafe-creme: var(--brown-cafe-creme-975-75);
+  --artwork-background-brown-caramel: var(--brown-caramel-975-75);
+  --artwork-background-brown-opera: var(--brown-opera-975-75);
+  --artwork-background-beige-gris-galet: var(--beige-gris-galet-975-75);
+  --artwork-motif-grey: var(--grey-925-125);
+  --artwork-motif-blue-france: var(--blue-france-925-125);
+  --artwork-motif-red-marianne: var(--red-marianne-925-125);
+  --artwork-motif-green-tilleul-verveine: var(--green-tilleul-verveine-925-125);
+  --artwork-motif-green-bourgeon: var(--green-bourgeon-925-125);
+  --artwork-motif-green-emeraude: var(--green-emeraude-925-125);
+  --artwork-motif-green-menthe: var(--green-menthe-925-125);
+  --artwork-motif-green-archipel: var(--green-archipel-925-125);
+  --artwork-motif-blue-ecume: var(--blue-ecume-925-125);
+  --artwork-motif-blue-cumulus: var(--blue-cumulus-925-125);
+  --artwork-motif-purple-glycine: var(--purple-glycine-925-125);
+  --artwork-motif-pink-macaron: var(--pink-macaron-925-125);
+  --artwork-motif-pink-tuile: var(--pink-tuile-925-125);
+  --artwork-motif-yellow-tournesol: var(--yellow-tournesol-925-125);
+  --artwork-motif-yellow-moutarde: var(--yellow-moutarde-925-125);
+  --artwork-motif-orange-terre-battue: var(--orange-terre-battue-925-125);
+  --artwork-motif-brown-cafe-creme: var(--brown-cafe-creme-925-125);
+  --artwork-motif-brown-caramel: var(--brown-caramel-925-125);
+  --artwork-motif-brown-opera: var(--brown-opera-925-125);
+  --artwork-motif-beige-gris-galet: var(--beige-gris-galet-925-125);
+  --grey-1000-50: #fff;
+  --grey-1000-50-hover: #f6f6f6;
+  --grey-1000-50-active: #ededed;
+  --grey-975-75: #f6f6f6;
+  --grey-975-75-hover: #dfdfdf;
+  --grey-975-75-active: #cfcfcf;
+  --grey-950-100: #eee;
+  --grey-950-100-hover: #d2d2d2;
+  --grey-950-100-active: #c1c1c1;
+  --grey-200-850: #3a3a3a;
+  --grey-200-850-hover: #616161;
+  --grey-200-850-active: #777;
+  --grey-925-125: #e5e5e5;
+  --grey-1000-75: #fff;
+  --grey-1000-75-hover: #f6f6f6;
+  --grey-1000-75-active: #ededed;
+  --grey-1000-100: #fff;
+  --grey-1000-100-hover: #f6f6f6;
+  --grey-1000-100-active: #ededed;
+  --grey-975-100: #f6f6f6;
+  --grey-975-100-hover: #dfdfdf;
+  --grey-975-100-active: #cfcfcf;
+  --grey-975-125: #f6f6f6;
+  --grey-975-125-hover: #dfdfdf;
+  --grey-975-125-active: #cfcfcf;
+  --grey-950-125: #eee;
+  --grey-950-125-hover: #d2d2d2;
+  --grey-950-125-active: #c1c1c1;
+  --grey-950-150: #eee;
+  --grey-950-150-hover: #d2d2d2;
+  --grey-950-150-active: #c1c1c1;
+  --grey-50-1000: #161616;
+  --grey-425-625: #666;
+  --grey-625-425: #929292;
+  --grey-0-1000: #000;
+  --grey-900-175: #ddd;
+  --blue-france-975-75: #f5f5fe;
+  --blue-france-975-75-hover: #dcdcfc;
+  --blue-france-975-75-active: #cbcbfa;
+  --blue-france-950-100: #ececfe;
+  --blue-france-950-100-hover: #cecefc;
+  --blue-france-950-100-active: #bbbbfc;
+  --blue-france-sun-113-625: #000091;
+  --blue-france-sun-113-625-hover: #1212ff;
+  --blue-france-sun-113-625-active: #2323ff;
+  --blue-france-925-125: #e3e3fd;
+  --blue-france-925-125-hover: #c1c1fb;
+  --blue-france-925-125-active: #adadf9;
+  --blue-france-975-sun-113: #f5f5fe;
+  --blue-france-main-525: #6a6af4;
+  --blue-france-850-200: #cacafb;
+  --red-marianne-975-75: #fef4f4;
+  --red-marianne-975-75-hover: #fcd7d7;
+  --red-marianne-975-75-active: #fac4c4;
+  --red-marianne-950-100: #fee9e9;
+  --red-marianne-950-100-hover: #fdc5c5;
+  --red-marianne-950-100-active: #fcafaf;
+  --red-marianne-425-625: #c9191e;
+  --red-marianne-425-625-hover: #f93f42;
+  --red-marianne-425-625-active: #f95a5c;
+  --red-marianne-925-125: #fddede;
+  --red-marianne-925-125-hover: #fbb6b6;
+  --red-marianne-925-125-active: #fa9e9e;
+  --red-marianne-main-472: #e1000f;
+  --red-marianne-850-200: #fcbfbf;
+  --info-950-100: #e8edff;
+  --info-950-100-hover: #c2d1ff;
+  --info-950-100-active: #a9bfff;
+  --info-425-625: #0063cb;
+  --info-425-625-hover: #3b87ff;
+  --info-425-625-active: #6798ff;
+  --info-975-75: #f4f6ff;
+  --success-950-100: #b8fec9;
+  --success-950-100-hover: #46fd89;
+  --success-950-100-active: #34eb7b;
+  --success-425-625: #18753c;
+  --success-425-625-hover: #27a959;
+  --success-425-625-active: #2fc368;
+  --success-975-75: #dffee6;
+  --warning-950-100: #ffe9e6;
+  --warning-950-100-hover: #ffc6bd;
+  --warning-950-100-active: #ffb0a2;
+  --warning-425-625: #b34000;
+  --warning-425-625-hover: #ff6218;
+  --warning-425-625-active: #ff7a55;
+  --warning-975-75: #fff4f3;
+  --error-950-100: #ffe9e9;
+  --error-950-100-hover: #ffc5c5;
+  --error-950-100-active: #ffafaf;
+  --error-425-625: #ce0500;
+  --error-425-625-hover: #ff2725;
+  --error-425-625-active: #ff4140;
+  --error-975-75: #fff4f4;
+  --green-tilleul-verveine-975-75: #fef7da;
+  --green-tilleul-verveine-975-75-hover: #fce552;
+  --green-tilleul-verveine-975-75-active: #ebd54c;
+  --green-tilleul-verveine-950-100: #fceeac;
+  --green-tilleul-verveine-950-100-hover: #e8d45c;
+  --green-tilleul-verveine-950-100-active: #d4c254;
+  --green-tilleul-verveine-sun-418-moon-817: #66673d;
+  --green-tilleul-verveine-sun-418-moon-817-hover: #929359;
+  --green-tilleul-verveine-sun-418-moon-817-active: #a7a967;
+  --green-tilleul-verveine-925-125: #fbe769;
+  --green-tilleul-verveine-925-125-hover: #d7c655;
+  --green-tilleul-verveine-925-125-active: #c2b24c;
+  --green-tilleul-verveine-main-707: #b7a73f;
+  --green-tilleul-verveine-850-200: #e2cf58;
+  --green-bourgeon-975-75: #e6feda;
+  --green-bourgeon-975-75-hover: #a7fc62;
+  --green-bourgeon-975-75-active: #98ed4d;
+  --green-bourgeon-950-100: #c9fcac;
+  --green-bourgeon-950-100-hover: #9ae95d;
+  --green-bourgeon-950-100-active: #8dd555;
+  --green-bourgeon-sun-425-moon-759: #447049;
+  --green-bourgeon-sun-425-moon-759-hover: #639f6a;
+  --green-bourgeon-sun-425-moon-759-active: #72b77a;
+  --green-bourgeon-925-125: #a9fb68;
+  --green-bourgeon-925-125-hover: #8ed654;
+  --green-bourgeon-925-125-active: #7fc04b;
+  --green-bourgeon-main-640: #68a532;
+  --green-bourgeon-850-200: #95e257;
+  --green-emeraude-975-75: #e3fdeb;
+  --green-emeraude-975-75-hover: #94f9b9;
+  --green-emeraude-975-75-active: #6df1a3;
+  --green-emeraude-950-100: #c3fad5;
+  --green-emeraude-950-100-hover: #77eda5;
+  --green-emeraude-950-100-active: #6dd897;
+  --green-emeraude-sun-425-moon-753: #297254;
+  --green-emeraude-sun-425-moon-753-hover: #3ea47a;
+  --green-emeraude-sun-425-moon-753-active: #49bc8d;
+  --green-emeraude-925-125: #9ef9be;
+  --green-emeraude-925-125-hover: #69df97;
+  --green-emeraude-925-125-active: #5ec988;
+  --green-emeraude-main-632: #00a95f;
+  --green-emeraude-850-200: #6fe49d;
+  --green-menthe-975-75: #dffdf7;
+  --green-menthe-975-75-hover: #84f9e7;
+  --green-menthe-975-75-active: #70ebd8;
+  --green-menthe-950-100: #bafaee;
+  --green-menthe-950-100-hover: #79e7d5;
+  --green-menthe-950-100-active: #6fd3c3;
+  --green-menthe-sun-373-moon-652: #37635f;
+  --green-menthe-sun-373-moon-652-hover: #53918c;
+  --green-menthe-sun-373-moon-652-active: #62a9a2;
+  --green-menthe-925-125: #8bf8e7;
+  --green-menthe-925-125-hover: #6ed5c5;
+  --green-menthe-925-125-active: #62bfb1;
+  --green-menthe-main-548: #009081;
+  --green-menthe-850-200: #73e0cf;
+  --green-archipel-975-75: #e5fbfd;
+  --green-archipel-975-75-hover: #99f2f8;
+  --green-archipel-975-75-active: #73e9f0;
+  --green-archipel-950-100: #c7f6fc;
+  --green-archipel-950-100-hover: #64ecf8;
+  --green-archipel-950-100-active: #5bd8e3;
+  --green-archipel-sun-391-moon-716: #006a6f;
+  --green-archipel-sun-391-moon-716-hover: #009fa7;
+  --green-archipel-sun-391-moon-716-active: #00bbc3;
+  --green-archipel-925-125: #a6f2fa;
+  --green-archipel-925-125-hover: #62dbe5;
+  --green-archipel-925-125-active: #58c5cf;
+  --green-archipel-main-557: #009099;
+  --green-archipel-850-200: #60e0eb;
+  --blue-ecume-975-75: #f4f6fe;
+  --blue-ecume-975-75-hover: #d7dffb;
+  --blue-ecume-975-75-active: #c3cffa;
+  --blue-ecume-950-100: #e9edfe;
+  --blue-ecume-950-100-hover: #c5d0fc;
+  --blue-ecume-950-100-active: #adbffc;
+  --blue-ecume-sun-247-moon-675: #2f4077;
+  --blue-ecume-sun-247-moon-675-hover: #4e68bb;
+  --blue-ecume-sun-247-moon-675-active: #667dcf;
+  --blue-ecume-925-125: #dee5fd;
+  --blue-ecume-925-125-hover: #b4c5fb;
+  --blue-ecume-925-125-active: #99b3f9;
+  --blue-ecume-main-400: #465f9d;
+  --blue-ecume-850-200: #bfccfb;
+  --blue-cumulus-975-75: #f3f6fe;
+  --blue-cumulus-975-75-hover: #d3dffc;
+  --blue-cumulus-975-75-active: #bed0fa;
+  --blue-cumulus-950-100: #e6eefe;
+  --blue-cumulus-950-100-hover: #bcd3fc;
+  --blue-cumulus-950-100-active: #9fc3fc;
+  --blue-cumulus-sun-368-moon-732: #3558a2;
+  --blue-cumulus-sun-368-moon-732-hover: #5982e0;
+  --blue-cumulus-sun-368-moon-732-active: #7996e6;
+  --blue-cumulus-925-125: #dae6fd;
+  --blue-cumulus-925-125-hover: #a9c8fb;
+  --blue-cumulus-925-125-active: #8ab8f9;
+  --blue-cumulus-main-526: #417dc4;
+  --blue-cumulus-850-200: #b6cffb;
+  --purple-glycine-975-75: #fef3fd;
+  --purple-glycine-975-75-hover: #fcd4f8;
+  --purple-glycine-975-75-active: #fabff5;
+  --purple-glycine-950-100: #fee7fc;
+  --purple-glycine-950-100-hover: #fdc0f8;
+  --purple-glycine-950-100-active: #fca8f6;
+  --purple-glycine-sun-319-moon-630: #6e445a;
+  --purple-glycine-sun-319-moon-630-hover: #a66989;
+  --purple-glycine-sun-319-moon-630-active: #bb7f9e;
+  --purple-glycine-925-125: #fddbfa;
+  --purple-glycine-925-125-hover: #fbaff5;
+  --purple-glycine-925-125-active: #fa96f2;
+  --purple-glycine-main-494: #a558a0;
+  --purple-glycine-850-200: #fbb8f6;
+  --pink-macaron-975-75: #fef4f2;
+  --pink-macaron-975-75-hover: #fcd8d0;
+  --pink-macaron-975-75-active: #fac5b8;
+  --pink-macaron-950-100: #fee9e6;
+  --pink-macaron-950-100-hover: #fdc6bd;
+  --pink-macaron-950-100-active: #fcb0a2;
+  --pink-macaron-sun-406-moon-833: #8d533e;
+  --pink-macaron-sun-406-moon-833-hover: #ca795c;
+  --pink-macaron-sun-406-moon-833-active: #e08e73;
+  --pink-macaron-925-125: #fddfda;
+  --pink-macaron-925-125-hover: #fbb8ab;
+  --pink-macaron-925-125-active: #faa18d;
+  --pink-macaron-main-689: #e18b76;
+  --pink-macaron-850-200: #fcc0b4;
+  --pink-tuile-975-75: #fef4f3;
+  --pink-tuile-975-75-hover: #fcd7d3;
+  --pink-tuile-975-75-active: #fac4be;
+  --pink-tuile-950-100: #fee9e7;
+  --pink-tuile-950-100-hover: #fdc6c0;
+  --pink-tuile-950-100-active: #fcb0a7;
+  --pink-tuile-sun-425-moon-750: #a94645;
+  --pink-tuile-sun-425-moon-750-hover: #d5706f;
+  --pink-tuile-sun-425-moon-750-active: #da8a89;
+  --pink-tuile-925-125: #fddfdb;
+  --pink-tuile-925-125-hover: #fbb8ad;
+  --pink-tuile-925-125-active: #faa191;
+  --pink-tuile-main-556: #ce614a;
+  --pink-tuile-850-200: #fcbfb7;
+  --yellow-tournesol-975-75: #fef6e3;
+  --yellow-tournesol-975-75-hover: #fce086;
+  --yellow-tournesol-975-75-active: #f5d24b;
+  --yellow-tournesol-950-100: #feecc2;
+  --yellow-tournesol-950-100-hover: #fbd335;
+  --yellow-tournesol-950-100-active: #e6c130;
+  --yellow-tournesol-sun-407-moon-922: #716043;
+  --yellow-tournesol-sun-407-moon-922-hover: #a28a62;
+  --yellow-tournesol-sun-407-moon-922-active: #ba9f72;
+  --yellow-tournesol-925-125: #fde39c;
+  --yellow-tournesol-925-125-hover: #e9c53b;
+  --yellow-tournesol-925-125-active: #d3b235;
+  --yellow-tournesol-main-731: #c8aa39;
+  --yellow-tournesol-850-200: #efcb3a;
+  --yellow-moutarde-975-75: #fef5e8;
+  --yellow-moutarde-975-75-hover: #fcdca3;
+  --yellow-moutarde-975-75-active: #fbcd64;
+  --yellow-moutarde-950-100: #feebd0;
+  --yellow-moutarde-950-100-hover: #fdcd6d;
+  --yellow-moutarde-950-100-active: #f4be30;
+  --yellow-moutarde-sun-348-moon-860: #695240;
+  --yellow-moutarde-sun-348-moon-860-hover: #9b7b61;
+  --yellow-moutarde-sun-348-moon-860-active: #b58f72;
+  --yellow-moutarde-925-125: #fde2b5;
+  --yellow-moutarde-925-125-hover: #f6c43c;
+  --yellow-moutarde-925-125-active: #dfb135;
+  --yellow-moutarde-main-679: #c3992a;
+  --yellow-moutarde-850-200: #fcc63a;
+  --orange-terre-battue-975-75: #fef4f2;
+  --orange-terre-battue-975-75-hover: #fcd8d0;
+  --orange-terre-battue-975-75-active: #fac5b8;
+  --orange-terre-battue-950-100: #fee9e5;
+  --orange-terre-battue-950-100-hover: #fdc6ba;
+  --orange-terre-battue-950-100-active: #fcb09e;
+  --orange-terre-battue-sun-370-moon-672: #755348;
+  --orange-terre-battue-sun-370-moon-672-hover: #ab7b6b;
+  --orange-terre-battue-sun-370-moon-672-active: #c68f7d;
+  --orange-terre-battue-925-125: #fddfd8;
+  --orange-terre-battue-925-125-hover: #fbb8a5;
+  --orange-terre-battue-925-125-active: #faa184;
+  --orange-terre-battue-main-645: #e4794a;
+  --orange-terre-battue-850-200: #fcc0b0;
+  --brown-cafe-creme-975-75: #fbf6ed;
+  --brown-cafe-creme-975-75-hover: #f2deb6;
+  --brown-cafe-creme-975-75-active: #eacf91;
+  --brown-cafe-creme-950-100: #f7ecdb;
+  --brown-cafe-creme-950-100-hover: #edce94;
+  --brown-cafe-creme-950-100-active: #dabd84;
+  --brown-cafe-creme-sun-383-moon-885: #685c48;
+  --brown-cafe-creme-sun-383-moon-885-hover: #97866a;
+  --brown-cafe-creme-sun-383-moon-885-active: #ae9b7b;
+  --brown-cafe-creme-925-125: #f4e3c7;
+  --brown-cafe-creme-925-125-hover: #e1c386;
+  --brown-cafe-creme-925-125-active: #ccb078;
+  --brown-cafe-creme-main-782: #d1b781;
+  --brown-cafe-creme-850-200: #e7ca8e;
+  --brown-caramel-975-75: #fbf5f2;
+  --brown-caramel-975-75-hover: #f1dbcf;
+  --brown-caramel-975-75-active: #ecc9b5;
+  --brown-caramel-950-100: #f7ebe5;
+  --brown-caramel-950-100-hover: #eccbb9;
+  --brown-caramel-950-100-active: #e6b79a;
+  --brown-caramel-sun-425-moon-901: #845d48;
+  --brown-caramel-sun-425-moon-901-hover: #bb8568;
+  --brown-caramel-sun-425-moon-901-active: #d69978;
+  --brown-caramel-925-125: #f3e2d9;
+  --brown-caramel-925-125-hover: #e7bea6;
+  --brown-caramel-925-125-active: #e1a982;
+  --brown-caramel-main-648: #c08c65;
+  --brown-caramel-850-200: #eac7b2;
+  --brown-opera-975-75: #fbf5f2;
+  --brown-opera-975-75-hover: #f1dbcf;
+  --brown-opera-975-75-active: #ecc9b5;
+  --brown-opera-950-100: #f7ece4;
+  --brown-opera-950-100-hover: #eccdb3;
+  --brown-opera-950-100-active: #e6ba90;
+  --brown-opera-sun-395-moon-820: #745b47;
+  --brown-opera-sun-395-moon-820-hover: #a78468;
+  --brown-opera-sun-395-moon-820-active: #c09979;
+  --brown-opera-925-125: #f3e2d7;
+  --brown-opera-925-125-hover: #e7bfa0;
+  --brown-opera-925-125-active: #deaa7e;
+  --brown-opera-main-680: #bd987a;
+  --brown-opera-850-200: #eac7ad;
+  --beige-gris-galet-975-75: #f9f6f2;
+  --beige-gris-galet-975-75-hover: #eadecd;
+  --beige-gris-galet-975-75-active: #e1ceb1;
+  --beige-gris-galet-950-100: #f3ede5;
+  --beige-gris-galet-950-100-hover: #e1d0b5;
+  --beige-gris-galet-950-100-active: #d1bea2;
+  --beige-gris-galet-sun-407-moon-821: #6a6156;
+  --beige-gris-galet-sun-407-moon-821-hover: #988b7c;
+  --beige-gris-galet-sun-407-moon-821-active: #afa08f;
+  --beige-gris-galet-925-125: #eee4d9;
+  --beige-gris-galet-925-125-hover: #dbc3a4;
+  --beige-gris-galet-925-125-active: #c6b094;
+  --beige-gris-galet-main-702: #aea397;
+  --beige-gris-galet-850-200: #e0cab0;
+}
+
+.lab-anssi-hero {
+  --background-color: var(--artwork-major-blue-france);
+  --text-color-titre: var(--text-inverted-grey);
+  --text-color-description: var(--text-inverted-grey);
+  background-color: var(--background-color);
+}
+.lab-anssi-hero__conteneur {
+  padding-block: 48px;
+}
+@media (min-width: 48em) {
+  .lab-anssi-hero__conteneur {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+}
+@media (max-width: 47.98em) {
+  .lab-anssi-hero__principal {
+    margin-block-end: 32px;
+  }
+}
+.lab-anssi-hero__titre {
+  color: var(--text-color-titre);
+  font-weight: 700;
+  font-size: 48px;
+  line-height: 56px;
+  margin-block: 0 8px;
+}
+.lab-anssi-hero__description {
+  color: var(--text-color-description);
+  font-size: 20px;
+  line-height: 32px;
+  margin-block: 0;
+}
+.lab-anssi-hero__description:not(:last-child) {
+  margin-block-end: 32px;
+}
+.lab-anssi-hero__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+@media (min-width: 48em) {
+  .lab-anssi-hero__actions {
+    flex-direction: row;
+  }
+}
+.lab-anssi-hero__figure {
+  margin: 0;
+  max-width: 588px;
+}
+.lab-anssi-hero__image {
+  max-width: 100%;
+}
+.lab-anssi-hero--inverse {
+  --background-color: var(--background-contrast-blue-france);
+  --text-color-titre: var(--text-title-blue-france);
+  --text-color-description: var(--text-default-grey);
+}
+.lab-anssi-hero--sans-image .lab-anssi-hero__conteneur {
+  justify-content: center;
+  padding-block: 72px;
+  text-align: center;
+}
+.lab-anssi-hero--sans-image .lab-anssi-hero__titre {
+  margin-block-end: 16px;
+}</style>