Generate CM1 fraction lesson SVGs

Programme/PROGRESSION_CONTENUS_PEDAGOGIQUES.md

@@ -4,8 +4,8 @@ Ce fichier sert de memoire de travail persistante. Il doit etre mis a jour a cha
 
 ## Phase courante
 
-- Phase : `2B - Validation micro-competences 01B_fractions`
+- Phase : `3A - SVG lecon CM1 mathematiques / 01B_fractions`
-- Statut : `termine`
+- Statut : `termine - a relire`
 - Derniere mise a jour : `2026-05-03`
 
 ## Phase 0 - Index et classification
@@ -123,11 +123,34 @@ Trace :
 
 - `contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/VALIDATION_PHASE_2B.md`
 
+## Phase 3A - SVG lecon CM1 mathematiques / 01B_fractions
+
+Objectif : generer les 8 fiches SVG de lecon pour les micro-competences fractions, en gardant une competence par visuel.
+
+Livrables attendus :
+
+- `svg/01_lire_ecrire_fraction_simple.svg`
+- `svg/02_representer_fraction_partage.svg`
+- `svg/03_fraction_sur_demi_droite_graduee.svg`
+- `svg/04_fraction_superieure_a_un.svg`
+- `svg/05_comparer_fractions_simples.svg`
+- `svg/06_encadrer_fraction_entre_entiers.svg`
+- `svg/07_additionner_soustraire_fractions_simples.svg`
+- `svg/08_fraction_d_une_quantite.svg`
+
+Etat d'avancement :
+
+- SVG de lecon : generes, `8` fichiers, XML valide.
+- Contextes dynamiques par card : non lance.
+- Exercices textuels : non lance.
+- SVG exercices : non lance.
+- Kit adaptatif : non lance.
+
 ## Prochaine etape
 
-- Phase suivante : `3A - SVG lecon CM1 mathematiques / 01B_fractions`
+- Phase suivante : `3B - Validation SVG lecon 01B_fractions`
-- Statut : `a lancer`
+- Statut : `a valider apres Phase 3A`
-- Objectif : generer les 8 fiches SVG de lecon pour les micro-competences fractions, en gardant une competence par visuel.
+- Objectif : relire les 8 SVG de lecon fractions avant de lancer les contextes dynamiques par card.
 
 ## Phases prevues
 

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/README.md

@@ -45,3 +45,18 @@ Avant les SVG et les contextes dynamiques, relire :
 - la granularite une competence par fiche ;
 - le niveau CM1 ;
 - la coherence des futures pistes visuelles.
