<page xmlns="http://projectmallard.org/1.0/"
      type="topic" id="misc-scss" xml:lang="fr">

<info>
  <revision docversion="0.1" date="2015-12-04" status="draft"/>
  <credit type="author">
    <name>Frédéric Péters</name>
    <email>fpeters@entrouvert.com</email>
  </credit>

</info>

<title>Infrastructure SCSS</title>

<p>
Les tableaux ci-dessous reprennent les différents paramètres permettant de
modifier le rendu général des pages.  La première colonne reprend le nom du
paramètre, la deuxième sa description et la troisième la valeur par défaut.
</p>

<section>
 <title>Généralités</title>

<table shade="rows">
 <tr>
  <td><p><code>$body-background</code></p></td>
  <td><p>Couleur de fond de page</p></td>
  <td><p><var>white</var></p></td>
 </tr>
 <tr>
  <td><p><code>$font-color</code></p></td>
  <td><p>Couleur du texte</p></td>
  <td><p><var>#333</var></p></td>
 </tr>
 <tr>
  <td><p><code>$link-color</code></p></td>
  <td><p>Couleur des liens</p></td>
  <td><p><var>#028</var></p></td>
 </tr>
 <tr>
  <td><p><code>$link-decoration</code></p></td>
  <td><p>Décoration des liens</p></td>
  <td><p><var>none</var></p></td>
 </tr>
 <tr>
  <td><p><code>$link-hover-decoration</code></p></td>
  <td><p>Décoration au survol des liens</p></td>
  <td><p><var>underline</var></p></td>
 </tr>
 <tr>
  <td><p><code>$font-family</code></p></td>
  <td><p>Famille de police du texte</p></td>
  <td><p><var>sans-serif</var></p></td>
 </tr>
 <tr>
  <td><p><code>$font-size</code></p></td>
  <td><p>Taille du corps du texte. Pour des raison d’accessibilité, il est 
    préférable de laisser l’usager pouvoir choisir sa taille en laissant cette 
    valeur à <var>100%</var>.</p></td>
  <td><p><var>100%</var></p></td>
 </tr>
 <tr>
  <td><p><code>$font-line-height</code></p></td>
  <td><p>Hauteur de l'interlignage du corps de texte</p></td>
  <td><p><var>1.4</var></p></td>
 </tr>
 <tr>
  <td><p><code>$width</code></p></td>
  <td><p>Largeur maximale de la page</p></td>
  <td><p><var>1000px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$header-background-color</code></p></td>
  <td><p>Couleur de fond de l'entête de la page</p></td>
  <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$header-full-width-background</code></p></td>
  <td><p>Extension de la couleur de fond de l'entête de la page à la largeur de l'écran
  (plutôt que la largeur du contenu)</p></td>
  <td><p><var>true</var></p></td>
 </tr>
 <tr>
   <td><p><code>$header-logo-size</code></p></td>
   <td><p>Taille du logo de l'entête. 2 valeurs sont attendues : largeur et hauteur (ex: <code>150px 75px</code>).</p></td>
   <td><p><var>null</var></p></td>
 </tr>
 <tr>
   <td><p><code>$show-site-title</code></p></td>
   <td><p>Afficher le titre du site. Le titre est masqué par défaut lorsqu'un logo est défini. <code>true</code> ou <code>false</code></p></td>
   <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$footer-background</code></p></td>
  <td><p>Couleur de fond du pied de page</p></td>
  <td><p><var>#666666</var></p></td>
 </tr>
 <tr>
  <td><p><code>$footer-full-width-background</code></p></td>
  <td><p>Extension de la couleur de fond du pied de page à la largeur de l'écran
  (plutôt que la largeur du contenu).</p></td>
  <td><p><var>true</var></p></td>
 </tr>
 <tr>
  <td><p><code>$footer-color</code></p></td>
  <td><p>Couleur du texte du pied de page</p></td>
  <td><p><var>white</var></p></td>
 </tr>
 <tr>
  <td><p><code>$footer-link-color</code></p></td>
  <td><p>Couleur des liens du pied de page</p></td>
  <td><p><var>$link-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$border-radius</code></p></td>
  <td><p>Taille de l'arrondi à appliquer à différents éléments</p></td>
  <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$sidebar-position</code></p></td>
  <td><p>Position de la barre latérale (left/right)</p></td>
  <td><p><var>left</var></p></td>
 </tr>
 <tr>
  <td><p><code>$sidebar-width</code></p></td>
  <td><p>Largeur de la barre latérale</p></td>
  <td><p><var>300px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$sidebar-max-width</code></p></td>
  <td><p>Largeur maximale de la barre latérale, utile dans le cas où la valeur de <code>$sidebar-width</code> est définie en %</p></td>
  <td><p><var>$sidebar-width</var></p></td>
 </tr>
 <tr>
  <td><p><code>$sidebar-min-width</code></p></td>
  <td><p>Largeur minimale de la barre latérale, utile dans le cas où la valeur de <code>$sidebar-width</code> est définie en %</p></td>
  <td><p><var>0</var></p></td>
 </tr>
 <tr>
  <td><p><code>$columns-gutter</code></p></td>
  <td><p>Espace (« gouttière ») entre les colonnes des modèles de page.</p></td>
  <td><p><var>20px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$sidebar-columns-gutter</code></p></td>
  <td><p>Espace (« gouttière ») entre la barre latérale et les colonnes.</p></td>
  <td><p><var>$columns-gutter</var></p></td>
 </tr>
 <tr>
  <td><p><code>$grid-gutter</code></p></td>
  <td><p>Espace (« gouttière ») entre les éléments disposés en grille.</p></td>
  <td><p><var>1rem</var></p></td>
 </tr>
