first commit

assets/scss/components/_rich-text.scss

@@ -0,0 +1,82 @@
+@use "../core/variables" as *;
+@use "../core/mixins" as *;
+
+// =============================================================
+// Contenu riche partagé
+// =============================================================
+// Exception assumée au BEM : le HTML interne est généré par Trumbowyg et
+// n'est pas entièrement piloté par les templates Twig. Les sélecteurs
+// descendants sont donc réservés à .rich-text et à .trumbowyg-editor.
+
+.rich-text,
+.trumbowyg-editor {
+    word-break: break-word;
+    overflow-wrap: break-word;
+
+    p, ul, ol, blockquote, pre {
+        margin: 0 0 $spacing-md;
+    }
+
+    ul, ol {
+        padding-left: 1.25rem;
+    }
+
+    blockquote {
+        margin-left: 0;
+        padding-left: $spacing-md;
+        border-left: 3px solid $color-border;
+        color: $color-text-muted;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+        border-radius: $radius-md;
+        margin: $spacing-sm 0;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: $spacing-md;
+    }
+
+    th, td {
+        border: 1px solid $color-border;
+        padding: $spacing-sm;
+        text-align: left;
+    }
+}
+
+.trumbowyg-box,
+.trumbowyg-editor,
+.trumbowyg-button-pane {
+    font: inherit;
+    font-weight: $font-weight-regular;
+}
+
+.trumbowyg-box,
+.trumbowyg-editor {
+    min-height: 300px;
+}
+
+.trumbowyg-box {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: $radius-md;
+
+    @include interactive-transition;
+
+    &:focus-within {
+        @include focus-ring;
+    }
+}
+
+.trumbowyg-button-pane button {
+    @include interactive-transition;
+
+    &:focus-visible {
+        outline: 2px solid $focus-ring-color;
+        outline-offset: 2px;
+    }
+}