diff --git a/README.md b/README.md
index 3bec391..2c262ea 100644
--- a/README.md
+++ b/README.md
@@ -6,3 +6,8 @@ Serveur web avec sass et bootstrap
 
 ## Lancer le serveur de dev (parcel)
 `bash docker-node.sh yarn dev`
+
+
+## Conventions HTML/CSS
+
+* pas de div sans classes
diff --git a/app/scss/_custom.scss b/app/scss/_custom.scss
index 5bff98a..404d68c 100644
--- a/app/scss/_custom.scss
+++ b/app/scss/_custom.scss
@@ -1,11 +1,9 @@
-
-div.coucou {
-  margin: 1em;
-  padding: 2em;
-  background-color: cyan;
-
-  span {
-    padding: 1em;
-    background-color: yellow;
+div#mon-panier {
+  background-color: $green-200;
+  .intro {
+    background-color: $green-100;
+  }
+  .resume {
+    background-color: $green-300;
   }
 }
diff --git a/app/scss/_variables.scss b/app/scss/_variables.scss
index 7ac4c8e..31cf89e 100644
--- a/app/scss/_variables.scss
+++ b/app/scss/_variables.scss
@@ -1,2 +1,5 @@
-$primary: pink;
-$enable-shadows: true;
+
+//$primary: pink;
+$enable-shadows: false;
+$enable-rounded: true;
+$enable-negative-margins: true;
diff --git a/app/scss/bootstrap.scss b/app/scss/bootstrap.scss
new file mode 100644
index 0000000..a5659c6
--- /dev/null
+++ b/app/scss/bootstrap.scss
@@ -0,0 +1,61 @@
+/// ------------------------------------
+/// Option A: Include all of Bootstrap
+/// ------------------------------------
+//@import "../node_modules/bootstrap/scss/bootstrap";
+
+/// ------------------------------------
+/// Option B: Include parts of Bootstrap
+/// ------------------------------------
+
+@import "../node_modules/bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "../node_modules/bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+@import "variables";
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+
+// 4. Include any optional Bootstrap components as you like
+@import "../node_modules/bootstrap/scss/utilities";
+@import "../node_modules/bootstrap/scss/root";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/containers";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/tables";
+@import "../node_modules/bootstrap/scss/forms";
+@import "../node_modules/bootstrap/scss/buttons";
+@import "../node_modules/bootstrap/scss/transitions";
+@import "../node_modules/bootstrap/scss/dropdown";
+@import "../node_modules/bootstrap/scss/button-group";
+@import "../node_modules/bootstrap/scss/nav";
+@import "../node_modules/bootstrap/scss/navbar";
+@import "../node_modules/bootstrap/scss/card";
+@import "../node_modules/bootstrap/scss/accordion";
+@import "../node_modules/bootstrap/scss/breadcrumb";
+@import "../node_modules/bootstrap/scss/pagination";
+@import "../node_modules/bootstrap/scss/badge";
+@import "../node_modules/bootstrap/scss/alert";
+@import "../node_modules/bootstrap/scss/progress";
+@import "../node_modules/bootstrap/scss/list-group";
+@import "../node_modules/bootstrap/scss/close";
+@import "../node_modules/bootstrap/scss/toasts";
+@import "../node_modules/bootstrap/scss/modal";
+@import "../node_modules/bootstrap/scss/tooltip";
+@import "../node_modules/bootstrap/scss/popover";
+@import "../node_modules/bootstrap/scss/carousel";
+@import "../node_modules/bootstrap/scss/spinners";
+@import "../node_modules/bootstrap/scss/offcanvas";
+@import "../node_modules/bootstrap/scss/placeholders";
+@import "../node_modules/bootstrap/scss/helpers";
+@import "../node_modules/bootstrap/scss/utilities/api";
+
+// 5. Add additional custom code here
+@import "custom";
diff --git a/app/scss/styles.scss b/app/scss/styles.scss
index a5659c6..3d47cc2 100644
--- a/app/scss/styles.scss
+++ b/app/scss/styles.scss
@@ -1,61 +1,17 @@
-/// ------------------------------------
-/// Option A: Include all of Bootstrap
-/// ------------------------------------
-//@import "../node_modules/bootstrap/scss/bootstrap";
+div.panier {
+  margin-top: 1em;
+  .intro {
+  }
+  .resume {
+  }
+}
 
-/// ------------------------------------
-/// Option B: Include parts of Bootstrap
-/// ------------------------------------
+div.coucou {
+  padding: 2em;
+  background-color: #b1d9d9;
 
-@import "../node_modules/bootstrap/scss/mixins/banner";
-@include bsBanner("");
-
-// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
-@import "../node_modules/bootstrap/scss/functions";
-
-// 2. Include any default variable overrides here
-@import "variables";
-
-// 3. Include remainder of required Bootstrap stylesheets
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/maps";
-@import "../node_modules/bootstrap/scss/mixins";
-
-// 4. Include any optional Bootstrap components as you like
-@import "../node_modules/bootstrap/scss/utilities";
-@import "../node_modules/bootstrap/scss/root";
-@import "../node_modules/bootstrap/scss/reboot";
-@import "../node_modules/bootstrap/scss/type";
-@import "../node_modules/bootstrap/scss/images";
-@import "../node_modules/bootstrap/scss/containers";
-@import "../node_modules/bootstrap/scss/grid";
-@import "../node_modules/bootstrap/scss/tables";
-@import "../node_modules/bootstrap/scss/forms";
-@import "../node_modules/bootstrap/scss/buttons";
-@import "../node_modules/bootstrap/scss/transitions";
-@import "../node_modules/bootstrap/scss/dropdown";
-@import "../node_modules/bootstrap/scss/button-group";
-@import "../node_modules/bootstrap/scss/nav";
-@import "../node_modules/bootstrap/scss/navbar";
-@import "../node_modules/bootstrap/scss/card";
-@import "../node_modules/bootstrap/scss/accordion";
-@import "../node_modules/bootstrap/scss/breadcrumb";
-@import "../node_modules/bootstrap/scss/pagination";
-@import "../node_modules/bootstrap/scss/badge";
-@import "../node_modules/bootstrap/scss/alert";
-@import "../node_modules/bootstrap/scss/progress";
-@import "../node_modules/bootstrap/scss/list-group";
-@import "../node_modules/bootstrap/scss/close";
-@import "../node_modules/bootstrap/scss/toasts";
-@import "../node_modules/bootstrap/scss/modal";
-@import "../node_modules/bootstrap/scss/tooltip";
-@import "../node_modules/bootstrap/scss/popover";
-@import "../node_modules/bootstrap/scss/carousel";
-@import "../node_modules/bootstrap/scss/spinners";
-@import "../node_modules/bootstrap/scss/offcanvas";
-@import "../node_modules/bootstrap/scss/placeholders";
-@import "../node_modules/bootstrap/scss/helpers";
-@import "../node_modules/bootstrap/scss/utilities/api";
-
-// 5. Add additional custom code here
-@import "custom";
+  span {
+    padding: 1em;
+    background-color: #fff;
+  }
+}
diff --git a/app/src/index.html b/app/src/index.html
index af331c9..87d3a12 100644
--- a/app/src/index.html
+++ b/app/src/index.html
@@ -1,22 +1,55 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../scss/bootstrap.scss">
     <link rel="stylesheet" href="../scss/styles.scss">
-  </head>
-  <body>
-
-    <button type="button" name="button" class="btn btn-primary btn-lg m-4">
-        hello Marcel
-    </button>
+</head>
+<body>
+    <nav class="navbar navbar-light bg-light">
+        <div class="container-fluid">
+            <a class="navbar-brand">Navbar</a>
+            <form class="d-flex">
+                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+        </div>
+    </nav>
 
     <div class="coucou">
-      <h2>Bim</h2>
-      <p>bam</p>
-      <span>boum</span>
+        <h2 class="display-3">Bim bam</h2>
+        <p>Mes propres styles</p>
+        <span>boum</span>
     </div>
 
+    <div class="container panier" id="mon-panier">
+        <div class="row">
+            <div class="col intro">
+                <h2>Column</h2>
+                <ul class="list-group">
+                    <li class="list-group-item">An item</li>
+                    <li class="list-group-item">A second item</li>
+                    <li class="list-group-item">A third item</li>
+                    <li class="list-group-item">A fourth item</li>
+                    <li class="list-group-item">And a fifth one</li>
+                </ul>
+            </div>
+            <div class="col-6">
+                <h2>Column</h2>
+                <p>Non tellus orci ac auctor augue mauris augue neque gravida. Sit amet risus nullam eget felis eget nunc lobortis. Urna neque viverra justo nec ultrices dui sapien. Arcu dictum varius duis at consectetur lorem donec. Neque ornare aenean euismod elementum nisi quis eleifend quam. Habitasse platea dictumst quisque sagittis purus.</p>
+            </div>
+            <div class="col resume">
+                <h2>Column</h2>
+                <button type="button" name="button" class="btn btn-primary btn-lg">
+                  hello Marcel
+                </button>
+            </div>
+        </div>
+    </div>
+
+
+
     <script src="./index.js"></script>
-  </body>
+</body>
 </html>