</table>
</section>

<section>
 <title>Titres</title>

<table shade="rows">
 <tr>
  <td><p><code>$title-background</code></p></td>
  <td><p>Couleur de fond des titres</p></td>
  <td><p><var>white</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-color</code></p></td>
  <td><p>Couleur du texte des titres</p></td>
  <td><p><var>black</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-transform</code></p></td>
  <td><p>Transformation des caractères des titres</p></td>
  <td><p><var>none</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-font-family</code></p></td>
  <td><p>Famille de police pour les titres</p></td>
  <td><p><var>$font-family</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-font-size</code></p></td>
  <td><p>Taille de la police des titres</p></td>
  <td><p><var>$font-size * 1.1</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-font-style</code></p></td>
  <td><p>Style de la police des titres</p></td>
  <td><p><var>normal</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-padding</code></p></td>
  <td><p>Padding des titres</p></td>
  <td><p><var>0.7rem 1rem</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-weight</code></p></td>
  <td><p>Graisse de la police des titres</p></td>
  <td><p><var>normal</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-border-bottom</code></p></td>
  <td><p>Bordure pour le bas des titres</p></td>
  <td><p><var>0</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-border-radius</code></p></td>
  <td><p>Taille de l'arrondi à appliquer aux titres</p></td>
  <td><p><var>$border-radius</var></p></td>
 </tr>
 <tr>
  <td><p><code>$title-border-top</code></p></td>
  <td><p>Bordure pour le haut des titres</p></td>
  <td><p><var>0</var></p></td>
 </tr>
</table>
</section>

<section>
 <title>Navigation</title>

 <p>
  Ces paramètres contrôlent l'apparence de la barre de navigation.
 </p>

<table shade="rows">
 <tr>
  <td><p><code>$nav-background</code></p></td>
  <td><p>Couleur de fond</p></td>
  <td><p><var>white</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-full-width-background</code></p></td>
  <td><p>Extension de la couleur de fond de la navigation à la largeur de l'écran
  (plutôt que la largeur du contenu).</p></td>
  <td><p><var>false</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-color</code></p></td>
  <td><p>Couleur du texte</p></td>
  <td><p><var>black</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-active-color</code></p></td>
  <td><p>Couleur "active", utilisée comme valeur par défaut pour des éléments
  ci-dessous</p></td>
  <td><p><var>#005EA9</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-border-color</code></p></td>
  <td><p>Couleur des bordures</p></td>
  <td><p><var>$nav-active-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-border-radius</code></p></td>
  <td><p>Taille de l'arrondi de la navigation </p></td>
  <td><p><var>$border-radius</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-height</code></p></td>
  <td><p>Hauteur</p></td>
  <td><p><var>3em</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-background</code></p></td>
  <td><p>Couleur de fond des éléments</p></td>
  <td><p><var>transparent</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-transform</code></p></td>
  <td><p>Transformation des caractères des entrées du menu</p></td>
  <td><p><var>none</var></p></td>
 </tr> 
 <tr>
  <td><p><code>$nav-item-selected-background</code></p></td>
  <td><p>Couleur de fond de la page active</p></td>
  <td><p><var>$nav-active-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-selected-color</code></p></td>
  <td><p>Couleur du texte de la page active</p></td>
  <td><p><var>$nav-menu-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-hover-background</code></p></td>
  <td><p>Couleur de fond d'un élément au survol</p></td>
  <td><p><var>$nav-item-selected-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-hover-color</code></p></td>
  <td><p>Couleur du texte d'un élément au survol</p></td>
  <td><p><var>$nav-item-selected-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-spacing</code></p></td>
  <td><p>Espace entre les éléments</p></td>
  <td><p><var>0px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-menu-background</code></p></td>
  <td><p>Couleur de fond du menu en mode mobile</p></td>
  <td><p><var>#eee</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-menu-item-color</code></p></td>
  <td><p>Couleur des entrées du menu en mode mobile</p></td>
  <td><p><var>black</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-selected-mode</code></p></td>
  <td><p>Mode d'affichage du menu sélectionné, soit background pour en changer
  la couleur du fond, soit bottom-border pour ajouter une bordure sous lui.</p></td>
  <td><p><var>background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-selected-border</code></p></td>
  <td><p>Style de la bordure de l'élément sélectionné.</p></td>
  <td><p><var>2px solid $nav-active-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-item-hover-border</code></p></td>
  <td><p>Style de la bordure de l'élément survolé.</p></td>
  <td><p><var>$nav-item-selected-border</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-after-image</code></p></td>
  <td><p>Ajout sous la navigation d'un bandeau avec l'image associée à la page.
  (ne fonctionne pas avec Internet Explorer)</p></td>
  <td><p><var>true</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-after-image-height</code></p></td>
  <td><p>Hauteur de l'éventuel bandeau image.</p></td>
  <td><p><var>300px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-mode</code></p></td>
  <td><p>Rendu de la navigation en mode mobile, <var>none</var> pour conserver
  le rendu « desktop », <var>hamburger</var> pour placer la navigation dans un
  menu « hamburger », <var>bottom-bar</var> pour placer la navigation dans une
  barre en bas d'écran, <var>hidden</var> pour cacher la navigation.</p>
  <p>Les paramètres supplémentaires pour le rendu <var>bottom-bar</var> sont
  détaillés dans la section <link xref="#pwa">application mobile</link>.</p>
  </td>
  <td><p><var>hamburger</var></p></td>
 </tr>
