Contenu

Reboot

Le reboot est la couche de base de Cauri : il uniformise l’apparence des éléments HTML d’un navigateur à l’autre, avant que vous n’ajoutiez la moindre classe.

Chaque navigateur a ses propres styles par défaut. Le reboot les remplace par un socle cohérent : une police commune, des marges prévisibles, des tailles en rem et un dimensionnement des boîtes simplifié. Il est inclus dans cauri.css, sans rien à activer.

Les principes retenus :

Marges vers le bas uniquement. Les titres, paragraphes, listes et tableaux ont une marge basse et aucune marge haute, ce qui évite que les marges se combinent.
Dimensionnement border-box. Le remplissage et la bordure d’un élément sont inclus dans sa largeur. Une colonne de 50 % reste à 50 % même avec un padding.
Unités relatives. Les marges et les tailles utilisent rem et em, pour respecter la taille de texte choisie par l’utilisateur.
Héritage plutôt que répétition. Les champs de formulaire héritent de la police et de l’interligne du texte courant.

Pour les titres, les textes mis en forme et les listes, voir aussi Typographie.

La page

La page
Élément	Style appliqué
`*`, `::before`, `::after`	`box-sizing: border-box`.
`body`	Marge nulle ; police `Roboto` puis polices système ; taille `1rem` ; interligne `1.5` ; texte `#212121` sur fond blanc.
`:root`	Défilement fluide vers les ancres, sauf si l’utilisateur a demandé de réduire les animations.
`[hidden]`	Toujours masqué (`display: none !important`), même si une autre règle d’affichage s’applique.

Titres, texte et listes

Titres, texte et listes
Élément	Style appliqué
`h1` à `h6`	Marge haute nulle, marge basse `0.5rem`, graisse 800, interligne `1.2`. Tailles de `h1` (2,5 rem) à `h6` (1 rem) sur grand écran, réduites de façon fluide sur petit écran.
`p`	Marge basse `1rem`.
`ul`, `ol`	Marge de gauche `2rem`, marge basse `1rem` ; sans marge basse quand la liste est imbriquée.
`dl`, `dt`, `dd`	Termes en gras (700) ; définition avec marge basse `0.5rem` et sans retrait.
`blockquote`	Marge basse `1rem`, sans retrait.
`b`, `strong`	Graisse `bolder`, relative au parent.
`small`	Taille `0.875em`.
`mark`	Texte sombre sur fond jaune clair, avec un remplissage de `0.1875em`.
`sub`, `sup`	Taille `0.75em` sans modifier la hauteur de ligne.
`abbr[title]`	Soulignement pointillé, curseur d’aide.
`address`	Marge basse, sans italique.
`hr`	Trait fin gris (opacité 25 %) avec une marge verticale de `1rem`.

Liens, code et médias

Liens, code et médias
Élément	Style appliqué
`a`	Bleu foncé `#0856A1`, souligné ; plus sombre au survol. Un `<a>` sans `href` ni classe garde la couleur du texte, sans soulignement.
`code`	Police à chasse fixe, taille `0.875em`, couleur rose.
`pre`	Bloc à défilement horizontal, taille `0.875em`, marge basse `1rem`.
`kbd`	Touche de clavier : texte clair sur fond sombre, coins arrondis.
`img`, `svg`	Alignés verticalement au milieu de la ligne. Pour les rendre fluides, voir Images.
`figure`	Marge basse `1rem`, sans marges latérales. Voir Figures.
`iframe`	Sans bordure.
`summary`	Affichée comme un élément de liste, curseur « main ».
`progress`	Alignée sur la ligne de base du texte.

Tableaux et formulaires

Tableaux et formulaires
Élément	Style appliqué
`table`	Bordures fusionnées ; légende placée sous le tableau. Voir Tableaux.
`caption`	Texte atténué aligné à gauche, avec `0.5rem` de remplissage vertical.
`th`	Texte aligné comme la cellule voisine (hérité), non centré.
`label`	Affiché en ligne-bloc pour accepter une marge basse.
`input`, `button`, `select`, `textarea`	Marge nulle ; la police, la taille et l’interligne sont hérités du texte courant.
`button`	Curseur « main » tant que le bouton est actif ; le contour de focus n’apparaît pas lors d’un clic à la souris.
`textarea`	Redimensionnable verticalement uniquement.
`fieldset`	Sans bordure, sans marge ni remplissage.
`legend`	Pleine largeur, taille proche d’un titre `h4`, marge basse `0.5rem`.
`[type=search]`	Apparence de champ de texte, bouton d’effacement en niveaux de gris.