+
+## SVG generes
+
+Phase 3A : 8 SVG de lecon generes dans `svg/`.
+
+- `svg/01_lire_ecrire_fraction_simple.svg`
+- `svg/02_representer_fraction_partage.svg`
+- `svg/03_fraction_sur_demi_droite_graduee.svg`
+- `svg/04_fraction_superieure_a_un.svg`
+- `svg/05_comparer_fractions_simples.svg`
+- `svg/06_encadrer_fraction_entre_entiers.svg`
+- `svg/07_additionner_soustraire_fractions_simples.svg`
+- `svg/08_fraction_d_une_quantite.svg`
+
+Statut : brouillons visuels propres, XML valides, a relire avant validation finale.

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/01_lire_ecrire_fraction_simple.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <style>
+      .bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.frac{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:96px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}
+    </style>
+  </defs>
+  <rect class="bg" width="1600" height="900"/>
+  <rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Lire et ecrire une fraction</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Maths CM1 - Numerateur, denominateur, unite</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(110 245)">
+    <rect width="455" height="300" rx="24" class="soft"/>
+    <text x="34" y="58" class="h2">La fraction</text>
+    <text x="228" y="150" text-anchor="middle" class="frac">3</text>
+    <line x1="182" y1="178" x2="274" y2="178" class="line"/>
+    <text x="228" y="270" text-anchor="middle" class="frac">4</text>
+  </g>
+  <g transform="translate(625 245)">
+    <rect width="360" height="300" rx="24" class="panel"/>
+    <text x="30" y="58" class="h2">Ce que ca dit</text>
+    <circle cx="55" cy="112" r="15" class="orange"/><text x="84" y="120" class="body">3 parts prises</text>
+    <circle cx="55" cy="168" r="15" class="blue"/><text x="84" y="176" class="body">4 parts egales</text>
+    <text x="30" y="235" class="body">3/4 se lit :</text>
+    <text x="30" y="272" class="body">trois quarts</text>
+  </g>
+  <g transform="translate(1040 245)">
+    <rect width="430" height="300" rx="24" class="panel"/>
+    <text x="30" y="58" class="h2">L'unite partagee</text>
+    <g transform="translate(45 110)">
+      <rect x="0" y="0" width="320" height="90" rx="14" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/>
+      <rect x="0" y="0" width="80" height="90" rx="14" class="orange"/>
+      <rect x="80" y="0" width="80" height="90" class="orange"/>
+      <rect x="160" y="0" width="80" height="90" class="orange"/>
+      <line x1="80" y1="0" x2="80" y2="90" class="line"/><line x1="160" y1="0" x2="160" y2="90" class="line"/><line x1="240" y1="0" x2="240" y2="90" class="line"/>
+    </g>
+    <text x="45" y="248" class="small">L'unite est coupee en 4 parts egales.</text>
+  </g>
+  <g transform="translate(170 615)">
+    <rect width="1260" height="150" rx="24" class="panel"/>
+    <text x="36" y="55" class="h2">A retenir</text>
+    <text x="36" y="100" class="body">Le denominateur indique le partage. Le numerateur indique les parts prises.</text>
+  </g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/02_representer_fraction_partage.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}</style></defs>
+  <rect class="bg" width="1600" height="900"/><rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Representer une fraction</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Je partage l'unite en parts egales, puis je colorie</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(110 245)"><rect width="420" height="330" rx="24" class="panel"/><text x="34" y="58" class="h2">Bande : 3/5</text>
+    <g transform="translate(45 132)"><rect width="320" height="92" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/><rect width="64" height="92" rx="12" class="orange"/><rect x="64" width="64" height="92" class="orange"/><rect x="128" width="64" height="92" class="orange"/><line x1="64" y1="0" x2="64" y2="92" class="line"/><line x1="128" y1="0" x2="128" y2="92" class="line"/><line x1="192" y1="0" x2="192" y2="92" class="line"/><line x1="256" y1="0" x2="256" y2="92" class="line"/></g>
+    <text x="45" y="285" class="small">5 parts egales, 3 parts coloriees</text></g>
+  <g transform="translate(590 245)"><rect width="420" height="330" rx="24" class="soft"/><text x="34" y="58" class="h2">Disque : 1/4</text>
+    <circle cx="210" cy="178" r="90" fill="#f7fbf9" stroke="#26383d" stroke-width="4"/><path d="M210 178 L210 88 A90 90 0 0 1 300 178 Z" class="blue"/><line x1="210" y1="88" x2="210" y2="268" class="line"/><line x1="120" y1="178" x2="300" y2="178" class="line"/>
+    <text x="70" y="285" class="small">4 parts egales, 1 part coloriee</text></g>
+  <g transform="translate(1070 245)"><rect width="420" height="330" rx="24" class="panel"/><text x="34" y="58" class="h2">Collection : 6/10</text>
+    <g transform="translate(70 112)"><circle cx="0" cy="0" r="20" class="green"/><circle cx="55" cy="0" r="20" class="green"/><circle cx="110" cy="0" r="20" class="green"/><circle cx="165" cy="0" r="20" class="green"/><circle cx="220" cy="0" r="20" class="green"/><circle cx="275" cy="0" r="20" class="green"/><circle cx="0" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/><circle cx="55" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/><circle cx="110" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/><circle cx="165" cy="70" r="20" fill="#e8f3ee" stroke="#26383d"/></g>
+    <text x="58" y="285" class="small">10 objets, 6 sont choisis</text></g>
+  <g transform="translate(170 645)"><rect width="1260" height="110" rx="24" class="panel"/><text x="36" y="48" class="h2">A retenir</text><text x="36" y="86" class="body">Une fraction n'a de sens que si l'unite et les parts egales sont claires.</text></g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/03_fraction_sur_demi_droite_graduee.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}</style></defs>
+  <rect class="bg" width="1600" height="900"/><rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Placer une fraction sur une demi-droite</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Je partage chaque unite selon le denominateur</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(125 255)"><rect width="1350" height="340" rx="24" class="soft"/><text x="36" y="60" class="h2">Exemple : placer 5/4</text>
+    <line x1="100" y1="205" x2="1180" y2="205" class="line"/><path d="M1180 205 L1158 194 L1158 216 Z" fill="#26383d"/>
+    <g transform="translate(130 0)">
+      <line x1="0" y1="170" x2="0" y2="240" class="tick"/><text x="0" y="275" text-anchor="middle" class="body">0</text>
+      <line x1="250" y1="170" x2="250" y2="240" class="tick"/><text x="250" y="275" text-anchor="middle" class="body">1</text>
+      <line x1="500" y1="170" x2="500" y2="240" class="tick"/><text x="500" y="275" text-anchor="middle" class="body">2</text>
+      <line x1="62.5" y1="184" x2="62.5" y2="226" class="tick"/><line x1="125" y1="184" x2="125" y2="226" class="tick"/><line x1="187.5" y1="184" x2="187.5" y2="226" class="tick"/><line x1="312.5" y1="184" x2="312.5" y2="226" class="tick"/><line x1="375" y1="184" x2="375" y2="226" class="tick"/><line x1="437.5" y1="184" x2="437.5" y2="226" class="tick"/>
+      <circle cx="312.5" cy="205" r="16" class="orange"/><text x="312.5" y="150" text-anchor="middle" class="body">5/4</text>
+    </g>
+    <text x="820" y="150" class="body">Denominateur 4 :</text><text x="820" y="190" class="body">chaque unite a 4 parts.</text><text x="820" y="245" class="body">5/4 est juste apres 1.</text>
+  </g>
+  <g transform="translate(170 650)"><rect width="1260" height="110" rx="24" class="panel"/><text x="36" y="48" class="h2">A retenir</text><text x="36" y="86" class="body">L'intervalle de 0 a 1 est l'unite. Je le partage en parts egales.</text></g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/04_fraction_superieure_a_un.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:54px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}</style></defs>
+  <rect class="bg" width="1600" height="900"/><rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Fraction superieure a 1</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Quand le numerateur depasse le denominateur</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(120 245)"><rect width="630" height="360" rx="24" class="soft"/><text x="34" y="60" class="h2">Exemple : 7/4</text>
+    <g transform="translate(70 130)"><rect width="400" height="80" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/><rect width="100" height="80" rx="12" class="green"/><rect x="100" width="100" height="80" class="green"/><rect x="200" width="100" height="80" class="green"/><rect x="300" width="100" height="80" class="green"/><line x1="100" y1="0" x2="100" y2="80" class="line"/><line x1="200" y1="0" x2="200" y2="80" class="line"/><line x1="300" y1="0" x2="300" y2="80" class="line"/></g>
+    <g transform="translate(70 245)"><rect width="400" height="80" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/><rect width="100" height="80" rx="12" class="orange"/><rect x="100" width="100" height="80" class="orange"/><rect x="200" width="100" height="80" class="orange"/><line x1="100" y1="0" x2="100" y2="80" class="line"/><line x1="200" y1="0" x2="200" y2="80" class="line"/><line x1="300" y1="0" x2="300" y2="80" class="line"/></g>
+  </g>
+  <g transform="translate(815 245)"><rect width="635" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">Je decompose</text>
+    <text x="70" y="145" class="num">7/4 = 4/4 + 3/4</text><text x="70" y="215" class="num">7/4 = 1 + 3/4</text><text x="70" y="285" class="body">La premiere unite est complete.</text><text x="70" y="325" class="body">Il reste encore trois quarts.</text>
+  </g>
+  <g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">A retenir</text><text x="36" y="84" class="body">Une fraction peut etre plus grande que 1 : il faut alors utiliser plusieurs unites.</text></g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/05_comparer_fractions_simples.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:64px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}</style></defs>
+  <rect class="bg" width="1600" height="900"/><rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Comparer des fractions simples</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Meme unite, parts egales, puis je compare</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(120 245)"><rect width="620" height="360" rx="24" class="soft"/><text x="34" y="60" class="h2">Meme denominateur</text>
+    <text x="70" y="130" class="num">3/5 &lt; 4/5</text>
+    <g transform="translate(75 175)"><rect width="430" height="58" rx="10" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/><rect width="86" height="58" rx="10" class="orange"/><rect x="86" width="86" height="58" class="orange"/><rect x="172" width="86" height="58" class="orange"/><line x1="86" y1="0" x2="86" y2="58" class="line"/><line x1="172" y1="0" x2="172" y2="58" class="line"/><line x1="258" y1="0" x2="258" y2="58" class="line"/><line x1="344" y1="0" x2="344" y2="58" class="line"/></g>
+    <g transform="translate(75 265)"><rect width="430" height="58" rx="10" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/><rect width="86" height="58" rx="10" class="blue"/><rect x="86" width="86" height="58" class="blue"/><rect x="172" width="86" height="58" class="blue"/><rect x="258" width="86" height="58" class="blue"/><line x1="86" y1="0" x2="86" y2="58" class="line"/><line x1="172" y1="0" x2="172" y2="58" class="line"/><line x1="258" y1="0" x2="258" y2="58" class="line"/><line x1="344" y1="0" x2="344" y2="58" class="line"/></g>
+  </g>
+  <g transform="translate(815 245)"><rect width="635" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">Meme numerateur</text>
+    <text x="70" y="130" class="num">1/2 &gt; 1/4</text><text x="70" y="195" class="body">Quand on partage en plus de parts,</text><text x="70" y="232" class="body">chaque part est plus petite.</text><text x="70" y="300" class="body">Toujours comparer la meme unite.</text>
+  </g>
+  <g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">A retenir</text><text x="36" y="84" class="body">A denominateur egal, le plus grand numerateur donne la plus grande fraction.</text></g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/06_encadrer_fraction_entre_entiers.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:54px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}.tick{stroke:#26383d;stroke-width:3}</style></defs>
+  <rect class="bg" width="1600" height="900"/><rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Encadrer une fraction</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Je cherche entre quels entiers elle se trouve</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(125 245)"><rect width="1350" height="360" rx="24" class="soft"/><text x="36" y="60" class="h2">Exemple : 7/3</text>
+    <text x="790" y="125" class="num">6/3 = 2</text><text x="790" y="195" class="num">9/3 = 3</text><text x="790" y="270" class="num">2 &lt; 7/3 &lt; 3</text>
+    <line x1="100" y1="230" x2="670" y2="230" class="line"/><path d="M670 230 L648 219 L648 241 Z" fill="#26383d"/>
+    <g transform="translate(120 0)"><line x1="0" y1="195" x2="0" y2="265" class="tick"/><text x="0" y="300" text-anchor="middle" class="body">0</text><line x1="150" y1="195" x2="150" y2="265" class="tick"/><text x="150" y="300" text-anchor="middle" class="body">1</text><line x1="300" y1="195" x2="300" y2="265" class="tick"/><text x="300" y="300" text-anchor="middle" class="body">2</text><line x1="450" y1="195" x2="450" y2="265" class="tick"/><text x="450" y="300" text-anchor="middle" class="body">3</text><line x1="350" y1="210" x2="350" y2="250" class="tick"/><circle cx="350" cy="230" r="15" class="orange"/><text x="350" y="175" text-anchor="middle" class="body">7/3</text></g>
+  </g>
+  <g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">A retenir</text><text x="36" y="84" class="body">Je compare la fraction aux fractions qui valent les entiers voisins.</text></g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/07_additionner_soustraire_fractions_simples.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.orange{fill:#e78232}.blue{fill:#1d78b5}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}</style></defs>
+  <rect class="bg" width="1600" height="900"/><rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Additionner des fractions simples</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Si les denominateurs sont les memes, les parts ont la meme taille</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(120 245)"><rect width="640" height="360" rx="24" class="soft"/><text x="34" y="60" class="h2">Exemple</text><text x="80" y="130" class="num">2/7 + 3/7 = 5/7</text>
+    <g transform="translate(70 210)"><rect width="490" height="70" rx="10" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/><rect width="70" height="70" rx="10" class="orange"/><rect x="70" width="70" height="70" class="orange"/><rect x="140" width="70" height="70" class="blue"/><rect x="210" width="70" height="70" class="blue"/><rect x="280" width="70" height="70" class="blue"/><line x1="70" y1="0" x2="70" y2="70" class="line"/><line x1="140" y1="0" x2="140" y2="70" class="line"/><line x1="210" y1="0" x2="210" y2="70" class="line"/><line x1="280" y1="0" x2="280" y2="70" class="line"/><line x1="350" y1="0" x2="350" y2="70" class="line"/><line x1="420" y1="0" x2="420" y2="70" class="line"/></g>
+  </g>
+  <g transform="translate(825 245)"><rect width="625" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">La regle</text><text x="65" y="135" class="body">Je garde le denominateur.</text><text x="65" y="180" class="body">J'ajoute ou je retire</text><text x="65" y="218" class="body">seulement les numerateurs.</text><text x="65" y="290" class="num">6/8 - 2/8 = 4/8</text></g>
+  <g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">A retenir</text><text x="36" y="84" class="body">Avant de calculer, je verifie que les denominateurs sont identiques.</text></g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/08_fraction_d_une_quantite.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs><style>.bg{fill:#f6f5ef}.panel{fill:#fff;stroke:#e2ebe6;stroke-width:2;filter:drop-shadow(0 10px 24px rgba(22,42,45,.10))}.soft{fill:#eef7f4;stroke:#c9dfd8;stroke-width:2}.title{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.subtitle{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:26px;font-weight:700;fill:#1e3540}.h2{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:30px;font-weight:800;fill:#074f4b}.body{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;fill:#1d3038}.num{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:58px;font-weight:800;fill:#074f4b}.small{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:19px;fill:#2d4148}.orange{fill:#e78232}.green{fill:#2f9246}.line{stroke:#26383d;stroke-width:4;stroke-linecap:round}</style></defs>
+  <rect class="bg" width="1600" height="900"/><rect x="56" y="42" width="1488" height="816" rx="34" class="panel"/>
+  <text x="800" y="116" text-anchor="middle" class="title">Trouver une fraction d'une quantite</text>
+  <text x="800" y="160" text-anchor="middle" class="subtitle">Je partage, puis je prends les parts demandees</text>
+  <line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
+  <g transform="translate(120 245)"><rect width="640" height="360" rx="24" class="soft"/><text x="34" y="60" class="h2">Exemple : 3/4 de 20</text>
+    <g transform="translate(80 125)"><rect width="440" height="90" rx="12" fill="#f7fbf9" stroke="#26383d" stroke-width="3"/><rect width="110" height="90" rx="12" class="orange"/><rect x="110" width="110" height="90" class="orange"/><rect x="220" width="110" height="90" class="orange"/><line x1="110" y1="0" x2="110" y2="90" class="line"/><line x1="220" y1="0" x2="220" y2="90" class="line"/><line x1="330" y1="0" x2="330" y2="90" class="line"/></g>
+    <text x="80" y="270" class="body">20 partage en 4 parts : chaque part vaut 5.</text><text x="80" y="315" class="body">Je prends 3 parts : 15.</text>
+  </g>
+  <g transform="translate(825 245)"><rect width="625" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">La methode</text><text x="70" y="130" class="num">20 / 4 = 5</text><text x="70" y="205" class="num">5 x 3 = 15</text><text x="70" y="285" class="body">Le denominateur partage.</text><text x="70" y="323" class="body">Le numerateur dit combien prendre.</text></g>
+  <g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">A retenir</text><text x="36" y="84" class="body">Pour trouver 3/4 d'une quantite : je divise par 4, puis je multiplie par 3.</text></g>
+</svg>

Programme/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/README.md

@@ -0,0 +1,12 @@
+# SVG - CM1 - Fractions
+
+Ce dossier contient les fiches SVG de lecon du sous-theme `01B_fractions`.
+
+Regles :
+
+- une fiche SVG = une micro-competence ;
+- format `1600 x 900` ;
+- pas de professeur integre ;
+- texte court et lisible ;
+- schemas mathematiques simples ;
+- aucune superposition texte/schema.