diff --git a/demo_calculs_TD_alea.html b/demo_calculs_TD_alea.html
new file mode 100644
index 0000000000000000000000000000000000000000..8cfcb584d94283f34a1aa9fd425aa08f02c55da5
--- /dev/null
+++ b/demo_calculs_TD_alea.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>TD Aléa Inondation - INRAE</title>
+</head>
+<body>
+<h2>Démo pour le TD Aléa Inondation - INRAE </h2>
+<h3>Calculs simplifiés (trop ?) en section composée ! </h3>
+
+<p id ="consigne" >calculs indépendants par sous-sections, puis cumul</p>
+<p>(et on se pose des questions : comment font les codes de calcul ?)</p>
+
+
+<svg id="schema_section" width="400" height="150" viewBox="0,0,300,100"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+
+ <path id="section totale" stroke="brown" stroke-width="4" fill="none"
+ d="M 0 0 v 45 h 100 v 45 h 40 v -40 h 50 v -15 h 100 v -40"/>
+
+ <path id="Z eau" stroke="blue" stroke-width="4" fill="none"
+ d="M 0 10 h 290">
+ <title> ligne d'eau </title>
+ </path>
+
+ <text id="texte Z eau" stroke="blue" fill="none"
+ x = "50" y = "5">
+ ligne d'eau z = 109 m
+ </text>
+
+ <g id="canaux" >
+ <rect id="vignoble"
+ x = "0" y = "10"
+ width = "100" height = "35"
+ style="fill:purple;fill-opacity:0.5;stroke:none;stroke-width:0.9;stop-color:#000000">
+ <title>Vignoble</title>
+ </rect>
+ <rect id="lit mineur"
+ x = "100" y = "10"
+ width = "40" height = "80"
+ style="fill:blue;fill-opacity:0.5;stroke:none;stroke-width:0.9;stop-color:#000000">
+ <title>Lit mineur</title>
+ </rect>
+ <rect id="champ"
+ x = "140" y = "10"
+ width = "50" height = "40"
+ style="fill:gold;fill-opacity:0.5;stroke:none;stroke-width:0.9;stop-color:#000000">
+ <title>Champs</title>
+ </rect>
+ <rect id="village"
+ x = "190" y = "10"
+ width = "100" height = "25"
+ style="fill:red;fill-opacity:0.5;stroke:none;stroke-width:0.9;stop-color:#000000">
+ <title>Vieux Village</title>
+ </rect>
+ </g>
+
+</svg>
+<p id ="demo" >démonstrateur... version sympa de la feuille de calcul</p>
+ <button id="boutonPlus" onclick="clicPlus()"> [ + ] Monter la ligne d'eau </button>
+ <button id="boutonMoins" onclick="clicMoins()">[ - ] Descendre la ligne d'eau </button>
+ <button id="boutonCalcul" onclick="calculMS()">[Calculer !]</button>
+<p id="journal"></p>
+
+<p id="nombre de chenaux inondés">108 m</p>
+<p id ="calcul" >démonstrateur...</p>
+
+<script>
+
+// Déclarations
+const zhautberge = 110 ;
+const zvignoble = 105.5 ;
+const zmineur = 101 ;
+const zchamp = 105 ;
+const zvillage = 106.5 ;
+const wvignoble = 100 ;
+const wmineur = 40 ;
+const wchamp = 50 ;
+const wvillage = 100 ;
+const Kvignoble = 15 ;
+const Kmineur = 30 ;
+const Kchamp = 20 ;
+const Kvillage = 15 ;
+const pente = 0.001 ;
+const deltaZ = 0.25 ;
+
+
+var zeau = 109 ;
+
+majZeau();
+calculMS();
+
+document.getElementById("calcul").innerHTML = " Position initiale Zeau = " + zeau + " m NGF";
+
+
+// fonctions boutons
+
+function majZeau() {
+document.getElementById("journal").innerHTML = " Zeau tracé = " + zeau + " m NGF";
+document.getElementById("texte Z eau").setAttribute("textContent", "tracé : " + zeau+" m") ;
+delta_y = (zhautberge - zeau) * 10 ;
+let chemin = "M 0 " + delta_y + "h 290";
+document.getElementById("Z eau").setAttribute("d", chemin) ;
+}
+
+function clicPlus() { zeau = zeau + deltaZ ;
+majZeau();
+}
+function clicMoins() { zeau = zeau - deltaZ ;
+majZeau();
+}
+
+function calculChenauxIndep(K, i, largeur, hauteur) {
+ let Sm = largeur * hauteur ;
+ let Pm = largeur + 2 * hauteur ;
+ let Rh = Sm / Pm ;
+
+ let Q = K * Math.pow(i , 0.5) * Sm * Math.pow( Rh, (2/3)) ;
+
+ return Q ;
+}
+
+function calculMS() {
+
+document.getElementById("journal").innerHTML = " Calcul pour Zeau = " + zeau;
+document.getElementById("texte Z eau").textContent = zeau+"m" ;
+let y = (zhautberge - zeau) * 10 ;
+let message = "" ;
+let message_chenaux = "";
+let pas_deau = "pas d'inondation " ;
+
+let h_vig = zeau - zvignoble ;
+message += "Qvignoble : " ;
+if (h_vig > 0) {
+ message_chenaux+= "Profondeurs : h(vignoble)= "+h_vig.toFixed(2);
+ let Q_vig = calculChenauxIndep(Kvignoble, pente, wvignoble, h_vig) ;
+ message += Q_vig.toFixed(2) ;
+document.getElementById("vignoble").setAttribute("y", y) ;
+document.getElementById("vignoble").setAttribute("height", h_vig * 10) ;
+document.getElementById("vignoble").setAttribute("opacity", "1");
+}
+ else {document.getElementById("vignoble").setAttribute("opacity", "0.0");
+ message += pas_deau ; }
+
+ let h_min = zeau - zmineur ;
+ message += " ; Qlit mineur : " ;
+if (h_min > 0) {
+ let Q_min = calculChenauxIndep(Kmineur, pente, wmineur, h_min) ;
+ message_chenaux += " ; dans le mineur h =" + h_min.toFixed(2) ;
+ message += Q_min.toFixed(2) ;
+document.getElementById("lit mineur").setAttribute("y", y) ;
+document.getElementById("lit mineur").setAttribute("height", h_min * 10) ;
+document.getElementById("lit mineur").setAttribute("opacity", "1");
+}
+ else {document.getElementById("lit mineur").setAttribute("opacity", "0.0");
+ message += pas_deau;}
+
+ let h_champ = zeau - zchamp ;
+ message += " ; Qchamp : " ;
+if (h_champ > 0) {
+ let Q_champ = calculChenauxIndep(Kchamp, pente, wchamp, h_champ) ;
+ message_chenaux += " ; dans les champs, h =" + h_champ.toFixed(2) ;
+ message += Q_champ.toFixed(2) ;
+document.getElementById("champ").setAttribute("y", y) ;
+document.getElementById("champ").setAttribute("height", h_champ * 10) ;
+document.getElementById("champ").setAttribute("opacity", "1");
+}
+ else {document.getElementById("champ").setAttribute("opacity", "0.0");
+ message += pas_deau;}
+
+ let h_village = zeau - zvillage ;
+ message += " ; Qvillage : " ;
+if (h_village > 0) {
+ let Q_village = calculChenauxIndep(Kvillage, pente, wvillage, h_village) ;
+ message_chenaux += " ; dans le village, h =" + h_village.toFixed(2) ;
+ message += Q_village.toFixed(2) ;
+
+document.getElementById("village").setAttribute("y", y) ;
+document.getElementById("village").setAttribute("height", h_village * 10) ;
+document.getElementById("village").setAttribute("opacity", "1");
+}
+ else {document.getElementById("village").setAttribute("opacity", "0.0");
+ message += pas_deau;}
+
+document.getElementById("nombre de chenaux inondés").innerHTML = message_chenaux + " (m)" ;
+document.getElementById("calcul").innerHTML = "Formule de Manning-Strickler : " + message + " (m3/s)";
+}
+
+
+
+
+
+//Add event listeners
+
+
+</script>
+
+</body>
+</html>
\ No newline at end of file