@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/suite-cyber/SuiteCyber.svelte

@@ -0,0 +1,296 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-bouton-suite-cyber-navigation",
+    props: {
+      sourceUtm: { attribute: "source-utm", type: "String" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { srcAsset } from "../../assets/assets.js";
+import { slide } from "svelte/transition";
+import { withIconsStyleSheet } from "../../utilitaires";
+import DsfrButton from "../../dsfr/DsfrButton.svelte";
+import DsfrLink from "../../dsfr/DsfrLink.svelte";
+import AccueilSuiteCyber from "./AccueilSuiteCyber.svelte";
+import LiensSuiteCyber from "./LiensSuiteCyber.svelte";
+const gauffre = srcAsset("/icones/bouton-gauffre.svg");
+const logoCERTFR = srcAsset("/icones/CERT-FR.svg");
+const logoMSS = srcAsset("/icones/MSS.svg");
+const logoMAC = srcAsset("/icones/MAC.svg");
+let { sourceUtm } = $props();
+let estOuvert = $state(false);
+$effect(() => {
+	$host()?.toggleAttribute("data-open", estOuvert);
+});
+</script>
+
+<div class="suite-cyber">
+  <div class="navigation">
+    <button
+      class={["bouton-suite-cyber-mobile", { active: estOuvert }]}
+      aria-expanded={estOuvert}
+      onclick={() => {
+        estOuvert = !estOuvert;
+      }}
+    >
+      <img src={gauffre} alt="La Suite cyber" />
+      <span class="sr-only">La Suite cyber</span>
+    </button>
+
+    <DsfrButton
+      kind="tertiary-no-outline"
+      class="bouton-suite-cyber-desktop"
+      size="sm"
+      expandable
+      onclick={() => {
+        estOuvert = !estOuvert;
+      }}
+      aria-expanded={estOuvert}
+      data-themeable="false"
+    >
+      <span class="contenu-bouton">
+        <svg
+          aria-hidden="true"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.66683 2.99992C4.66683 3.91992 3.92016 4.66659 3.00016 4.66659C2.08016 4.66659 1.3335 3.91992 1.3335 2.99992C1.3335 2.07992 2.08016 1.33325 3.00016 1.33325C3.92016 1.33325 4.66683 2.07992 4.66683 2.99992ZM8.00016 1.33325C7.08016 1.33325 6.3335 2.07992 6.3335 2.99992C6.3335 3.91992 7.08016 4.66659 8.00016 4.66659C8.92016 4.66659 9.66683 3.91992 9.66683 2.99992C9.66683 2.07992 8.92016 1.33325 8.00016 1.33325ZM13.0002 6.33325C12.0802 6.33325 11.3335 7.07992 11.3335 7.99992C11.3335 8.91992 12.0802 9.66658 13.0002 9.66658C13.9202 9.66658 14.6668 8.91992 14.6668 7.99992C14.6668 7.07992 13.9202 6.33325 13.0002 6.33325ZM8.00016 6.33325C7.08016 6.33325 6.3335 7.07992 6.3335 7.99992C6.3335 8.91992 7.08016 9.66658 8.00016 9.66658C8.92016 9.66658 9.66683 8.91992 9.66683 7.99992C9.66683 7.07992 8.92016 6.33325 8.00016 6.33325ZM13.0002 11.3333C12.0802 11.3333 11.3335 12.0799 11.3335 12.9999C11.3335 13.9199 12.0802 14.6666 13.0002 14.6666C13.9202 14.6666 14.6668 13.9199 14.6668 12.9999C14.6668 12.0799 13.9202 11.3333 13.0002 11.3333ZM8.00016 11.3333C7.08016 11.3333 6.3335 12.0799 6.3335 12.9999C6.3335 13.9199 7.08016 14.6666 8.00016 14.6666C8.92016 14.6666 9.66683 13.9199 9.66683 12.9999C9.66683 12.0799 8.92016 11.3333 8.00016 11.3333ZM13.0002 1.33325C12.0802 1.33325 11.3335 2.07992 11.3335 2.99992C11.3335 3.91992 12.0802 4.66659 13.0002 4.66659C13.9202 4.66659 14.6668 3.91992 14.6668 2.99992C14.6668 2.07992 13.9202 1.33325 13.0002 1.33325ZM3.00016 6.33325C2.08016 6.33325 1.3335 7.07992 1.3335 7.99992C1.3335 8.91992 2.08016 9.66658 3.00016 9.66658C3.92016 9.66658 4.66683 8.91992 4.66683 7.99992C4.66683 7.07992 3.92016 6.33325 3.00016 6.33325ZM3.00016 11.3333C2.08016 11.3333 1.3335 12.0799 1.3335 12.9999C1.3335 13.9199 2.08016 14.6666 3.00016 14.6666C3.92016 14.6666 4.66683 13.9199 4.66683 12.9999C4.66683 12.0799 3.92016 11.3333 3.00016 11.3333Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span class="texte-bouton">La Suite cyber</span>
+        <span
+          class={["fr-icon", estOuvert ? "fr-icon-arrow-up-s-line" : "fr-icon-arrow-down-s-line"]}
+          aria-hidden="true"
+        ></span>
+      </span>
+    </DsfrButton>
+  </div>
+
+  {#if estOuvert}
+    <div class="contenu" transition:slide>
+      <div class="fermeture">
+        <DsfrButton label="Fermer" preset="close" onclick={() => (estOuvert = false)} />
+      </div>
+
+      <AccueilSuiteCyber service={sourceUtm} />
+
+      <div class="services-anssi">
+        <LiensSuiteCyber
+          titre="S'informer"
+          services={[
+            {
+              nom: "Le portail du CERT-FR",
+              lien: `https://www.cert.ssi.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`,
+              icone: logoCERTFR,
+              classeTracking: "cert-fr",
+            },
+          ]}
+        />
+        <LiensSuiteCyber
+          titre="Piloter"
+          services={[
+            {
+              nom: "MonServiceSécurisé",
+              lien: `https://monservicesecurise.cyber.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`,
+              icone: logoMSS,
+              labels: ["Entités publiques"],
+              classeTracking: "mss",
+            },
+          ]}
+        />
+        <LiensSuiteCyber
+          titre="Accompagner"
+          services={[
+            {
+              nom: "MonAideCyber",
+              lien: `https://monaide.cyber.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`,
+              icone: logoMAC,
+              classeTracking: "mac",
+            },
+          ]}
+        />
+      </div>
+
+      <div class="acces-anssi">
+        <DsfrLink
+          label="Accéder au site de l'ANSSI"
+          href={`https://cyber.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`}
+          blank
+          neutral
+        />
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>[class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+[class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+  --icon-size: 1.5rem;
+}
+[class^=fr-icon-]::before, [class*=" fr-icon-"]::before, [class^=fr-fi-]::before, [class*=" fr-fi-"]::before {
+  content: "";
+}
+
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  [class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+    forced-color-adjust: none;
+    background-color: canvastext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  button[class^=fr-icon-]:not([disabled])::before, button[class^=fr-icon-]:not([disabled])::after, button[class*=" fr-icon-"]:not([disabled])::before, button[class*=" fr-icon-"]:not([disabled])::after, button[class^=fr-fi-]:not([disabled])::before, button[class^=fr-fi-]:not([disabled])::after, button[class*=" fr-fi-"]:not([disabled])::before, button[class*=" fr-fi-"]:not([disabled])::after {
+    background-color: buttontext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  a[href][class^=fr-icon-]::before, a[href][class^=fr-icon-]::after, a[href][class*=" fr-icon-"]::before, a[href][class*=" fr-icon-"]::after, a[href][class^=fr-fi-]::before, a[href][class^=fr-fi-]::after, a[href][class*=" fr-fi-"]::before, a[href][class*=" fr-fi-"]::after {
+    background-color: linktext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  a[class^=fr-icon-]:not([href])::before, a[class^=fr-icon-]:not([href])::after, a[class*=" fr-icon-"]:not([href])::before, a[class*=" fr-icon-"]:not([href])::after, a[class^=fr-fi-]:not([href])::before, a[class^=fr-fi-]:not([href])::after, a[class*=" fr-fi-"]:not([href])::before, a[class*=" fr-fi-"]:not([href])::after, button[class^=fr-icon-]:disabled::before, button[class^=fr-icon-]:disabled::after, button[class*=" fr-icon-"]:disabled::before, button[class*=" fr-icon-"]:disabled::after, button[class^=fr-fi-]:disabled::before, button[class^=fr-fi-]:disabled::after, button[class*=" fr-fi-"]:disabled::before, button[class*=" fr-fi-"]:disabled::after, input[class^=fr-icon-]:disabled::before, input[class^=fr-icon-]:disabled::after, input[class*=" fr-icon-"]:disabled::before, input[class*=" fr-icon-"]:disabled::after, input[class^=fr-fi-]:disabled::before, input[class^=fr-fi-]:disabled::after, input[class*=" fr-fi-"]:disabled::before, input[class*=" fr-fi-"]:disabled::after, input[type=checkbox][class^=fr-icon-]:disabled::before, input[type=checkbox][class^=fr-icon-]:disabled::after, input[type=checkbox][class*=" fr-icon-"]:disabled::before, input[type=checkbox][class*=" fr-icon-"]:disabled::after, input[type=checkbox][class^=fr-fi-]:disabled::before, input[type=checkbox][class^=fr-fi-]:disabled::after, input[type=checkbox][class*=" fr-fi-"]:disabled::before, input[type=checkbox][class*=" fr-fi-"]:disabled::after, input[type=checkbox]:disabled + label[class^=fr-icon-]::before, input[type=checkbox]:disabled + label[class^=fr-icon-]::after, input[type=checkbox]:disabled + label[class*=" fr-icon-"]::before, input[type=checkbox]:disabled + label[class*=" fr-icon-"]::after, input[type=checkbox]:disabled + label[class^=fr-fi-]::before, input[type=checkbox]:disabled + label[class^=fr-fi-]::after, input[type=checkbox]:disabled + label[class*=" fr-fi-"]::before, input[type=checkbox]:disabled + label[class*=" fr-fi-"]::after, input[type=radio][class^=fr-icon-]:disabled::before, input[type=radio][class^=fr-icon-]:disabled::after, input[type=radio][class*=" fr-icon-"]:disabled::before, input[type=radio][class*=" fr-icon-"]:disabled::after, input[type=radio][class^=fr-fi-]:disabled::before, input[type=radio][class^=fr-fi-]:disabled::after, input[type=radio][class*=" fr-fi-"]:disabled::before, input[type=radio][class*=" fr-fi-"]:disabled::after, input[type=radio]:disabled + label[class^=fr-icon-]::before, input[type=radio]:disabled + label[class^=fr-icon-]::after, input[type=radio]:disabled + label[class*=" fr-icon-"]::before, input[type=radio]:disabled + label[class*=" fr-icon-"]::after, input[type=radio]:disabled + label[class^=fr-fi-]::before, input[type=radio]:disabled + label[class^=fr-fi-]::after, input[type=radio]:disabled + label[class*=" fr-fi-"]::before, input[type=radio]:disabled + label[class*=" fr-fi-"]::after, select[class^=fr-icon-]:disabled::before, select[class^=fr-icon-]:disabled::after, select[class*=" fr-icon-"]:disabled::before, select[class*=" fr-icon-"]:disabled::after, select[class^=fr-fi-]:disabled::before, select[class^=fr-fi-]:disabled::after, select[class*=" fr-fi-"]:disabled::before, select[class*=" fr-fi-"]:disabled::after, textarea[class^=fr-icon-]:disabled::before, textarea[class^=fr-icon-]:disabled::after, textarea[class*=" fr-icon-"]:disabled::before, textarea[class*=" fr-icon-"]:disabled::after, textarea[class^=fr-fi-]:disabled::before, textarea[class^=fr-fi-]:disabled::after, textarea[class*=" fr-fi-"]:disabled::before, textarea[class*=" fr-fi-"]:disabled::after, video[class^=fr-icon-]:not([href])::before, video[class^=fr-icon-]:not([href])::after, video[class*=" fr-icon-"]:not([href])::before, video[class*=" fr-icon-"]:not([href])::after, video[class^=fr-fi-]:not([href])::before, video[class^=fr-fi-]:not([href])::after, video[class*=" fr-fi-"]:not([href])::before, video[class*=" fr-fi-"]:not([href])::after, audio[class^=fr-icon-]:not([href])::before, audio[class^=fr-icon-]:not([href])::after, audio[class*=" fr-icon-"]:not([href])::before, audio[class*=" fr-icon-"]:not([href])::after, audio[class^=fr-fi-]:not([href])::before, audio[class^=fr-fi-]:not([href])::after, audio[class*=" fr-fi-"]:not([href])::before, audio[class*=" fr-fi-"]:not([href])::after {
+    background-color: graytext;
+  }
+}
+.fr-icon--xs::before, .fr-icon--xs::after {
+  --icon-size: 0.75rem;
+}
+.fr-icon--sm::before, .fr-icon--sm::after {
+  --icon-size: 1rem;
+}
+.fr-icon--md::before, .fr-icon--md::after {
+  --icon-size: 1.5rem;
+}
+.fr-icon--lg::before, .fr-icon--lg::after {
+  --icon-size: 2rem;
+}
+
+@media (min-width: 992px) {
+  .suite-cyber {
+    position: relative;
+  }
+}
+
+.contenu-bouton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+.contenu-bouton svg {
+  width: 1rem;
+  height: 1rem;
+}
+.contenu-bouton .fr-icon::before {
+  --icon-size: 1rem;
+}
+
+.contenu {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-overlap-grey);
+  width: 100vw;
+  height: 100vh;
+  padding-top: 0.5rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow-y: scroll !important;
+  overflow-x: hidden;
+  z-index: var(--suite-cyber-z-index, 1000);
+  text-align: left;
+}
+@media (min-width: 992px) {
+  .contenu {
+    border-top: 1px solid var(--border-open-blue-france);
+    position: absolute;
+    top: 2rem;
+    right: 0;
+    left: unset;
+    width: 21.25rem;
+    height: 35rem;
+    box-shadow: 0px 4px 12px 0px rgba(0, 0, 18, 0.16);
+  }
+}
+
+.fermeture {
+  padding-top: 0.5rem;
+  padding-right: 1rem;
+}
+@media (min-width: 992px) {
+  .fermeture {
+    display: none;
+  }
+}
+
+.services-anssi {
+  padding: 12px 16px 0px;
+}
+
+.acces-anssi {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  color: var(--text-mention-grey);
+  padding: 1rem;
+}
+
+.bouton-suite-cyber-mobile {
+  display: flex;
+  border: none;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  color: #000091;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  cursor: pointer;
+  gap: 8px;
+  background: white;
+}
+.bouton-suite-cyber-mobile:active, .bouton-suite-cyber-mobile.active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.bouton-suite-cyber-mobile:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+@media (min-width: 992px) {
+  .bouton-suite-cyber-mobile {
+    display: none;
+  }
+}
+
+@media (max-width: 991px) {
+  :global(.bouton-suite-cyber-desktop) {
+    display: none !important;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}</style>

package/dist/composants/suite-cyber/SuiteCyber.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    sourceUtm?: string;
+}
+declare const SuiteCyber: import("svelte").Component<Props, {}, "">;
+type SuiteCyber = ReturnType<typeof SuiteCyber>;
+export default SuiteCyber;

package/dist/composants/vitrines-produits/briques/Brique.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">let { variation = "primaire", sansMargeHaute = false, sansMargeLaterale = false, children } = $props();
+</script>
+
+<section
+  class={variation}
+  class:sans-marge-haute={sansMargeHaute}
+  class:sans-marge-laterale={sansMargeLaterale}
+>
+  <div class="contenu-brique">
+    {@render children?.()}
+  </div>
+</section>
+
+<style>section {
+  padding: var(--padding-section, 48px 16px);
+  box-sizing: border-box;
+  text-align: left;
+  color: white;
+}
+section.sans-marge-haute {
+  padding-top: 0;
+}
+section.sans-marge-laterale {
+  padding-left: 0;
+  padding-right: 0;
+}
+@media (min-width: 576px) {
+  section {
+    padding: var(--padding-section, 72px 24px);
+  }
+}
+@media (min-width: 932px) {
+  section {
+    padding: var(--padding-section, 48px 24px);
+  }
+}
+section.primaire {
+  background: var(--brique-background-primaire);
+}
+section.transparent {
+  background: none;
+}
+section.secondaire {
+  background: var(--brique-background-secondaire);
+}
+
+.contenu-brique {
+  max-width: 1200px;
+  margin: 0 auto;
+}</style>

package/dist/composants/vitrines-produits/briques/Brique.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    variation?: "primaire" | "transparent" | "secondaire";
+    sansMargeHaute?: boolean;
+    sansMargeLaterale?: boolean;
+    children?: import("svelte").Snippet;
+}
+declare const Brique: import("svelte").Component<Props, {}, "">;
+type Brique = ReturnType<typeof Brique>;
+export default Brique;

package/dist/composants/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte

@@ -0,0 +1,144 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-brique-contenu-a-deux-colonnes",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      paragraphe: { reflect: false, type: "String", attribute: "paragraphe" },
+      action: { reflect: false, type: "Object", attribute: "action" },
+      ordre: { reflect: false, type: "String", attribute: "ordre" },
+      illustration: { reflect: false, type: "Object", attribute: "illustration" },
+    },
+  }}
+/>
+
+<script lang="ts">import Brique from "./Brique.svelte";
+let { titre = undefined, paragraphe = undefined, action = undefined, ordre = "texte-gauche", illustration } = $props();
+</script>
+
+<Brique variation="primaire">
+  <div class={`grille-contenu ${ordre}`}>
+    <div class="illustration">
+      <img src={illustration.lien} alt={illustration.alt} />
+    </div>
+    <div class="contenu">
+      <slot name="titre"><h2>{titre}</h2></slot>
+      <slot name="paragraphe"><p>{paragraphe}</p></slot>
+      <div class="action">
+        {#if action}
+          <a role="button" href={action.lien} target="_blank">
+            {action.titre}
+          </a>
+        {/if}
+      </div>
+    </div>
+  </div>
+</Brique>
+
+<style>.grille-contenu {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "illustration" "contenu";
+  gap: 32px;
+}
+@media (min-width: 932px) {
+  .grille-contenu {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "contenu illustration";
+    column-gap: 24px;
+  }
+  .grille-contenu.texte-gauche {
+    grid-template-areas: "contenu illustration";
+  }
+  .grille-contenu.texte-droite {
+    grid-template-areas: "illustration contenu";
+  }
+}
+.grille-contenu .contenu {
+  grid-area: contenu;
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+}
+@media (min-width: 932px) {
+  .grille-contenu .contenu {
+    justify-content: center;
+  }
+}
+.grille-contenu .contenu h2 {
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+  word-break: break-word;
+  margin: 0;
+}
+.grille-contenu .contenu p {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin: 0;
+}
+.grille-contenu .contenu .action a[role=button] {
+  display: flex;
+  justify-content: center;
+  text-decoration: none;
+  padding: 8px 16px;
+  max-width: 100%;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 24px;
+  border-radius: 4px;
+  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background);
+  color: var(--brique-contenu-deux-colonnes-action-bouton-texte);
+  border: none;
+  cursor: pointer;
+}
+.grille-contenu .contenu .action a[role=button]:active {
+  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-active);
+  box-shadow: none;
+  border: none;
+}
+.grille-contenu .contenu .action a[role=button]:hover {
+  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-hover);
+  box-shadow: none;
+  border: none;
+}
+@media (min-width: 576px) {
+  .grille-contenu .contenu .action a[role=button] {
+    max-width: unset;
+    width: fit-content;
+  }
+}
+.grille-contenu .contenu .action {
+  margin-top: 32px;
+}
+.grille-contenu .illustration {
+  grid-area: illustration;
+}
+.grille-contenu .illustration img {
+  width: 100%;
+  max-height: 250px;
+}
+@media (min-width: 576px) {
+  .grille-contenu .illustration img {
+    max-height: none;
+  }
+}
+@media (min-width: 932px) {
+  .grille-contenu .illustration img {
+    max-height: 330px;
+  }
+}
+.grille-contenu :global(::slotted([slot="titre"])) {
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+  word-break: break-word;
+  margin: 0;
+}
+.grille-contenu :global(::slotted([slot="paragraphe"])) {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin: 0;
+}</style>

package/dist/composants/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Action, Image } from "../../../types";
+interface Props {
+    titre?: string;
+    paragraphe?: string;
+    action?: Action | undefined;
+    ordre?: "texte-gauche" | "texte-droite";
+    illustration: Image;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BriqueContenuADeuxColonnes: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    titre: {};
+    paragraphe: {};
+}, {}, "">;
+type BriqueContenuADeuxColonnes = InstanceType<typeof BriqueContenuADeuxColonnes>;
+export default BriqueContenuADeuxColonnes;