Repository: SocialGouv/code-du-travail-numerique
Pull request #6543: feat(modeles): migration en DSFR de la page qui liste les modèles de documents
Author: login: m-maillot
Created: 2025-04-17T11:28:55Z | Merged: 2025-04-24T14:09:27Z

closes #6529 

Linked issue #6529: DSFR Modèles de documents (liste)
Page à migrer au DSFR : https://code.travail.gouv.fr/modeles-de-courriers

Lien figma : https://www.figma.com/proto/DSfSIVNOCNHi76JeVuSo5T/DSFR---CDTN?node-id=2023-82032&t=N9somJXmGdAHMLD2-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=672%3A15904&show-proto-sidebar=1

Diff:
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap
deleted file mode 100644
index ba138fedb41..00000000000
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap
+++ /dev/null
@@ -1,773 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ModelesDeCourriers /> should render 1`] = `
-<div>
-  <div
-    class="sc-5e9f8e85-0 dAotBL"
-  >
-    <div
-      class="sc-5e9f8e85-1 joGszH"
-    />
-    <header
-      class="sc-1bce5a92-0 daRkfQ"
-    >
-      <div
-        class="sc-1bce5a92-1 JFtdO"
-        id="printDate"
-      >
-        le 04/01/2020, 00:00:00
-      </div>
-      <div
-        class="sc-d8f596bd-0 sc-1bce5a92-4 jtWYDW jMVRmt"
-      >
-        <a
-          class="sc-1bce5a92-5 dGVXOB"
-          href="/"
-          title="Code du travail numérique - retour à l'accueil"
-        >
-          <img
-            alt="République française, site officiel du gouvernement. Liberté, égalité, fraternité"
-            class="sc-1bce5a92-6 kQixfe"
-            height="115"
-            src="/static/assets/img/logo-rf.svg"
-            width="135"
-          />
-          <svg
-            aria-label="Code du travail numérique"
-            class="sc-1bce5a92-7 bAgQJS"
-            fill="none"
-            viewBox="0 0 657 265"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M135 160h520v100H135z"
-              fill="#fff"
-            />
-            <path
-              d="M533.026 159.16H.822V79.824h532.204v79.336zm-.107-79.336H264.98V.488h267.939v79.336zM210.09 186.329l-.155 54.359h-11.616l-10.685-16.339c-.155-.259-1.316-1.936-3.484-5.034-.568-.826-1.677-2.503-3.329-5.033a99.201 99.201 0 0 0-2.556-3.793l-1.007-1.551h-.155l.078 1.396c.052.362.09 1.007.116 1.936.026.928.038 1.624.038 2.09.104 1.754.182 3.846.232 6.271.052 1.602.079 4.259.079 7.976v11.924h-12.623v-54.124h11.616l11.304 17.113 2.788 4.181c.104.154 1.162 1.704 3.175 4.645.259.414.672 1.046 1.239 1.898a44.728 44.728 0 0 0 1.317 1.897l1.084 1.548h.077v-5.652c0-2.477-.026-4.491-.077-6.04-.052-1.548-.077-3.975-.077-7.279v-12.389h12.621zm57.38 0v31.36c0 3.821-.543 7.201-1.627 10.144-1.084 2.995-2.581 5.473-4.491 7.435-1.961 2.012-4.31 3.561-7.046 4.645-2.839 1.032-5.936 1.548-9.292 1.548-3.355 0-6.452-.516-9.292-1.548-2.736-1.084-5.086-2.633-7.047-4.645-1.909-1.962-3.407-4.44-4.491-7.435-1.084-2.943-1.626-6.323-1.626-10.144v-31.36h12.777v31.283c0 4.13.825 7.176 2.477 9.137 1.6 1.911 4.002 2.865 7.202 2.865 3.201 0 5.601-.954 7.201-2.865 1.652-1.961 2.477-5.007 2.477-9.137v-31.283h12.778zm63.186 0-.155 54.359h-12.389v-14.326c0-5.627.128-10.196.387-13.706.052-1.031.104-1.91.154-2.632.052-.723.078-1.264.078-1.626v-.542h-.078l-.618 1.082c-.516.93-.956 1.757-1.318 2.48l-1.393 2.787-1.007 2.013-5.885 10.996h-6.427l-5.885-10.996a27.177 27.177 0 0 0-.929-2.013l-1.394-2.787a65.57 65.57 0 0 0-1.316-2.48l-.62-1.082h-.154c-.052 0-.052.388 0 1.161s.129 1.963.232 3.561c.258 3.511.388 8.08.388 13.707v14.324h-12.312v-54.124h11.924l9.292 16.415c1.652 2.994 2.736 5.137 3.253 6.428.464 1.238.723 1.858.773 1.858h.078l.154-.467c.052-.102.259-.591.62-1.469.414-.929.827-1.808 1.239-2.633a47.654 47.654 0 0 1 2.091-3.872l9.292-16.416h11.925zm27.181-2.246-3.872-6.736 17.268-9.756 4.569 8.593-17.965 7.899zm23.074 44.369v12.08h-36.934v-54.204h36.47v12.004h-23.772v9.059h18.352v11.305h-18.352v9.756h24.236zm25.323-17.035 7.744.155c1.032 0 1.961-.207 2.787-.619a5.35 5.35 0 0 0 1.858-1.549c.516-.671.878-1.368 1.084-2.091.259-.877.387-1.678.387-2.401 0-.723-.128-1.523-.387-2.4-.206-.723-.568-1.42-1.084-2.091a5.33 5.33 0 0 0-1.858-1.549c-.826-.412-1.755-.619-2.787-.619h-7.744v13.164zm14.945 29.192-9.292-17.577h-5.73v17.655h-12.699v-54.126h19.203c3.046 0 5.885.439 8.518 1.316 2.53.827 4.698 2.066 6.504 3.718a17.238 17.238 0 0 1 4.182 5.808c.98 2.166 1.47 4.696 1.47 7.588 0 3.665-.8 6.788-2.4 9.369-1.6 2.632-3.872 4.672-6.813 6.117l11.304 20.132h-14.247zm23.928-54.28h12.699v54.203h-12.699v-54.203zm57.689 38.639c2.22-2.736 3.329-6.608 3.329-11.614 0-5.059-1.109-8.931-3.329-11.616-2.272-2.735-5.318-4.103-9.138-4.103-3.872 0-6.892 1.368-9.06 4.103-2.168 2.736-3.252 6.608-3.252 11.616 0 4.956 1.084 8.828 3.252 11.614 2.168 2.787 5.188 4.182 9.06 4.182 3.82 0 6.866-1.395 9.138-4.182zm-15.487 15.796-.077.311c-2.736-.568-5.37-1.679-7.899-3.329-2.323-1.498-4.361-3.486-6.117-5.963-1.704-2.427-3.02-5.137-3.95-8.132-.928-2.993-1.393-6.323-1.393-9.988 0-4.336.645-8.208 1.936-11.615 1.291-3.458 3.072-6.426 5.343-8.905a21.995 21.995 0 0 1 8.13-5.729 26.519 26.519 0 0 1 10.222-2.014c3.665 0 7.072.671 10.221 2.014 3.149 1.342 5.859 3.226 8.131 5.652 2.27 2.426 4.077 5.394 5.42 8.904 1.29 3.408 1.936 7.28 1.936 11.616 0 3.613-.466 6.969-1.395 10.065-.929 3.097-2.245 5.808-3.948 8.132a24.624 24.624 0 0 1-6.195 5.807 24.106 24.106 0 0 1-7.898 3.252v9.834h-12.467v-9.912zm86.262-54.435v31.36c0 3.821-.542 7.201-1.626 10.144-1.084 2.995-2.582 5.473-4.491 7.435-1.961 2.012-4.311 3.561-7.047 4.645-2.838 1.032-5.936 1.548-9.292 1.548-3.354 0-6.452-.516-9.292-1.548-2.736-1.084-5.085-2.633-7.046-4.645-1.91-1.962-3.407-4.44-4.491-7.435-1.084-2.943-1.627-6.323-1.627-10.144v-31.36h12.778v31.283c0 4.13.825 7.176 2.477 9.137 1.6 1.911 4.001 2.865 7.201 2.865 3.202 0 5.602-.954 7.202-2.865 1.652-1.961 2.478-5.007 2.478-9.137v-31.283h12.776zm49.481 42.124v12.078h-36.936v-54.202h36.471v12.002h-23.772v9.06h18.352v11.304h-18.352v9.758h24.237z"
-              fill="currentColor"
-            />
-            <path
-              d="m49.125 135.641-.312-.156c1.924 0 3.718-.312 5.38-.936 1.664-.623 3.068-1.559 4.212-2.807 1.144-1.248 2.079-2.806 2.807-4.678.676-1.82 1.013-3.952 1.013-6.395 0-2.548-.337-4.731-1.013-6.551-.728-1.924-1.663-3.534-2.807-4.834-1.144-1.299-2.548-2.314-4.212-3.042-1.558-.676-3.326-1.013-5.301-1.013h-8.423v30.412h8.656zm-1.092-42.653h-.077c4.054 0 7.72.649 10.994 1.948 3.38 1.3 6.264 3.172 8.656 5.614 2.495 2.496 4.42 5.407 5.77 8.734 1.404 3.432 2.106 7.2 2.106 11.306 0 4.056-.675 7.799-2.028 11.23-1.3 3.326-3.17 6.161-5.614 8.5-2.443 2.338-5.328 4.132-8.656 5.38-3.327 1.248-6.992 1.87-10.995 1.87H27.37V92.988h20.664zm84.219.155v31.581c0 3.847-.546 7.252-1.637 10.216-1.092 3.015-2.6 5.509-4.523 7.484-1.976 2.028-4.341 3.588-7.096 4.68-2.86 1.039-5.978 1.559-9.357 1.559-3.38 0-6.499-.52-9.359-1.559-2.754-1.092-5.12-2.652-7.096-4.68-1.922-1.975-3.43-4.469-4.522-7.484-1.09-2.964-1.638-6.369-1.638-10.216V93.143h12.867v31.502c0 4.16.832 7.226 2.496 9.202 1.611 1.924 4.028 2.885 7.252 2.885 3.223 0 5.64-.961 7.252-2.885 1.663-1.976 2.495-5.042 2.495-9.202V93.143h12.866zm75.096 0v12.086h-15.206v42.499h-12.789v-42.499h-15.049V93.143h43.044zm23.237 25.264 7.799.156c1.039 0 1.975-.208 2.807-.622a5.36 5.36 0 0 0 1.87-1.562c.52-.674.884-1.377 1.092-2.104.26-.884.391-1.69.391-2.418 0-.727-.131-1.534-.391-2.418-.208-.726-.572-1.429-1.092-2.105a5.34 5.34 0 0 0-1.87-1.559c-.832-.416-1.768-.624-2.807-.624h-7.799v13.256zm15.051 29.398-9.359-17.7h-5.769v17.78h-12.789V93.377h19.338c3.068 0 5.927.441 8.579 1.325 2.547.832 4.729 2.079 6.549 3.743a17.345 17.345 0 0 1 4.211 5.849c.988 2.183 1.483 4.731 1.483 7.641 0 3.692-.807 6.836-2.419 9.435-1.611 2.652-3.899 4.705-6.861 6.16l11.384 20.275h-14.347zm52.871-20.118-3.743-11.853c-.416-1.351-.703-2.364-.859-3.042a49.832 49.832 0 0 0-.701-2.65 31.897 31.897 0 0 0-.273-.975 53.278 53.278 0 0 0-.272-.897l-.235-.702h-.077l-.156.702c-.054.156-.144.456-.274.897-.13.441-.221.767-.273.975-.052.208-.168.61-.351 1.208-.181.597-.325 1.08-.429 1.442l-.935 3.042-3.821 11.853h12.399zm3.742 11.463h-19.728l-2.729 8.577h-13.569l19.573-54.584h13.256l19.573 54.584h-13.646l-2.73-8.577zm72.99-46.007-19.105 54.585h-14.582l-18.87-54.585h13.88l9.357 30.1a108.513 108.513 0 0 1 2.183 7.876c.468 2.026.728 3.04.78 3.04h.078c.052 0 .312-1.014.78-3.04.571-2.444 1.3-5.07 2.183-7.876l9.357-30.1h13.959zm36.651 34.544-3.742-11.853c-.416-1.351-.703-2.364-.859-3.042a49.832 49.832 0 0 0-.701-2.65 32.648 32.648 0 0 0-.274-.975 38.93 38.93 0 0 0-.272-.897l-.234-.702h-.078l-.156.702a26.94 26.94 0 0 0-.273.897c-.131.441-.221.767-.273.975-.052.208-.168.61-.351 1.208-.181.597-.325 1.08-.429 1.442l-.935 3.042-3.821 11.853h12.398zm3.743 11.463h-19.728l-2.729 8.577h-13.57l19.574-54.584h13.256l19.573 54.584h-13.647l-2.729-8.577zm26.124-46.008h12.788v54.586h-12.788V93.142zm64.644 42.42v12.166h-36.416V93.142h12.788v42.42h23.628zM326.66 29.883l-.076.23c-1.121-1.731-2.572-3.03-4.353-3.897-1.833-.865-3.667-1.297-5.5-1.297-3.869 0-6.873 1.375-9.011 4.124-2.138 2.75-3.208 6.517-3.208 11.304 0 4.888 1.146 8.655 3.438 11.303 2.29 2.648 5.269 3.972 8.934 3.972 2.291 0 4.404-.535 6.339-1.604 1.884-1.07 3.336-2.726 4.353-4.964l12.374 3.282c-1.884 4.838-4.863 8.682-8.936 11.534-3.922 2.749-8.656 4.124-14.206 4.124-3.462 0-6.822-.638-10.081-1.91a21.717 21.717 0 0 1-8.019-5.652c-2.241-2.444-3.997-5.372-5.27-8.782-1.274-3.36-1.91-7.179-1.91-11.456 0-4.278.636-8.096 1.91-11.456 1.273-3.411 3.029-6.339 5.27-8.783a21.717 21.717 0 0 1 8.019-5.652 26.167 26.167 0 0 1 10.081-1.985c5.194 0 9.674 1.248 13.442 3.742 3.818 2.546 6.797 6.059 8.936 10.539l-12.526 3.284zm37.883 21.767c2.139 2.75 5.118 4.124 8.936 4.124 3.819 0 6.823-1.374 9.012-4.124 2.19-2.698 3.284-6.517 3.284-11.456 0-4.99-1.094-8.81-3.284-11.456-2.24-2.698-5.245-4.048-9.012-4.048-3.818 0-6.797 1.35-8.936 4.048-2.138 2.647-3.208 6.465-3.208 11.456 0 4.888 1.07 8.707 3.208 11.456zm-16.268-11.303c0-4.277.638-8.096 1.91-11.457 1.273-3.41 3.029-6.338 5.27-8.782a21.717 21.717 0 0 1 8.019-5.652 26.192 26.192 0 0 1 10.081-1.986c3.615 0 6.976.663 10.082 1.986 3.105 1.324 5.778 3.182 8.018 5.576 2.24 2.393 4.023 5.32 5.347 8.782 1.273 3.361 1.909 7.179 1.909 11.456 0 4.277-.636 8.096-1.909 11.456-1.324 3.462-3.107 6.39-5.347 8.783s-4.913 4.252-8.018 5.576c-3.158 1.272-6.518 1.91-10.082 1.91-3.462 0-6.822-.638-10.081-1.91a21.717 21.717 0 0 1-8.019-5.652c-2.241-2.444-3.997-5.372-5.27-8.783-1.272-3.36-1.91-7.178-1.91-11.456v.153zm83.631 14.74-.306-.152c1.884 0 3.64-.307 5.27-.918 1.629-.61 3.004-1.528 4.124-2.749 1.12-1.221 2.037-2.75 2.749-4.583.663-1.782.993-3.869.993-6.262 0-2.495-.33-4.634-.993-6.416-.712-1.883-1.629-3.462-2.749-4.735-1.12-1.272-2.495-2.265-4.124-2.979-1.527-.661-3.259-.992-5.194-.992h-8.248v29.786h8.478zm-1.07-41.776h-.076c3.971 0 7.56.636 10.768 1.909 3.31 1.272 6.136 3.105 8.478 5.499 2.444 2.444 4.328 5.294 5.652 8.553 1.374 3.361 2.062 7.052 2.062 11.075 0 3.972-.662 7.637-1.986 10.997-1.272 3.259-3.106 6.033-5.499 8.325-2.393 2.291-5.219 4.048-8.477 5.27-3.259 1.221-6.848 1.833-10.768 1.833h-20.392V13.311h20.238zm75.536 41.699v11.914h-36.431V13.462h35.972v11.84h-23.446v8.935h18.101v11.15h-18.101v9.623h23.905z"
-              fill="#fff"
-            />
-            <path
-              d="M138.666 257.954h511.333v-95.732H138.666v95.732zm518 6.667H131.999V155.556h524.667v109.065z"
-              fill="currentColor"
-            />
-          </svg>
-        </a>
-        <div
-          class="sc-1bce5a92-10 gxLGWf"
-        >
-          <form
-            action="/recherche"
-            class="sc-830662af-0 fdcWhS"
-            role="search"
-          >
-            <div
-              class="sc-8dcb2faa-0 gxfPDw"
-            >
-              <label
-                for="floating-search"
-                id="downshift-:r0:-label"
-              >
-                Rechercher
-              </label>
-            </div>
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="downshift-:r0:-menu"
-              aria-expanded="false"
-              aria-labelledby="downshift-:r0:-label"
-              autocomplete="off"
-              class="sc-830662af-5 jDcVOD"
-              id="floating-search"
-              placeholder="Rechercher"
-              role="combobox"
-              type="search"
-              value=""
-            />
-            <ul
-              aria-labelledby="downshift-:r0:-label"
-              class="sc-830662af-6 jvaqix"
-              id="downshift-:r0:-menu"
-              role="listbox"
-            />
-            <button
-              aria-label="Lancer ma recherche"
-              class="sc-95bd4344-0 dxXsic sc-830662af-4 hWCjEV"
-              title="Lancer ma recherche"
-              type="submit"
-            >
-              <svg
-                aria-hidden="true"
-                class="sc-830662af-1 ieisKv"
-                fill="none"
-                viewBox="0 0 32 32"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M27.319 25.368a.935.935 0 0 1-1.304 1.341l-6.256-6.012a9.797 9.797 0 0 1-6.092 2.1C8.327 22.798 4 18.59 4 13.4S8.328 4 13.667 4c5.338 0 9.666 4.208 9.666 9.399 0 2.245-.81 4.307-2.16 5.923l6.146 6.046zm-13.652-4.515c4.234 0 7.666-3.337 7.666-7.454 0-4.117-3.432-7.454-7.666-7.454C9.432 5.945 6 9.282 6 13.399c0 4.117 3.432 7.454 7.667 7.454z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </form>
-        </div>
-        <div
-          class="sc-1bce5a92-2 hsrbqR"
-        >
-          <a
-            aria-label="Lancer ma recherche"
-            class="sc-1bce5a92-9 jlEcyl"
-            href="/recherche"
-          >
-            <svg
-              aria-hidden="true"
-              fill="none"
-              viewBox="0 0 32 32"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M27.319 25.368a.935.935 0 0 1-1.304 1.341l-6.256-6.012a9.797 9.797 0 0 1-6.092 2.1C8.327 22.798 4 18.59 4 13.4S8.328 4 13.667 4c5.338 0 9.666 4.208 9.666 9.399 0 2.245-.81 4.307-2.16 5.923l6.146 6.046zm-13.652-4.515c4.234 0 7.666-3.337 7.666-7.454 0-4.117-3.432-7.454-7.666-7.454C9.432 5.945 6 9.282 6 13.399c0 4.117 3.432 7.454 7.667 7.454z"
-                fill="currentColor"
-              />
-            </svg>
-          </a>
-        </div>
-        <div
-          class="sc-1bce5a92-8 jegxDE"
-        >
-          <button
-            class="sc-95bd4344-0 ksRRNY sc-7ce33c9e-0 sc-1bce5a92-3 dfFPma hcjICj"
-          >
-            Accessibilité
-          </button>
-        </div>
-        <button
-          aria-label="menu principal"
-          class="sc-95bd4344-0 jfFcPD sc-826d929a-1 gOztMa sc-46211e62-0 fntMFM"
-        >
-          <svg
-            aria-hidden="true"
-            class="sc-826d929a-2 iVKgwY"
-            fill="none"
-            viewBox="0 0 32 32"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M7 11a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1zm0 5a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1zm1 4a1 1 0 1 0 0 2h16a1 1 0 1 0 0-2H8z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-    </header>
-    <main
-      class="sc-5e9f8e85-2 iZYNzd"
-      id="content"
-      tabindex="-1"
-    >
-      <div
-        class="sc-a384ed57-0 iEQrzr"
-      >
-        <div
-          class="sc-d8f596bd-0 hCPxfF"
-        >
-          <header
-            class="sc-e32628d4-0 cXUuvO"
-          >
-            <h1
-              class="sc-5f05e99b-0 dQbgIy"
-            >
-              <span
-                class="sc-a4d7a179-0 jRxkkJ"
-              />
-              Modèles de documents
-            </h1>
-            <p
-              class="sc-ea8c0a81-0 hsqxhF"
-            >
-              Téléchargez et personnalisez les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail
-            </p>
-          </header>
-          <div
-            class="sc-5a2c6b8f-0 yOEut sc-f36c6fc-2 cQpmLT"
-          >
-            <select
-              class="sc-5a2c6b8f-2 leEqvE"
-            >
-              <option
-                value="all"
-              >
-                Tous les thèmes
-              </option>
-              <option
-                value="/themes/1-embauche-et-contrat-de-travail"
-              >
-                Embauche et contrat de travail
-              </option>
-              <option
-                value="/themes/8-depart-de-lentreprise"
-              >
-                Départ de l'entreprise
-              </option>
-            </select>
-            <div
-              aria-hidden="true"
-              class="sc-5a2c6b8f-1 dTDGVJ"
-            >
-              <svg
-                aria-hidden="true"
-                fill="none"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  clip-path="url(#arrow-down_svg__a)"
-                >
-                  <path
-                    d="m8.425 11.573 7.11-6.072a.709.709 0 0 0 .26-.537.709.709 0 0 0-.26-.537.973.973 0 0 0-.629-.223.973.973 0 0 0-.63.223l-6.48 5.536-6.481-5.536a.973.973 0 0 0-.63-.223.973.973 0 0 0-.628.223.708.708 0 0 0-.261.537c0 .202.094.395.26.537l7.11 6.072a.91.91 0 0 0 .29.165 1.021 1.021 0 0 0 .68 0 .91.91 0 0 0 .29-.165z"
-                    fill="currentColor"
-                  />
-                </g>
-                <defs>
-                  <clippath
-                    id="arrow-down_svg__a"
-                  >
-                    <path
-                      d="M0 0h16v16H0z"
-                      fill="currentColor"
-                    />
-                  </clippath>
-                </defs>
-              </svg>
-            </div>
-          </div>
-          <ul
-            class="sc-ab356c14-0 sc-f36c6fc-0 bpNHPl dRUUmx"
-          >
-            <h2
-              class="sc-f36c6fc-3 gWQLPi sc-b879fc2d-0 hyiHle"
-            >
-              Embauche et contrat de travail
-            </h2>
-            <li
-              class="sc-f36c6fc-1 kJkExl"
-            >
-              <div
-                class="sc-d47d8018-0 cDsGtD"
-              >
-                <div
-                  class="sc-9d3cf83b-0 gYcXmc"
-                >
-                  <div
-                    class="sc-9d3cf83b-1 laYFae"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      viewBox="0 0 32 32"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M11.938 16.5a3.548 3.548 0 0 1 3.562-3.563 3.548 3.548 0 0 1 3.563 3.563 3.548 3.548 0 0 1-3.563 3.563 3.548 3.548 0 0 1-3.563-3.563zm2.062 0c0 .84.66 1.5 1.5 1.5s1.5-.66 1.5-1.5-.66-1.5-1.5-1.5-1.5.66-1.5 1.5z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M25 14.838v3.404l-1.663.87-.474 1.109.554 1.82-2.375 2.376-1.9-.555-1.109.476-.87 1.662h-3.405l-.87-1.663-1.109-.474-1.82.554-2.376-2.375.554-1.9-.475-1.109L6 18.163v-3.405l1.662-.87.475-1.109-.554-1.82 2.375-2.376 1.9.554 1.109-.475.87-1.662h3.405l.87 1.662 1.109.475 1.82-.554 2.376 2.375-.555 1.9.476 1.109 1.662.87zm-4.1 5.112.825-2.025L23 17.25v-1.5l-1.2-.6-.825-2.025.375-1.35-1.05-1.05-1.35.375-2.025-.825L16.25 9h-1.5l-.6 1.2-2.025.825-1.35-.375-1.05 1.05.375 1.35-.825 2.025L8 15.75v1.5l1.2.6.825 2.025-.375 1.35 1.05 1.05 1.35-.375 2.025.825L14.75 24h1.5l.6-1.2 2.025-.825 1.35.375 1.05-1.05-.375-1.35z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  class="sc-d47d8018-2 eBZhiP"
-                >
-                  <div
-                    class="sc-d47d8018-3 cAXyng"
-                  >
-                    <h3
-                      class="sc-d47d8018-5 jNRMjT"
-                    >
-                      <a
-                        href="modeles-de-courriers/rupture-de-periode-dessai-a-linitiative-de-lemployeur"
-                      >
-                        Rupture de période d’essai à l'initiative de l'employeur
-                      </a>
-                    </h3>
-                  </div>
-                </div>
-                <div
-                  class="sc-d47d8018-6 ipSAXR"
-                >
-                  Pendant la période d’essai, le contrat de travail peut être rompu librement par l'employeur. L'employeur doit dans ce cas informer le salarié et respecter un délai…
-                </div>
-              </div>
-            </li>
-            <h2
-              class="sc-f36c6fc-3 gWQLPi sc-b879fc2d-0 hyiHle"
-            >
-              Départ de l'entreprise
-            </h2>
-            <li
-              class="sc-f36c6fc-1 kJkExl"
-            >
-              <div
-                class="sc-d47d8018-0 cDsGtD"
-              >
-                <div
-                  class="sc-9d3cf83b-0 gYcXmc"
-                >
-                  <div
-                    class="sc-9d3cf83b-1 laYFae"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      viewBox="0 0 32 32"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M11.938 16.5a3.548 3.548 0 0 1 3.562-3.563 3.548 3.548 0 0 1 3.563 3.563 3.548 3.548 0 0 1-3.563 3.563 3.548 3.548 0 0 1-3.563-3.563zm2.062 0c0 .84.66 1.5 1.5 1.5s1.5-.66 1.5-1.5-.66-1.5-1.5-1.5-1.5.66-1.5 1.5z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M25 14.838v3.404l-1.663.87-.474 1.109.554 1.82-2.375 2.376-1.9-.555-1.109.476-.87 1.662h-3.405l-.87-1.663-1.109-.474-1.82.554-2.376-2.375.554-1.9-.475-1.109L6 18.163v-3.405l1.662-.87.475-1.109-.554-1.82 2.375-2.376 1.9.554 1.109-.475.87-1.662h3.405l.87 1.662 1.109.475 1.82-.554 2.376 2.375-.555 1.9.476 1.109 1.662.87zm-4.1 5.112.825-2.025L23 17.25v-1.5l-1.2-.6-.825-2.025.375-1.35-1.05-1.05-1.35.375-2.025-.825L16.25 9h-1.5l-.6 1.2-2.025.825-1.35-.375-1.05 1.05.375 1.35-.825 2.025L8 15.75v1.5l1.2.6.825 2.025-.375 1.35 1.05 1.05 1.35-.375 2.025.825L14.75 24h1.5l.6-1.2 2.025-.825 1.35.375 1.05-1.05-.375-1.35z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  class="sc-d47d8018-2 eBZhiP"
-                >
-                  <div
-                    class="sc-d47d8018-3 cAXyng"
-                  >
-                    <h3
-                      class="sc-d47d8018-5 jNRMjT"
-                    >
-                      <a
-                        href="modeles-de-courriers/demande-de-rendez-vous-en-vue-dune-rupture-conventionnelle"
-                      >
-                        Demande de rendez-vous en vue d’une rupture conventionnelle
-                      </a>
-                    </h3>
-                  </div>
-                </div>
-                <div
-                  class="sc-d47d8018-6 ipSAXR"
-                >
-                  La rupture conventionnelle individuelle est une modalité de rupture spécifique du CDI. Elle nécessite le consentement de l’employeur et du salarié, et son homologation…
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </main>
-    <div
-      class="sc-ca359f9a-1 dcifuB"
-    >
-      <footer
-        class="sc-ca359f9a-2 itkhox"
-      >
-        <div
-          class="sc-a384ed57-0 iEQrzr sc-ca359f9a-3 kxOhzT"
-        >
-          <div
-            class="sc-d8f596bd-0 jtWYDW"
-          >
-            <div
-              aria-level="2"
-              class="sc-e32628d4-0 fQeCjG"
-              role="heading"
-            >
-              <p
-                class="sc-d6e72754-0 gvSeXc"
-              >
-                <span
-                  class="sc-a4d7a179-0 jRxkkJ"
-                />
-                Besoin de plus d’informations ?
-              </p>
-            </div>
-            <div
-              class="sc-d8f596bd-0 sc-ca359f9a-4 jMrYSO hlhfYQ"
-            >
-              <p>
-                Les services du ministère du Travail en région informent, conseillent et orientent les salariés et les employeurs du secteur privé sur leurs questions en droit du travail.
-              </p>
-            </div>
-            <button
-              class="sc-95bd4344-0 dqVtzj"
-            >
-              Contacter nos services en région
-              <svg
-                aria-hidden="true"
-                class="sc-ca359f9a-5 fsVgvL"
-                fill="none"
-                viewBox="0 0 28 15"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m27.875 7.153-6-6.284a.526.526 0 0 0-.711-.023.496.496 0 0 0-.024.688l5.204 5.468H.5c-.276 0-.5.217-.5.484s.224.483.5.483h25.844l-5.204 5.469a.493.493 0 0 0 .024.687.52.52 0 0 0 .711-.023l6-6.284a.506.506 0 0 0 0-.665z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="sc-a384ed57-0 iEQrzr sc-ca359f9a-6 fxAVmP"
-        >
-          <div
-            class="sc-d8f596bd-0 sc-ca359f9a-7 jtWYDW ehsFea"
-          >
-            <div
-              class="sc-ca359f9a-0 eCLRAV"
-            >
-              <div>
-                <strong
-                  aria-level="2"
-                  class="sc-ca359f9a-9 dTzxFA sc-b879fc2d-0 dSFUuf"
-                  role="heading"
-                >
-                  Code du travail numérique
-                </strong>
-                <ul
-                  class="sc-ab356c14-0 sc-ca359f9a-8 bpNHPl bzviQm"
-                >
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/droit-du-travail"
-                    >
-                      Le droit du travail
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/glossaire"
-                    >
-                      Glossaire
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/a-propos"
-                    >
-                      À propos
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/stats"
-                    >
-                      Statistiques d’utilisation
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/integration"
-                    >
-                      Intégrer les outils du Code du travail numérique
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <div
-              class="sc-ca359f9a-0 eCLRAV"
-            >
-              <div>
-                <strong
-                  aria-level="2"
-                  class="sc-ca359f9a-9 dTzxFA sc-b879fc2d-0 dSFUuf"
-                  role="heading"
-                >
-                  Outils populaires
-                </strong>
-                <ul
-                  class="sc-ab356c14-0 sc-ca359f9a-8 bpNHPl bzviQm"
-                >
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/outils/simulateur-embauche"
-                    >
-                      Calcul du salaire brut/net
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/outils/indemnite-rupture-conventionnelle"
-                    >
-                      Calcul de l'indemnité de rupture conventionnelle
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/outils/convention-collective"
-                    >
-                      Trouver sa convention collective
-                    </a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <strong
-                  aria-level="2"
-                  class="sc-ca359f9a-9 dTzxFA sc-b879fc2d-0 dSFUuf"
-                  role="heading"
-                >
-                  Modèles populaires
-                </strong>
-                <ul
-                  class="sc-ab356c14-0 sc-ca359f9a-8 bpNHPl bzviQm"
-                >
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/modeles-de-courriers/lettre-de-demission"
-                    >
-                      Lettre de démission
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/modeles-de-courriers/rupture-du-contrat-en-periode-dessai-par-le-salarie"
-                    >
-                      Rupture du contrat en période d'essai par le salarié
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/modeles-de-courriers/convocation-a-un-entretien-prealable-au-licenciement-pour-motif-personnel"
-                    >
-                      Convocation à un entretien préalable au licenciement pour motif personnel
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <div
-              class="sc-ca359f9a-0 eCLRAV"
-            >
-              <div>
-                <strong
-                  aria-level="2"
-                  class="sc-ca359f9a-9 dTzxFA sc-b879fc2d-0 dSFUuf"
-                  role="heading"
-                >
-                  Fiches pratiques populaires
-                </strong>
-                <ul
-                  class="sc-ab356c14-0 sc-ca359f9a-8 bpNHPl bzviQm"
-                >
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/contribution/quelle-est-la-duree-du-preavis-en-cas-de-demission"
-                    >
-                      Durée du préavis de démission
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/contribution/les-conges-pour-evenements-familiaux"
-                    >
-                      Congés pour événements familiaux
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/contribution/en-cas-darret-maladie-du-salarie-lemployeur-doit-il-assurer-le-maintien-de-salaire"
-                    >
-                      Maintien du salaire en cas d'arrêt maladie
-                    </a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <strong
-                  aria-level="2"
-                  class="sc-ca359f9a-9 dTzxFA sc-b879fc2d-0 dSFUuf"
-                  role="heading"
-                >
-                  Conventions collectives populaires
-                </strong>
-                <ul
-                  class="sc-ab356c14-0 sc-ca359f9a-8 bpNHPl bzviQm"
-                >
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/convention-collective/1090-services-de-lautomobile-commerce-et-reparation-de-lautomobile-du-cycle"
-                    >
-                      Services de l'automobile
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/convention-collective/3248-metallurgie"
-                    >
-                      Métallurgie
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="sc-ca359f9a-10 lltQxH"
-                      href="/convention-collective/573-commerces-de-gros"
-                    >
-                      Commerce de gros
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="sc-d8f596bd-0 sc-d2f8e86a-0 jtWYDW gLHwsT"
-        >
-          <div
-            class="sc-d2f8e86a-1 ipUnWt"
-          >
-            <img
-              alt="le site du ministere du travail, de l'emploi et de l'insertion"
-              data-nimg="1"
-              decoding="async"
-              height="141"
-              loading="lazy"
-              src="/static/assets/img/ministere_logo.svg"
-              style="color: transparent;"
-              width="170"
-            />
-            <ul
-              class="sc-d2f8e86a-2 gHNrXP"
-            >
-              <li>
-                <a
-                  href="https://travail-emploi.gouv.fr"
-                >
-                  travail-emploi.gouv.fr
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.info.gouv.fr"
-                >
-                  info.gouv.fr
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.service-public.fr"
-                >
-                  service-public.fr
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.legifrance.gouv.fr"
-                >
-                  legifrance.gouv.fr
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.data.gouv.fr"
-                >
-                  data.gouv.fr
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="sc-d2f8e86a-5 btMldF"
-          />
-          <div
-            class="sc-d2f8e86a-3 bKRwPr"
-          >
-            <ul
-              class="sc-d2f8e86a-2 sc-d2f8e86a-4 gHNrXP eyROlo"
-            >
-              <li>
-                <a
-                  href="/mentions-legales"
-                >
-                  Mentions légales
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/accessibilite"
-                >
-                  Accessibilité : partiellement conforme
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/politique-confidentialite"
-                >
-                  Politique de confidentialité
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/plan-du-site"
-                >
-                  Plan du site
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/SocialGouv/code-du-travail-numerique/tree/vvX.Y.Z"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Contribuer sur Github
-                </a>
-              </li>
-              <li>
-                <a
-                  aria-label="Nous contacter"
-                  class="sc-d2f8e86a-6 ffdiGN"
-                  role="link"
-                >
-                  Nous contacter
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </footer>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/code-du-travail-frontend/__tests__/modeles-de-courriers.test.tsx b/packages/code-du-travail-frontend/__tests__/modeles-de-courriers.test.tsx
deleted file mode 100644
index d08827a6df2..00000000000
--- a/packages/code-du-travail-frontend/__tests__/modeles-de-courriers.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-
-import ModelesDeCourriers from "../pages/modeles-de-courriers/index";
-
-describe("<ModelesDeCourriers />", () => {
-  it("should render", () => {
-    const data = [
-      {
-        breadcrumbs: [
-          {
-            label: "Embauche et contrat de travail",
-            slug: "/themes/1-embauche-et-contrat-de-travail",
-          },
-          {
-            label: "Embauche",
-            slug: "/themes/11-embauche",
-          },
-          {
-            label: "Période d'essai",
-            slug: "/themes/113-periode-dessai",
-          },
-        ],
-        description:
-          "Pendant la période d’essai, le contrat de travail peut être rompu librement par l'employeur. L'employeur doit dans ce cas informer le salarié et respecter un délai de prévenance.",
-        slug: "rupture-de-periode-dessai-a-linitiative-de-lemployeur",
-        source: "modeles_de_courriers",
-        title: "Rupture de période d’essai à l'initiative de l'employeur",
-      },
-      {
-        breadcrumbs: [
-          {
-            label: "Départ de l'entreprise",
-            slug: "/themes/8-depart-de-lentreprise",
-          },
-          {
-            label: "Rupture conventionnelle",
-            slug: "/themes/83-rupture-conventionnelle",
-          },
-          {
-            label: "Rupture conventionnelle individuelle",
-            slug: "/themes/831-rupture-conventionnelle-individuelle",
-          },
-        ],
-        description:
-          "La rupture conventionnelle individuelle est une modalité de rupture spécifique du CDI. Elle nécessite le consentement de l’employeur et du salarié, et son homologation par l’administration. La rupture ouvre droit à une indemnité de rupture conventionnelle. Ce modèle permet d’initier la procédure de rupture par l’invitation à un premier entretien.",
-        slug: "demande-de-rendez-vous-en-vue-dune-rupture-conventionnelle",
-        source: "modeles_de_courriers",
-        title: "Demande de rendez-vous en vue d’une rupture conventionnelle",
-      },
-    ];
-    const { container } = render(<ModelesDeCourriers data={data} />);
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/packages/code-du-travail-frontend/app/modeles-de-courriers/page.tsx b/packages/code-du-travail-frontend/app/modeles-de-courriers/page.tsx
new file mode 100644
index 00000000000..942f6235aac
--- /dev/null
+++ b/packages/code-du-travail-frontend/app/modeles-de-courriers/page.tsx
@@ -0,0 +1,37 @@
+import { DsfrLayout } from "../../src/modules/layout";
+import { generateDefaultMetadata } from "../../src/modules/common/metas";
+import {
+  fetchModels,
+  formatByRootTheme,
+  LetterModels,
+} from "../../src/modules/modeles-de-courriers";
+
+export const metadata = generateDefaultMetadata({
+  title: "Modèles de documents",
+  description:
+    "Téléchargez et personnalisez les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail",
+  path: "/modeles-de-courriers",
+});
+
+async function Index() {
+  const modeles = await getModeles();
+
+  return (
+    <DsfrLayout>
+      <LetterModels modeles={modeles} />
+    </DsfrLayout>
+  );
+}
+
+const getModeles = async () => {
+  const themes = await fetchModels([
+    "title",
+    "slug",
+    "description",
+    "breadcrumbs",
+  ]);
+
+  return formatByRootTheme(themes);
+};
+
+export default Index;
diff --git a/packages/code-du-travail-frontend/cypress/integration/light/modeles.spec.ts b/packages/code-du-travail-frontend/cypress/integration/light/modeles.spec.ts
index 60a450df824..b7498a444b1 100644
--- a/packages/code-du-travail-frontend/cypress/integration/light/modeles.spec.ts
+++ b/packages/code-du-travail-frontend/cypress/integration/light/modeles.spec.ts
@@ -1,6 +1,15 @@
 describe("Modèles de documents", () => {
   it("liste les modèles", () => {
     cy.visit("/modeles-de-courriers");
+    cy.isIndexable();
+    cy.canonicalUrlEqual("/modeles-de-courriers");
+    cy.titleAndMetaDescriptionEqual(
+      "Modèles de documents - Code du travail numérique",
+      "Téléchargez et personnalisez les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail"
+    );
+    cy.findByRole("heading", { level: 1 })
+      .should("have.text", "Modèles de documents")
+      .click();
 
     cy.contains("Rupture du contrat en période d’essai par le salarié").click();
 
diff --git a/packages/code-du-travail-frontend/pages/modeles-de-courriers/index.tsx b/packages/code-du-travail-frontend/pages/modeles-de-courriers/index.tsx
deleted file mode 100644
index bab9c0963a3..00000000000
--- a/packages/code-du-travail-frontend/pages/modeles-de-courriers/index.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
-import {
-  Container,
-  FlatList,
-  Heading,
-  PageTitle,
-  Section,
-  Select,
-  theme as th,
-} from "@socialgouv/cdtn-ui";
-import React, { useCallback, useState } from "react";
-import styled from "styled-components";
-
-import Metas from "../../src/common/Metas";
-import { Layout } from "../../src/layout/Layout";
-import { summarize } from "../../src/search/utils";
-import { REVALIDATE_TIME } from "../../src/config";
-import { LinkedTile } from "../../src/common/tiles/LinkedTile";
-import { getAllModeles } from "../../src/api";
-
-const title = "Modèles de documents";
-const subtitle =
-  "Téléchargez et personnalisez les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail";
-
-function Modeles(props) {
-  const { data = [] } = props;
-  const themes: any = [];
-  const modelesByTheme = data.reduce((state, templateDoc) => {
-    const other = {
-      label: "Autres",
-      slug: "autres",
-      title: "Autres",
-    };
-    const [theme = other] = templateDoc.breadcrumbs;
-    if (!state[theme.slug]) {
-      state[theme.slug] = {
-        items: [],
-        title: theme.label,
-      };
-      themes.push(theme);
-    }
-    state[theme.slug].items.push(templateDoc);
-    return state;
-  }, {});
-
-  const [selectedTheme, setSelectedTheme] = useState("all");
-  const [documents, setDocuments] = useState(modelesByTheme);
-  const selectThemeHandler = useCallback(
-    (event) => {
-      const themeSlug = event.target.value;
-      setSelectedTheme(event.target.value);
-      if (themeSlug === "all") {
-        setDocuments(modelesByTheme);
-      } else {
-        setDocuments({ [themeSlug]: modelesByTheme[themeSlug] });
-      }
-    },
-    [modelesByTheme, setDocuments, setSelectedTheme]
-  );
-  return (
-    <Layout currentPage={SOURCES.LETTERS}>
-      <Metas title={title} description={subtitle} />
-      <Section>
-        <Container narrow>
-          <PageTitle subtitle={subtitle}>{title}</PageTitle>
-          <LargeSelect value={selectedTheme} onChange={selectThemeHandler}>
-            {themes &&
-              [
-                <option key="all" value="all">
-                  Tous les thèmes
-                </option>,
-              ].concat(
-                themes.map(({ label, slug }) => (
-                  <option key={slug} value={slug}>
-                    {label}
-                  </option>
-                ))
-              )}
-          </LargeSelect>
-          <StyledList>
-            {Object.values(documents).map(({ title, items }: any) => (
-              <React.Fragment key={title}>
-                <Heading as={HeadingBlue}>{title}</Heading>
-                {items.map(({ description, slug, title }) => (
-                  <StyledListItem key={slug}>
-                    <LinkedTile
-                      wide
-                      custom
-                      title={title}
-                      titleTagType="h3"
-                      href={`${getRouteBySource(SOURCES.LETTERS)}/${slug}`}
-                    >
-                      {summarize(description)}
-                    </LinkedTile>
-                  </StyledListItem>
-                ))}
-              </React.Fragment>
-            ))}
-          </StyledList>
-        </Container>
-      </Section>
-    </Layout>
-  );
-}
-
-export async function getStaticProps() {
-  try {
-    const data = await getAllModeles();
-    return { props: { data }, revalidate: REVALIDATE_TIME };
-  } catch (error) {
-    console.error(error);
-    return { props: { data: [] }, revalidate: REVALIDATE_TIME };
-  }
-}
-
-const { spacings } = th;
-
-const StyledList = styled(FlatList)`
-  margin: ${spacings.small} 0;
-`;
-
-const StyledListItem = styled.li`
-  margin-bottom: ${spacings.medium};
-`;
-
-const LargeSelect = styled(Select)`
-  width: 100%;
-`;
-const HeadingBlue = styled.h2`
-  color: ${({ theme }) => theme.secondary};
-`;
-export default Modeles;
diff --git a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/modeles.tsx b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/LetterModel.tsx
similarity index 100%
rename from packages/code-du-travail-frontend/src/modules/modeles-de-courriers/modeles.tsx
rename to packages/code-du-travail-frontend/src/modules/modeles-de-courriers/LetterModel.tsx
diff --git a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/LetterModels.tsx b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/LetterModels.tsx
new file mode 100644
index 00000000000..139fc571b54
--- /dev/null
+++ b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/LetterModels.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { fr } from "@codegouvfr/react-dsfr";
+import React, { useState } from "react";
+import { ContainerList } from "../layout/ContainerList";
+import { css } from "@styled-system/css";
+import Card from "@codegouvfr/react-dsfr/Card";
+import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
+import { summarize } from "../utils";
+import { ModelDescriptionByRootTheme } from "./queries";
+import Select from "@codegouvfr/react-dsfr/Select";
+
+type Props = {
+  modeles: ModelDescriptionByRootTheme;
+};
+
+export const LetterModels = ({ modeles }: Props) => {
+  const [selectedTheme, setTheme] = useState<string>("");
+
+  return (
+    <ContainerList title="Modèles de documents" segments={[]}>
+      <h1 id="modeles" className={fr.cx("fr-mt-0", "fr-mb-6w")}>
+        Modèles de documents
+      </h1>
+
+      <p className={fr.cx("fr-text--md")}>
+        Téléchargez et personnalisez les modèles de documents et de lettres pour
+        vos démarches en lien avec le droit du travail
+      </p>
+
+      <Select
+        className={`${fr.cx("fr-mt-6w")} ${list}`}
+        label="Sélectionnez un thème"
+        nativeSelectProps={{
+          onChange: (event) => setTheme(event.target.value),
+          value: selectedTheme,
+        }}
+      >
+        <option value="">Tous les thèmes</option>
+        {modeles.map(({ theme }) => (
+          <option key={theme} value={theme}>
+            {theme}
+          </option>
+        ))}
+      </Select>
+
+      {modeles
+        .filter(
+          (theme) => selectedTheme === "" || theme.theme === selectedTheme
+        )
+        .map(({ theme, modeles }) => {
+          return (
+            <>
+              <h2 className={fr.cx("fr-mt-6w", "fr-h3")}>{theme}</h2>
+              <ul
+                className={`${fr.cx(
+                  "fr-grid-row",
+                  "fr-grid-row--gutters",
+                  "fr-grid-row--left"
+                )}`}
+              >
+                {modeles.map((model) => (
+                  <li
+                    key={model.slug}
+                    className={`${fr.cx(
+                      "fr-col-12",
+                      "fr-col-sm-12",
+                      "fr-col-md-6",
+                      "fr-col-lg-6"
+                    )} ${li}`}
+                  >
+                    <Card
+                      border
+                      desc={summarize(model.description)}
+                      horizontal
+                      linkProps={{
+                        href: `/${getRouteBySource(SOURCES.LETTERS)}/${model.slug}`,
+                      }}
+                      size="medium"
+                      title={model.title}
+                      titleAs="h3"
+                      enlargeLink
+                      classes={{
+                        // Hack: start div is render and take some place
+                        start: fr.cx("fr-hidden"),
+                      }}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </>
+          );
+        })}
+    </ContainerList>
+  );
+};
+
+const li = css({
+  listStyle: "none!",
+});
+
+const list = css({
+  maxWidth: 500,
+});
diff --git a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/LetterModels.test.tsx b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/LetterModels.test.tsx
new file mode 100644
index 00000000000..5f1ec6bf92d
--- /dev/null
+++ b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/LetterModels.test.tsx
@@ -0,0 +1,93 @@
+import { getAllByRole, getByLabelText, render } from "@testing-library/react";
+import { LetterModels } from "../LetterModels";
+import { ModelDescriptionByRootTheme } from "../queries";
+import userEvent from "@testing-library/user-event";
+
+const modeles: ModelDescriptionByRootTheme = [
+  {
+    theme: "Thème A",
+    modeles: [
+      {
+        title: "Modele AA",
+        slug: "modele-aa",
+        description: "Description modèle AA",
+        breadcrumbs: [
+          {
+            label: "Theme A",
+            slug: "theme-a",
+            position: 0,
+          },
+        ],
+      },
+      {
+        title: "Modele AB",
+        slug: "modele-ab",
+        description: "Description modèle AB",
+        breadcrumbs: [
+          {
+            label: "Theme A",
+            slug: "theme-a",
+            position: 0,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    theme: "Thème B",
+    modeles: [
+      {
+        title: "Modele BA",
+        slug: "modele-ba",
+        description: "Description modèle BA",
+        breadcrumbs: [
+          {
+            label: "Theme B",
+            slug: "theme-b",
+            position: 0,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+describe("<LetterModels />", () => {
+  it("affiche la liste des modèles de document", () => {
+    const { container, getByLabelText } = render(
+      <LetterModels modeles={modeles} />
+    );
+    const selectThemes = getByLabelText("Sélectionnez un thème");
+    expect(selectThemes).toBeInTheDocument();
+    const themeOptions = getAllByRole(selectThemes, "option");
+    expect(themeOptions).toHaveLength(3);
+    expect(themeOptions[0]).toHaveTextContent("Tous les thèmes");
+    expect(themeOptions[1]).toHaveTextContent("Thème A");
+    expect(themeOptions[2]).toHaveTextContent("Thème B");
+    expect(container).toMatchSnapshot();
+  });
+  it("filtre sur le thème sélectionné", () => {
+    const { getAllByRole, getByLabelText } = render(
+      <LetterModels modeles={modeles} />
+    );
+
+    const themes = getAllByRole("heading", { level: 2 });
+    expect(themes).toHaveLength(2);
+    expect(themes[0]).toHaveTextContent("Thème A");
+    expect(themes[1]).toHaveTextContent("Thème B");
+    const documents = getAllByRole("heading", { level: 3 });
+    expect(documents).toHaveLength(3);
+    expect(documents[0]).toHaveTextContent("Modele AA");
+    expect(documents[1]).toHaveTextContent("Modele AB");
+    expect(documents[2]).toHaveTextContent("Modele BA");
+
+    const selectThemes = getByLabelText("Sélectionnez un thème");
+    userEvent.selectOptions(selectThemes, "Thème B");
+    const themesFiltered = getAllByRole("heading", { level: 2 });
+    expect(themesFiltered).toHaveLength(1);
+    expect(themesFiltered[0]).toHaveTextContent("Thème B");
+    const documentsFiltered = getAllByRole("heading", { level: 3 });
+    expect(documentsFiltered).toHaveLength(1);
+    expect(documentsFiltered[0]).toHaveTextContent("Modele BA");
+  });
+});
diff --git a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/__snapshots__/LetterModels.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/__snapshots__/LetterModels.test.tsx.snap
new file mode 100644
index 00000000000..5618383a492
--- /dev/null
+++ b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/__snapshots__/LetterModels.test.tsx.snap
@@ -0,0 +1,233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LetterModels /> affiche la liste des modèles de document 1`] = `
+<div>
+  <div
+    class="fr-grid-row"
+  >
+    <nav
+      aria-label="vous êtes ici :"
+      class="fr-breadcrumb fr-mb-2v"
+      id="fr-breadcrumb-:r0:"
+      role="navigation"
+    >
+      <button
+        aria-controls="breadcrumb-:r1:"
+        aria-expanded="false"
+        class="fr-breadcrumb__button"
+      >
+        Voir le fil d’Ariane
+      </button>
+      <div
+        class="fr-collapse"
+        id="breadcrumb-:r1:"
+      >
+        <ol
+          class="fr-breadcrumb__list"
+        >
+          <li>
+            <a
+              class="fr-breadcrumb__link"
+              href="/"
+            >
+              Accueil
+            </a>
+          </li>
+          <li>
+            <a
+              aria-current="page"
+              class="fr-breadcrumb__link"
+            >
+              Modèles de documents
+            </a>
+          </li>
+        </ol>
+      </div>
+    </nav>
+    <div
+      class="fr-col-12 fr-mb-4w fr-mb-md-12w"
+    >
+      <h1
+        class="fr-mt-0 fr-mb-6w"
+        id="modeles"
+      >
+        Modèles de documents
+      </h1>
+      <p
+        class="fr-text--md"
+      >
+        Téléchargez et personnalisez les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail
+      </p>
+      <div
+        class="fr-select-group fr-mt-6w max-w_500"
+        id="fr-select-group-:r2:"
+      >
+        <label
+          class="fr-label"
+          for="select-:r3:"
+        >
+          Sélectionnez un thème
+        </label>
+        <select
+          aria-describedby="select-:r4:-desc"
+          class="fr-select"
+          id="select-:r3:"
+        >
+          <option
+            value=""
+          >
+            Tous les thèmes
+          </option>
+          <option
+            value="Thème A"
+          >
+            Thème A
+          </option>
+          <option
+            value="Thème B"
+          >
+            Thème B
+          </option>
+        </select>
+        <div
+          aria-live="polite"
+          class="fr-messages-group"
+          id="select-:r3:-messages-group"
+        />
+      </div>
+      <h2
+        class="fr-mt-6w fr-h3"
+      >
+        Thème A
+      </h2>
+      <ul
+        class="fr-grid-row fr-grid-row--gutters fr-grid-row--left"
+      >
+        <li
+          class="fr-col-12 fr-col-sm-12 fr-col-md-6 fr-col-lg-6 li-s_none!"
+        >
+          <div
+            class="fr-card fr-enlarge-link fr-card--horizontal"
+            id="fr-card-:r5:"
+          >
+            <div
+              class="fr-card__body"
+            >
+              <div
+                class="fr-card__content"
+              >
+                <h3
+                  class="fr-card__title"
+                >
+                  <a
+                    class=""
+                    href="/modeles-de-courriers/modele-aa"
+                  >
+                    Modele AA
+                  </a>
+                </h3>
+                <p
+                  class="fr-card__desc"
+                >
+                  Description modèle AA
+                </p>
+                <div
+                  class="fr-card__start fr-hidden"
+                />
+                <div
+                  class="fr-card__end"
+                />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li
+          class="fr-col-12 fr-col-sm-12 fr-col-md-6 fr-col-lg-6 li-s_none!"
+        >
+          <div
+            class="fr-card fr-enlarge-link fr-card--horizontal"
+            id="fr-card-:r6:"
+          >
+            <div
+              class="fr-card__body"
+            >
+              <div
+                class="fr-card__content"
+              >
+                <h3
+                  class="fr-card__title"
+                >
+                  <a
+                    class=""
+                    href="/modeles-de-courriers/modele-ab"
+                  >
+                    Modele AB
+                  </a>
+                </h3>
+                <p
+                  class="fr-card__desc"
+                >
+                  Description modèle AB
+                </p>
+                <div
+                  class="fr-card__start fr-hidden"
+                />
+                <div
+                  class="fr-card__end"
+                />
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+      <h2
+        class="fr-mt-6w fr-h3"
+      >
+        Thème B
+      </h2>
+      <ul
+        class="fr-grid-row fr-grid-row--gutters fr-grid-row--left"
+      >
+        <li
+          class="fr-col-12 fr-col-sm-12 fr-col-md-6 fr-col-lg-6 li-s_none!"
+        >
+          <div
+            class="fr-card fr-enlarge-link fr-card--horizontal"
+            id="fr-card-:r7:"
+          >
+            <div
+              class="fr-card__body"
+            >
+              <div
+                class="fr-card__content"
+              >
+                <h3
+                  class="fr-card__title"
+                >
+                  <a
+                    class=""
+                    href="/modeles-de-courriers/modele-ba"
+                  >
+                    Modele BA
+                  </a>
+                </h3>
+                <p
+                  class="fr-card__desc"
+                >
+                  Description modèle BA
+                </p>
+                <div
+                  class="fr-card__start fr-hidden"
+                />
+                <div
+                  class="fr-card__end"
+                />
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/modeles.test.tsx b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/modeles.test.tsx
index c43c1004f36..6a2ffca2938 100644
--- a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/modeles.test.tsx
+++ b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/modeles.test.tsx
@@ -1,6 +1,6 @@
 import { push as matopush } from "@socialgouv/matomo-next";
 import { fireEvent, render } from "@testing-library/react";
-import { LetterModel } from "../modeles";
+import { LetterModel } from "../LetterModel";
 
 jest.mock("@socialgouv/matomo-next", () => {
   return {
diff --git a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/index.ts b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/index.ts
index 0920a3aca66..ac9eb5db445 100644
--- a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/index.ts
+++ b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/index.ts
@@ -1,3 +1,4 @@
 export * from "./queries";
-export * from "./modeles";
+export * from "./LetterModel";
+export * from "./LetterModels";
 export * from "./helpers";
diff --git a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/queries.ts b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/queries.ts
index c2410c695bb..48528dc2441 100644
--- a/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/queries.ts
+++ b/packages/code-du-travail-frontend/src/modules/modeles-de-courriers/queries.ts
@@ -92,3 +92,35 @@ export const fetchModel = async <
 
   return format(model);
 };
+
+export type ModelDescription = Pick<
+  DocumentElasticResult<DocumentElasticWithSource<MailTemplateDoc>>,
+  "slug" | "title" | "description" | "breadcrumbs"
+>;
+export type ThemeModelDescription = {
+  theme: string;
+  modeles: ModelDescription[];
+};
+export type ModelDescriptionByRootTheme = ThemeModelDescription[];
+
+export const formatByRootTheme = (
+  models: ModelDescription[]
+): ModelDescriptionByRootTheme => {
+  const groupBy = <T, K extends keyof any>(arr: T[], key: (i: T) => K) =>
+    arr.reduce(
+      (groups, item) => {
+        (groups[key(item)] ||= []).push(item);
+        return groups;
+      },
+      {} as Record<K, T[]>
+    );
+  const data = groupBy(models, (model) => {
+    return model.breadcrumbs && model.breadcrumbs.length > 0
+      ? model.breadcrumbs[0].label
+      : "Autre";
+  });
+  return Object.keys(data).map((theme) => ({
+    theme,
+    modeles: data[theme],
+  }));
+};


Reviews:
user: login: Viczei
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-17T13:33:57Z
user: login: Viczei
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-17T13:34:20Z
user: login: m-maillot
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-17T14:18:04Z

Review comments:
diff_hunk: @@ -0,0 +1,93 @@
+import { getAllByRole, getByLabelText, render } from "@testing-library/react";
+import { LetterModels } from "../LetterModels";
+import { ModelDescriptionByRootTheme } from "../queries";
+import userEvent from "@testing-library/user-event";
+
+const modeles: ModelDescriptionByRootTheme = [
+  {
+    theme: "Thème A",
+    modeles: [
+      {
+        title: "Modele AA",
+        slug: "modele-aa",
+        description: "Description modèle AA",
+        breadcrumbs: [
+          {
+            label: "Theme A",
+            slug: "theme-a",
+            position: 0,
+          },
+        ],
+      },
+      {
+        title: "Modele AB",
+        slug: "modele-ab",
+        description: "Description modèle AB",
+        breadcrumbs: [
+          {
+            label: "Theme A",
+            slug: "theme-a",
+            position: 0,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    theme: "Thème B",
+    modeles: [
+      {
+        title: "Modele BA",
+        slug: "modele-ba",
+        description: "Description modèle BA",
+        breadcrumbs: [
+          {
+            label: "Theme B",
+            slug: "theme-b",
+            position: 0,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+describe("<LetterModels />", () => {
+  it("affiche la liste des modèles de document", () => {
+    const { container, getByLabelText } = render(
+      <LetterModels modeles={modeles} />
+    );
+    const selectThemes = getByLabelText("Sélectionnez un thème");
+    expect(selectThemes).toBeInTheDocument();
+    const themeOptions = getAllByRole(selectThemes, "option");
+    expect(themeOptions).toHaveLength(3);
+    expect(themeOptions[0]).toHaveTextContent("Tous les thèmes");
+    expect(themeOptions[1]).toHaveTextContent("Thème A");
+    expect(themeOptions[2]).toHaveTextContent("Thème B");
+    expect(container).toMatchSnapshot();
path: packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/LetterModels.test.tsx
user: login: Viczei
body: Est-ce que l'on veut vraiment garder les tests snapshots ?
created_at: 2025-04-17T13:33:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,93 @@
+import { getAllByRole, getByLabelText, render } from "@testing-library/react";
+import { LetterModels } from "../LetterModels";
+import { ModelDescriptionByRootTheme } from "../queries";
+import userEvent from "@testing-library/user-event";
+
+const modeles: ModelDescriptionByRootTheme = [
+  {
+    theme: "Thème A",
+    modeles: [
+      {
+        title: "Modele AA",
+        slug: "modele-aa",
+        description: "Description modèle AA",
+        breadcrumbs: [
+          {
+            label: "Theme A",
+            slug: "theme-a",
+            position: 0,
+          },
+        ],
+      },
+      {
+        title: "Modele AB",
+        slug: "modele-ab",
+        description: "Description modèle AB",
+        breadcrumbs: [
+          {
+            label: "Theme A",
+            slug: "theme-a",
+            position: 0,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    theme: "Thème B",
+    modeles: [
+      {
+        title: "Modele BA",
+        slug: "modele-ba",
+        description: "Description modèle BA",
+        breadcrumbs: [
+          {
+            label: "Theme B",
+            slug: "theme-b",
+            position: 0,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+describe("<LetterModels />", () => {
+  it("affiche la liste des modèles de document", () => {
+    const { container, getByLabelText } = render(
+      <LetterModels modeles={modeles} />
+    );
+    const selectThemes = getByLabelText("Sélectionnez un thème");
+    expect(selectThemes).toBeInTheDocument();
+    const themeOptions = getAllByRole(selectThemes, "option");
+    expect(themeOptions).toHaveLength(3);
+    expect(themeOptions[0]).toHaveTextContent("Tous les thèmes");
+    expect(themeOptions[1]).toHaveTextContent("Thème A");
+    expect(themeOptions[2]).toHaveTextContent("Thème B");
+    expect(container).toMatchSnapshot();
path: packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/LetterModels.test.tsx
user: login: m-maillot
body: Là je dois avouer que les tests me semblent assez complet. Mais comme on l'a fait pour chaque composant, j'ai gardé l'habitude. 
created_at: 2025-04-17T14:18:04Z
author_association: CONTRIBUTOR

PR comments:
user: login: tokenbureau[bot]
created_at: 2025-04-24T13:58:17Z
body: 🎉 Deployment for commit a3beaa85ebdd73a247456e72311e4484755d286a :

<details>
  <summary>Ingresses</summary>

 - 🚀 [https://code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7.ovh.fabrique.social.gouv.fr/](https://code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7.ovh.fabrique.social.gouv.fr/)

</details>

<details>
  <summary>Docker images</summary>

 - 📦 docker pull harbor.fabrique.social.gouv.fr/cdtn/code-du-travail-numerique/app:sha-a3beaa85ebdd73a247456e72311e4484755d286a

</details>

<details>
  <summary>Debug</summary>

 - [📕 Loki logs for namespace code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7](https://grafana-ovh.fabrique.social.gouv.fr/explore?orgId=1&left=%5B%22now-6h%22,%22now%22,%22Loki%22,%7B%22expr%22:%22%7Bnamespace%3D%5C%22code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7%5C%22%7D%22%7D%5D)
 - [📈 Pods monitoring for namespace code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7](https://grafana-ovh.fabrique.social.gouv.fr/d/a7df53d7-0696-4e00-821b-c56b66e5c20a/kubernetes-compute-resources-namespace-pods?orgId=1&refresh=10s&var-datasource=P5DCFC7561CCDE821&var-cluster=ovh-dev&var-namespace=code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7)
 - [📈 Workloads monitoring for namespace code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7](https://grafana-ovh.fabrique.social.gouv.fr/d/a164a7f0339f99e89cea5cb47e9be617V2/kubernetes-compute-resources-namespace-workloads?orgId=1&refresh=10s&var-datasource=eb239be0-0ac2-41d5-9e1a-061f951a07a3&var-cluster=ovh-dev&var-namespace=code-du-travail-numerique-feat-list-models-dsfr-4hp0x8c7&var-type=deployment)

</details>
<!-- Sticky Pull Request Comment -->
author_association: NONE