content-fr.html

<!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="fr" dir="ltr"><![endif]--><!--[if gt IE 8]><!-->
<html class="no-js" lang="fr" dir="ltr">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
		wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>Page de contenu - Canada.ca
</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta name="description" content="La Boîte à outils de l’expérience Web (BOEW) rassemble différents composants réutilisables et prêts-à-utiliser pour la conception et la mise à jour de sites Web innovateurs qui sont à la fois accessibles, conviviaux et interopérables. Tous ces composants réutilisables sont des logiciels libres mis à la disposition des ministères et des collectivités Web externes.">
<!--[if gte IE 9 | !IE ]><!-->
<link href="./GCWeb/assets/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="./GCWeb/css/theme.min.css">
<!--<![endif]-->
<!--[if lt IE 9]>
		<link href="./GCWeb/assets/favicon.ico" rel="shortcut icon" />
		
		<link rel="stylesheet" href="./GCWeb/css/ie8-theme.min.css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="./wet-boew/js/ie8-wet-boew.min.js"></script>
		<![endif]-->
<!--[if lte IE 9]>
		
		
		<![endif]-->
<noscript><link rel="stylesheet" href="./wet-boew/css/noscript.min.css" /></noscript>
</head>
<body vocab="http://schema.org/" typeof="WebPage">
<nav>
<ul id="wb-tphp">
<li class="wb-slc">
<a class="wb-sl" href="#wb-cont">Passer au contenu principal</a>
</li>
<li class="wb-slc">
<a class="wb-sl" href="#wb-info">Passer à «&#160;Au sujet du gouvernement&#160;»</a>
</li>
</ul>
</nav>
<header>
<div id="wb-bnr" class="container">
<section id="wb-lng" class="text-right">
<h2 class="wb-inv">Sélection de la langue</h2>
<ul class="list-inline margin-bottom-none">
<li><a lang="en" href="content-en.html">English</a></li>
</ul>
</section>
<div class="row">
<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
<a href="https://www.canada.ca/fr.html" property="url"><img src="./GCWeb/assets/sig-blk-fr.svg" alt="" property="logo"><span class="wb-inv" property="name"> Gouvernement du Canada / <span lang="en">Government of Canada</span></span></a>
<meta property="areaServed" typeof="Country" content="Canada">
<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
</div>
<section id="wb-srch" class="col-lg-8 text-right">
<h2>Recherche</h2>
<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
<div class="form-group">
<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca">
<datalist id="wb-srch-q-ac">
</datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Recherche</span></button>
</div>
</form>
</section>
</div>
</div>
<nav class="gcweb-menu" typeof="SiteNavigationElement">
<div class="container">
<h2 class="wb-inv">Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="./ajax/sitemenu-v5-fr.html">
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/emplois.html">Emplois et milieu de travail</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/immigration-citoyennete.html">Immigration et citoyenneté</a></li>
<li role="presentation"><a role="menuitem" href="https://voyage.gc.ca/">Voyage et tourisme</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/entreprises.html">Entreprises et industrie</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/prestations.html">Prestations</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/sante.html">Santé</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/impots.html">Impôts</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/environnement.html">Environnement et ressources naturelles</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/defense.html">Sécurité nationale et défense</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/culture.html">Culture, histoire et sport</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/police.html">Services de police, justice et urgences</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/transport.html">Transport et infrastructure</a></li>
<li role="presentation"><a role="menuitem" href="http://international.gc.ca/world-monde/index.aspx?lang=fra">Canada et le monde</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/finance.html">Argent et finances</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/science.html">Science et innovation</a></li>
</ul>
</div>
</nav>
<nav id="wb-bc" property="breadcrumb">
<h2>Vous êtes ici :</h2>
<div class="container">
<ol class="breadcrumb">
<li><a href="https://www.canada.ca/fr.html">Accueil</a></li>
</ol>
</div>
</nav>
</header>
<main property="mainContentOfPage" class="container" typeof="WebPageElement">
<h1 property="name" id="wb-cont">Page de contenu</h1>
<p><strong>De <a href="#">[nom de l’institution]</a></strong></p>
<section>
<h2>En-tête&#32;2&#32;(<code>h2</code>)</h2>
<section>
<h3>En-tête&#32;3&#32;(<code>h3</code>)</h3>
<section>
<h4>En-tête&#32;4&#32;(<code>h4</code>)</h4>
<section>
<h5>En-tête&#32;5&#32;(<code>h5</code>)</h5>
<section>
<h6>En-tête&#32;6&#32;(<code>h6</code>)</h6>
<p>Paragraphe - apparence par défaut</p>
</section>
</section>
</section>
</section>
</section>
<p><a href="#">Lien</a></p>
<ul>
<li>liste à puces&#32;(<code>ul</code>) - niveau&#32;1
<ul>
<li>liste à puces&#32;(<code>ul</code>) - niveau&#32;2
<ul>
<li>liste à puces&#32;(<code>ul</code>) - niveau&#32;3</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>liste ordonnée&#32;(<code>ol</code>) - niveau&#32;1</li>
<li>liste ordonnée&#32;(<code>ol</code>) - niveau&#32;1
<ol>
<li>liste ordonnée&#32;(<code>ol</code>) - niveau&#32;2</li>
<li>liste ordonnée&#32;(<code>ol</code>) - niveau&#32;2
<ol>
<li>liste ordonnée&#32;(<code>ol</code>) - niveau&#32;3</li>
<li>liste ordonnée&#32;(<code>ol</code>) - niveau&#32;3</li>
</ol>
</li>
</ol>
</li>
</ol>
<table class="table table-striped">
<caption>Légende de table</caption>
<thead>
<tr>
<th scope="col">En-tête de table&#32;(<code>th</code>)</th>
<th scope="col">En-tête de table&#32;(<code>th</code>)</th>
<th scope="col">En-tête de table&#32;(<code>th</code>)</th>
<th scope="col">En-tête de table&#32;(<code>th</code>)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
</tr>
<tr>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
</tr>
<tr>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
<td>Données de table&#32;(<code>td</code>)</td>
</tr>
</tbody>
</table>
<form method="post" action="#" class="form-horizontal">
<div class="form-group">
<label for="data1" class="col-sm-3 control-label">Formulaire&#32;<code>input</code></label>
<div class="col-sm-9">
<input type="text" id="data1" name="data1" class="form-control">
</div>
</div>
<div class="form-group">
<label for="data2" class="col-sm-3 control-label">Formulaire&#32;<code>textarea</code></label>
<div class="col-sm-9">
<textarea id="data2" rows="3" cols="15" name="data2" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label for="data4" class="col-sm-3 control-label">Formulaire&#32;<code>select</code></label>
<div class="col-sm-9">
<select name="data4" id="data4" class="form-control">
<option value="1">Option&#32;1</option>
<option value="2">Option&#32;2</option>
<option value="3">Option&#32;3</option>
<option value="4">Option&#32;4</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary">Soumettre</button>
</div>
</div>
</form>
<blockquote>
<p>"<code>blockquote</code>"</p>
<footer><code>footer</code> <cite><code>cite</code></cite></footer>
</blockquote>
<h2 id="cnt-wdth-lmtd">Section avec une largeur de contenu limitée</h2>
<p>Ajouter la classe CSS <code>.cnt-wdth-lmtd</code> à l'élément de section <code>&lt;section class="cnt-wdth-lmtd"&gt;...&lt;section&gt;</code> à l'intérieur du contenu principal de votre page. De plus amples renseignements sont disponibles dans la spécification du contenu et de l'architecture de l'information pour Canada.ca.</p>
<section class="cnt-wdth-lmtd">
<h3>Exemple de section avec une largeur de contenu limitée</h3>
<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
</section>
<h2 id="call-to-action">Bouton d'appel à l'action</h2>
<p>Ajouter la classe CSS <code>.btn-call-to-action</code> à votre bouton ou lien qui definie l'appel à l'action principal de la page. Par example le bouton ou le lien de lancement d'une page de lancements d'un service. De plus amples renseignements sont disponibles dans la spécification du contenu et de l'architecture de l'information pour Canada.ca.</p>
<div class="row">
<div class="col-sm-6">
<h3>Lien</h3>
<p class="mrgn-bttm-0"><a class="btn btn-call-to-action" href="#">[Appel à l'action]</a></p>
<pre><code>&lt;p&gt;&lt;a class="btn <strong>btn-call-to-action</strong>" href="#"&gt;[Appel à l'action]&lt;/a&gt;&lt;/p&gt;</code></pre>
</div>
<div class="col-sm-6">
<h3>Bouton</h3>
<button class="btn btn-call-to-action" type="button">[Appel à l'action]</button>
<pre><code>&lt;button class="btn <strong>btn-call-to-action</strong>" type="button"&gt;[Appel à l'action]&lt;/button&gt;</code></pre>
</div>
</div>
<div class="pagedetails">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4">
<details class="brdr-0">
<summary class="btn btn-default text-center">Signaler un problème sur cette page</summary>
<div class="well row">
<div class="gc-rprt-prblm">
<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
<form action="#">
<fieldset>
<legend><span class="field-name">Veuillez cocher toutes les réponses pertinentes&nbsp;:</span></legend>
<div class="checkbox">
<label for="problem1"><input type="checkbox" data-reveal="#broken" name="problem" value="Something is broken" id="problem1">Quelque chose ne fonctionne pas</label>
</div>
<div class="form-group hide" id="broken">
<label for="problem1-detail">Fournissez plus des détails (optionnel)&nbsp;:</label>
<input type="text" class="form-control full-width" id="problem1-detail">
</div>
<div class="checkbox">
<label for="problem2"><input type="checkbox" data-reveal="#spelling" name="problem" value="It has spelling or grammar mistakes" id="problem2">Il y a des erreurs d’orthographe ou de grammaire</label>
</div>
<div class="form-group hide" id="spelling">
<label for="problem2-detail">Fournissez plus des détails (optionnel)&nbsp;:</label>
<input type="text" class="form-control full-width" id="problem2-detail">
</div>
<div class="checkbox">
<label for="problem3"><input type="checkbox" data-reveal="#wrong" name="problem" value="The information is wrong" id="problem3">L’information est erronée</label>
</div>
<div class="form-group hide" id="wrong">
<label for="problem3-detail">Fournissez plus des détails (optionnel)&nbsp;:</label>
<input type="text" class="form-control full-width" id="problem3-detail">
</div>
<div class="checkbox">
<label for="problem4"><input type="checkbox" data-reveal="#outdated" name="problem" value="The information is outdated" id="problem4">L’information n’est plus à jour</label>
</div>
<div class="form-group hide" id="outdated">
<label for="problem4-detail">Fournissez plus des détails (optionnel)&nbsp;:</label>
<input type="text" class="form-control full-width" id="problem4-detail">
</div>
<div class="checkbox">
<label for="problem5"><input type="checkbox" data-reveal="#find" name="problem" value="I can’t find what I’m looking for" id="problem5">Je ne trouve pas ce que je cherche</label>
</div>
<div class="form-group hide" id="find">
<label for="problem5-detail">Décrivez ce que vous cherchez (optionnel)&nbsp;:</label>
<input type="text" class="form-control full-width" id="problem5-detail">
</div>
<div class="checkbox">
<label for="problem6"><input type="checkbox" data-reveal="#confusing" name="problem" value="It’s confusing" id="problem6">Autre</label>
</div>
<div class="form-group hide" id="confusing">
<label for="problem6-detail">Fournissez plus des détails (optionnel)&nbsp;:</label>
<input type="text" class="form-control full-width" id="problem6-detail">
</div>
</fieldset>
<button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Soumettre</button>
</form>
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide">
<h3>Merci de votre aide!</h3>
<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
</div>
</div>
</div>
</details>
</div>
<div class="wb-share col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
</div>
<dl id="wb-dtmd">
<dt>Date de modification&#160;:&#32;</dt>
<dd><time property="dateModified">2017-09-29</time></dd>
</dl>
</div>
</main>
<footer id="wb-info">
<div class="landscape">
<nav class="container wb-navcurr">
<h2 class="wb-inv">Au sujet du gouvernement</h2>
<ul class="list-unstyled colcount-sm-2 colcount-md-3">
<li><a href="https://www.canada.ca/fr/contact.html">Contactez-nous</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/min.html">Ministères et organismes</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/fonctionpublique.html">Fonction publique et force militaire</a></li>
<li><a href="https://www.canada.ca/fr/nouvelles.html">Nouvelles</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/systeme/lois.html">Traités, lois et règlements</a></li>
<li><a href="https://www.canada.ca/fr/transparence/rapports.html">Rapports à l'échelle du gouvernement</a></li>
<li><a href="https://pm.gc.ca/fra">Premier ministre</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/systeme.html">Comment le gouvernement fonctionne</a></li>
<li><a href="https://ouvert.canada.ca/">Gouvernement ouvert</a></li>
</ul>
</nav>
</div>
<div class="brand">
<div class="container">
<div class="row">
<nav class="col-md-9 col-lg-10 ftr-urlt-lnk">
<h2 class="wb-inv">À propos du site</h2>
<ul>
<li><a href="https://www.canada.ca/fr/sociaux.html">Médias sociaux</a></li>
<li><a href="https://www.canada.ca/fr/mobile.html">Applications mobiles</a></li>
<li><a href="https://www1.canada.ca/fr/nouveausite.html">À propos de Canada.ca</a></li>
<li><a href="https://www.canada.ca/fr/transparence/avis.html">Avis</a></li>
<li><a href="https://www.canada.ca/fr/transparence/confidentialite.html">Confidentialité</a></li>
</ul>
</nav>
<div class="col-xs-6 visible-sm visible-xs tofpg">
<a href="#wb-cont">Haut de la page <span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="col-xs-6 col-md-3 col-lg-2 text-right">
<img src="./GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada">
</div>
</div>
</div>
</div>
</footer>
<!--[if gte IE 9 | !IE ]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="./wet-boew/js/wet-boew.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
		<script src="./wet-boew/js/ie8-wet-boew2.min.js"></script>
		
		<![endif]-->
<script src="./GCWeb/js/theme.min.js"></script>
</body>
</html>