Guide de styles web standards de ge.ch

Introduction

En complément de la charte graphique le guide de styles (styleguide) porte sur la mise en application de ces éléments pour les projets internet de la République et Canton de Genève.

Il contient notamment les références couleur, les références typographiques ou même liste des iconographies. Le comportement du responsive webdesign y sont automatiquement intégrés. 

Pour créer un site web (ou une application web ) l'utilisation du CSS de production permet partager efficacement ce guide de référence pour les projets. Il permet de valider la compatibilité sur les navigateurs et appareils du marché et de garantir la mise à jour de la documentation. La documentation est au coeur de la communication d’un projet. Elle est mise à jour à chaque modification pour toujours refléter l’état actuel des standards de ge.ch.  

Ressources utiles

Des modèles sont disponibles pour intégrer les standards des applications -ou- sites devant appliquer ces visuels :

Un document complémentaire référence également les principes graphiques :


Index


Couleurs

 Couleurs de base

La palette des couleurs propre au site est assez limitée pour ne pas donner plus d'importance au contenant qu'au contenu. Une série de gris neutre est ajoutée pour segmenter des zones de mise en avant. 

 
 

primary
#0C6BA8

 
 

background
#ffffff

 
 

text
#333333

 
 

gris1
#ededed

 
 

gris2
#e1e1e1

 
 

gris3
#b2b2b2

 
 Couleurs de statuts

Quatre couleurs de complément sont définies dans la palette, afin d'indiquer des statuts dans des formulaires et l'importance de messages à direction des aux usagers.

 
 

success
#5cb85c

 
 

info
#ffffff

 
 

warning
#f0ad4e

 
 

danger et notifications
#DD1840

 
 Autres couleurs

Couleurs de complément générées.

 
 

#13204c

 
 

#555555

 
 

#777777

 
 

#888888

 
 

#999999

 
 

#cccccc

 
 

#f0f0f0

 
 Couleurs du mode sombre

La palette des couleurs principales a été déclinée pour le mode sombre.

 
 

background
#1E1E1E

 
 

gris 100
#303030

 
 

gris 200
#444

 
 

gris 300
#6B6B6B

 
 

gris 400
#A5A5A5

 
 

gris 500
#E1E1E1

 
 

text
#EEE

 
 

primary
#eee

 

 Usage

