diff --git a/b2-cwd/integration/live/session1et2/clock-demo-200px.png b/b2-cwd/integration/live/session1et2/clock-demo-200px.png
new file mode 100644
index 0000000..999ad52
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/clock-demo-200px.png differ
diff --git a/b2-cwd/integration/live/session1et2/css-et-selecteurs.txt b/b2-cwd/integration/live/session1et2/css-et-selecteurs.txt
new file mode 100644
index 0000000..2b4d657
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/css-et-selecteurs.txt
@@ -0,0 +1,36 @@
+.current
+{
+
+}
+
+#main-menu
+{
+
+}
+
+p
+{
+
+}
+
+h1
+{
+
+}
+
+https://www.w3schools.com/cssref/css_selectors.asp
+
+div > p
+{
+
+}
+
+.current + li
+{
+ background-color:blue;
+}
+
+.current ~ li
+{
+ background-color:red;
+}
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/desktop.scss b/b2-cwd/integration/live/session1et2/desktop.scss
new file mode 100644
index 0000000..b7a1808
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/desktop.scss
@@ -0,0 +1,23 @@
+
+ #main-menu
+ {
+ .menu-label
+ {
+ display:none;
+ }
+ ul
+ {
+ display:block;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ padding-inline-start: 0px;
+ margin:0px;
+ li
+ {
+ display:inline-block;
+ width:24%;
+ }
+ }
+ }
diff --git a/b2-cwd/integration/live/session1et2/espresso-desktop-1.jpg b/b2-cwd/integration/live/session1et2/espresso-desktop-1.jpg
new file mode 100644
index 0000000..a393c5a
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/espresso-desktop-1.jpg differ
diff --git a/b2-cwd/integration/live/session1et2/espresso-mobile-1.jpg b/b2-cwd/integration/live/session1et2/espresso-mobile-1.jpg
new file mode 100644
index 0000000..b07f131
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/espresso-mobile-1.jpg differ
diff --git a/b2-cwd/integration/live/session1et2/espresso-mobile-2.jpg b/b2-cwd/integration/live/session1et2/espresso-mobile-2.jpg
new file mode 100644
index 0000000..68dab56
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/espresso-mobile-2.jpg differ
diff --git a/b2-cwd/integration/live/session1et2/espresso-neg.jpg b/b2-cwd/integration/live/session1et2/espresso-neg.jpg
new file mode 100644
index 0000000..cea6e0c
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/espresso-neg.jpg differ
diff --git a/b2-cwd/integration/live/session1et2/espresso-opt.jpg b/b2-cwd/integration/live/session1et2/espresso-opt.jpg
new file mode 100644
index 0000000..cfe8fdb
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/espresso-opt.jpg differ
diff --git a/b2-cwd/integration/live/session1et2/espresso-vert.jpg b/b2-cwd/integration/live/session1et2/espresso-vert.jpg
new file mode 100644
index 0000000..94924d5
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/espresso-vert.jpg differ
diff --git a/b2-cwd/integration/live/session1et2/espresso.jpg b/b2-cwd/integration/live/session1et2/espresso.jpg
new file mode 100644
index 0000000..7514c96
Binary files /dev/null and b/b2-cwd/integration/live/session1et2/espresso.jpg differ
diff --git a/b2-cwd/integration/live/session1et2/img-switch.html b/b2-cwd/integration/live/session1et2/img-switch.html
new file mode 100644
index 0000000..37ec903
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/img-switch.html
@@ -0,0 +1,23 @@
+
+
+
+ test swicth img srcset
+
+
+
+
+
+
+
+
+
+
Positions
+
+ bouton
+ spa
+ aaa
+
+
+
+
+
mon contenu dskfh skdf kjshdkfh sjkdhfkjh skdf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+
+
+
mon contenu dskfh skdf kjshdkfh sjkdhfkjh skdf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+ dskf lksdfs dklf lsdlf sldkjf
+
+
ça dépasse
+ ça dépasse
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/position/style.scss b/b2-cwd/integration/live/session1et2/position/style.scss
new file mode 100644
index 0000000..ec09fcc
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/position/style.scss
@@ -0,0 +1,148 @@
+body
+{
+ margin:0;
+}
+.list
+{
+ padding:2px;
+ width:100%;
+}
+
+.list-item
+{
+ padding:2px;
+ width:100%;
+ margin:2px;
+ background-color:#ccc;
+ &:nth-child(2)
+ {
+ background-color:yellow;
+ }
+}
+
+.list-2 .list-item
+{
+ &:nth-child(2)
+ {
+ position:sticky;
+ top:20px;
+ }
+}
+
+.list-3
+{
+ position:relative;
+ .list-item
+ {
+ &:nth-child(2)
+ {
+ position:absolute;
+ top:20px;
+ background-color:red;
+ }
+ }
+}
+
+.list-1 .list-item
+{
+ &:nth-child(2)
+ {
+ position:relative;
+ top:10px;
+ left:10px;
+ }
+}
+
+.list-5
+{
+ margin:0;
+ padding:0;
+ .list-item
+ {
+ display: inline-block;
+ width: calc(25% - 4px);
+ margin: 0;
+ box-sizing: border-box;
+ padding: 5px;
+ border: solid 1px blue;
+ margin: 2px;
+ }
+}
+
+.box
+{
+ display:block;
+ background-color:#ccc;
+ position:absolute;
+ //top:-1000px;
+ left:0;
+}
+
+.box-2
+{
+ display:block;
+ background-color:#ccc;
+ position:fixed;
+ //top:-1000px;
+ left:230px;
+}
+
+.cols
+{
+ padding:2px;
+ background-color: blue;
+ //hack "clearfix"
+ display: table;
+ width: 100%;
+ box-sizing: border-box;
+ .col1
+ {
+ float:right;
+ background-color:yellow;
+ }
+ .col2
+ {
+ float:left;
+ background-color:green;
+ }
+}
+
+.button
+{
+ display:inline-block;
+ border:solid 1px blue;
+ color:blue;
+ background-color: white;
+ height:40px;
+ padding:0px 10px;
+ margin:2px;
+ line-height:40px;
+ box-sizing:border-box;
+}
+
+.conteneur
+{
+ height:30vh;
+ background-color:#ccc;
+ display:table-cell;
+ vertical-align:middle;
+ .contenu{
+ margin:5px;
+ background-color:white;
+ }
+}
+
+.conteneur-2
+{
+ border-top:1px solid black;
+ height:30vh;
+ background-color:#ccc;
+ position:relative;
+ .contenu{
+ position:absolute;
+ margin:5px;
+ background-color:white;
+ top:50%;
+ transform: translateY(-50%);
+ }
+}
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/print.css b/b2-cwd/integration/live/session1et2/print.css
new file mode 100644
index 0000000..39a403f
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/print.css
@@ -0,0 +1,4 @@
+#main-menu
+{
+ display: none!important;
+}
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/sass-test.html b/b2-cwd/integration/live/session1et2/sass-test.html
new file mode 100644
index 0000000..94550d1
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/sass-test.html
@@ -0,0 +1,24 @@
+
+
+
+ Titre
+ titre 1
+ titre 2
+ titre 3
+ titre 4
+ titre 5
+ titre 6
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/skeleton-all.html b/b2-cwd/integration/live/session1et2/skeleton-all.html
new file mode 100644
index 0000000..e15793c
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/skeleton-all.html
@@ -0,0 +1,38 @@
+
+
+
+ A hompage
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+ Lorem Ipsum has been the industry's standard dummy text
+ ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+
+ ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+
+
+
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/skeleton-full-final.html b/b2-cwd/integration/live/session1et2/skeleton-full-final.html
new file mode 100644
index 0000000..11f9957
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/skeleton-full-final.html
@@ -0,0 +1,41 @@
+
+
+
+ A hompage
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+ Lorem Ipsum has been the industry's standard dummy text
+ ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+
+ ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+
+
+
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/skeleton-full.html b/b2-cwd/integration/live/session1et2/skeleton-full.html
new file mode 100644
index 0000000..72b100d
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/skeleton-full.html
@@ -0,0 +1,47 @@
+
+
+
+ A hompage
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+ Lorem Ipsum has been the industry's standard dummy text
+ ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+
+ ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+
+
+
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/skeleton-minimal.html b/b2-cwd/integration/live/session1et2/skeleton-minimal.html
new file mode 100644
index 0000000..410c456
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/skeleton-minimal.html
@@ -0,0 +1,10 @@
+
+
+
+ Titre
+
+
+ contenu
+
+
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/style-all.scss b/b2-cwd/integration/live/session1et2/style-all.scss
new file mode 100644
index 0000000..45c1c47
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/style-all.scss
@@ -0,0 +1,151 @@
+$font : Arial, Helvetica, sans-serif;
+$normalfontsize : 12px;
+$marge : 8px;
+
+body
+{
+ font-family: $font;
+ font-size:$normalfontsize;
+}
+
+h4
+{
+ font-size:$normalfontsize + 2px;
+}
+
+body,figure,img
+{
+ padding:0;
+ border:none;
+ margin:0;
+}
+
+#switch:checked ~ p
+{
+ background-color:green;
+}
+
+img
+{
+ // avec interpolation
+ width:calc(100% - (#{$marge}*2));
+ height:auto;
+ margin:0 auto;
+}
+
+picture
+{
+ display:block;
+ max-height:40vh;
+ overflow:hidden;
+}
+
+#main-menu
+{
+ text-align:center;
+ ul
+ {
+ list-style:none;
+ }
+
+ li
+ {
+ text-align: left;
+ }
+
+ li a,
+ li span
+ {
+ color:black;
+ text-decoration:none;
+ font-size:1.1rem;
+ }
+
+ li span
+ {
+ color:#666;
+ }
+
+ .menu-label
+ {
+ font-size:1.5rem;
+ color:black;
+ text-decoration:none;
+ font-weight:bold;
+ display:inline-block;
+ line-height:2rem;
+ }
+}
+.burger
+{
+ float:left;
+ margin: 3px 8px;
+ .burger-line
+ {
+ display: block;
+ width: 20px;
+ }
+ .burger-line
+ {
+ height: 2px;
+ margin-bottom: 5px;
+ position: relative;
+ background: #000;
+ border-radius: 2px;
+ z-index: 1;
+ &:first-of-type
+ {
+ margin-top:5px;
+ }
+ }
+}
+
+#main-menu ul
+{
+ display:none;
+}
+
+main, h1
+{
+ margin:1rem;
+ padding:1rem;
+}
+
+#main-menu #switch:checked ~ ul
+{
+ display:block;
+}
+
+@media (min-width: 480px)
+{
+ #main-menu
+ {
+ .menu-label
+ {
+ display:none;
+ }
+ ul
+ {
+ display:block;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ padding-inline-start: 0px;
+ margin:0px;
+ li
+ {
+ display:inline-block;
+ width:24%;
+ }
+ }
+ }
+}
+
+@media print
+{
+ #main-menu
+ {
+ display: none!important;
+ }
+}
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session1et2/style-main.scss b/b2-cwd/integration/live/session1et2/style-main.scss
new file mode 100644
index 0000000..a453f18
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/style-main.scss
@@ -0,0 +1,123 @@
+$font : Arial, Helvetica, sans-serif;
+$normalfontsize : 12px;
+$marge : 8px;
+
+body
+{
+ font-family: $font;
+ font-size:$normalfontsize;
+}
+
+h4
+{
+ font-size:$normalfontsize + 2px;
+}
+
+body,figure,img
+{
+ padding:0;
+ border:none;
+ margin:0;
+}
+
+#switch:checked ~ p
+{
+ background-color:green;
+}
+
+img
+{
+ // avec interpolation
+ width:calc(100% - (#{$marge}*2));
+ height:auto;
+ margin:0 auto;
+}
+/*
+picture
+{
+ display:block;
+ max-height:40vh;
+ overflow:hidden;
+}
+*/
+
+#main-menu
+{
+ text-align:center;
+ ul
+ {
+ list-style:none;
+ }
+
+ li
+ {
+ text-align: left;
+ }
+
+ li a,
+ li span
+ {
+ color:black;
+ text-decoration:none;
+ font-size:1.1rem;
+ }
+
+ li span
+ {
+ color:#666;
+ }
+
+ .menu-label
+ {
+ font-size:1.5rem;
+ color:black;
+ text-decoration:none;
+ font-weight:bold;
+ display:inline-block;
+ line-height:2rem;
+ }
+}
+.burger
+{
+ float:left;
+ margin: 3px 8px;
+ b,i
+ {
+ display: block;
+ width: 20px;
+ }
+ b
+ {
+ height: 2px;
+ margin-bottom: 5px;
+ position: relative;
+ background: #000;
+ border-radius: 2px;
+ z-index: 1;
+ &:first-of-type
+ {
+ margin-top:5px;
+ }
+ }
+ i
+ {
+ color:blue;
+ }
+}
+
+#main-menu ul
+{
+ display:none;
+}
+
+main, h1
+{
+ margin:1rem;
+ padding:1rem;
+}
+
+#main-menu #switch:checked ~ ul
+{
+ display:block;
+}
+
diff --git a/b2-cwd/integration/live/session1et2/style.sass b/b2-cwd/integration/live/session1et2/style.sass
new file mode 100644
index 0000000..512267d
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/style.sass
@@ -0,0 +1,16 @@
+$espacestd:8px
+
+body
+ padding:0px
+ margin:0px
+ font-size:12px
+
+nav#menu-haut
+ background-color:#ccc
+ ul
+ margin:0
+ padding:$espacestd
+ li
+ margin-bottom:$espacestd
+ &.current
+ background-color:#eee
diff --git a/b2-cwd/integration/live/session1et2/style.scss b/b2-cwd/integration/live/session1et2/style.scss
new file mode 100644
index 0000000..1750f99
--- /dev/null
+++ b/b2-cwd/integration/live/session1et2/style.scss
@@ -0,0 +1,54 @@
+$espacestd:8px;
+$stdfontsize:12px;
+
+@mixin reset-margins
+{
+ margin: 0;
+ margin-block-start: 0;
+ margin-block-end: 0;
+}
+
+body
+{
+ padding:0px;
+ @include reset-margins;
+ font-size:$stdfontsize;
+}
+
+nav#menu-haut
+{
+ background-color:#ccc;
+ //exemple avec interpolation;
+ width:calc(100% - #{$espacestd * 2});
+ ul
+ {
+ list-style:none;
+ margin:0;
+ padding:$espacestd;
+ li
+ {
+ margin-bottom:$espacestd;
+ &.current
+ {
+ background-color:#eee;
+ }
+ }
+ }
+}
+
+h1,h2,h3,h4,h5,h6
+{
+ @include reset-margins;
+}
+
+@for $i from 0 through 5 {
+ h#{$i+1} {
+ font-size:$stdfontsize*2 - $i*2px;
+ }
+}
+
+@for $i from 0 through 100 {
+ .c#{$i}pourcent {
+ width: #{$i} + '%';
+ }
+}
\ No newline at end of file
diff --git a/b2-cwd/integration/live/session3/espresso-desktop-2-popin.jpg b/b2-cwd/integration/live/session3/espresso-desktop-2-popin.jpg
new file mode 100644
index 0000000..7bd8ae6
Binary files /dev/null and b/b2-cwd/integration/live/session3/espresso-desktop-2-popin.jpg differ
diff --git a/b2-cwd/integration/live/session3/espresso-mobile-3-popin.jpg b/b2-cwd/integration/live/session3/espresso-mobile-3-popin.jpg
new file mode 100644
index 0000000..056d573
Binary files /dev/null and b/b2-cwd/integration/live/session3/espresso-mobile-3-popin.jpg differ
+ 
+