fr: content/tutorial/01-svelte/01-introduction/04+05

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/04-styling/+assets/app-a/src/lib/App.svelte

@@ -1,5 +1,5 @@
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
-	/* Write your CSS here */
+	/* Écrivez votre CSS ici */
 </style>

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/04-styling/+assets/app-b/src/lib/App.svelte

@@ -1,4 +1,4 @@
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
 	p {

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/04-styling/index.md

@@ -1,12 +1,13 @@
 ---
-title: Styling
+title: Styles
 ---
 
-Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+Comme en HTML, vous pouvez ajoutez une balise `<style>` à votre composant. Ajoutons du style à notre
+élément `<p>` :
 
 ```svelte
 /// file: App.svelte
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
 +++	p {
@@ -17,4 +18,7 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 </style>
 ```
 
-Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
+Il est important de comprendre que ces règles sont _scopées au composant_, c'est-à-dire qu'elles ne
+s'appliquent que sur les éléments définis dans ce composant. Vous ne risquez pas de modifier
+accidentellement le style des éléments `<p>` ailleurs dans votre application, comme nous le verrons
+dans l'exercice suivant.

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/+assets/app-a/src/lib/App.svelte

@@ -1,4 +1,4 @@
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 
 <style>
 	p {

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/+assets/app-a/src/lib/Nested.svelte

@@ -1 +1 @@
-<p>This is another paragraph.</p>
+<p>Ceci est un autre paragraphe.</p>

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/+assets/app-b/src/lib/App.svelte

@@ -2,7 +2,7 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 <Nested />
 
 <style>

apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md

@@ -1,10 +1,12 @@
 ---
-title: Nested components
+title: Composants imbriqués
 ---
 
-It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them in our markup.
+Écrire toute votre application au sein d'un seul et même composant ne serait pas très pratique. Au
+lieu de ça, nous pouvons importer des composants depuis d'autres fichiers et les inclure dans notre
+markup.
 
-Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...
+Ajoutez une balise `<script>` en haut de `App.svelte` afin d'importer `Nested.svelte`...
 
 ```svelte
 /// file: App.svelte
@@ -13,14 +15,16 @@ Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...
 </script>+++
 ```
 
-...and include a `<Nested />` component:
+... et ajoutez une instance du composant `<Nested />` :
 
 ```svelte
 /// file: App.svelte
-<p>This is a paragraph.</p>
+<p>Ceci est un paragraphe.</p>
 +++<Nested />+++
 ```
 
-Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
+Notez que même si `Nested.svelte` possède un élément `<p>`, les styles de `App.svelte` ne s'y
+appliquent pas.
 
-> [!NOTE] Component names are capitalised, to distinguish them from HTML elements.
+> [!NOTE] Les noms de composant ont leur première lettre en majuscules, pour les distinguer des
+> éléments HTML.