Éléments HTML sans classe#

Cet extrait n’utilise aucune classe : tout le style vient du reboot.

Contrat d'épargne

Votre épargne est rémunérée à 3,5 % par an. Les intérêts sont versés chaque trimestre sur votre compte courant. Consultez les conditions générales.

Dépôt minimal : 10 000 FCFA
Retrait possible à tout moment

Plafond: 15 000 000 FCFA
Frais de tenue de compte: Aucun

Épargner régulièrement, c'est préparer vos projets.

Pour fermer la fenêtre, appuyez sur Échap.

<h4>Contrat d'épargne</h4>
<p>Votre épargne est rémunérée à <strong>3,5 %</strong> par an. Les intérêts sont <mark>versés chaque trimestre</mark> sur votre compte courant. Consultez les <a href="#">conditions générales</a>.</p>
<ul>
  <li>Dépôt minimal : 10 000 FCFA</li>
  <li>Retrait possible à tout moment</li>
</ul>
<dl>
  <dt>Plafond</dt>
  <dd>15 000 000 FCFA</dd>
  <dt>Frais de tenue de compte</dt>
  <dd>Aucun</dd>
</dl>
<blockquote>Épargner régulièrement, c'est préparer vos projets.</blockquote>
<hr>
<p class="mb-0">Pour fermer la fenêtre, appuyez sur <kbd>Échap</kbd>.</p>

Code, abréviations et exposants#

Le taux effectif global (TEG) d'un prêt est exprimé en pourcentage annuel : 12^e mensualité, formule capital × taux.

mensualite = capital * taux / (1 - (1 + taux) ** -duree)

Simulation indicative, sans valeur contractuelle.

<p>Le taux effectif global (<abbr title="Taux effectif global">TEG</abbr>) d'un prêt est exprimé en pourcentage annuel : 12<sup>e</sup> mensualité, formule <code>capital × taux</code>.</p>
<pre><code>mensualite = capital * taux / (1 - (1 + taux) ** -duree)</code></pre>
<p class="mb-0"><small>Simulation indicative, sans valeur contractuelle.</small></p>

Tableau et formulaire de base#

Sans classe, un tableau reste très simple ; ajoutez .table pour obtenir son style complet. Les champs héritent de la police du texte.

Dernières opérations
Date	Libellé	Montant
12/03	Virement reçu	150 000 FCFA
14/03	Retrait distributeur	-20 000 FCFA

<table>
  <caption>Dernières opérations</caption>
  <thead>
    <tr><th>Date</th><th>Libellé</th><th>Montant</th></tr>
  </thead>
  <tbody>
    <tr><td>12/03</td><td>Virement reçu</td><td>150 000 FCFA</td></tr>
    <tr><td>14/03</td><td>Retrait distributeur</td><td>-20 000 FCFA</td></tr>
  </tbody>
</table>
<form>
  <fieldset>
    <legend>Contact</legend>
    <label for="reboot-nom">Nom</label>
    <input id="reboot-nom" type="text">
    <button type="button">Envoyer</button>
  </fieldset>
</form>

Bonnes pratiques

À faire

Partez des éléments HTML sémantiques (h1 à h6, ul, table…) : le reboot les met déjà en forme.
Ajoutez une classe seulement pour changer l’apparence d’un élément (par exemple .h3 sur un h5).
Pour modifier les marges, utilisez les utilitaires d’espacement plutôt que du CSS sur mesure.

À éviter

Ne choisissez pas un niveau de titre pour sa taille : respectez la hiérarchie du document et changez la taille avec .h1 à .h6.
Ne redéfinissez pas les styles de body ou de * sans mesurer l’effet sur toute la page.

Accessibilité

Le soulignement des liens est conservé : ne le retirez pas sans autre signe visible, car la couleur seule ne suffit pas à repérer un lien.
La navigation à la souris masque l’anneau de focus des boutons, mais il reste visible au clavier : ne le supprimez pas.