La couleur dominante "primary" [#33ab7] est utilisée pour les actions "positives" et les actions "recommandées". Le bouton avec la couleur "primary" garantissent une avance normale d'un processus, la conclusion d'une action ou d'une séquence.

Le bouton "primary" étant le lien le plus important et/ou l'action souhaitée logique, il doit:

  • Être le premier bouton dans l'ordre de tabulation des bouton "submit"
  • Se trouver à gauche quand deux boutons sont l'un à côté de l'autre.
  • Se trouver hors de portée d'une manipulation erronnée (exemple : la navigation au pouce droit sur un écran de mobile, risque de provoquer un clic non souhaité par simple déplacement vertical dans la page).

 Exemple

 

Voir le code source 

<a class="btn btn-primary" href="https://www.ge.ch/">Bouton d'action</a></div>
<a class="btn btn-secondary" href="https://www.ge.ch/">En savoir plus</a></div>

Retour à l'index  


 Typographie

 Usage

Le site www.ge.ch utilise la police de caractère "Roboto" ainsi que les icônes de la police "Fontawesome". Les différentes graisses de la police Roboto sont utilisées selon le besoin (voir les sections "Titres" et "Enrichissements et styles"). L'interlignage est proportionnel à la taille de la police, avec un ratio de 0.73 pour le paragraphe, et de 0.8 pour les titres.

 Exemple

Lorem ipsum

Dolor sit amet, consectetur adipiscing elit. Aliquam risus nisl, condimentum nec eros at, pellentesque blandit ipsum. Suspendisse est eros, finibus sit amet vulputate eu, semper eu eros. Suspendisse in mi nisl. Donec et lorem eu justo tincidunt lacinia. Nam blandit mi et purus imperdie, quis porta enim consectetur. Curabitur et nunc bibendum, vehicula felis et, condimentum ante. Suspendisse interdum orci metus, sit amet condimentum erat sollicitudin a.

Integer sagittis scelerisque elit, eget tincidunt sapien interdum.

Morbi efficitur blandit lacus a tristique. Proin gravida, quam vitae hendrerit lacinia, nulla magna ultricies nibh, eget consequat mauris ex at dui. Praesent vitae mi ut felis sodales posuere et ut ligula. Nam ultrices aliquet imperdiet. Duis eu euismod augue, vel ornare velit. Nunc ac sapien nec lacus consectetur bibendum. In non elit rhoncus, ornare augue ac, venenatis neque. In a eros ultrices mi convallis aliquam in vitae urna.

Voir le code source   

<h5>
    Lorem ipsum
</h5>
<p>
    Dolor sit amet, consectetur adipiscing elit. Aliquam risus nisl, condimentum nec eros at, 
    pellentesque blandit ipsum. Suspendisse est eros, finibus sit amet vulputate eu, semper eu 
    eros. Suspendisse in mi nisl. Donec et lorem eu justo tincidunt lacinia. Nam blandit mi et 
    <strong>purus imperdie</strong>, quis porta enim consectetur. Curabitur et nunc bibendum, 
    vehicula felis et, condimentum ante. Suspendisse interdum orci metus, sit amet condimentum 
    erat sollicitudin a.
</p>
<div class="exergue">
    Integer sagittis scelerisque elit, eget tincidunt sapien interdum.
</div>
<p>
    <small>
        Morbi efficitur blandit lacus a tristique. Proin gravida, quam vitae hendrerit lacinia, nulla magna ultricies nibh, eget consequat mauris ex at dui. Praesent vitae mi ut felis sodales posuere et ut ligula. Nam ultrices aliquet imperdiet. Duis eu euismod augue, vel ornare velit. Nunc ac sapien nec lacus consectetur bibendum. In non elit rhoncus, ornare augue ac, venenatis neque. In a eros ultrices mi convallis aliquam in vitae urna.
    </small>
</p>

Retour à l'index  


 Enrichissements et styles

Les enrichissements typographique sont autorisés dans la limite de ce que propose l'éditeur WYSIWYG.

Normal
Lorem ipsum
Gras
Lorem ipsum
Italique
Lorem ipsum
Souligné
Lorem ipsum
Indice inférieur
Lorem ispum factor 
Indice supérieur
Lorem auctor libero 
Espace insécable
Lorem ispum
Style de texte exergue
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Style en ligne insécable
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Style encart
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Voir le code source   

<p>Normal</p>

<strong>Gras</strong>

<em>Italique</em>

<u>Souligné</u>

Indice <sub>inférieur</sub>

Indice <sup>supérieur</sup>

<span class="edg-cke-nbsp">Espace insécable</span>

<div class="exergue">Style de texte exergue</div>

<span class="edg-cke-nbsp">Style en ligne insécable</span>

Retour à l'index  


 Titres

Chaque page internet doit comporter un unique titre H1. Puis, pour les titres suivants e la page, il faut utiliser les autres titres dans l'ordre incrémental: H2, H3, etc.

Titre de taille H1 

Titre de taille H2 

Titre de taille H3 

Titre de taille H4 

Titre de taille H5 
Titre de taille H6 
 

Voir le code source  

<h1>Titre de taille H1</h1>

<h2>Titre de taille H2</h2>

<h3>Titre de taille H3</h3>

<h4>Titre de taille H4</h4>

<h5>Titre de taille H5</h5>

<h6>Titre de taille H6</h6>

Retour à l'index  


 Liens 

 Usage

Les critères relatifs à la bonne utilisation du titre d’un lien sont basés sur les règles d'Opquast.

 Exemples

Lien vers le site externe
https://www.ch.ch
Lien vers une adresse e-mail
mon-destinataire@son-fai.ch
Liens vers une autre section de la page courante
Retour en haut
Lien vers un page interne
Document
Lien vers la prestation e-démarche anonyme
Lien vers les réseaux sociaux
 X-twitter 

Voir le code source 

<a href="http://ch.ch/">https://www.ch.ch</a>

<a href="mailto:mon-destinataire@son-fai.ch?subject=Le%20sujet%20de%20mon%20message%20(optionnel)&amp;body=Corps%20de%20mon%20message%20(optionnel)" title="Descriptif de l'action">mon-destinataire@son-fai.ch</a>

<a href="#Liens">Retour en haut</a>

<span class="document tag"><a href="/document/6025/telecharger" target="_blank" type="application/pdf" title="Document">Document<span class="far fa-file-pdf"></span></a></span>

<a aria-label="Lien vers la prestation e-demarche" class="e-demarche-logo col-12" href="/node/1"><span>Prestation e-démarche anonyme</span></a>

<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-facebook-square fab">&nbsp;</span><span>Facebook</span></a> 
<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-twitter-square fab">&nbsp;</span><span>Twitter</span></a> 
<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fab fa-instagram-square">&nbsp;</span><span>Instagram</span></a> 
<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-linkedin fab">&nbsp;</span><span>Linkedin</span></a>

Retour à l'index  


 Boutons

 Usage

Les boutons peuvent être créés à partir:

  • d'un lien <a class="btn ...">
  • d'un bouton <button class="btn ...">
  • d'un champ "input" <input class="btn ...">

 Exemples

Lien

Voir le code source 

<a class="btn btn-dark">Lien</a>

<button class="btn btn-secondary" type="button">Bouton</button>

<input class="btn btn-primary" type="submit" value="Champ de soumission">

Retour à l'index  


 Tableaux 

 Usage

Les tables par défaut sont marquées par des filets de séparations horizontales et verticales. De plus, un rang sur deux à une couleur de fond alternée afin de faciliter la lecture.

A noter que les tableaux ne doivent pas servir au montage de contenus; ils sont exclusivement réservés à l'affichage de données tabulaires.

 Exemples

 Tableau de base
Prénom Nom E-mail
John Doe john@example.com
Marie Moe marie@exemple.com
Julie dooley julie@exemple.com

 

 Tableau dynamique
TITRE TITRE
data 1 data 2
data 3 data 4

Voir le code source  

<table class="table table-responsive">
    <thead>
        <tr>
            <th>Prénom</th>
            <th>Nom</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td><a href="mailto:john@example.com">john@example.com</a></td>
        </tr>
        <tr>
            <td>Marie</td>
            <td>Moe</td>
            <td><a href="mailto:marie@exemple.com">marie@exemple.com</a></td>
        </tr>
        <tr>
            <td>Julie</td>
            <td>dooley</td>
            <td><a href="mailto:julie@exemple.com">julie@exemple.com</a></td>
        </tr>
    </tbody>
</table>


<table class="table datatables table-responsive">
    <thead>
        <tr>
            <th>TITRE</th>
            <th>TITRE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
        <tr>
            <td>data 3</td>
            <td>data 4</td>
        </tr>
    </tbody>
</table>

Retour à l'index  


 Listes

 Usage

Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Dans le cas des listes ordonnées, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés.

 Exemples

 Les listes non-ordonnées
  • Elément de la liste
  • Elément de la liste
    • Sous-élément de la liste
    • Sous-élément de la liste
  • Elément de la liste
  • Elément de la liste
  • Elément de la liste

 

 Les listes ordonnées
  1. Elément de la liste
    1. Elément de la liste
    2. Elément de la liste
  2. Elément de la liste

 

Voir le code source  

<ul>
    <li>Elément de la liste</li>
    <li>Elément de la liste
    <ul>
        <li>Sous-élément de la liste</li>
        <li>Sous-élément de la liste</li>
    </ul>
    </li>
    <li>Elément de la liste</li>
    <li>Elément de la liste</li>
    <li>Elément de la liste</li>
</ul>

<ol>
    <li>Elément de la liste</li>
    <li>Elément de la liste</li>
</ol>

Retour à l'index  


 Elément dépliable

 Usage

Les éléments dépliables, également surnommés "boîtes à coucou" sont utilisables dans le contenu. Elles s’activent avec un click sur un lien (titre) qui rend visible un <div> contenant le contenu.

Plusieurs éléments dépliables peuvent être ouverts simultanément.

 Exemple

Titre du contenu dépliable N1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.

Titre du contenu dépliable N2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.

Titre du contenu dépliable N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.

 

Voir le code source   

<div class="edg-cke-collapsible-item">
    <p class="edg-cke-collapsible-item-title">
        <a data-toggle="collapse" href="#">Titre du contenu dépliable N1</a>
    </p>
    <div class="collapse edg-cke-collapsible-item-collapse">
        <p class="edg-cke-collapsible-item-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.
        </p>
    </div>
</div>

Retour à l'index  


 Media Vidéo  

 Usage

Les vidéos de l'Etat de Genève sont uploadées sur les serveurs de notre partenaire.
L'URL reflète la structure d'organisation des répertoires. Le format simplifié d'une vidéo comporte à minima les informations suivantes :

  • l'URL de la vidéo (format mp4)
  • une vignette, de la taille de la vidéo (qui est générée automatiquement)

 Exemple

 

Voir le code source  

<video data-matomo-title="Charte internet - 3921" controls="controls" poster="https://vod.infomaniak.com/redirect/directiongnraledessystmes_1_vod/deta-transports-39583/mp4-12/lmce_02_2021_hd.jpg">
    <source src="https://vod.infomaniak.com/redirect/directiongnraledessystmes_1_vod/deta-transports-39583/mp4-12/lmce_02_2021_hd.mp4" type="video/mp4 ">
</video>

Retour à l'index  


 Modèles de contact

  • Bloc de contact : grande carte et adresse (la carte et l'adresse sont facultatives)
  • Bloc de contact complet pour un service
  • Bloc de contact pour un collaborateur

 Exemples

 Bloc de contact : grande carte et adresse

 

 Bloc de contact complet pour un service

Adresse
Office cantonal de l'emploi (OCE)
Rue des Gares 16
1201 Genève
Tél: +41 22 546 36 80
E-mail: info.oce@etat.ge.ch

Heures d'ouverture
Lundi-Vendredi : 8.00-16.30
Permanence téléphonique
Lundi-Vendredi : 8.00-12.00

 

 Bloc de contact pour une collaborateur

Pour toute information complémentaire
Dorothée  Zarjevski Wirthner
Secrétaire adjointe
Office cantonal de l'emploi (OCE)
Case postale 2555
1211 Genève 2
Tél: +41 22 327 96 07
E-mail: dorothee.zarjevski@etat.ge.ch

 

Voir le code source  

<div itemscope="" itemtype="https://schema.org/GovernmentOrganization" class="gech-annuaire gech-annuaire-organisation">
    <span itemprop="name" class="hidden">OCSIN - SCLI - Portefeuille clients Transversal, e-démarches</span>
    <strong>
        OCSIN - SCLI - Portefeuille clients Transversal, e-démarches
    </strong>
    <br>
    <span itemprop="description" class="hidden">
        Service de l'office cantonal des systèmes d'information et du numérique pour le développement de la Plateforme internet de l’État, des intranets et des prestations en ligne
    </span>
    <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
        <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">
                Rue du Grand Pré 64-66 Case postale 2285
            </span>
            <br>
            <span itemprop="postalCode">1211</span>
            <span itemprop="addressLocality">Genève 2</span>
            <br>
            <span class="hidden" itemprop="addressCountry">Suisse</span>
        </address>
    </span>
    Tél:
    <span itemprop="telephone">
        <a href="tel:+41223880001">+41 22 388 00 01</a>
    </span>
    <br>
    <div class="sitg">
        <iframe class="SITG_idadresse SITG_idadresse" style="width: 100%;height: 345px;" title="Carte SITG"
                src="https://ge.ch/tergeo/CarteGE/?webmap=d848e099d45746e5b86003d07ce558c7&amp;marker=6.1323933696622;46.216142429532;test2;;;&amp;maponly=true&amp;disable_scroll=true&amp;level=7"
                frameborder="0">
        </iframe>
    </div>
</div>
<h6>Adresse</h6>
<div itemscope="" itemtype="https://schema.org/GovernmentOrganization" class="gech-annuaire gech-annuaire-organisation gech-annuaire-organisation-nomap">
    <span itemprop="name" class="hidden">Office cantonal de l'emploi (OCE)</span>
    <a target="_blank" itemprop="department" href="" data-uo="UO3228">
        <strong>
            Office cantonal de l'emploi (OCE)
        </strong>
    </a>
    <br>
    <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
        <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">Rue des Gares 16</span><br>
            <span itemprop="postalCode">1201</span>
            <span itemprop="addressLocality">Genève</span><br>
            <span class="hidden" itemprop="addressCountry">Suisse</span>
        </address>
    </span>
    Tél:
    <span itemprop="telephone">
        <a href="tel:+41225463680">+41 22 546 36 80</a>
    </span>
    <br>
    E-mail:
    <span itemprop="email">
        <a href="mailto:info.oce@etat.ge.ch">info.oce@etat.ge.ch</a>
    </span>
    <br><br>
    <h6>Heures d'ouverture</h6>
    <div itemscope="" itemtype="https://schema.org/GovernmentBuilding">
        Lundi-Vendredi : 8.00-16.30<br>
        Permanence téléphonique<br>
        Lundi-Vendredi : 8.00-12.00<br>
    </div>
</div>


<div itemscope="" itemtype="http://schema.org/Person">
    <span itemprop="name">
        <strong>
            Dorothée
            <span class="text-uppercase">Zarjevski Wirthner</span>
        </strong>
    </span>
    <br>
    <span itemprop="jobTitle">
        <em>Secrétaire adjointe</em>
    </span>
    <br>
    <span itemprop="worksFor">
        <em>Office cantonal de l'emploi (OCE)</em>
    </span>
    <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">Case postale 2555</span><br>
        <span itemprop="postalCode">1211&nbsp;</span>
        <span itemprop="addressLocality">Genève 2</span><br>
        <span class="hidden" itemprop="addressCountry">Suisse</span>
        Tél: 
        <a href="tel:+41223279607">
            <span itemprop="telephone">+41 22 327 96 07</span>
        </a>
        <br>
        E-mail: 
        <span itemprop="email">
            <a href="mailto:dorothee.zarjevski@etat.ge.ch">dorothee.zarjevski@etat.ge.ch</a>
        </span>
    </address>
</div>
 

Retour à l'index  


 Pagination 

 

Voir le code source  

<nav aria-labelledby="pagination-heading" class="pager" role="navigation">
    <h4 class="visually-hidden" id="pagination-heading">Pagination</h4>
    <ul class="pagination justify-content-center pager__items js-pager__items">
        <li class="page-item pager__item is-active"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=0" title="Page courante"><span class="visually-hidden"> Page courante </span>1</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=1" title="Aller à la page 2"><span class="visually-hidden"> Page </span>2</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=2" title="Aller à la page 3"><span class="visually-hidden"> Page </span>3</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=3" title="Aller à la page 4"><span class="visually-hidden"> Page </span>4</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=4" title="Aller à la page 5"><span class="visually-hidden"> Page </span>5</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=5" title="Aller à la page 6"><span class="visually-hidden"> Page </span>6</a></li>
        <li class="page-item pager__item pager__item--next"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=1" rel="next" title="Aller à la page suivante"><span class="visually-hidden">Page suivante</span> <span aria-hidden="true">›</span> </a></li>
        <li class="page-item pager__item pager__item--last"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=1603" title="Aller à la dernière page"><span class="visually-hidden">Dernière page</span> <span aria-hidden="true">»</span> </a></li>
    </ul>
</nav>

 

Retour à l'index  


 Langues 

 

Voir le code source  

<ul class="language-selector">
    <li><a class="btn btn-light active" href="/pics-pollution-stick-air-circulation-differenciee" hreflang="fr">fr</a></li>
    <li><a class="btn btn-light" href="/en/stick-air-and-differentiated-traffic-scheme" hreflang="en">en</a></li>
    <li><a class="btn btn-light" href="/de/stick-air-und-der-differenzierte-verkehr" hreflang="de">de</a></li>
    <li><a class="btn btn-light" href="/it/stick-air-e-circolazione-differenziata-ginevra" hreflang="it">it</a></li>
</ul>

Retour à l'index  


 Fil d’Ariane

 

Voir le code source  

<nav aria-label="breadcrumb" role="navigation">
    <ol class="breadcrumb p-0">
        <li class="breadcrumb-item"><a href="/" title="Accueil">Accueil</a></li>
        <li class="breadcrumb-item"><a href="/dossier" title="Dossiers">Dossiers</a></li>
        <li class="breadcrumb-item"><a href="/dossier/electromobilite" title="Electromobilité">Electromobilité</a></li>
        <li class="breadcrumb-item"><a href="/dossier/electromobilite#enjeux-objectifs" title="Enjeux et objectifs">Enjeux et objectifs</a></li>
    </ol>
</nav>

Retour à l'index