</table>
</section>

<section>
 <title>Mode <em>responsive</em></title>

 <p>
  Ces paramètres contrôlent l'apparence de différents éléments quand la largeur
  de la fenêtre est sous une certaine taille.
 </p>

<table shade="rows">
 <tr>
  <td><p><code>$mobile-limit</code></p></td>
  <td><p>Largeur sous laquelle adopter le style "mobile"</p></td>
  <td><p><var>800px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$mobile-width</code></p></td>
  <td><p>Largeur maximale de la page "mobile"</p></td>
  <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-limit</code></p></td>
  <td><p>Largeur sous laquelle adopter la navigation "mobile"</p></td>
  <td><p><var>$mobile-limit</var></p></td>
 </tr>
 <tr>
  <td><p><code>$responsive-menu</code></p></td>
  <td><p>Apparence du menu de navigation responsive, soit top-to-bottom, soit
  left-to-right</p></td>
  <td><p><var>top-to-bottom</var></p></td>
 </tr>
 <tr>
  <td><p><code>$responsive-menu-mask</code></p></td>
  <td><p>Affichage d'un masque lorsque le menu mobile est déplié. Valable
  uniquement si <code>$responsive-menu=left-to-right</code></p></td>
  <td><p><var>false</var></p></td>
 </tr>
 <tr>
  <td><p><code>$responsive-menu-mask-background</code></p></td>
  <td><p>Couleur de fond du masque du menu mobile</p></td>
  <td><p><var>rgba(0, 0, 0, 0.45)</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-button-background</code></p></td>
  <td><p>Couleur de fond du bouton de navigation (menu hamburger)</p></td>
  <td><p><var>$nav-active-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-button-color</code></p></td>
  <td><p>Couleur des traits du bouton de navigation (menu hamburger)</p></td>
  <td><p><var>$nav-menu-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-menu-side</code></p></td>
  <td><p>Taille d'un bord du bouton de navigation</p></td>
  <td><p><var>50px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-menu-color</code></p></td>
  <td><p>Couleur des lignes dans le menu de navigation</p></td>
  <td><p><var>white</var></p></td>
 </tr>
</table>
</section>

<section id="pwa">
 <title>Application mobile (PWA)</title>

 <p>
  Ces paramètres contrôlent le rendu de la barre de navigation de bas
  d'écran, présente en mode mobile quand <code>$nav-mobile-mode</code>
  a pour valeur <var>bottom-bar</var>.
 </p>

