diff --git a/pies/README.md b/pies/README.md
index bedcd51..1872a44 100644
--- a/pies/README.md
+++ b/pies/README.md
@@ -11,3 +11,15 @@ sass style.scss:pie-charts.css
```
sass --watch style.scss:pie-charts.css
```
+
+## references
+Les réferences indiquées dans le html sont disponibles en pdf et le code en mode txt.
+CF :
+ - [doc monopart](./pure-CSS-pie-charts-monopart.pdf)
+ - [code monopart](./pure-CSS-pie-charts-monopart-code.txt)
+ - [doc multipart](./pure-CSS-pie-charts-multipart.pdf)
+ - [code multipart](./pure-CSS-pie-charts-multipart-code.txt)
+
+
+
+
\ No newline at end of file
diff --git a/pies/pure-CSS-pie-charts-monopart-code.txt b/pies/pure-CSS-pie-charts-monopart-code.txt
new file mode 100644
index 0000000..3a370dd
--- /dev/null
+++ b/pies/pure-CSS-pie-charts-monopart-code.txt
@@ -0,0 +1,58 @@
+ 20%
+ 40%
+ 60%
+ 80%
+ 90%
+@property --p{
+ syntax: '';
+ inherits: true;
+ initial-value: 1;
+}
+
+.pie {
+ --p:20;
+ --b:22px;
+ --c:darkred;
+ --w:150px;
+
+ width: var(--w);
+ aspect-ratio: 1;
+ position: relative;
+ display: inline-grid;
+ margin: 5px;
+ place-content: center;
+ font-size: 25px;
+ font-weight: bold;
+ font-family: sans-serif;
+}
+.pie:before,
+.pie:after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+}
+.pie:before {
+ inset: 0;
+ background:
+ radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
+ conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
+ -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
+ mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
+}
+.pie:after {
+ inset: calc(50% - var(--b)/2);
+ background: var(--c);
+ transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
+}
+.animate {
+ animation: p 1s .5s both;
+}
+.no-round:before {
+ background-size: 0 0, auto;
+}
+.no-round:after {
+ content: none;
+}
+@keyframes p{
+ from{--p:0}
+}
\ No newline at end of file
diff --git a/pies/pure-CSS-pie-charts-monopart.pdf b/pies/pure-CSS-pie-charts-monopart.pdf
new file mode 100644
index 0000000..91b984a
Binary files /dev/null and b/pies/pure-CSS-pie-charts-monopart.pdf differ
diff --git a/pies/pure-CSS-pie-charts-multipart-code.txt b/pies/pure-CSS-pie-charts-multipart-code.txt
new file mode 100644
index 0000000..f019c93
--- /dev/null
+++ b/pies/pure-CSS-pie-charts-multipart-code.txt
@@ -0,0 +1,97 @@
+
+https://codepen.io/jh3y/pen/aQomdd
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.pie {
+ border-radius: 100%;
+ height: calc(var(--size, 200) * 1px);
+ overflow: hidden;
+ position: relative;
+ width: calc(var(--size, 200) * 1px);
+}
+.pie__segment {
+ --a: calc(var(--over50, 0) * -100%);
+ --b: calc((1 + var(--over50, 0)) * 100%);
+ --degrees: calc((var(--offset, 0) / 100) * 360);
+ -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+ clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+ height: 100%;
+ position: absolute;
+ transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
+ transform-origin: 50% 100%;
+ width: 100%;
+ z-index: calc(1 + var(--over50));
+}
+.pie__segment:after,
+.pie__segment:before {
+ background: var(--bg, #e74c3c);
+ content: '';
+ height: 100%;
+ position: absolute;
+ width: 100%;
+}
+.pie__segment:before {
+ --degrees: calc((var(--value, 45) / 100) * 360);
+ transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
+ transform-origin: 50% 0%;
+}
+.pie__segment:after {
+ opacity: var(--over50, 0);
+}
+* {
+ box-sizing: border-box;
+}
+body {
+ align-items: center;
+ background: #111;
+ color: #fafafa;
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+ justify-content: center;
+ min-height: 100vh;
+}
+label {
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+}
+input {
+ min-width: 80px;
+}
+.actions {
+ display: grid;
+ grid-gap: 4px;
+ grid-template-columns: auto auto;
+ z-index: 99;
+}
+
+const pie = document.querySelector('.pie');
+const actions = document.querySelector('.actions');
+const segments = pie.children;
+
+const updateSegment = e => {
+ const idx = [...actions.children].indexOf(e.target);
+ const key = idx % 2 === 0 ? 'offset' : 'value';
+ const toUpdate = segments[Math.floor(idx / 2) - 1];
+ toUpdate.style.setProperty(`--${key}`, e.target.value);
+};
+window.addEventListener('input', updateSegment);
\ No newline at end of file
diff --git a/pies/pure-CSS-pie-charts-multipart.pdf b/pies/pure-CSS-pie-charts-multipart.pdf
new file mode 100644
index 0000000..cb57889
Binary files /dev/null and b/pies/pure-CSS-pie-charts-multipart.pdf differ