fr: Refreshing Learn/CSS/CSS_layout/Normal_Flow content (#16666)

* UPDT: refreshing content

* FIX: lint

* FIX: lint

* Minor rewordings and fixes

---------

Co-authored-by: SphinxKnight <[email protected]>

files/fr/learn/css/css_layout/normal_flow/index.md

@@ -1,59 +1,55 @@
 ---
-title: Cours normal
+title: Flux normal
 slug: Learn/CSS/CSS_layout/Normal_Flow
+l10n:
+  sourceCommit: 45268b07c84a04b45d46bcdf104e2b33be00adcf
 ---
 
 {{LearnSidebar}}
 
-{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
 
-Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.
+Cet article décrit le flux normal des éléments, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.
 
 <table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis&nbsp;:</th>
       <td>
-        Les fondamentaux du HTML (étudiez
-        <a href="/fr/Apprendre/HTML/Introduction_à_HTML"
-          >Introduction au HTML</a
-        >) et avoir une idée de la manière dont les CSS fonctionnent (étudiez
-        <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a
-        >).
+        Fondamentaux en HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>) et une idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">Introduction à CSS</a>).
       </td>
     </tr>
     <tr>
       <th scope="row">Objectif&nbsp;:</th>
       <td>
-        Expliquer comment les navigateurs composent les pages web par défaut,
-        avant que nous commencions à faire des modifications.
+        Expliquer comment les navigateurs composent les pages web par défaut, avant d'apporter des modifications.
       </td>
     </tr>
   </tbody>
 </table>
 
-Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.
+Comme nous l'avons expliqué dans la dernière leçon consacrée à la mise en page, tant que vous n'avez pas appliqué de feuilles de style CSS, les éléments d'une page web sont disposés selon le flux normal. Et, comme nous avons commencé à le découvrir, il est possible de modifier le comportement des éléments en ajustant leur position dans le flux normal ou en les en retirant complètement. Commencer par un document solide, bien structuré et lisible dans le flux normal est la meilleure façon de commencer une page web. Cela garantit que votre contenu est lisible même si la personne utilise un navigateur très limité ou un dispositif tel qu'un lecteur d'écran qui lit le contenu de la page. En outre, comme le flux normal est conçu pour créer un document lisible, en commençant de cette manière, vous travaillez avec le document plutôt que de lutter contre lui en apportant des modifications à la mise en page.
 
-Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.
+Avant d'approfondir les diverses méthodes de mise en page, il serait bien de revoir certaines choses déjà exposées dans les modules précédents à propos du flux normal.
 
-## Disposition des éléments par défaut
+## Comment les éléments sont-ils disposés par défaut ?
 
-Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.
+Le processus commence lorsque les boîtes des éléments individuels sont disposées de telle manière que leur remplissage, bordure et/ou marge est ajouté à leur contenu. C'est ce que nous appelons le **modèle de boîte**.
 
-Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec `display: bloc ;` (ou même `display: inline-block ;` qui mélange les caractéristiques des deux).
+Par défaut, le contenu d'un [élément de bloc](/fr/docs/Glossary/Block-level_content) remplit l'espace en ligne disponible de l'élément parent qui le contient, en s'agrandissant le long de la dimension du bloc pour s'adapter à son contenu. La taille des [éléments en ligne](/fr/docs/Glossary/Inline-level_content) correspond simplement à la taille de leur contenu. Vous pouvez définir la largeur ([`width`](/fr/docs/Web/CSS/width)) ou la hauteur ([`height`](/fr/docs/Web/CSS/height)) pour certains éléments dont la propriété `display` vaut `inline` par défaut, comme [`<img>`](/fr/docs/Web/HTML/Element/img), mais la valeur de `display` restera toujours `inline`.
 
-Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.
+Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec `display: block;` (ou même `display: inline-block;` qui mélange les caractéristiques des deux).
 
-Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.
+Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres&nbsp;? Le flux normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de bloc sont disposés _dans le sens d'affichage des blocs_, basé sur le [mode d'écriture (`writing-mode`)](/fr/docs/Web/CSS/writing-mode) de l'élément parent (la valeur initiale de la propriété `writing-mode` est `horizontal-tb`). Chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En français par exemple, ou tout autre mode d'écriture horizontal qui progresse du haut vers le bas, les éléments de bloc sont empilés verticalement.
 
-Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.
+Les éléments en ligne se comportent différemment. Ils n'apparaissent pas sur de nouvelles lignes&nbsp;; au lieu de cela, ils se placent tous sur la même ligne avec tout contenu textuel adjacent (ou enveloppé) tant qu'il y a de la place pour le faire dans la largeur de l'élément de bloc parent. S'il n'y a pas d'espace, le contenu débordant sera déplacé sur une nouvelle ligne.
 
-Voici un exemple simple expliquant cela :
+Si deux éléments adjacents verticalement ont tous deux une marge définie et que leurs marges se touchent, la plus grande des deux marges reste en place et la plus petite disparaît. C'est ce qu'on appelle [**la fusion des marges**](/fr/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). La fusion des marges n'est pertinente que dans le **sens vertical**.
 
-### Exemple
+Voici un exemple simple expliquant cela&nbsp;:
 
 ```html
-<h2>Cours d'un document de base</h2>
+<h1>Flux d'un document de base</h1>
 
 <p>
   Je suis un élément de niveau bloc de base. Mes éléments de niveau bloc
@@ -79,7 +75,7 @@ Voici un exemple simple expliquant cela :
     >sont placés sur une nouvelle ligne si possible (comme celle‑ci contenant du
     texte)</span
   >, sinon ils sont placés sur une nouvelle ligne, comme cette image&nbsp;:
-  <img src="long.jpg" />
+  <img src="long.jpg" alt="morceau de tissus" />
 </p>
 ```
 
@@ -102,10 +98,12 @@ span {
 }
 ```
 
-{{ EmbedLiveSample('Exemple', '100%', 500) }}
+{{EmbedLiveSample('', '100%', 600)}}
 
 ## Résumé
 
-Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.
+Dans cette leçon, vous avez appris les bases du flux normal, c'est-à-dire la disposition par défaut des éléments CSS. En comprenant comment les éléments en ligne, les éléments en bloc et les marges se comportent par défaut, il vous sera plus facile de modifier leur comportement à l'avenir.
+
+Dans le prochain article, nous approfondirons ces connaissances en apportant des modifications aux éléments CSS à l'aide des [boîtes flexibles (<i lang="en">flexbox</i>)](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
 
 {{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}