<table shade="rows">
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-height</code></p></td>
  <td><p>Hauteur de la barre de navigation en mode mobile.</p></td>
  <td><p><var>64px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-background</code></p></td>
  <td><p>Couleur du fond</p></td>
  <td><p>white</p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-color</code></p></td>
  <td><p>Couleur du texte</p></td>
  <td><p><var>$nav-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-item-hover-background</code></p></td>
  <td><p>Couleur de fond d'un élément au survol</p></td>
  <td><p><var>$nav-item-hover-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-item-hover-color</code></p></td>
  <td><p>Couleur du texte d'un élément au survol</p></td>
  <td><p><var>$nav-item-hover-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-item-selected-background</code></p></td>
  <td><p>Couleur de fond de l'élément actif</p></td>
  <td><p><var>$nav-item-selected-backgroud</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-item-selected-color</code></p></td>
  <td><p>Couleur du texte de l'élément actif</p></td>
  <td><p><var>$nav-item-selected-backgroud</var></p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-badge-background</code></p></td>
  <td><p>Couleur de fond du badge reprenant le nombre de notifications.</p></td>
  <td><p>#ee2222 (rouge)</p></td>
 </tr>
 <tr>
  <td><p><code>$nav-mobile-bottom-bar-badge-color</code></p></td>
  <td><p>Couleur du texte du badge reprenant le nombre de notifications.</p></td>
  <td><p>white</p></td>
 </tr>
 <tr>
  <td><p><code>$pwa-nav-limit</code></p></td>
  <td><p>Largeur sous laquelle la navigation PWA est visible</p></td>
  <td><p>$mobile-limit</p></td>
 </tr>
</table>

</section>


<section>
 <title>Formulaires</title>

<table shade="rows">
 <tr>
  <td><p><code>$form-style</code></p></td>
  <td><p>Style général des formulaires, soit « classic », soit « light » pour
  un rendu avec les libellés plus légers et uniquement une bordure basse
  pour les éléments.</p></td>
  <td><p><var>classic</var></p></td>
 </tr>
 <tr>
  <td><p><code>$form-background</code></p></td>
  <td><p>Couleur de fond d'une démarche.</p></td>
  <td><p><var>$body-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$form-sidebar-position</code></p></td>
  <td><p>Position du code de suivi et des étapes, « left », « right » ou
  « top ».</p></td>
  <td><p><var>left</var></p></td>
 </tr>
 <tr>
  <td><p><code>$form-sidebar-width</code></p></td>
  <td><p>Largeur de la barre latérale au formulaire</p></td>
  <td><p><var>18.5%</var></p></td>
 </tr>
 <tr>
  <td><p><code>$form-sidebar-gutter</code></p></td>
  <td><p>Espace entre la barre latérale et le formulaire</p></td>
  <td><p><var>2%</var></p></td>
 </tr>
 <tr>
  <td><p><code>$form-titlebar-mode</code></p></td>
  <td><p>Mode d’affichage du titre de la démarche, soit sur toute la largeur de
  page (<var>page</var>), soit sur la largeur et aligné avec le formulaire
  (<var>form</var>).</p></td>
  <td><p><var>page</var></p></td>
 </tr>
 <tr>
  <td><p><code>$form-accent-color</code></p></td>
  <td><p>Couleur des cases à cocher et boutons radios natifs sélectionnés</p></td>
  <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-background</code></p></td>
  <td><p>Couleur de fond des boutons</p></td>
  <td><p><var>#37a7da</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-color</code></p></td>
  <td><p>Couleur du texte des boutons</p></td>
  <td><p><var>blanc/noir selon $button-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-border</code></p></td>
  <td><p>Style de bordure des boutons</p></td>
  <td><p><var>1px solid transparent</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-hover-background</code></p></td>
  <td><p>Couleur de fond des boutons au survol</p></td>
  <td><p><var>$button-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-hover-color</code></p></td>
  <td><p>Couleur du texte des boutons au survol</p></td>
  <td><p><var>$button-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-border-radius</code></p></td>
  <td><p>Taille de l'arrondi à appliquer aux boutons</p></td>
  <td><p><var>$border-radius</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-focus-outline</code></p></td>
  <td><p>Style du contour des boutons quand ils sont actifs</p></td>
  <td><p><var>$widget-focus-outline</var></p></td>
 </tr>
 <tr>
  <td><p><code>$button-focus-outline-offset</code></p></td>
  <td><p>Décalage du contour des boutons quand ils ont actifs</p></td>
  <td><p><var>$widget-focus-outline-offset</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-background</code></p></td>
  <td><p>Couleur de fond des champs de formulaire (texte, liste…)</p></td>
  <td><p><var>white</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-color</code></p></td>
  <td><p>Couleur du texte des champs de formulaire (texte, liste…)</p></td>
  <td><p><var>$font-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-border</code></p></td>
  <td><p>Style de bordure des champs de formulaire (texte, liste…)</p></td>
  <td><p><var>1px solid #AAA</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-focus-background</code></p></td>
  <td><p>Couleur de fond des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
  <td><p><var>$widget-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-focus-color</code></p></td>
  <td><p>Couleur du texte des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
  <td><p><var>$widget-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-focus-border</code></p></td>
  <td><p>Style de bordure des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
  <td><p><var>$widget-border</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-focus-outline</code></p></td>
  <td><p>Style du contour des champs de formulaire quand ils sont actifs</p></td>
  <td><p><var>none</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-focus-outline-offset</code></p></td>
  <td><p>Décalage du contour des champs de formulaire quand ils sont actifs</p></td>
  <td><p><var>0</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-box-shadow</code></p></td>
  <td><p>Ombre des champs de formulaire</p></td>
  <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-focus-box-shadow</code></p></td>
  <td><p>Ombre des champs de formulaire quand ils sont actifs</p></td>
  <td><p><var>none</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-border-radius</code></p></td>
  <td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
  <td><p><var>0</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-padding</code></p></td>
  <td><p>Écarts de remplissage (padding) à appliquer aux champs de formulaire
  et aux boutons.</p></td>
  <td><p><var>0.4em 0.7em</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-custom-radio-checkbox</code></p></td>
  <td><p>Rendu personnalisé des cases à cocher et des boutons radios (plutôt
  que le rendu standard proposé par le navigateur).</p></td>
  <td><p><var>false</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-custom-radio-checkbox-color</code></p></td>
  <td><p>Couleur des cases à cocher et boutons radios (bordure et marqueur)
  quand leur rendu est personnalisé.</p></td>
  <td><p><var>$button-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-custom-radio-checkbox-border-color</code></p></td>
  <td><p>Couleur de la bordure des cases à cocher et boutons radios
  quand leur rendu est personnalisé.</p></td>
  <td><p><var>$widget-custom-radio-checkbox-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-custom-radio-checkbox-marker-color</code></p></td>
  <td><p>Couleur du marqueur des cases à cocher et des boutons radios
  cochés quand leur rendu est personnalisé.</p></td>
  <td><p><var>$widget-custom-radio-checkbox-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$widget-unique-checkbox-position</code></p></td>
  <td><p>Positionnement de la case à cocher d'un champ de type « Case à
  cocher (choix unique); soit « bottom » pour un rendu sous le libellé du
  champ (option par défaut), soit « left » pour un rendu à la gauche du
  libellé.</p></td>
  <td><p><var>bottom</var></p></td>
 </tr>
 <tr>
  <td><p><code>$buttons-order</code></p></td>
  <td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>, <code>cancel</code>, <code>previous</code>) dans l'ordre souhaité séparé par des vigules. Ajouter l'option <code>(grow)</code> après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
  </td>
  <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$buttons-alignment</code></p></td>
  <td><p>Alignement des boutons. Toutes valeurs CSS de <code>justify-content</code></p>
  </td>
  <td><p><var>null</var></p></td>
 </tr>
 <tr>
  <td><p><code>$buttons-with-icons</code></p></td>
  <td><p>Ajoute des icônes aux boutons des formulaires des demandes.</p>
  </td>
  <td><p><var>false</var></p></td>
 </tr>
 <tr>
  <td><p><code>$timetable-cell-background</code></p></td>
  <td><p>Couleur de fond des créneaux horaires.</p>
  </td>
  <td><p><var>transparentize($button-background, 0.8)</var></p></td>
 </tr>
 <tr>
  <td><p><code>$timetable-cell-hover-color</code></p></td>
  <td><p>Couleur du texte au survol des créneaux horaires.</p>
  </td>
  <td><p><var>$button-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$timetable-cell-hover-background</code></p></td>
  <td><p>Couleur de fond au survol des créneaux horaires.</p>
  </td>
  <td><p><var>$button-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$timetable-cell-selected-color</code></p></td>
  <td><p>Couleur du texte du créneau horaire selectionné.</p>
  </td>
  <td><p><var>$timetable-cell-hover-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$timetable-cell-selected-background</code></p></td>
  <td><p>Couleur de fond du créneau horaire selectionné.</p>
  </td>
  <td><p><var>$timetable-cell-hover-background</var></p></td>
 </tr>
