unslug fr: move

12 files changed, 396 insertions, 381 deletions

diff --git a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html
index 65f077b50d..65f077b50d 100644
--- a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html
+++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html
diff --git a/files/fr/web/progressive_web_apps/identifiable/index.html b/files/fr/web/progressive_web_apps/identifiable/index.html
deleted file mode 100644
index 3bea56aaa7..0000000000
--- a/files/fr/web/progressive_web_apps/identifiable/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Identifiable
-slug: Web/Progressive_web_apps/Identifiable
-tags:
-  - Applications
-  - Identifiable
-  - Manifeste
-  - Manifeste Web
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Discoverable
----
-<div class="column-container summary">
-<div class="column-11">Dès lors que vous publiez une application web, vous voulez que le monde le sache. Les moteurs de recherche le font, mais souvent on souhaite plus de contrôle sur comment l'application sera affichée dans les résultats de la recherche. Le nouveau manifeste du W3C pour les applications web peut aider à cela, ainsi que pour d'autres fonctionnalités.</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div>
-</div>
-
-<p>Objectifs éventuels des applications web:</p>
-
-<ul>
- <li>Être mieux représenté dans les moteurs de recherche</li>
- <li>Être facile à exposer, dans un catalogue ou un classement</li>
- <li>Avoir des méta-données (<em>metadata)</em> utilisables par le navigateur pour leur donner des capacités spéciales</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
-
-<h2 id="Technologies">Technologies</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Technologie</th>
-   <th scope="col">Description</th>
-   <th scope="col">Résumé du support</th>
-   <th scope="col">Dernière spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td>
-   <td>Définit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td>
-   <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td>
-   <td>{{SpecName('Manifest')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Outils">Outils</h2>
-
-<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<dl>
- <dt><a href="http://ogp.me/">Open Graph</a></dt>
- <dd>Un standard, <em>defacto,</em> fournissant un format pour spécifier des méta-données similaires dans la balise HTML <code>&lt;head&gt;</code> en utilisant les <em>meta tags</em>. Supporté par Facebook et d'autres domaines.</dd>
-</dl>
diff --git a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html b/files/fr/web/progressive_web_apps/independante_du_reseau/index.html
deleted file mode 100644
index 52bcf0a121..0000000000
--- a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Indépendante du réseau
-slug: Web/Progressive_web_apps/Independante_du_reseau
-tags:
-  - App shell
-  - Applications
-  - IndexedDB
-  - Indépendante du réseau
-  - Service Workers
-  - hors-ligne
-  - localStorage
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Network_independent
----
-<div class="column-container summary">
-<div class="column-11">Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div>
-</div>
-
-<p>Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :</p>
-
-<ul>
- <li>Re-visiter un site et accèder à son contenu même quand le réseau n'est pas disponible.</li>
- <li>Naviguer dans tout type de contenu que l'utilisateur a visité au moins une fois auparavant, même dans une situation comme une mauvaise connectivité.</li>
- <li>Contrôler ce qui est affiché à l'utilisateur dans les cas d'absence de connexion.</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les service workers</a></dt>
- <dd>Un guide simple pour débutant à l'API Service Worker.</dd>
- <dt><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></dt>
- <dd>Les bases concernant IndexedDB, expliquées en détails.</dd>
- <dt><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></dt>
- <dd>L'API Web Storage en toute simplicité.</dd>
- <dt><a class="external" href="https://developers.google.com/web/updates/2015/11/app-shell">Chargement rapide des applications web avec l'architecture <em>App Shell </em></a></dt>
- <dd>Un guide pour utiliser le<em> coding pattern App Shell</em> pour créer des applications qui se chargent rapidement.</dd>
-</dl>
-
-<h2 id="Technologies">Technologies</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Technologie</th>
-   <th scope="col">Description</th>
-   <th scope="col">Résumé du support</th>
-   <th scope="col">Dernière spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td>
-   <td>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.</td>
-   <td>Expérimental : Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td>
-   <td>{{SpecName('Service Workers')}}</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/IndexedDB">IndexedDB</a></td>
-   <td>Un système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.</td>
-   <td>Répandu dans les navigateurs modernes (<a href="/fr/docs/Web/API/IndexedDB_API#Browser_compatibility">plus de détails</a>)</td>
-   <td>{{SpecName('IndexedDB')}}</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a></td>
-   <td>Une API simple de stockage de clé/valeurs côté client.</td>
-   <td>Répandu (<a href="/fr/docs/Web/API/Web_Storage_API#Browser_compatibility">plus de détails</a>)</td>
-   <td>{{SpecName('Web Storage')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Outils">Outils</h2>
-
-<dl>
- <dt><a class="external" href="http://mozilla.github.io/localForage/">localForage</a></dt>
- <dd>Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.</dd>
- <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
- <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd>
- <dt><a class="external" href="https://github.com/mozilla/oghliner">oghliner</a></dt>
- <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd>
- <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt>
- <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd>
- <dt><a class="external" href="https://www.talater.com/upup/">upup</a></dt>
- <dd>Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.</dd>
-</dl>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<dl>
- <dt><a class="external" href="https://serviceworke.rs/">The service worker cookbook</a></dt>
- <dd>Une série de très bonnes ressources concernant les <em>services workers</em>, montrant comment implémenter une application web hors-ligne, et plus encore.</dd>
-</dl>
diff --git a/files/fr/web/progressive_web_apps/installable/index.html b/files/fr/web/progressive_web_apps/installable/index.html
deleted file mode 100644
index 1692b10b1d..0000000000
--- a/files/fr/web/progressive_web_apps/installable/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Installable
-slug: Web/Progressive_web_apps/Installable
-tags:
-  - Applications
-  - Installable
-  - Manifeste
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Installable
----
-<div class="column-container summary">
-<div class="column-11">Une partie basique de l'expérience avec l'application, pour un utilisateur, est d'avoir l'icône sur l'écran d'accueil et être capable de l'ouvrir dans son propre conteneur avec une bonne intégration avec la plateforme système sous-jacente. Les applications web modernes peuvent avoir ce sentiment d'application native.</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="height: 96px; width: 96px;"></div>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
-
-<h2 id="Technologies">Technologies</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Technologie</th>
-   <th scope="col">Description</th>
-   <th scope="col">Résumé du support</th>
-   <th scope="col">Dernière spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td>
-   <td>Définit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td>
-   <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td>
-   <td>{{SpecName('Manifest')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Outils">Outils</h2>
-
-<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p><em>Ajouter un lien vers des informations liées</em>.</p>
diff --git a/files/fr/web/progressive_web_apps/chargement/index.html b/files/fr/web/progressive_web_apps/loading/index.html
index 72ce203f4f..72ce203f4f 100644
--- a/files/fr/web/progressive_web_apps/chargement/index.html
+++ b/files/fr/web/progressive_web_apps/loading/index.html
diff --git a/files/fr/web/progressive_web_apps/partageable/index.html b/files/fr/web/progressive_web_apps/partageable/index.html
deleted file mode 100644
index 98ad67f276..0000000000
--- a/files/fr/web/progressive_web_apps/partageable/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Partageable
-slug: Web/Progressive_web_apps/Partageable
-tags:
-  - Applications
-  - Applications web modernes
-  - Applications web progressives
-  - Partageable
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Linkable
----
-<div class="column-container summary">
-<div class="column-11">Une des fonctions les plus puissantes du Web est d'être capable de relier une application web à un lien URL spécifique — pas besoin de plateforme d'application, pas de processus complexe d'installation. Cela a toujours été comme ça.</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="height: 40px; width: 82px;"></div>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
-
-<h2 id="Technologies">Technologies</h2>
-
-<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p>
-
-<h2 id="Outils">Outils</h2>
-
-<p><em>Ajouter un lien vers un outil ou une bibliothèque utile.</em></p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p><em>Ajouter un lien vers des informations liées</em>.</p>
diff --git a/files/fr/web/progressive_web_apps/progressive/index.html b/files/fr/web/progressive_web_apps/progressive/index.html
deleted file mode 100644
index d4c0de5453..0000000000
--- a/files/fr/web/progressive_web_apps/progressive/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Progressive
-slug: Web/Progressive_web_apps/Progressive
-tags:
-  - Amélioration progressive
-  - Applications
-  - Design adaptatif
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Progressive
----
-<div class="column-container summary">
-<div class="column-11">Les applications web modernes peuvent être développées pour fournir une experience vraiment agréable avec les navigateurs complètement compatibles, et une expérience correcte (mais pas aussi brillante) avec les navigateurs moins aptes. Nous avons fait cela pendant des années avec de bonnes pratiques comme l'amélioration progressive, donc gardons cette bonne manière de faire les choses.</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="height: 40px; width: 66px;"></div>
-</div>
-
-<h2 id="GuidesEdit">Guides<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Guides"><span>Edit</span></a></h2>
-
-<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
-
-<h2 id="TechnologiesEdit">Technologies<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Technologies"><span>Edit</span></a></h2>
-
-<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça depuis longtemps !</p>
-
-<h2 id="OutilsEdit">Outils<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Outils"><span>Edit</span></a></h2>
-
-<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
-
-<h2 id="Voir_aussiEdit">Voir aussi<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Voir_aussi"><span>Edit</span></a></h2>
-
-<p><em>Ajouter un lien vers des informations liées</em>.</p>
diff --git a/files/fr/web/progressive_web_apps/re-engageable/index.html b/files/fr/web/progressive_web_apps/re-engageable/index.html
deleted file mode 100644
index 729faa93e9..0000000000
--- a/files/fr/web/progressive_web_apps/re-engageable/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Re-engageable
-slug: Web/Progressive_web_apps/Re-engageable
-tags:
-  - Applications
-  - Notifications
-  - Push
-  - Service Workers
-  - Web
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Re-engageable
----
-<div class="column-container summary">
-<div class="column-11">Un des principaux avantages des plateformes natives est la facilité avec laquelle les utilisateurs peuvent se retrouver de nouveaux attirés par des mises-à-jour et du nouveau contenu, même quand ils ne sont pas en train de regarder l'application ou d'utiliser leur appareil. Les applications web modernes peuvent désormais le faire aussi, en utilisant de nouvelles technologies comme l'API Web Push.</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers" lang="fr">Utiliser l'API service workers</a></dt>
- <dd>Un guide simple pour débutant à l'API Service Worker.</dd>
- <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API" lang="en">Utiliser l'API Push</a></dt>
- <dd>Apprendre les bases de l'API Web Push.</dd>
- <dt><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></dt>
- <dd>Un résumé sur les notifications Web.</dd>
-</dl>
-
-<h2 id="Technologies">Technologies</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Technologie</th>
-   <th scope="col">Description</th>
-   <th scope="col">Résumé du support</th>
-   <th scope="col">Dernière spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td>
-   <td>
-    <p>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur sous certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toutes les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elles ne soit servies.</p>
-   </td>
-   <td>Expérimental: Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td>
-   <td>{{SpecName('Service Workers')}}</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/API/Push_API">API Push</a></td>
-   <td>Après s'être inscrit, le service <em>Push</em> fournit un point de terminaison utilisable par le serveur pour transmettre des messages à une application web controlée par un <em>service worker</em> particulier.</td>
-   <td>Expérimental: chrome et Firefox (<a href="/fr/docs/Web/API/Push_API#Browser_Compatibility">plus de détails</a>)</td>
-   <td>{{SpecName("Push API")}}</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/API/Notifications_API">API Notifications</a></td>
-   <td>Lancer des notifications systèmes directement depuis les applications web.</td>
-   <td>Répandu dans les navigateurs modernes  (<a href="/fr/docs/Web/API/Notifications_API#Browser_compatibility">plus de détails</a>)</td>
-   <td>{{SpecName('Web Notifications')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Outils">Outils</h2>
-
-<dl>
- <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
- <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd>
- <dt><a class="external" href="https://github.com/mozilla/oghliner" lang="en">oghliner</a></dt>
- <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd>
- <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache" lang="en">sw-precache</a></dt>
- <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd>
-</dl>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<dl>
- <dt><a class="external" href="https://serviceworke.rs/" lang="en">The service worker cookbook</a></dt>
- <dd>Une série de très bonnes ressources concernant les service worker, montrant comment implémenter une application web hors-ligne, et plus encore.</dd>
-</dl>
diff --git a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html
index e656d29cde..e656d29cde 100644
--- a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html
+++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html
diff --git a/files/fr/web/progressive_web_apps/responsive/media_types/index.html b/files/fr/web/progressive_web_apps/responsive/media_types/index.html
new file mode 100644
index 0000000000..3926d7e225
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/responsive/media_types/index.html
@@ -0,0 +1,396 @@
+---
+title: Médias
+slug: CSS/Premiers_pas/Médias
+tags:
+  - CSS
+  - 'CSS:Premiers_pas'
+translation_of: Web/Progressive_web_apps/Responsive/Media_types
+---
+<p> </p>
+<p>La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.</p>
+<p>Cette page revient sur le but et la structure des feuilles de style CSS.</p>
+<h3 id="Information_:_les_m.C3.A9dias" name="Information_:_les_m.C3.A9dias">Information : les médias</h3>
+<p>Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.</p>
+<p>Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.</p>
+<p>Pour spécifier des règles spécifiques à un type de média, utilisez <code>@media</code> suivi du type de média, suivi de crochets courbes entourant les règles.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Exemple</caption>
+  <tbody>
+    <tr>
+      <td>Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site.
+        <p>Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id <code>nav-area</code>.</p>
+        <p>Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :</p>
+        <div style="width: 30em;">
+          <pre class="eval">
+@media print {
+  #nav-area {display: none;}
+  }
+</pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p>Voici certains des types de média courants :</p>
+<table style="margin-left: 2em;">
+  <tbody>
+    <tr>
+      <td><code>screen</code></td>
+      <td>Écran d'ordinateur en couleurs</td>
+    </tr>
+    <tr>
+      <td><code>print</code></td>
+      <td>Média paginé</td>
+    </tr>
+    <tr>
+      <td style="padding-right: 1em;"><code>projection</code></td>
+      <td>Projection sur un écran</td>
+    </tr>
+    <tr>
+      <td><code>all</code></td>
+      <td>Tous les médias (la valeur par défaut)</td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;">
+  <caption>
+    Plus de détails</caption>
+  <tbody>
+    <tr>
+      <td>Il existe d'autres manières de spécifier le type de média d'une série de règles.
+        <p>Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut <code>media</code> de la balise <code>LINK</code>.</p>
+        <p>En CSS, vous pouvez utiliser <code>@import</code> au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.</p>
+        <p>En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.</p>
+        <p>Pour tous les détails sur les types de média, consultez <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> dans la spécification CSS.</p>
+        <p>Plus d'exemples utilisant la propriété <code>display</code> sont présentés sur une prochaine page de ce tutoriel : <a href="/fr/CSS/Premiers_pas/Données_XML" title="fr/CSS/Premiers_pas/Données_XML">Données XML</a>.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<h4 id="Impression" name="Impression">Impression</h4>
+<p>CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.</p>
+<p>Une règle <code>@page</code> permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, <code>@page:left</code>, et les pages de droite, <code>@page:right</code>.</p>
+<p>Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (<code>cm</code>) et millimètres (<code>mm</code>), les pouces (<code>in</code>) ou les points (1 <code>pt</code> = 1/72 pouces). Il est également toujours approprié d'utiliser <code>em</code> pour s'accorder à la taille de police, et les pourcentages (<code>%</code>).</p>
+<p>Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés <code>page-break-before</code> (saut de page avant), <code>page-break-after</code> (saut de page après) et <code>page-break-inside</code> (saut de page à l'intérieur).</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Exemples</caption>
+  <tbody>
+    <tr>
+      <td>Cette règle définit les marges de la page à deux centimètres de chaque côté :
+        <div style="width: 30em;">
+          <pre class="eval">
+@page {margin: 2cm;}
+</pre>
+        </div>
+        <p>Cette règle s'assure que chaque élément <small>H1</small> commencera une nouvelle page :</p>
+        <div style="width: 30em;">
+          <pre class="eval">
+h1 {page-break-before: always;}
+</pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;">
+  <caption>
+    Plus de détails</caption>
+  <tbody>
+    <tr>
+      <td>Pour tous les détails sur la gestion des médias paginés par CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> dans la spécification CSS.
+        <p>Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<h4 id="Interfaces_utilisateur" name="Interfaces_utilisateur">Interfaces utilisateur</h4>
+<p>CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.</p>
+<p>Il n'y a pas de type de média spécial pour ce type de périphériques.</p>
+<p>Voici les cinq sélecteurs spéciaux :</p>
+<table style="margin-left: 2em;">
+  <tbody>
+    <tr>
+      <td style="width: 10em;"><strong>Selecteur</strong></td>
+      <td><strong>Sélectionne</strong></td>
+    </tr>
+    <tr>
+      <td><code>E:hover</code></td>
+      <td>Tout élément E survolé par le pointeur</td>
+    </tr>
+    <tr>
+      <td><code>E:focus</code></td>
+      <td>Tout élément E ayant le focus du clavier</td>
+    </tr>
+    <tr>
+      <td><code>E:active</code></td>
+      <td>Tout élément E impliqué dans l'action courante de l'utilisateur</td>
+    </tr>
+    <tr>
+      <td><code>E:link</code></td>
+      <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>n'a pas</em> visitée récemment</td>
+    </tr>
+    <tr>
+      <td><code>E:visited</code></td>
+      <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>a</em> visitée récemment</td>
+    </tr>
+  </tbody>
+</table>
+<p>La propriété <code>cursor</code> spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :</p>
+<table style="margin-left: 2em;">
+  <tbody>
+    <tr>
+      <td style="width: 10em;"><strong>Valeur</strong></td>
+      <td><strong>Indique</strong></td>
+    </tr>
+    <tr style="cursor: pointer;">
+      <td><code>pointer</code></td>
+      <td>Indique un lien</td>
+    </tr>
+    <tr style="cursor: wait;">
+      <td><code>wait</code></td>
+      <td>Indique que le programme n'accepte aucune interaction pour le moment</td>
+    </tr>
+    <tr style="cursor: progress;">
+      <td><code>progress</code></td>
+      <td>Indique que le programme fonctionne, mais peut toujours accepter une autre commande</td>
+    </tr>
+    <tr style="cursor: default;">
+      <td><code>default</code></td>
+      <td>Le curseur par défaut (habituellement une flèche)</td>
+    </tr>
+  </tbody>
+</table>
+<p><br>
+  Une propriété <code>outline</code> crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété <code>border</code>, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.</p>
+<p>Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut <code>disabled</code> ou <code>readonly</code>. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : <code>{{ mediawiki.external('disabled') }}</code> ou <code>{{ mediawiki.external('readonly') }}</code>.</p>
+<p> </p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Exemple</caption>
+  <tbody>
+    <tr>
+      <td>Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui :
+        <div style="width: 30em;">
+          <pre>
+.bouton-vert {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.bouton-vert[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.bouton-vert:active {
+  border-style: inset;
+  }
+</pre>
+        </div>
+        <p>Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :</p>
+        <table style="border: 2px outset #36b; padding: 1em; background-color: #fff;">
+          <tbody>
+            <tr>
+              <td>
+                <table>
+                  <tbody>
+                    <tr>
+                      <td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td>
+                      <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td>
+                      <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Cliquez ici</span></td>
+                    </tr>
+                    <tr style="line-height: 25%;">
+                      <td> </td>
+                    </tr>
+                    <tr style="font-style: italic;">
+                      <td>disabled</td>
+                      <td>normal</td>
+                      <td>active</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p>Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+  <caption>
+    Plus de détails</caption>
+  <tbody>
+    <tr>
+      <td>Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> dans la spécification CSS.
+        <p>Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Action_:_impression_d.27un_document" name="Action_:_impression_d.27un_document">Action : impression d'un document</h3>
+<p>Créez un nouveau document HTML, <code>doc4.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+  <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+
+&lt;HEAD&gt;
+&lt;TITLE&gt;Exemple à imprimer&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style4.css"&gt;&lt;/strong&gt;
+&lt;/HEAD&gt;
+
+&lt;BODY&gt;
+&lt;H1&gt;Section A&lt;/H1&gt;
+&lt;P&gt;Ceci est la première section...&lt;/P&gt;
+
+&lt;H1&gt;Section B&lt;/H1&gt;
+&lt;P&gt;Ceci est la seconde section...&lt;/P&gt;
+
+&lt;DIV id="en-tete-impression"&gt;
+Titre pour les médias paginés
+&lt;/DIV&gt;
+
+&lt;DIV id="pied-de-page-impression"&gt;
+Page :
+&lt;/DIV&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>Créez une nouvelle feuille de style, <code>style4.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+  <pre>/*** Exemple d'impression ***/
+
+/* Réglages par défaut pour l'écran */
+#en-tete-impression,
+#pied-de-page-impression {
+  display: none;
+  }
+
+/* Uniquement pour l'impression */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#en-tete-impression {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#pied-de-page-impression {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#pied-de-page-impression:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* fin des paramètres pour l'impression */
+</pre>
+</div>
+<p>Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.</p>
+<p>Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.</p>
+<table>
+  <tbody>
+    <tr>
+      <td>
+        <table style="border: 2px outset #36b; padding: 1em;">
+          <tbody>
+            <tr>
+              <td>
+                <table style="width: 15em; margin-right: 2em;">
+                  <tbody>
+                    <tr>
+                      <td>
+                        <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">
+                          Titre</div>
+                        <div style="font-size: 150%; font-weight: bold;">
+                          Section A</div>
+                        <div style="font-size: 75%;">
+                          Ceci est la première section...</div>
+                        <div style="font-size: 150%; text-align: right; margin-top: 12em;">
+                          Page : 1</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>
+        <table style="border: 2px outset #36b; padding: 1em;">
+          <tbody>
+            <tr>
+              <td>
+                <table style="width: 15em; margin-right: 2em;">
+                  <tbody>
+                    <tr>
+                      <td>
+                        <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">
+                          Titre</div>
+                        <div style="font-size: 150%; font-weight: bold;">
+                          Section B</div>
+                        <div style="font-size: 75%;">
+                          Ceci est la seconde section...</div>
+                        <div style="font-size: 150%; text-align: right; margin-top: 12em;">
+                          Page : 2</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Challenge</caption>
+  <tbody>
+    <tr>
+      <td>Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé.
+        <p>Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.</p>
+        <p>Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
+<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Médias" title="Talk:fr/CSS/Premiers_pas/Médias">page de discussion</a>.</p>
+<p>Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : <strong><a href="/fr/docs/CSS/Premiers_pas/JavaScript" title="fr/CSS/Premiers_pas/JavaScript">JavaScript</a></strong>.</p>
diff --git a/files/fr/web/progressive_web_apps/adaptative/index.html b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html
index f29786204c..f29786204c 100644
--- a/files/fr/web/progressive_web_apps/adaptative/index.html
+++ b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html
diff --git a/files/fr/web/progressive_web_apps/securisee/index.html b/files/fr/web/progressive_web_apps/securisee/index.html
deleted file mode 100644
index c5c90869f4..0000000000
--- a/files/fr/web/progressive_web_apps/securisee/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Sécurisée
-slug: Web/Progressive_web_apps/Securisee
-tags:
-  - Applications
-  - Applications web modernes
-  - Applications web progressives
-  - HTTPS
-  - Sécurité
-  - Web
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Progressive_web_apps/Safe
----
-<div class="column-container summary">
-<div class="column-11">La plateforme Web fournit un mécanisme sécurisé de livraison permettant d'éviter l'infiltration et s'assurer que le contenu n'a pas été altéré - aussi longtemps que vous bénéficiez de l'avantage du HTTPS et que vous développez votre application avec la sécurité à l'esprit.</div>
-
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="height: 40px; width: 38px;"></div>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
-
-<h2 id="Technologies">Technologies</h2>
-
-<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p>
-
-<h2 id="Outils">Outils</h2>
-
-<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p><em>Ajouter un lien vers des informations liées</em>.</p>