diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/.gitignore b/b2-cwd/integration/live/session4/accessibilite-couleurs/.gitignore
new file mode 100644
index 0000000..9d47c4b
--- /dev/null
+++ b/b2-cwd/integration/live/session4/accessibilite-couleurs/.gitignore
@@ -0,0 +1,2 @@
+*.map
+main.css
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/README.md b/b2-cwd/integration/live/session4/accessibilite-couleurs/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.svg b/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.svg
new file mode 100644
index 0000000..7df42ff
--- /dev/null
+++ b/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.svg
@@ -0,0 +1,19 @@
+
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.ttf b/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.ttf
new file mode 100644
index 0000000..b9e1a41
Binary files /dev/null and b/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.ttf differ
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.woff b/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.woff
new file mode 100644
index 0000000..f452b8e
Binary files /dev/null and b/b2-cwd/integration/live/session4/accessibilite-couleurs/fonts/icomoon.woff differ
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/index.html b/b2-cwd/integration/live/session4/accessibilite-couleurs/index.html
new file mode 100644
index 0000000..3f5866c
--- /dev/null
+++ b/b2-cwd/integration/live/session4/accessibilite-couleurs/index.html
@@ -0,0 +1,75 @@
+
+
+
+
+ Stocks
+
+
+
+
+
+ état des stocks
+
+
+ | produit | état du stock |
|---|
+
+
+
+ | café en grain |
+ haut |
+
+
+ | café soluble |
+ délais à prévoir |
+
+
+ | café moulu |
+ indisponible |
+
+
+
+
+
+
+
+ | produit | état du stock |
|---|
+
+
+
+ | café en grain |
+ haut |
+
+
+ | café soluble |
+ délais à prévoir |
+
+
+ | café moulu |
+ indisponible |
+
+
+
+
+
+
+
+ | produit | état du stock |
|---|
+
+
+
+ | café en grain |
+ haut |
+
+
+ | café soluble |
+ délais à prévoir |
+
+
+ | café moulu |
+ indisponible |
+
+
+
+
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/main.scss b/b2-cwd/integration/live/session4/accessibilite-couleurs/main.scss
new file mode 100644
index 0000000..9059139
--- /dev/null
+++ b/b2-cwd/integration/live/session4/accessibilite-couleurs/main.scss
@@ -0,0 +1,65 @@
+body
+{
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 14px;
+}
+
+.not-on-screen
+{
+ display: none;
+}
+
+th,td
+{
+ line-height: 22px;
+ border:solid 1px #ccc;
+ padding:5px;
+}
+
+i
+{
+ content:"\00a0";
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ border-radius: 20px;
+ font-size: 20px;
+ line-height: 1;
+ vertical-align: middle;
+ &.green
+ {
+ background-color:green;
+ }
+ &.red
+ {
+ background-color:red;
+ }
+ &.orange
+ {
+ background-color:orange;
+ }
+
+ &.icon-grin2
+ {
+ color:green;
+ }
+ &.icon-angry2, &.icon-blocked
+ {
+ color:red;
+ }
+ &.icon-confused2, &.icon-contrast
+ {
+ color:orange;
+ }
+
+}
+
+.right
+{
+ text-align: right;
+}
+
+.left
+{
+ text-align: left;
+}
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/sources/icomoon-v1.0.zip b/b2-cwd/integration/live/session4/accessibilite-couleurs/sources/icomoon-v1.0.zip
new file mode 100644
index 0000000..94e89c0
Binary files /dev/null and b/b2-cwd/integration/live/session4/accessibilite-couleurs/sources/icomoon-v1.0.zip differ
diff --git a/b2-cwd/integration/live/session4/accessibilite-couleurs/style.css b/b2-cwd/integration/live/session4/accessibilite-couleurs/style.css
new file mode 100644
index 0000000..b197dce
--- /dev/null
+++ b/b2-cwd/integration/live/session4/accessibilite-couleurs/style.css
@@ -0,0 +1,53 @@
+@font-face {
+ font-family: 'icomoon';
+ src:
+ url('fonts/icomoon.ttf?qrb5l6') format('truetype'),
+ url('fonts/icomoon.woff?qrb5l6') format('woff'),
+ url('fonts/icomoon.svg?qrb5l6#icomoon') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: 'icomoon' !important;
+ speak: never;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-contrast:before {
+ content: "\e9d5";
+}
+.icon-grin2:before {
+ content: "\e9ea";
+}
+.icon-angry2:before {
+ content: "\e9ee";
+}
+.icon-confused2:before {
+ content: "\e9f6";
+}
+.icon-neutral2:before {
+ content: "\e9f8";
+}
+.icon-notification:before {
+ content: "\ea08";
+}
+.icon-question:before {
+ content: "\ea09";
+}
+.icon-cancel-circle:before {
+ content: "\ea0d";
+}
+.icon-blocked:before {
+ content: "\ea0e";
+}