</table>
</section>

<section>
  <title>Bloc étapes d'une démarche</title>

  <p>
    Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d'une démarche.
  </p>
  <p>
    Le rendu de ce bloc diffère automatiquement en fonction de la taille de l'écran et de la position de la <em>sidebar</em> <code>$form-sidebar-position</code> pour s'adapter aux différents terminaux :
  </p>
  <list>
    <item><p><em>rendu mobile :</em> seul l'étape courante est affichée avec une indication du nombre totale d'étapes ;</p></item>
    <item><p><em>rendu horizontal :</em>Les marqueurs d'étapes (chiffres) s'affichent côte à côte et sur plusieurs itemgnes s'il le faut. Seul le label de l'étape en cours s'affiche ;</p></item>
    <item><p><em>rendu vertical :</em> (s'affiche uniquement si la variable <code>$form-sidebar-position</code> a la valeur <var>left</var> ou <var>right</var>) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label</p></item>.
  </list>
  <p>
    Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d'étape</em> (chiffre).
  </p>

  <table shade="rows">
    <tr>
      <td><p><code>$wcs-steps-background</code></p></td>
      <td><p>Couleur de fond du bloc</p></td>
      <td><p><var>transparent</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-steps-spacing</code></p></td>
      <td>
        <p>Fixe la taille des espacements entre les différents blocs, mais également entre les marqueurs chiffres et leur label</p>
      </td>
      <td><p><var>0.35rem</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-color</code></p></td>
      <td><p>Couleur du texte des étapes non courantes</p></td>
      <td><p><var>#868686</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-current-color</code></p></td>
      <td><p>Couleur du texte de l'étape courantes</p></td>
      <td><p><var>$primary-color</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-background</code></p></td>
      <td><p>Couleur de fond des étapes</p></td>
      <td><p><var>transparent</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-current-background</code></p></td>
      <td><p>Couleur de fond de l'étape courante</p></td>
      <td><p><var>$wcs-step-background</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-border-bottom</code></p></td>
      <td>
        <p>
          Épaisseur et couleur du filet qui sépare les étapes en mode vertical et du filet présent sous les marqueurs en mode horizontal.
          la valeur <var>none</var> supprimera les filets.
        </p>
      </td>
      <td><p><var>1px solid $wcs-step-color</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-current-border-bottom</code></p></td>
      <td>
        <p>
          Épaisseur et couleur du filet de l'étape courante.
          Si <code>$wcs-step-border-bottom</code> est à <var>none</var>, ce filet sera automatiquement <var>none</var> également.
        </p>
      </td>
      <td><p><var>3px solid $wcs-step-current-color</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wsc-step-before-piled</code></p></td>
      <td>
        <p>
          Cette option n'est valable qu'en mode vertical et si <code>$wcs-step-background</code> a une valeur différente de <var>transparent</var>.
          Avec la valeur <var>true</var>, elle va superposer les étapes passée les unes sur les autres pour gagner de la place.
        </p>
      </td>
      <td><p><var>false</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-marker-color</code></p></td>
      <td><p>Couleur du chiffre des marqueurs d'étapes non courantes</p></td>
      <td><p><var>$wcs-step-color</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-current-marker-color</code></p></td>
      <td><p>Couleur du chiffre du marqueur d'étape courante</p></td>
      <td><p><var>$wcs-step-current-color</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-marker-background</code></p></td>
      <td><p>Couleur de fond des marqueurs d'étapes non courantes</p></td>
      <td><p><var>$wcs-step-background</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-current-marker-background</code></p></td>
      <td><p>Couleur de fond du marqueur d'étape courante</p></td>
      <td><p><var>$wcs-step-current-background</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-marker-size</code></p></td>
      <td><p>Taille du marqueur. La taille du marquer n'influe pas sur la taille du chiffre</p></td>
      <td><p><var>2.1em</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-current-marker-enlarge</code></p></td>
      <td><p>Facteur d'agrandissement de la taille du marqueur courant. Une valeur de <var>1.1</var> agrandira le marqueur de 110%</p></td>
      <td><p><var>1</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-marker-type</code></p></td>
      <td>
        <p>
          Défini le style des marqueurs. Les marqueurs peuvent être sous forme de carrés (par défaut), de cercles mais également liés entre eux (par une ligne).
          Valeurs possibles: <var>tied</var>, <var>disc</var>, <var>disc tied</var>.
          Il est possible de gérer le rendu de la ligne avec les variables <code>$wcs-step-marker-tie-color</code> et <code>$wcs-step-marker-tie-width</code>
        </p>
      </td>
      <td><p><var>square</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-marker-background-type</code></p></td>
      <td>
        <p>
          Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
          Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
        </p>
      </td>
      <td><p><var>solid</var></p></td>
    </tr>
    <tr>
      <td><p><code>$wcs-step-current-label-color</code></p></td>
      <td>
        <p>
          Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
          Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
        </p>
      </td>
      <td><p><var>$wcs-step-current-color</var></p></td>
    </tr>
    <tr>
      <td><p><var>$wcs-step-current-color</var></p></td>
      <td><p>Couleur du label de l'étape courante</p></td>
      <td><p><var>solid</var></p></td>
    </tr>
    <tr>
      <td><p><var>$wcs-steps-small-layout-limit</var></p></td>
      <td><p>Fixe la valeur du point de rupture entre le rendu mobile et horizontal</p></td>
      <td><p><var>$very-small-limit</var></p></td>
    </tr>
  </table>
</section>

<section>
 <title>Cellules</title>

<table shade="rows">
 <tr>
  <td><p><code>$cell-background</code></p></td>
  <td><p>Couleur de fond des cellules</p></td>
  <td><p><var>white</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-border</code></p></td>
  <td><p>Bordure des cellules</p></td>
  <td><p><var>1px solid #ccc</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-border-radius</code></p></td>
  <td><p>Taille de l'arrondi des cellules</p></td>
  <td><p><var>$border-radius</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-color</code></p></td>
  <td><p>Couleur du texte des cellules</p></td>
  <td><p><var>inherit</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-entry-border-color</code></p></td>
  <td><p>Bordure des éléments de cellule</p></td>
  <td><p><var>1px solid #ccc</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-entry-font-weight</code></p></td>
  <td><p>Graisse du texte (lien) d'un élément</p></td>
  <td><p><var>normal</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-entry-color</code></p></td>
  <td><p>Couleur du texte (lien) d'un élément</p></td>
  <td><p><var>$link-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-entry-hover-background</code></p></td>
  <td><p>Couleur de fond d'un élément survolé</p></td>
  <td><p><var>inherit</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-entry-hover-color</code></p></td>
  <td><p>Couleur du texte d'un élément survolé</p></td>
  <td><p><var>inherit</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-entry-hover-effect</code></p></td>
  <td><p>Effet au survol des éléments dans les cellules, none pour un fond
  directement uni, left-to-right pour faire apparaître celui-ci de gauche à
  droit, right-to-left de droite à gauche, top-to-bottom de haut en bas,
  bottom-to-top de bas en haut et middle-to-edges, horizontalement du milieu
  vers les bords.</p></td>
  <td><p><var>none</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-image-position</code></p></td>
  <td><p>Position de l'image qui peut être associée à une cellule « démarches
  d'une catégorie », les valeurs possibles sont <var>top</var> pour
  avoir l'image en haut de cellule et <var>after-title</var> pour avoir
  l'image après le titre de cellule.</p></td>
  <td><p><var>after-title</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-image-padding</code></p></td>
  <td><p>Espace autour de l'image qui peut être associée à une cellule « démarches
  d'une catégorie ».</p></td>
  <td><p><var>0.5rem</var></p></td>
 </tr>
 <tr>
  <td><p><code>$cell-title-cover-border</code></p></td>
  <td><p>Détermine si le titre des cellules doit couvrir la bordure</p></td>
  <td><p><var>true</var></p></td>
 </tr>
 <tr>
  <td><p><code>$footer-menucell-separator</code></p></td>
  <td><p>Style de bordure utilisée comme séparateur vertical entre les entrées
  d'une cellule menu placée dans le pied de page</p></td>
  <td><p><var>none</var></p></td>
 </tr>
</table>
</section>

<section>
  <title>Messages</title>

  <p>
    Options pour paraméter l'affichage des messages. 4 types de messages : succès, information, avertissement, erreur.
  </p>

<table shade="rows">
  <tr>
    <td><p><code>$notification-style</code></p></td>
    <td><p>Rendu des messages, soit « classic »,
    soit « border-icon » pour un rendu plaçant l'icône en couleur sur un trait
    à gauche, soit « border-bar » pour un rendu avec une bordure et une bande
    de couleur pour l’icône.</p></td>
    <td><p><var>classic</var></p></td>
  </tr>
  <tr>
    <td><p><code>$notification-icon-size</code></p></td>
    <td><p>Taille de l'icône illustrant le message</p></td>
    <td><p><var>1.5rem</var> ou <var>2rem</var></p></td>
  </tr>
  <tr>
    <td><p><code>$notification-icon-position</code></p></td>
    <td><p>Position vertical de l'icône du message. « top » ou « center ». </p></td>
    <td><p><var>top</var></p></td>
  </tr>
</table>
</section>

<section>
 <title>Carrousels</title>

 <p>
  Une cellule menu prendra la forme « carrousel » si elle est définie avec
  « carrousel » comme slug.
 </p>

<table shade="rows">
 <tr>
  <td><p><code>$carrousel-height</code></p></td>
  <td><p>Hauteur du carrousel</p></td>
  <td><p><var>20rem</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-text-position</code></p></td>
  <td><p>Position du texte des différentes pages; indiqué par 2 valeurs
  séparées par un espace. La première indique le positionnement vertical
  (<var>left</var>, <var>middle</var> ou <var>right</var>),
  la seconde le positionnement horizontal (<var>top</var>, <var>middle</var>
  ou <var>bottom</var>).</p></td>
  <td><p>Exemple : <var>top right</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-navigation</code></p></td>
  <td><p>Détermine si la navigation permettant de passer d'un élément à
  l'autre est affichée. (visible ou none)</p></td>
  <td><p><var>visible</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-navigation-color</code></p></td>
  <td><p>Couleur des éléments de navigation (disque et flêches)</p></td>
  <td><p><var>$button-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-navigation-bullet-border</code></p></td>
  <td><p>Bordure du disque de navigation.</p></td>
  <td><p><var>1px solid white</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-navigation-bullet-color</code></p></td>
  <td><p>Couleur du disque de navigation.</p></td>
  <td><p><var>$carrousel-navigation-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-navigation-bullet-size</code></p></td>
  <td><p>Taille du disque de navigation.</p></td>
  <td><p><var>10px</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-arrows</code></p></td>
  <td><p>Détermine si les flèches (gauche/droite) permettant de passer d'un
  élément à l'autre sont affichées. (visible ou none)</p></td>
  <td><p><var>visible</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-arrows-color</code></p></td>
  <td><p>Couleur des flèches de navigation.</p></td>
  <td><p><var>$carrousel-navigation-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$carrousel-item-mask-color</code></p></td>
  <td><p>Couleur du masque qui se superpose à l'image de la diapositive</p></td>
  <td><p><var>rgba(0, 0, 0, 0.3)</var></p></td>
 </tr>
</table>

</section>

<section>
 <title>Tableaux</title>

 <p>
  Ces paramètres contrôlent l'apparence des tableaux sur lesquels la
  classe pk-data-table est appliquée.
 </p>

<table shade="rows">
 <tr>
  <td><p><code>$table-caption-color</code></p></td>
  <td><p>Couleur du texte de la légende des tableaux</p></td>
  <td><p><var>$title-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$table-caption-side</code></p></td>
  <td><p>Position de la légende par rapport au tableau; les valeurs possibles sont
  top (au-dessus) et bottom (en-dessous).</p></td>
  <td><p><var>top</var></p></td>
 </tr>
</table>

 <p>
  Ces paramètres contrôlent l'apparence de l'entête des tableaux sur lesquels la
  classe pk-data-table-headers est appliquée (n'a d'effet que si la classe
  pk-data-table est aussi appliquée).
 </p>

<table shade="rows">
 <tr>
  <td><p><code>$table-headers-background</code></p></td>
  <td><p>Couleur de fond de l'entête</p></td>
  <td><p><var>$title-background</var></p></td>
 </tr>
 <tr>
  <td><p><code>$table-headers-color</code></p></td>
  <td><p>Couleur du texte de l'entête</p></td>
  <td><p><var>$title-color</var></p></td>
 </tr>
 <tr>
  <td><p><code>$table-headers-font-style</code></p></td>
  <td><p>Style de la police de l'entête</p></td>
  <td><p><var>$title-font-style</var></p></td>
 </tr>
 <tr>
  <td><p><code>$table-headers-font-size</code></p></td>
  <td><p>Taille de la police de l'entête</p></td>
  <td><p><var>$title-font-size</var></p></td>
 </tr>
 <tr>
  <td><p><code>$table-headers-font-weight</code></p></td>
  <td><p>Graisse de la police de l'entête</p></td>
  <td><p><var>$title-weight</var></p></td>
 </tr>
 <tr>
  <td><p><code>$table-headers-font-family</code></p></td>
  <td><p>Famille de police de l'entête</p></td>
  <td><p><var>$title-font-family</var></p></td>
 </tr>
 <tr>
  <td><p><code>$table-headers-text-transform</code></p></td>
  <td><p>Transformation des caractères de l'entête</p></td>
  <td><p><var>$title-transform</var></p></td>
 </tr>
</table>
</section>

<section>
  <title>Retour en haut</title>

  <p>
    Bouton permettant de remonter en haut de page. Élément masqué par défaut. Si affiché, il le sera par défaut sous la forme d'un lien en fin de pied de page
  </p>

  <table shade="rows">
    <tr>
      <td><p><code>$back-top-display</code></p></td>
      <td><p>Condition d'affichage du bouton. Valeurs possibles: <var>mobile-only</var>, <var>block</var>, <var>inline</var>, <var>none</var>.</p></td>
      <td><p><var>none</var></p></td>
    </tr>
    <tr>
      <td><p><code>$back-top-icon-character</code></p></td>
      <td><p>Caractère UTF-8 de l'icône du bouton.</p></td>
      <td><p><var>"\f102"</var>(icone "angle-double-top")</p></td>
    </tr>
    <tr>
      <td><p><code>$back-top-icon-size</code></p></td>
      <td><p>Taille de l'icône.</p></td>
      <td><p><var>2.5em</var></p></td>
    </tr>
    <tr>
      <td><p><code>$back-top-icon-label-space</code></p></td>
      <td><p>Espace entre l'icône et le label du bouton</p></td>
      <td><p><var>0.33em</var></p></td>
    </tr>
    <tr>
      <td><p><code>$back-top-layout-direction</code></p></td>
      <td><p>Position de l'icône par rapport au label. Soit <var>vertical</var> : icône au dessus du label, soit <var>horizontal</var>: icône à côté du label</p></td>
      <td><p><var>vertical</var></p></td>
    </tr>
  </table>

</section>


</page>
