<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
      <title>Au coin du Frag</title>
      <link>https://bernat.me</link>
      <description>Programmation, jeux et bien plus...</description>
      <generator>Zola</generator>
      <language>fr</language>
      <atom:link href="https://bernat.me/rss.xml" rel="self" type="application/rss+xml"/>
      <lastBuildDate>Fri, 03 Apr 2026 00:00:00 +0000</lastBuildDate>
      <item>
          <title>Des commentaires avec Mastodon</title>
          <pubDate>Fri, 03 Apr 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/technique/commentaire-mastodon/</link>
          <guid>https://bernat.me/articles/technique/commentaire-mastodon/</guid>
          <description xml:base="https://bernat.me/articles/technique/commentaire-mastodon/">&lt;p&gt;Je suis tombé sur &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jonhnnyweslley.net&amp;#x2F;blog&amp;#x2F;mastodon-comments&amp;#x2F;&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;ce formidable article&lt;&#x2F;a&gt; qui explique comment mettre en place un système de commentaires sur le blog entièrement en code navigateur, sans base de données, sans script de tracking, sans publicité et sans logiciel tiers (enfin... presque). Le principe est d&#x27;utiliser un fil Mastodon pour héberger les commentaires.&lt;&#x2F;p&gt;
&lt;p&gt;L&#x27;intégration est extèmement simple.&lt;&#x2F;p&gt;
&lt;p&gt;Il faut tout d&#x27;abord inclure &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;dpecos&amp;#x2F;mastodon-comments&amp;#x2F;&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;cette librairie Javascript&lt;&#x2F;a&gt; dans l&#x27;entête des pages ou on souhaite avoir des commentaires.
En ce qui me concerne, je l&#x27;ai placé dans le modèle de document de Zola de la façon suivante :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt; src&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;js&#x2F;mastodon-comments.js&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt; defer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Ensuite, il faut ajouter l&#x27;appel au web component, toujours dans le modèle de page, de la façon suivante :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FB4934;&quot;&gt; if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt; page&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;extra&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;toot_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;mastodon-comments&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt;    host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;{{&lt;&#x2F;span&gt;&lt;span&gt; config.extra.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;mastodon_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt; }}&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt;    user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;{{&lt;&#x2F;span&gt;&lt;span&gt; config.extra.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;mastodon_user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt; }}&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt;    tootId&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;{{&lt;&#x2F;span&gt;&lt;span&gt; page.extra.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;toot_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;}}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;mastodon-comments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span style=&quot;color: #83A598;&quot;&gt; endif&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8EC07C;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;J&#x27;ai conditionné l&#x27;affichage des commentaire à la présence d&#x27;un attribut &lt;code&gt;toot_id&lt;&#x2F;code&gt; dans la page.&lt;&#x2F;p&gt;
&lt;p&gt;Cet attribut référence un toot de votre compte Mastodon qui servira de point de départ au fil de commentaires. Toutes les réponses faites sur ce toot seront considérées comme des commentaires de la page.&lt;&#x2F;p&gt;
&lt;p&gt;Les paramètres de configuration globaux sont placés dans le fichier &lt;code&gt;config.toml&lt;&#x2F;code&gt; du site :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;toml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt;extra&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;mastodon_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;mastodon.tetaneutral.net&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #83A598;&quot;&gt;mastodon_user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;manubernat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Quand je publie un nouvel article, il me suffit de faire un toot à son sujet. Ensuite, je récupère l&#x27;identifiant du toot pour activer les commentaires.&lt;br &#x2F;&gt;
En réalité, je peux même faire le toot &lt;em&gt;avant&lt;&#x2F;em&gt; de publier puisque l&#x27;URL final de la publication est facile à calculer.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Nombre maxi de services Windows</title>
          <pubDate>Tue, 17 Mar 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/courts/limite-max-service/</link>
          <guid>https://bernat.me/courts/limite-max-service/</guid>
          <description xml:base="https://bernat.me/courts/limite-max-service/">&lt;p&gt;Windows accepte un nombre maxi de services. Le nombre maximum&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Utilisation de Plausible Analytics</title>
          <pubDate>Tue, 17 Feb 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/logiciels/plausible/</link>
          <guid>https://bernat.me/articles/logiciels/plausible/</guid>
          <description xml:base="https://bernat.me/articles/logiciels/plausible/">&lt;h1 id=&quot;memo-mise-en-place-de-plausible-analytics&quot;&gt;Mémo : mise en place de Plausible Analytics&lt;&#x2F;h1&gt;
&lt;h2 id=&quot;presentation&quot;&gt;Présentation&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;plausible.io&quot;&gt;Plausible&lt;&#x2F;a&gt; est un logiciel d&#x27;analyse de traffic pour les sites web. Il est est beaucoup plus simple que Google Analytics et peut-être auto-hébergé.
Plausible n&#x27;utilise pas de cookie (il ne nécessite donc pas de bandeau de consentement sur le site) et est entièrement compatible avec le RGPD dans les informations qu&#x27;il recueille..&lt;&#x2F;p&gt;
&lt;h2 id=&quot;installation-d-une-instance-plausible-avec-docker&quot;&gt;Installation d&#x27;une instance Plausible avec Docker&lt;&#x2F;h2&gt;
&lt;p&gt;Les opérations suivantes sont à réaliser sur un serveur Docker fonctionnel.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;1-clonage-du-depot-d-auto-hebergement&quot;&gt;1. Clonage du dépôt d&#x27;auto hébergement&lt;&#x2F;h3&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt; clone https:&#x2F;&#x2F;github.com&#x2F;plausible&#x2F;hosting&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;2-configuration&quot;&gt;2. Configuration&lt;&#x2F;h3&gt;
&lt;p&gt;Editer le fichier &lt;code&gt;plausible-conf.env&lt;&#x2F;code&gt; pour adapter les paramètres à vos besoins.
De nombreux paramètres sont modifiables parmi lesquels :&lt;&#x2F;p&gt;
&lt;h4 id=&quot;l-utilisateur-de-la-base-de-donnees&quot;&gt;L&#x27;utilisateur de la base de données&lt;&#x2F;h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ADMIN_USER_NAME&lt;&#x2F;code&gt; : le nom d&#x27;utilisateur du compte d&#x27;aministration&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;ADMIN_USER_EMAIL&lt;&#x2F;code&gt;: l&#x27;adresse email du compte d&#x27;administration&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;ADMIN_USER_PWD&lt;&#x2F;code&gt; : le mot de passe du compte d&#x27;administration&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h4 id=&quot;les-infos-du-serveur&quot;&gt;Les infos du serveur&lt;&#x2F;h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;BASE_URL&lt;&#x2F;code&gt; : URL de base d&#x27;accès à Plausible (ex : https:&#x2F;&#x2F;plausible.mondomaine.fr)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;SECRET_KEY_BASE&lt;&#x2F;code&gt; : un identifiant quelconque de 64 caractères utilisé pour la sécurisation del&#x27;application. On peut en générer un avec la commande &lt;code&gt;openssl rand -base64 64 | tr -d &#x27;\n&#x27;; echo&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;DISABLE_REGISTRATION&lt;&#x2F;code&gt; : désactive l&#x27;inscription de nouveaux utilisateurs (valeurs : &lt;code&gt;true&lt;&#x2F;code&gt; ou &lt;code&gt;false&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;PORT&lt;&#x2F;code&gt; : le port d&#x27;écoute de Plausible. Par défaut, c&#x27;est le port 8000 (et on peut le placer derrière un reverse proxy)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h4 id=&quot;les-infos-de-la-base-de-donnees&quot;&gt;Les infos de la base de données&lt;&#x2F;h4&gt;
&lt;p&gt;Il n&#x27;est pas nécessaire de les modifier lorsqu&#x27;on utilise le fichier Docker Compose par défaut.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;les-infos-d-envoi-d-email&quot;&gt;Les infos d&#x27;envoi d&#x27;email&lt;&#x2F;h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;MAILER_EMAIL&lt;&#x2F;code&gt; : l&#x27;adresse expéditeur des emails&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;SMTP_HOST_ADDR&lt;&#x2F;code&gt; : l&#x27;adresse du serveur SMTP à utiliser&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;SMTP_HOST_PORT&lt;&#x2F;code&gt; : le port de connexion&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;SMTP_USER_NAME&lt;&#x2F;code&gt; : le login sur le serveur SMTP&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;SMTP_USER_PWD&lt;&#x2F;code&gt; : le mot de passe&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;SMTP_HOST_SSL_ENABLED&lt;&#x2F;code&gt; : &lt;code&gt;true&lt;&#x2F;code&gt;pour utiliser une connexion SSL&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;SMTP_RETRIES&lt;&#x2F;code&gt; : le nombre d&#x27;essais d&#x27;envoi de mail en cas de problème (par défaut : 2)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;3-demarrage-du-serveur&quot;&gt;3. Démarrage du serveur&lt;&#x2F;h3&gt;
&lt;p&gt;C&#x27;est un groupe de conteneurs Docker configurée avec Docker Compose donc il suffit de faire un &lt;code&gt;docker-compose up -d&lt;&#x2F;code&gt; dans le répertoire.&lt;&#x2F;p&gt;
&lt;p&gt;Note : il est possible d&#x27;éditer le fichier &lt;code&gt;docker-compose.yml&lt;&#x2F;code&gt; par exemple pour supprimer le conteneur d&#x27;envoi d&#x27;email si vous utilisez votre prore serveur d&#x27;emails.&lt;&#x2F;p&gt;
&lt;p&gt;Après le démarrage, il suffit d&#x27;aller sur la page d&#x27;accueil (https:&#x2F;&#x2F;plausible.mondomaine.fr:8000) pour créer un premier compte.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;4-integration-dans-les-sites&quot;&gt;4. Intégration dans les sites&lt;&#x2F;h3&gt;
&lt;p&gt;Plausible vous demandera l&#x27;URL du site pour lequel il va collecter les infos et générera un fragment de Javascript de la forme suivante :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&amp;lt;script defer data-domain=&amp;quot;mondomaine.fr&amp;quot; src=&amp;quot;https:&#x2F;&#x2F;plausible.mondomaine.fr&#x2F;js&#x2F;script.js&amp;quot;&amp;gt;&amp;lt;&#x2F;script&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Ce fragment est à placer dans la partie &lt;code&gt;&amp;lt;head&amp;gt;&lt;&#x2F;code&gt; de toutes les pages du site pour collecter les infos.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Mise à niveau d&#x27;un serveur sous Debian</title>
          <pubDate>Sun, 01 Feb 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/technique/memo-mise-a-jour-debian/</link>
          <guid>https://bernat.me/articles/technique/memo-mise-a-jour-debian/</guid>
          <description xml:base="https://bernat.me/articles/technique/memo-mise-a-jour-debian/">&lt;h2 id=&quot;1-avant-la-mise-a-jour&quot;&gt;1. Avant la mise à jour&lt;&#x2F;h2&gt;
&lt;p&gt;Vérifier que le système est à jour :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt update&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt upgrade&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt full-upgrade&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt autoremove --purge&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Vérifier qu&#x27;il n&#x27;y a pas un redémarrage en attente :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;ls &#x2F;run&#x2F;reboot-required&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Si ce fichier existe :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;systemctl reboot&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;2-changement-des-sources&quot;&gt;2. Changement des sources&lt;&#x2F;h2&gt;
&lt;p&gt;Il faut ensuite modifier la source des paquets : &lt;code&gt;&#x2F;etc&#x2F;apt&#x2F;source.list&lt;&#x2F;code&gt;.&lt;br &#x2F;&gt;
Note : si d&#x27;autres sources sont utilisées (logiciels tiers), il est préférable de les désactiver pendant la mise à jour de la distribution puis de les mettre à jour eux-mêmes ensuite.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;2-1-sources-pour-debian-10-buster&quot;&gt;2.1 Sources pour debian 10 (buster)&lt;&#x2F;h3&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb http:&#x2F;&#x2F;archive.debian.org&#x2F;debian&#x2F; buster main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src http:&#x2F;&#x2F;archive.debian.org&#x2F;debian&#x2F; buster main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb http:&#x2F;&#x2F;archive.debian.org&#x2F;debian-security buster&#x2F;updates main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src http:&#x2F;&#x2F;archive.debian.org&#x2F;debian-security buster&#x2F;updates main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb http:&#x2F;&#x2F;archive.debian.org&#x2F;debian&#x2F; buster-updates main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src http:&#x2F;&#x2F;archive.debian.org&#x2F;debian&#x2F; buster-updates main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;2-2-sources-pour-debian-11-bullseye&quot;&gt;2.2 Sources pour debian 11 (bullseye)&lt;&#x2F;h3&gt;
&lt;p&gt;Notes :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;le format de la ligne qui référence l&#x27;archive &lt;code&gt;security&lt;&#x2F;code&gt; a légèrement changé dans cette version.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;# &#x2F;etc&#x2F;apt&#x2F;sources.list&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb http:&#x2F;&#x2F;deb.debian.org&#x2F;debian bullseye main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src http:&#x2F;&#x2F;deb.debian.org&#x2F;debian bullseye main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb http:&#x2F;&#x2F;deb.debian.org&#x2F;debian-security&#x2F; bullseye-security main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src http:&#x2F;&#x2F;deb.debian.org&#x2F;debian-security&#x2F; bullseye-security main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb http:&#x2F;&#x2F;deb.debian.org&#x2F;debian bullseye-updates main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src http:&#x2F;&#x2F;deb.debian.org&#x2F;debian bullseye-updates main contrib non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;2-3-source-pour-debian-12-bookworm&quot;&gt;2.3 Source pour debian 12 (bookworm)&lt;&#x2F;h3&gt;
&lt;p&gt;Notes :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;OpenSSH n&#x27;accepte plus par défaut les clés en &lt;code&gt;ssh-rsa&lt;&#x2F;code&gt;. Si on utilise une telle clé, il faut ajouter les lignes &lt;code&gt;PubkeyAcceptedAlgorithms +ssh-rsa&lt;&#x2F;code&gt; et &lt;code&gt;KbdInteractiveAuthentication no&lt;&#x2F;code&gt; dans le fichier &lt;code&gt;&#x2F;etc&#x2F;ssh&#x2F;sshd_config&lt;&#x2F;code&gt; à la fin de la mise à jour (avant de rebooter).&lt;&#x2F;li&gt;
&lt;li&gt;Dans le cas de l&#x27;utilisation de OpenSMTPD, la syntaxe de &lt;code&gt;&#x2F;etc&#x2F;smtpd.conf&lt;&#x2F;code&gt; a changé.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;# &#x2F;etc&#x2F;apt&#x2F;sources.list&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm-proposed-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm-proposed-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm-backports contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; bookworm-backports contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;security.debian.org&#x2F;debian-security&#x2F; bookworm-security contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;security.debian.org&#x2F;debian-security&#x2F; bookworm-security contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;2-4-sources-pour-trixie-version-13&quot;&gt;2.4 Sources pour trixie (version 13)&lt;&#x2F;h3&gt;
&lt;p&gt;Note : A partir de la version 13, apt recommande d&#x27;utiliser le nouveau format de fichier source. Pour convertir automatiquement votre configuration, utilisez la commande &lt;code&gt;apt modernize-sources&lt;&#x2F;code&gt; à la fin de la mise à jour.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;# &#x2F;etc&#x2F;apt&#x2F;sources.list&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie-proposed-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie-proposed-updates contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie-backports contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;ftp.debian.org&#x2F;debian&#x2F; trixie-backports contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb https:&#x2F;&#x2F;security.debian.org&#x2F;debian-security&#x2F; trixie-security contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deb-src https:&#x2F;&#x2F;security.debian.org&#x2F;debian-security&#x2F; trixie-security contrib main non-free&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;3-lancement-de-la-mise-a-jour&quot;&gt;3. Lancement de la mise à jour&lt;&#x2F;h2&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt update&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt upgrade --without-new-pkgs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt full-upgrade&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt autoremove --purge&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;systemctl reboot&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;4-bonus-configuration-de-unattended-upgrades&quot;&gt;4. Bonus : configuration de unattended-upgrades&lt;&#x2F;h2&gt;
&lt;p&gt;Pour que les mises à jour mineures ou de sécurité s&#x27;installent automatiquement, vous pouvez configurer le service uanttented-upgrades.&lt;&#x2F;p&gt;
&lt;p&gt;Pour l&#x27;installer :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;apt-get install unattended-upgrades apt-listchanges&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Sa configuration se fait dans &lt;code&gt;&#x2F;etc&#x2F;apt&#x2F;apt.conf.d&#x2F;50unattended-upgrades.conf&lt;&#x2F;code&gt; ou dans un fichier (à créer) &lt;code&gt;&#x2F;etc&#x2F;apt&#x2F;apt.conf.d&#x2F;52unattended-upgrades.conf&lt;&#x2F;code&gt; pour simplement surcharger les valeurs par défaut et ne pas être perturbé par les mises à jour futures.
Les directives notables (selon moi 😉) sont :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Unattended-Upgrade::Origins-Pattern { &amp;quot;origin=Debian,codename=${distro_codename},label=Debian-Security&amp;quot;; };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Unattended-Upgrade::Mail &amp;quot;adresse_email_des_rapports@chezvous.com&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Unattended-Upgrade::Remove-Unused-Kernel-Packages &amp;quot;true&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Unattended-Upgrade::Remove-New-Unused-Dependencies &amp;quot;true&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Unattended-Upgrade::Remove-Unused-Dependencies &amp;quot;false&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Unattended-Upgrade::Automatic-Reboot &amp;quot;true&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;La première directive indique de télécharger et d&#x27;installer automatiquement les mises à jour de sécurité. Selon moi, ce sont celles-ci qui sont à viser avec unattended-upgrades.&lt;&#x2F;p&gt;
&lt;p&gt;Ensuite, pour activer le service :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;cp &#x2F;usr&#x2F;share&#x2F;unattended-upgrades&#x2F;20auto-upgrades &#x2F;etc&#x2F;apt&#x2F;apt.conf.d&#x2F;22auto-upgrades&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Normalement, ce fichier ne contient que deux directives qu&#x27;il n&#x27;est pas nécessaire de modifier :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;APT::Periodic::Update-Package-Lists &amp;quot;1&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;APT::Periodic::Unattended-Upgrade &amp;quot;1&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;</description>
      </item>
      <item>
          <title>Gestion de l&#x27;horloge du BIOS par Windows et Linux</title>
          <pubDate>Sun, 01 Feb 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/courts/horloge-bios-dualboot/</link>
          <guid>https://bernat.me/courts/horloge-bios-dualboot/</guid>
          <description xml:base="https://bernat.me/courts/horloge-bios-dualboot/">&lt;p&gt;Pour Windows, l&#x27;heure mémorisée par l&#x27;horloge du BIOS est en heure locale.&lt;br &#x2F;&gt;
Pour Linux, il s&#x27;agit de l&#x27;heure UTC...&lt;&#x2F;p&gt;</description>
      </item>
      <item>
          <title>Blogroll</title>
          <pubDate>Thu, 29 Jan 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/divers/blogroll/</link>
          <guid>https://bernat.me/divers/blogroll/</guid>
          <description xml:base="https://bernat.me/divers/blogroll/">&lt;p&gt;Cette page regroupe des sites de &quot;bonne fréquentation&quot;...&lt;&#x2F;p&gt;
&lt;h2 id=&quot;les-amis&quot;&gt;Les amis&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;meurot.me&amp;#x2F;articles&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Ludovic Meurot&lt;&#x2F;a&gt; : Le blog de mon collègue&#x2F;ami&#x2F;padawan Ludo.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;business&quot;&gt;Business&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;seths.blog&amp;#x2F;&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Seth&amp;#x27;s Blog&lt;&#x2F;a&gt; : Seth Godin, l&#x27;auteur de &quot;La vache pourpre&quot;, une légende du marketing&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;divers&quot;&gt;Divers&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;tcrouzet.com&amp;#x2F;&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Thierry Crouzet&lt;&#x2F;a&gt; : Auteur et penseur Montpelliérain (ou presque)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;www.oezratty.net&amp;#x2F;&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Opinions Libres&lt;&#x2F;a&gt; : Le blog d&#x27;Olivier Ezratty&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;restofworld.org&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Rest of World&lt;&#x2F;a&gt; : Un magazine sur le &quot;reste du monde&quot; (comprendre : pas les Etats-Unis et l&#x27;Europe)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;economie&quot;&gt;Economie&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;deshautsetdebats.blog&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Des hauts et débats&lt;&#x2F;a&gt; : Economie et société&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;dessinemoileco.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Dessine moi l&amp;#x27;éco&lt;&#x2F;a&gt; : BD de vulgarisation de l&#x27;économie (ne semble plus très actif mais le contenu est intéressant)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;blogs.univ-poitiers.fr&amp;#x2F;o-bouba-olga&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Olivier Bouba-Olga&lt;&#x2F;a&gt; : Economie et politique&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;ecriture&quot;&gt;Ecriture&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;cosmo-orbus.net&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Cosmo [†] Orbüs&lt;&#x2F;a&gt; : Le blog d&#x27;Antoine Daer, de la SF, du Cyberpunk, des réflexions sur la société...&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;lepauledorion.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;L&amp;#x27;épaule d&amp;#x27;Orion&lt;&#x2F;a&gt; : Blog d&#x27;actualité sur la science-fiction&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;lecultedapophis.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Le culte d&amp;#x27;Apophis&lt;&#x2F;a&gt; : Blog d&#x27;actualité sur la SF et la fantasy&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;lioneldavoust.com&amp;#x2F;&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Lionel Davoust - Expériences en temps réel&lt;&#x2F;a&gt; : Fondateur de l&#x27;excellent podcast &quot;Procrastination&quot; sur l&#x27;écriture&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;midgardswriters.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Midgard&amp;#x27;s Writers&lt;&#x2F;a&gt; : Ma prof d&#x27;écriture&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;mythcreants.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Mythcreants&lt;&#x2F;a&gt; : Un blog sur la rédaction et l&#x27;écriture&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;education&quot;&gt;Education&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;betterexplained.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;BetterExplained&lt;&#x2F;a&gt; : Learn to understand math, not memorize it&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;fun&quot;&gt;Fun&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;existentialcomics.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Existential Comics&lt;&#x2F;a&gt; : Des philosophes en folie&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.smbc-comics.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Saturday Morning Breakfast Cereal&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;poorlydrawnlines.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Poorly Drawn Lines&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;unodieuxconnard.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Le blog d&amp;#x27;un odieux connard&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;nemandthecity.wordpress.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Nem and the city&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;xkcd.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;xkcd.com&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;infosec-cryptographie&quot;&gt;InfoSec&#x2F;Cryptographie&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;bonjourlafuite.eu.org&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;C’est qui qui a fuité aujourd’hui ?&lt;&#x2F;a&gt; : Répertoire des fuites de données personnelles&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;cryptologie.net&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;David Wong | Cryptologie&lt;&#x2F;a&gt; : De la crypto (assez pointue)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;cryptobourrin.wordpress.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Cryptobourrin&lt;&#x2F;a&gt; : De la crypto aussi&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;eric.freyssi.net&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Investigation et transformation numériques&lt;&#x2F;a&gt; : Le blog personnel d&#x27;Éric Freyssinet&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.arsouyes.org&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Arsouyes.org&lt;&#x2F;a&gt; : le blog de deux experts de justice en sécurité informatique&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;jeux&quot;&gt;Jeux&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;gusandco.net&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Gus &amp;amp;amp; Co&lt;&#x2F;a&gt; : Actualité du jeu de plateau&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;lefix.di6dent.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Le Fix&lt;&#x2F;a&gt; : Actualité du jeu de rôle&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;ptgptb.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Places to Go, People to Be - Le meilleur du web rôliste mondial, traduit pour vous&lt;&#x2F;a&gt; : Un site curateur d&#x27;articles sur le jeu de rôle dans le monde entier&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;politique-et-justice&quot;&gt;Politique et Justice&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;www.maitre-eolas.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Journal d&amp;#x27;un avocat&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;scinfolex.wordpress.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;:: S.I.Lex ::&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;www.koztoujours.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Koztoujours&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;laplumedaliocha.wordpress.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;La Plume d&amp;#x27;Aliocha&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.larevolutiondestortues.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;La Révolution des Tortues&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;tech&quot;&gt;Tech&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;de-computeris.blogspot.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;De Computeris&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.geek-directeur-technique.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;De geek à directeur technique&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;www.dedoimedo.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Dedoimedo RSS&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;blog.seboss666.info&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Le blog de Seboss666&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;blog.jbriault.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Les mains dans le cambouis&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;next.ink&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Next&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;blog.imirhil.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;NullPointerException&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;open-freax.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Open-Freax&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;patrickmylund.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Patrick Mylund Nielsen&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;philippe.scoffoni.net&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Philippe Scoffoni&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;schneide.wordpress.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Schneide Blog&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;sealedabstract.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Sealed Abstract&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;thecodelesscode.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;The Codeless Code&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;vincent.bernat.ch&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Vincent Bernat&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;wonderfall.space&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Wonderfall&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;www.codersnotes.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;codersnotes&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;journal.stuffwithstuff.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;journal.stuffwithstuff.com&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;haacked.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;you&amp;#x27;ve been HAACKED&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</description>
      </item>
      <item>
          <title>A Propos</title>
          <pubDate>Sun, 25 Jan 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/divers/a-propos/</link>
          <guid>https://bernat.me/divers/a-propos/</guid>
          <description xml:base="https://bernat.me/divers/a-propos/">&lt;h2 id=&quot;bienvenue&quot;&gt;Bienvenue !&lt;&#x2F;h2&gt;
&lt;p&gt;Quelques mots pour me présenter : je m&#x27;appelle Emmanuel BERNAT. Je suis administrateur système et RSSI à Montpellier. Si vous utilisez &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.pcsoft.fr&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;WINDEV&lt;&#x2F;a&gt; (ou l&#x27;un de ses compagnons), nous nous sommes peut être déjà croisés &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.youtube.com&amp;#x2F;watch?v=_EKhi8756-M&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;ici&lt;&#x2F;a&gt; ou peut être m&#x27;avez vous &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.youtube.com&amp;#x2F;watch?v=6556YB-jLU8&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;vu là&lt;&#x2F;a&gt;…&lt;&#x2F;p&gt;
&lt;p&gt;Quand je ne suis pas occupé par mon travail, je m&#x27;intéresse à toutes sortes d&#x27;autres logiciels avec comme marottes récurrentes le développement de jeux et les langages de programmation.&lt;&#x2F;p&gt;
&lt;p&gt;A part ça, je fais du &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;hybride-rpg.com&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;jeu de rôle&lt;&#x2F;a&gt;, un peu de jeu de plateau et parfois j&#x27;écris.&lt;&#x2F;p&gt;
&lt;p&gt;Voilà pour l&#x27;essentiel. N&#x27;hésitez pas à m&#x27;écrire. Bonne lecture !&lt;&#x2F;p&gt;
&lt;p&gt;Une dernière précision : ce blog est mon site personnel. Toutes les opinions exprimées n&#x27;engagent que moi, et notamment pas mon employeur présent ou mes employeurs passés.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;les-reseaux&quot;&gt;Les réseaux&lt;&#x2F;h2&gt;
&lt;p&gt;Je ne suis ni très présent, ni très actif sur les réseaux (je préfère perdre mon temps ailleurs) mais vous pouvez tout de même me retrouver sur :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;img src=&quot;&#x2F;img&#x2F;linkedin.svg&quot; alt=&quot;LinkedIn&quot; &#x2F;&gt; &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;linkedin.com&amp;#x2F;in&amp;#x2F;emmanuel-bernat-94267310&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;LinkedIn&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;img src=&quot;&#x2F;img&#x2F;github.svg&quot; alt=&quot;GitHub&quot; &#x2F;&gt; &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;manubernat&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;GitHub&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;img src=&quot;&#x2F;img&#x2F;mastodon.svg&quot; alt=&quot;Mastodon&quot; &#x2F;&gt; &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;mastodon.tetaneutral.net&amp;#x2F;@manubernat&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Mastodon&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;img src=&quot;&#x2F;img&#x2F;stackoverflow.svg&quot; alt=&quot;Stack Overflow&quot; &#x2F;&gt; &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;stackoverflow.com&amp;#x2F;users&amp;#x2F;20990&amp;#x2F;emmanuel-bernat&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Stack Overflow&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;img src=&quot;&#x2F;img&#x2F;email.svg&quot; alt=&quot;Email&quot; &#x2F;&gt; &lt;a href=&quot;mailto:manu@bernat.me&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;et m&amp;#x27;envoyer des emails&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;la-vie-du-blog&quot;&gt;La vie du blog...&lt;&#x2F;h2&gt;
&lt;p&gt;2020 : Je décide de relancer mon blog abandonné depuis trop longtemps en découvrant l&#x27;univers des générateurs de sites statiques. Après avoir joué avec Pelican, et plusieurs autres, mon choix se fixe sur Hugo pour sa facilité d&#x27;utilisation.&lt;&#x2F;p&gt;
&lt;p&gt;2023 : Trois ans après avoir quitté le monde du site dynamique pour un site statique généré, j&#x27;ai profité d&#x27;un long week-end pour migrer de &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;gohugo.io&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;Hugo&lt;&#x2F;a&gt;, un générateur de sites en Go vers &lt;a href=&quot;Zola&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;https:&amp;#x2F;&amp;#x2F;www.getzola.org&amp;#x2F;&lt;&#x2F;a&gt;, un autre générateur de site écrit, lui, en Rust. Pourquoi ? Et bien je trouvais la syntaxe des templates de Go un peu compliquée à utiliser et j&#x27;ai eu envie d&#x27;essayer autre chose. J&#x27;ai trouvé Zola un peu par hasard au détour d&#x27;un podcast. J&#x27;ai essayé. J&#x27;ai trouvé ça très facile. Du coup, j&#x27;ai migré mon template Hugo vers Zola et en avant !&lt;&#x2F;p&gt;
&lt;p&gt;2026 : En ce début d&#x27;année 2026, mon modeste site a entièrement fait peau neuve. J&#x27;ai écrit mon premier template pour Zola \o&#x2F; ! J&#x27;en ai profité pour faire du ménage dans les articles obsolètes. Maintenant, je vais pouvoir en écrire de nouveaux.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Recherche</title>
          <pubDate>Sun, 25 Jan 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/divers/recherche/</link>
          <guid>https://bernat.me/divers/recherche/</guid>
          <description xml:base="https://bernat.me/divers/recherche/">&lt;script src=&quot;https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;npm&#x2F;fuse.js@7.1.0&quot;&gt;&lt;&#x2F;script&gt;
&lt;script src=&quot;&#x2F;search_index.fr.js&quot;&gt;&lt;&#x2F;script&gt;
&lt;script&gt;
const options = {
  includeScore: true,
  ignoreDiacritics: true,
  threshold: 0.0,
  ignoreLocation: true,
  keys: [&#x27;title&#x27;, &#x27;description&#x27;, &#x27;body&#x27;],
  useExtendedSearch: true
}


const fn_search = function() {
    const fuse = new Fuse(window.searchIndex, options);
    const results = fuse.search(&quot;&#x27;&quot;+document.getElementById(&quot;search_term&quot;).value);

    let display = document.getElementById(&quot;search_results&quot;);
    display.innerHTML = &quot;&quot;;

    display.append(&quot;Résultat de la recherche de &quot;+document.getElementById(&quot;search_term&quot;).value+&quot; : &quot;);
    if (results.length==0) {
        display.append(&quot;aucune correspondance&quot;);
    } else {
        display.append(results.length+&quot; résultat(s)&quot;);
        display.append(document.createElement(&quot;br&quot;));

        let result_list = document.createElement(&quot;ul&quot;);

        let processed = [];

        results.forEach( function display_result( result ) {
            if (!processed.includes( result.item.url )) {
                let lien = document.createElement(&quot;a&quot;);
                lien.href = result.item.url;
                lien.text = result.item.title;
    
                let list_element = document.createElement(&quot;li&quot;);
                list_element.append(lien);
    
                result_list.append(list_element);

                processed.push(result.item.url);
            }
        });
        display.append(result_list);
    }
}

&lt;&#x2F;script&gt;
&lt;p&gt;Rechercher dans tout le site : &lt;input type=&quot;search&quot; id=&quot;search_term&quot; &#x2F;&gt; &lt;input type=&quot;button&quot; value=&quot;Rechercher&quot; onClick=&quot;fn_search()&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;div id=&quot;search_results&quot;&gt;
&lt;&#x2F;div&gt;
</description>
      </item>
      <item>
          <title>Tout ce que nous ne savons pas encore</title>
          <pubDate>Sat, 10 Jan 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/livres/tout-ce-que/</link>
          <guid>https://bernat.me/articles/livres/tout-ce-que/</guid>
          <description xml:base="https://bernat.me/articles/livres/tout-ce-que/">&lt;p&gt;Un livre de plus de vulgarisation scientifique ? Pas vraiment. Déjà, celui-ci est brillant.&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Faut-il rebooter ?</title>
          <pubDate>Fri, 07 Nov 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/courts/reboot-linux/</link>
          <guid>https://bernat.me/courts/reboot-linux/</guid>
          <description xml:base="https://bernat.me/courts/reboot-linux/">&lt;p&gt;Si le fichier &lt;code&gt;&#x2F;run&#x2F;reboot-required&lt;&#x2F;code&gt;&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Supprimer le PIN de Windows Hello</title>
          <pubDate>Wed, 03 Sep 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/courts/supprimer-pin/</link>
          <guid>https://bernat.me/courts/supprimer-pin/</guid>
          <description xml:base="https://bernat.me/courts/supprimer-pin/">&lt;p&gt;Pour supprimer le PIN de Windows Hello : &lt;code&gt;certutil -DeleteHelloContainer&lt;&#x2F;code&gt; dans un terminal admin.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>All These Bodies</title>
          <pubDate>Thu, 21 Aug 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/livres/all-these-bodies/</link>
          <guid>https://bernat.me/articles/livres/all-these-bodies/</guid>
          <description xml:base="https://bernat.me/articles/livres/all-these-bodies/">&lt;p&gt;Même si on sait où l&#x27;on va dès le début, le charme opère assez rapidement&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Malédictions</title>
          <pubDate>Fri, 28 Mar 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/livres/maledictions/</link>
          <guid>https://bernat.me/articles/livres/maledictions/</guid>
          <description xml:base="https://bernat.me/articles/livres/maledictions/">&lt;p&gt;Prêté par mon fils, grand fan de l&#x27;univers sombre et gothique de Warhammer&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Le K</title>
          <pubDate>Tue, 25 Feb 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/livres/le-k/</link>
          <guid>https://bernat.me/articles/livres/le-k/</guid>
          <description xml:base="https://bernat.me/articles/livres/le-k/">&lt;p&gt;Livre offert par un ami qui faisait un peu de place dans sa bibliothèque. Je ne&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Quand un disque est plein</title>
          <pubDate>Fri, 07 Feb 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/courts/disque-plein/</link>
          <guid>https://bernat.me/courts/disque-plein/</guid>
          <description xml:base="https://bernat.me/courts/disque-plein/">&lt;p&gt;On peut tomber à court d&#x27;espace disque ... alors qu&#x27;il reste de l&#x27;espace libre.&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Dungeon Crawler Carl - Tome 1</title>
          <pubDate>Sun, 02 Feb 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/livres/dungeon-crawler-carl-t1/</link>
          <guid>https://bernat.me/articles/livres/dungeon-crawler-carl-t1/</guid>
          <description xml:base="https://bernat.me/articles/livres/dungeon-crawler-carl-t1/">&lt;p&gt;Ce livre me faisait de l&#x27;oeil depuis un moment dans les rayons et un de mes collègues me l&#x27;a prêté. Je me suis donc jeté&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Anges et Démons</title>
          <pubDate>Sun, 12 Jan 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/livres/anges-et-demons/</link>
          <guid>https://bernat.me/articles/livres/anges-et-demons/</guid>
          <description xml:base="https://bernat.me/articles/livres/anges-et-demons/">&lt;p&gt;Un célèbre pavé d&#x27;un célèbre auteur. Malgré sa pagination imposante, ce thriller de presque science fiction&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>La Force de l&#x27;Intuition</title>
          <pubDate>Wed, 01 Jan 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/livres/la-force-de-l-intuition/</link>
          <guid>https://bernat.me/articles/livres/la-force-de-l-intuition/</guid>
          <description xml:base="https://bernat.me/articles/livres/la-force-de-l-intuition/">&lt;p&gt;Un livre prometteur (qui ne souhaite pas développer ses capacités de décision&amp;hellip;
&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>Résumé du CSS</title>
          <pubDate>Mon, 13 May 2024 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/articles/langages/css/</link>
          <guid>https://bernat.me/articles/langages/css/</guid>
          <description xml:base="https://bernat.me/articles/langages/css/">&lt;p&gt;Cet article est un résumé du langage CSS.&lt;&#x2F;p&gt;
&lt;p&gt;Une référence complète des balises et de leur utilisation se trouve &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&quot;&gt;sur le MDN&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h1 id=&quot;1-generalites&quot;&gt;1. Généralités&lt;&#x2F;h1&gt;
&lt;p&gt;CSS est un langage complémentaire du HTML, destiné à décrire le style et la mise en forme d&#x27;un document.&lt;&#x2F;p&gt;
&lt;p&gt;L&#x27;ajout de styles CSS peut se faire de trois façons :&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;Avec une feuille de style CSS externe que l&#x27;on relie dans la balise &lt;code&gt;&amp;lt;head&amp;gt;&lt;&#x2F;code&gt; à l&#x27;aide de :&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;styles.css&amp;quot; &#x2F;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ol start=&quot;2&quot;&gt;
&lt;li&gt;
&lt;p&gt;Avec une feuille de style interne, délimitée par des balises &lt;code&gt;&amp;lt;style&amp;gt;&lt;&#x2F;code&gt; placée dans le &lt;code&gt;&amp;lt;head&amp;gt;&lt;&#x2F;code&gt; de la page.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Directement dans une balise HTML avec l&#x27;attribut &lt;code&gt;style&lt;&#x2F;code&gt;. Cette troisième option est déconseillée.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;h1 id=&quot;2-format-d-une-regle-css&quot;&gt;2. Format d&#x27;une règle CSS&lt;&#x2F;h1&gt;
&lt;p&gt;Les règles CSS ont la forme suivante :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;selecteur {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        propriété1: valeur1;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        propriété2: valeur2;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        ...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Où &lt;code&gt;selecteur&lt;&#x2F;code&gt; est un sélecteur CSS permettant de cibler des éléments HTML, &lt;code&gt;propriétéN&lt;&#x2F;code&gt; est une propriété CSS (c&#x27;est un dire une caractéristique de style modifiable) et &lt;code&gt;valeurN&lt;&#x2F;code&gt; la valeur à donner à la propriété pour les éléments ciblés.&lt;&#x2F;p&gt;
&lt;p&gt;Les propriétés et les valeurs ne sont pas sensibles à la casse. Si une propriété est inconnue (ou on prise en charge par le moteur CSS), elle est simplement ignorée. Le CSS ne produit jamais d&#x27;erreur.&lt;&#x2F;p&gt;
&lt;p&gt;On peut insérer des commentaires dans le CSS en les débutant par &lt;code&gt;&#x2F;*&lt;&#x2F;code&gt; et en les terminant par &lt;code&gt;*&#x2F;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Les espaces non significatifs (espaces, tabulations, RC...) sont ignorés dans le CSS, tout comme en HTML.&lt;&#x2F;p&gt;
&lt;p&gt;Il est également possible d&#x27;encadrer des groupes de règles avec une expression en @ (par exemple &lt;code&gt;@media&lt;&#x2F;code&gt; pour rendre ces règle conditionnelles).&lt;&#x2F;p&gt;
&lt;p&gt;Certaines valeurs peuvent être des résultats de fonctions plutôt que de simples valeurs.&lt;&#x2F;p&gt;
&lt;p&gt;Avant d&#x27;être appliquées à un document, toutes les règles CSS sont regroupées en utilisant deux règles : la &lt;strong&gt;cascade&lt;&#x2F;strong&gt; et la &lt;strong&gt;spécificité&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;La règle de &lt;strong&gt;cascade&lt;&#x2F;strong&gt; indique que quand deux règles ont le même sélecteur, elles cumulent leurs propriétés. Quand deux valeurs différentes sont définies pour la même propriété, c&#x27;est la dernière qui est utilisée.&lt;&#x2F;p&gt;
&lt;p&gt;La règle de &lt;strong&gt;spécificité&lt;&#x2F;strong&gt; détermine l&#x27;ordre d&#x27;application entre plusieurs règles quand leurs sélecteurs s&#x27;appliquent tous à une balise HTML donnée. Le calcul de la spécificité se fait avec un triplet de valeurs : ID-CLASS-ELEMENT.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;ID : incrémenté de 1 pour chaque ID correspondant à l&#x27;élément à styler dans la règle&lt;&#x2F;li&gt;
&lt;li&gt;CLASS : incrémenté de 1 pour chaque classe, sélecteur d&#x27;attribut ou pseudo-classe correspondant à l&#x27;élément à styler dans la règle&lt;&#x2F;li&gt;
&lt;li&gt;ELEMENT : incrémenté de 1 pour chaque élément HTML ou pseudo-élément correspondant à l&#x27;élément à styler dans la règle
A la fin, la règle avec le triplet de plus grande valeur l&#x27;emporte et est appliquée.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;En plus de cette règle, les styles &lt;em&gt;inline&lt;&#x2F;em&gt; emportent toujours la plus grande spécificité et sont toujours appliqués prioritairement.&lt;&#x2F;p&gt;
&lt;p&gt;Enfin, le mot-clé &lt;code&gt;!important&lt;&#x2F;code&gt; permet de passer outre toutes ces règles et de forcer une valeur spécifique pour une propriété. (Note : il est préférable d&#x27;éviter d&#x27;utiliser ce mot clé).&lt;&#x2F;p&gt;
&lt;p&gt;Une troisième règle, l&#x27;&lt;strong&gt;héritage&lt;&#x2F;strong&gt; s&#x27;applique à certaines propriétés. Par exemple, la couleur d&#x27;un paragraphe sera automatiquement héritées par les balises contenues dans celui-ci alors qu&#x27;une balise de taille ne sera pas héritée.&lt;&#x2F;p&gt;
&lt;p&gt;L&#x27;héritage peut être contôlé par 5 valeurs spécifiques qui peuvent s&#x27;appliquer à toutes les propriétés :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;inherit&lt;&#x2F;code&gt; : indique que la propriété héritera de son parent.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;initial&lt;&#x2F;code&gt; : indique que la propriété prendra sa valeur initiale&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;revert&lt;&#x2F;code&gt; : indique que la propriété prendra la valeur par défaut définie par le navigateur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;revert-layer&lt;&#x2F;code&gt; : indique que la propriété prendra la valeur définie dans la &lt;strong&gt;couche de cascade (cascade layer)&lt;&#x2F;strong&gt; précédente (voir le selecteur &lt;code&gt;@layer&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;et &lt;code&gt;unset&lt;&#x2F;code&gt; indique que la propriété reviendra à sa valeur &lt;em&gt;naturelle&lt;&#x2F;em&gt; (hérité ou initial selon les propriétés).&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h1 id=&quot;3-selecteurs-css&quot;&gt;3. Sélecteurs CSS&lt;&#x2F;h1&gt;
&lt;p&gt;Les sélecteurs indiquent à quelles balises s&#x27;appliquent une règle CSS.&lt;&#x2F;p&gt;
&lt;p&gt;Pour appliquer les mêmes règles CSS à plusieurs sélecteurs, il suffit d&#x27;en faire une liste séparée par des virgules. Par exemple :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;h1, h2 {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    background-color: blue;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Attention : lors de l&#x27;utilisation d&#x27;une liste, si l&#x27;un des sélecteurs est syntaxiquement invalide, l&#x27;ensemble de la liste est ignorée.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;3-1-selecteurs-simples&quot;&gt;3.1 Sélecteurs simples&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;un élément HTML (également appelé un sélecteur de &lt;em&gt;type&lt;&#x2F;em&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;une classe : il faut faire précéder le nom de la classe par un point&lt;&#x2F;li&gt;
&lt;li&gt;un id : il faut faire précéder le nom de l&#x27;id par un #&lt;&#x2F;li&gt;
&lt;li&gt;le sélecteur universel (&lt;code&gt;*&lt;&#x2F;code&gt;) : il cible toutes les balises&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;3-2-selecteurs-d-attributs&quot;&gt;3.2 Sélecteurs d&#x27;attributs&lt;&#x2F;h2&gt;
&lt;p&gt;Ils ciblent un sélecteur uniquement s&#x27;il possède un attribut particulier ou même une valeur spécifique pour un attribut.&lt;&#x2F;p&gt;
&lt;p&gt;Les sélecteurs posibles sont :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;[attribut]&lt;&#x2F;code&gt; : correspond aux éléments possédant l&#x27;attribut. Exemple : &lt;code&gt;a[title]&lt;&#x2F;code&gt; s&#x27;applique aux balises &lt;code&gt;a&lt;&#x2F;code&gt; qui ont un attribut &lt;code&gt;title&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;[attribut=valeur]&lt;&#x2F;code&gt; : correspond aux éléments possédant l&#x27;attribut dont la valeur est &lt;strong&gt;strictement égale&lt;&#x2F;strong&gt; à la valeur indiquée. Exemple : &lt;code&gt;a[href=&quot;https:&#x2F;&#x2F;exemple.com&quot;]&lt;&#x2F;code&gt; s&#x27;applique aux balises &lt;code&gt;a&lt;&#x2F;code&gt; qui ont un attribut &lt;code&gt;href&lt;&#x2F;code&gt; valant exactement &lt;code&gt;https:&#x2F;&#x2F;exemple.com&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;[attribut~=valeur]&lt;&#x2F;code&gt; : correspond aux éléments possédant l&#x27;attribut dont la valeur &lt;strong&gt;contient&lt;&#x2F;strong&gt; la valeur indiquée (dans une liste de valeurs séparée par des espaces). Exemple : &lt;code&gt;p[class~=&quot;maClasse&quot;]&lt;&#x2F;code&gt; s&#x27;applique aux balises &lt;code&gt;p&lt;&#x2F;code&gt; qui ont un attribut &lt;code&gt;class&lt;&#x2F;code&gt; qui contient au moins &lt;code&gt;maClasse&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;[attribut|=valeur]&lt;&#x2F;code&gt; : correspond aux éléments possédant l&#x27;attribut dont la valeur &lt;strong&gt;commence par&lt;&#x2F;strong&gt; la valeur indiquée (dans une liste de valeurs séparée par des traits d&#x27;union, typiquement les préfixes de langue). Exemple : &lt;code&gt;div[lang|=&quot;en&quot;]&lt;&#x2F;code&gt; s&#x27;applique aux balises &lt;code&gt;div&lt;&#x2F;code&gt; qui ont un attribut &lt;code&gt;lang&lt;&#x2F;code&gt; qui commence par &lt;code&gt;en&lt;&#x2F;code&gt;, c&#x27;est à dire toutes les variantes de l&#x27;anglais.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;[attribut^=valeur]&lt;&#x2F;code&gt; : correspond aux éléments possédant l&#x27;attribut dont la valeur &lt;strong&gt;commence&lt;&#x2F;strong&gt; la valeur indiquée. Exemple : &lt;code&gt;p[class^=&quot;box-&quot;]&lt;&#x2F;code&gt; s&#x27;applique aux balises &lt;code&gt;p&lt;&#x2F;code&gt; qui ont un attribut &lt;code&gt;class&lt;&#x2F;code&gt; qui commence par &lt;code&gt;box-&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;[attribut$=valeur]&lt;&#x2F;code&gt; : correspond aux éléments possédant l&#x27;attribut dont la valeur &lt;strong&gt;finit&lt;&#x2F;strong&gt; la valeur indiquée. Exemple : &lt;code&gt;p[class^=&quot;-box&quot;]&lt;&#x2F;code&gt; s&#x27;applique aux balises &lt;code&gt;p&lt;&#x2F;code&gt; qui ont un attribut &lt;code&gt;class&lt;&#x2F;code&gt; qui finit par &lt;code&gt;box-&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;[attribut*=valeur]&lt;&#x2F;code&gt; : correspond aux éléments possédant l&#x27;attribut dont la valeur &lt;strong&gt;contient&lt;&#x2F;strong&gt; la valeur indiquée. Exemple : &lt;code&gt;p[class*=&quot;box&quot;]&lt;&#x2F;code&gt; s&#x27;applique aux balises &lt;code&gt;p&lt;&#x2F;code&gt; qui ont un attribut &lt;code&gt;class&lt;&#x2F;code&gt; qui contient &lt;code&gt;box&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;La mise en correspondance est sensible à la casse par défaut. Pour la rendre insensible, il faut ajouter &lt;code&gt;i&lt;&#x2F;code&gt; avant le cochet fermant.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;3-3-pseudo-classes-et-pseudo-elements&quot;&gt;3.3 Pseudo classes et pseudo éléments&lt;&#x2F;h2&gt;
&lt;p&gt;Les pseudo classes sont précédées de deux points et précisent un état particulier. Ce sont :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;:active&lt;&#x2F;code&gt; : élément activé (=cliqué généralement) par l&#x27;utilisateur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:any-link&lt;&#x2F;code&gt; : élément source d&#x27;un lien (&lt;code&gt;a&lt;&#x2F;code&gt; et &lt;code&gt;area&lt;&#x2F;code&gt; généralement)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:autofill&lt;&#x2F;code&gt; : élément &lt;code&gt;input&lt;&#x2F;code&gt;, uniquement s&#x27;il a été rempli automatiquement par le navigateur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:checked&lt;&#x2F;code&gt; : sélecteur ou interrupteur actuellement sélectionné&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:default&lt;&#x2F;code&gt; : élément par défaut dans un groupe (ex : valeur par défaut d&#x27;un sélecteur)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:defined&lt;&#x2F;code&gt; : élément défini (soit dans le HTML, soit dynamiquement)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:dir(ltr|rtl)&lt;&#x2F;code&gt; : élément dont le sens de lecteur est gauche vers la droite (ltr) ou droite vers la gauche (rtl).&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:disabled&lt;&#x2F;code&gt; : élément désactivé&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:empty&lt;&#x2F;code&gt; : élément vide (sans enfant dans le DOM)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:enabled&lt;&#x2F;code&gt; : élément actif (contraire de &lt;code&gt;:disabled&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:first&lt;&#x2F;code&gt; : utilisé avec &lt;code&gt;@page&lt;&#x2F;code&gt; pour correspondre à la première page d&#x27;un document&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:first-child&lt;&#x2F;code&gt; : premier enfant dans le DOM&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:first-of-type&lt;&#x2F;code&gt; : premier enfant de ce type dans le DOM&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:focus&lt;&#x2F;code&gt; : élément ayant reçu le focus&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:focus-visible&lt;&#x2F;code&gt; : élément ayant reçu le focus &lt;strong&gt;et&lt;&#x2F;strong&gt; le focus est visible&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:focus-within&lt;&#x2F;code&gt; : élément ayant reçu le focus (ou l&#x27;un de ses fils)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:fullscreen&lt;&#x2F;code&gt; : élément en plein écran&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:future()&lt;&#x2F;code&gt; : élément apparaissant entièrement après (temporellement) un autre élément&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:has(selecteur CSS)&lt;&#x2F;code&gt; : élément possédant un fils qui correspond au sélecteur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:host&lt;&#x2F;code&gt; : élément hôte d&#x27;un &lt;em&gt;shadow DOM&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:host-context(sélecteur CSS)&lt;&#x2F;code&gt; : élément hôte d&#x27;un &lt;em&gt;shadow DOM&lt;&#x2F;em&gt; s&#x27;il est le fils d&#x27;un élément qui correspond au sélecteur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:host()&lt;&#x2F;code&gt; : élément hôte d&#x27;un &lt;em&gt;shadow DOM&lt;&#x2F;em&gt; s&#x27;il correspond au sélecteur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:hover&lt;&#x2F;code&gt; : élément survolé&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:in-range&lt;&#x2F;code&gt; : élément dont la valeur est comprise entre les attributs &lt;code&gt;min&lt;&#x2F;code&gt; et &lt;code&gt;max&lt;&#x2F;code&gt; (applicable uniquement aux éléments qui possèdent ces attributs)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:indeterminate&lt;&#x2F;code&gt; : élément de valeur indéterminée (interrupteurs trois états)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:invalid&lt;&#x2F;code&gt; : élément dont la valeur saisie est invalide au regard du type spécifié&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:is(sélecteur CSS)&lt;&#x2F;code&gt; : éléments qui correspondent au sélecteur indiqué&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:lang(id de langue)&lt;&#x2F;code&gt; : éléments dont la langue correspond à celle indiquée&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:last-child&lt;&#x2F;code&gt; : dernier enfant dans le DOM&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:last-of-type&lt;&#x2F;code&gt; : dernier enfant de ce type dans le DOM&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:left&lt;&#x2F;code&gt; : utilisé avec &lt;code&gt;@page&lt;&#x2F;code&gt; pour correspondre aux pages de gauche d&#x27;un document&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:link&lt;&#x2F;code&gt; : élément correspondant à un lien qui n&#x27;a pas encore été visité&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:local-link&lt;&#x2F;code&gt; : élément correspondant à un lien dans la page elle-même&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:modal&lt;&#x2F;code&gt; : élément modal (ex : élément &lt;code&gt;dialog&lt;&#x2F;code&gt; ouvert avec &lt;code&gt;showModal()&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:not(sélecteur CSS)&lt;&#x2F;code&gt; : éléments qui ne correspondent pas au sélecteur indiqué (contraire de &lt;code&gt;:is()&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:nth-child(odd|even|An+B)&lt;&#x2F;code&gt; : élément s&#x27;il est le n-ième enfant dans le DOM (&lt;code&gt;odd&lt;&#x2F;code&gt; sélectionne tous les impairs, &lt;code&gt;even&lt;&#x2F;code&gt; tous les pairs, la notation &lt;code&gt;An+B&lt;&#x2F;code&gt; indique les An+B ième éléments où A et B sont des entiers relatifs et n itère les valeurs entières supérieures ou égales à zéro). Remarque : &lt;code&gt;odd&lt;&#x2F;code&gt; est équivalent à &lt;code&gt;2n+1&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:nth-last-child(odd|even|An+B)&lt;&#x2F;code&gt; : élément s&#x27;il est le n-ième enfant dans le DOM en partant de la fin&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:nth-last-of-type(odd|even|An+B)&lt;&#x2F;code&gt; : élément s&#x27;il est le n-ième enfant du type dans le DOM en partant de la fin&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:nth-of-type(odd|even|An+B)&lt;&#x2F;code&gt; : élément s&#x27;il est le n-ième enfant du type dans le DOM&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:only-child&lt;&#x2F;code&gt; : élément s&#x27;il est le seul fils dans le DOM&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:only-of-type&lt;&#x2F;code&gt; : élément s&#x27;il est le seul fils de ce type dans le DOM&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:optional&lt;&#x2F;code&gt; : élément &lt;code&gt;&amp;lt;input&amp;gt;&lt;&#x2F;code&gt;, &lt;code&gt;&amp;lt;select&amp;gt;&lt;&#x2F;code&gt; ou &lt;code&gt;&amp;lt;textarea&amp;gt;&lt;&#x2F;code&gt; qui n&#x27;a pas l&#x27;attribut &lt;code&gt;required&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:out-of-range&lt;&#x2F;code&gt; : élément dont la valeur est en dehors de limites (contraire de &lt;code&gt;:in-range&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:past&lt;&#x2F;code&gt; : contraire de &lt;code&gt;:future&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:paused&lt;&#x2F;code&gt; : élément audio au vidéo en pause&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:picture-in-picture&lt;&#x2F;code&gt; : élément vidéo affiche en picture in picture&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:placeholder-shown&lt;&#x2F;code&gt; : élément &lt;code&gt;&amp;lt;input&amp;gt;&lt;&#x2F;code&gt; ou &lt;code&gt;&amp;lt;textarea&amp;gt;&lt;&#x2F;code&gt; qui affiche actuellement son texte d&#x27;indication&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:playing&lt;&#x2F;code&gt; : élément audio ou vidéo en cours de lecture&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:read-only&lt;&#x2F;code&gt; : élément qui n&#x27;est pas modifiable par l&#x27;utilisateur (généralement sur les &lt;code&gt;&amp;lt;input&amp;gt;&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:read-write&lt;&#x2F;code&gt; : élément qui est modifiable par l&#x27;utilisateur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:required&lt;&#x2F;code&gt; : élément &lt;code&gt;&amp;lt;input&amp;gt;&lt;&#x2F;code&gt;, &lt;code&gt;&amp;lt;select&amp;gt;&lt;&#x2F;code&gt; ou &lt;code&gt;&amp;lt;textarea&amp;gt;&lt;&#x2F;code&gt; qui possède l&#x27;attribut &lt;code&gt;required&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:right&lt;&#x2F;code&gt; : utilisé avec &lt;code&gt;@page&lt;&#x2F;code&gt; pour correspondre aux pages de droite d&#x27;un document&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:root&lt;&#x2F;code&gt; : racine du document (équivalent au sélecteur de type &lt;code&gt;html&lt;&#x2F;code&gt; mais plus spécifique)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:target&lt;&#x2F;code&gt; : élément dont l&#x27;ID correspond au fragment spécifié dans l&#x27;URL (le fragment est la prtie à la fin de l&#x27;URL après le #)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:valid&lt;&#x2F;code&gt; : élément dont la valeur saisie est valide au regard du type spécifié&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:visited&lt;&#x2F;code&gt; : élément de type lien ayant déjà été visité&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;:where(sélecteur CSS)&lt;&#x2F;code&gt; : identique à &lt;code&gt;:is&lt;&#x2F;code&gt; mais moins spécifique&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Les pseudo éléments sont précédés de deux fois deux points et précisent des portions de l&#x27;élément. Ce sont :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;::after&lt;&#x2F;code&gt; : crée un pseudo élément qui sera le dernier fils de l&#x27;élément spécifié (utilisé par exemple pour insérer automatiquement une icone après les liens avec l&#x27;attribut &lt;em&gt;content&lt;&#x2F;em&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::backdrop&lt;&#x2F;code&gt; : représente l&#x27;arrière plan d&#x27;un élément quand il est affiché en mode plein écran (ou avec l&#x27;API &lt;em&gt;dialog&lt;&#x2F;em&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::before&lt;&#x2F;code&gt; : crée un pseudo élément qui sera le premier fils de l&#x27;élément spécifié&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::cue&lt;&#x2F;code&gt; : correspond au texte de sous-titrage d&#x27;un élément vidéo&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::cue-region&lt;&#x2F;code&gt; : correspond à la zone de sous-titrage d&#x27;un élément vidéo&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::file-selector-button&lt;&#x2F;code&gt; : correspond au bouton d&#x27;une balise &lt;code&gt;&amp;lt;input type=&quot;file&quot;&amp;gt;&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::first-letter&lt;&#x2F;code&gt; : correspond à la première lettre de la première ligne d&#x27;un élément de type bloc, uniquement s&#x27;il n&#x27;est pas précédé d&#x27;une autre balise&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::first-line&lt;&#x2F;code&gt; : correspond à la première ligne d&#x27;un élément de type bloc&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::marker&lt;&#x2F;code&gt; : correspond au marqueur d&#x27;une liste (les puces d&#x27;une balise &lt;code&gt;&amp;lt;li&amp;gt;&lt;&#x2F;code&gt; par exemple)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::placeholder&lt;&#x2F;code&gt; : correspond au texte d&#x27;indication d&#x27;une balise &lt;code&gt;&amp;lt;input&amp;gt;&lt;&#x2F;code&gt; ou &lt;code&gt;&amp;lt;textarea&amp;gt;&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;::selection&lt;&#x2F;code&gt; : correspond au texte sélectionné&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;3-4-combinaisons&quot;&gt;3.4 Combinaisons&lt;&#x2F;h2&gt;
&lt;p&gt;Les combinaisons permettent de spécifier plusieurs sélecteurs et d&#x27;indiquer une relation entre eux. Ce sont :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;La descendance (symbolisée par un espace). Elle indique que la règle CSS s&#x27;appliquera à une balise si elle est &lt;em&gt;fille&lt;&#x2F;em&gt; à n&#x27;importe quelle niveau d&#x27;une autre balise. Par exemple &lt;code&gt;body article p&lt;&#x2F;code&gt; s&#x27;appliquera aux balises &lt;code&gt;&amp;lt;p&amp;gt;&lt;&#x2F;code&gt; qui sont filles d&#x27;une balise &lt;code&gt;&amp;lt;article&amp;gt;&lt;&#x2F;code&gt; si celles-ci sont elles-même filles du &lt;code&gt;&amp;lt;body&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;La filiation : (symbolisée par &lt;code&gt;&amp;gt;&lt;&#x2F;code&gt;). Elle indique que le deuxième sélecteur devra être un &lt;em&gt;fils&lt;&#x2F;em&gt; immédiat du premier. Par exemple &lt;code&gt;article &amp;gt; p&lt;&#x2F;code&gt; s&#x27;appliquera aux balises &lt;code&gt;&amp;lt;p&amp;gt;&lt;&#x2F;code&gt; qui sont &lt;em&gt;immédiatement&lt;&#x2F;em&gt; contenues dans une balise &lt;code&gt;&amp;lt;article&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;La fraternité immédiate (symbolisée par &lt;code&gt;+&lt;&#x2F;code&gt;). Elle indique que la règle s&#x27;appliquera à une balise si elle est la &lt;em&gt;soeur&lt;&#x2F;em&gt; immédiate d&#x27;une autre balise. Par exemple &lt;code&gt;h1 + p&lt;&#x2F;code&gt; s&#x27;appliquera à la première balise &lt;code&gt;&amp;lt;p&amp;gt;&lt;&#x2F;code&gt; qui suit immédiatement une balise &lt;code&gt;&amp;lt;h1&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;La fraternité lointaine (symbolisée par &lt;code&gt;~&lt;&#x2F;code&gt;). Elle indique que la règle s&#x27;appliquera à une balise si elle est la &lt;em&gt;soeur&lt;&#x2F;em&gt; d&#x27;une autre balise (même s&#x27;il y a d&#x27;autres balises entre elles). Par exemple &lt;code&gt;h1 ~ p&lt;&#x2F;code&gt; s&#x27;appliquera à toutes les balises &lt;code&gt;&amp;lt;p&amp;gt;&lt;&#x2F;code&gt; qui suivent une balise &lt;code&gt;&amp;lt;h1&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;Plusieurs classes : pour cibler une balise qui porte plusieurs classes, il suffit de chaîner les classes (l&#x27;ordre n&#x27;a pas d&#x27;iportance) dans le sélecteur CSS.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Tous les mixs de sélecteurs et de combinaisons sont possibles.&lt;&#x2F;p&gt;
&lt;h1 id=&quot;4-le-modele-des-boites&quot;&gt;4. Le modèle des boites&lt;&#x2F;h1&gt;
&lt;p&gt;En CSS, tous les éléments sont contenus dans des boites. La façon dont cette boite est mise en page est déterminée par son attribut CSS &lt;code&gt;display&lt;&#x2F;code&gt; (ou par sa valeur par défaut ou l&#x27;héritage).&lt;&#x2F;p&gt;
&lt;p&gt;Il y a deux types de boites : inline et block. Ces deux modèles déterminent comment les boites se comportent dans une mise en page.&lt;&#x2F;p&gt;
&lt;p&gt;Les éléments de type &lt;code&gt;display: block&lt;&#x2F;code&gt; (par exemple les balises &lt;code&gt;&amp;lt;div&amp;gt;&lt;&#x2F;code&gt; ou &lt;code&gt;&amp;lt;h1&amp;gt;&lt;&#x2F;code&gt;) :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;sont représentés sur une nouvelle ligne&lt;&#x2F;li&gt;
&lt;li&gt;respectent les propriétés CSS &lt;code&gt;height&lt;&#x2F;code&gt; et &lt;code&gt;width&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;les propriétés &lt;code&gt;padding&lt;&#x2F;code&gt;, &lt;code&gt;margin&lt;&#x2F;code&gt; et &lt;code&gt;border&lt;&#x2F;code&gt; éloignent les autres éléments de cette boite&lt;&#x2F;li&gt;
&lt;li&gt;la boite va s&#x27;étendre en largeur pour occuper la taille de son parent (sauf si une largeur est spécifiée)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Les éléments de type &lt;code&gt;display: inline&lt;&#x2F;code&gt; (par exemple les balises &lt;code&gt;&amp;lt;span&amp;gt;&lt;&#x2F;code&gt;) :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;sont représentés dans le flux de texte en cours&lt;&#x2F;li&gt;
&lt;li&gt;ne tiennent pas compte des propriétés &lt;code&gt;height&lt;&#x2F;code&gt; et &lt;code&gt;width&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;les propriétés &lt;code&gt;padding&lt;&#x2F;code&gt;, &lt;code&gt;margin&lt;&#x2F;code&gt; et &lt;code&gt;border&lt;&#x2F;code&gt; s&#x27;appliquent en vertical mais n&#x27;éloignent pas les autres éléments de cette boite&lt;&#x2F;li&gt;
&lt;li&gt;les propriétés &lt;code&gt;padding&lt;&#x2F;code&gt;, &lt;code&gt;margin&lt;&#x2F;code&gt; et &lt;code&gt;border&lt;&#x2F;code&gt; s&#x27;appliquent en horizontal et éloignent les autres éléments de cette boite&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Il existe d&#x27;autres valeurs de &lt;code&gt;display&lt;&#x2F;code&gt; : &lt;code&gt;inline-block&lt;&#x2F;code&gt;, &lt;code&gt;flex&lt;&#x2F;code&gt; ou &lt;code&gt;grid&lt;&#x2F;code&gt;. Ils seront détaillés plus loin.&lt;&#x2F;p&gt;
&lt;p&gt;Chaque boite est constituée d&#x27;un certain nombre de parties :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;le contenu : c&#x27;est la partie que affiche les éléments fils de cette balise&lt;&#x2F;li&gt;
&lt;li&gt;la bordure : c&#x27;est le cadre autour du contenu&lt;&#x2F;li&gt;
&lt;li&gt;le padding : c&#x27;est l&#x27;espace entre le contenu et la bordure&lt;&#x2F;li&gt;
&lt;li&gt;la marge : c&#x27;est l&#x27;espace entre la bordure et les éléments adjacents&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Toutes les propriétés de ces éléments peuvent être définis par les propriétés correspondantes :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;border&lt;&#x2F;code&gt; | &lt;code&gt;margin&lt;&#x2F;code&gt; | &lt;code&gt;padding&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;left&lt;&#x2F;code&gt; | &lt;code&gt;top&lt;&#x2F;code&gt; | &lt;code&gt;right&lt;&#x2F;code&gt; | &lt;code&gt;bottom&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;width&lt;&#x2F;code&gt; | &lt;code&gt;style&lt;&#x2F;code&gt; | &lt;code&gt;color&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Un autre modèle de calcul des tailles des boites est applicable en utilisant l&#x27;attribut CSS &lt;code&gt;box-sizing&lt;&#x2F;code&gt; et en fixant sa valeur à &lt;code&gt;boder-box&lt;&#x2F;code&gt;. Dans ce cas, les valeurs de &lt;code&gt;padding&lt;&#x2F;code&gt; et de &lt;code&gt;border&lt;&#x2F;code&gt; sont incluses dans &lt;code&gt;width&lt;&#x2F;code&gt; et &lt;code&gt;height&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h1 id=&quot;5-fonds-et-bordures&quot;&gt;5. Fonds et bordures&lt;&#x2F;h1&gt;
&lt;p&gt;De nombreuses propriétés permettent de configurer les couleurs de fond et les bordures d&#x27;une boite :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;background-color&lt;&#x2F;code&gt; : couleur de fond, y compris la zone de padding de l&#x27;élément&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;background-image&lt;&#x2F;code&gt; : une ou plusieurs images de fond (qui seront superposées, en utilisant leur transparence). Il est également possible de définir un dégradé de couleurs.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;background-repeat&lt;&#x2F;code&gt; : indique si le fond doit être répéré (les valeurs possibles sont &lt;code&gt;no-repeat&lt;&#x2F;code&gt;, &lt;code&gt;repeat-x&lt;&#x2F;code&gt;, &lt;code&gt;repeat-y&lt;&#x2F;code&gt;ou &lt;code&gt;repeat&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;background-size&lt;&#x2F;code&gt; : donne une taille au fond (en largeur, en pourcentage ou avec l&#x27;un des mots clé &lt;code&gt;cover&lt;&#x2F;code&gt; ou &lt;code&gt;contain&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;background-position&lt;&#x2F;code&gt; : place le fond par rapport au conteneur selon l&#x27;axe horizontal et vertical. Les mots-clés spécifiques &lt;code&gt;top&lt;&#x2F;code&gt;, &lt;code&gt;bottom&lt;&#x2F;code&gt;, &lt;code&gt;left&lt;&#x2F;code&gt;, &lt;code&gt;rgiht&lt;&#x2F;code&gt;et &lt;code&gt;center&lt;&#x2F;code&gt; peuvent être employés ainsi que les longueurs ou des pourcentages.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;background-attachment&lt;&#x2F;code&gt; : indique si le fond doit scroller ou non avec son élément. Les valeurs possibles sont : &lt;code&gt;scroll&lt;&#x2F;code&gt;(le fond est attaché à la bordure de l&#x27;élément et scrolle avec celle-ci), &lt;code&gt;fixed&lt;&#x2F;code&gt; (le fond est attaché au viewport et ne scrolle pas) et &lt;code&gt;local&lt;&#x2F;code&gt; (le fond est attaché au contenude l&#x27;élément et scrolle avec celui-ci).&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Il existe aussi de nombreuses propriétés pour parametrer les bordures d&#x27;une boite :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;border-width&lt;&#x2F;code&gt; : l&#x27;épaisseur de la bordure&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;border-style&lt;&#x2F;code&gt; : son style (&lt;code&gt;none&lt;&#x2F;code&gt;, &lt;code&gt;hidden&lt;&#x2F;code&gt;, &lt;code&gt;solid&lt;&#x2F;code&gt;, &lt;code&gt;dashed&lt;&#x2F;code&gt;...)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;border-color&lt;&#x2F;code&gt; : sa couleur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;border-radius&lt;&#x2F;code&gt; : l&#x27;arrondi au coin&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Chacune de ces propriétés peut être spécialisée avec les modificateurs &lt;code&gt;border-top-XX&lt;&#x2F;code&gt;, &lt;code&gt;border-bottom-XX&lt;&#x2F;code&gt;, &lt;code&gt;border-left-XX&lt;&#x2F;code&gt; ou &lt;code&gt;border-right-XX&lt;&#x2F;code&gt; pour n&#x27;affecter qu&#x27;une seule des quatre bordures.&lt;&#x2F;p&gt;
&lt;h1 id=&quot;6-gestion-du-debordement&quot;&gt;6. Gestion du débordement&lt;&#x2F;h1&gt;
&lt;p&gt;Un débordement survient lorsqu&#x27;un contenant n&#x27;est pas assez grand pour contenir tout son contenu (par exemple une balise &lt;code&gt;&amp;lt;div&amp;gt;&lt;&#x2F;code&gt; dont la taille a été fixée et qui contient un texte trop long pour l&#x27;afficher entièrement).&lt;&#x2F;p&gt;
&lt;p&gt;En cas de débordement, on peut utiliser la propriété &lt;code&gt;overflow&lt;&#x2F;code&gt; (et ses spécialisations &lt;code&gt;-x&lt;&#x2F;code&gt;et &lt;code&gt;-y&lt;&#x2F;code&gt;) pour indiquer ce qu&#x27;il faut faire du contenu excedentaire.&lt;&#x2F;p&gt;
&lt;p&gt;Les valeurs possibles sont :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;visible&lt;&#x2F;code&gt; : le contenu excedentaire est visible et déborde de la boite&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;hidden&lt;&#x2F;code&gt; &#x2F; &lt;code&gt;clip&lt;&#x2F;code&gt; : le contenu excedentaire est masqué&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;scroll&lt;&#x2F;code&gt; : le contenu excedentaire est coupé et un ascenseur permet de se déplacer pour le voir&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;auto&lt;&#x2F;code&gt; : comportement décidé par le navigateur&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h1 id=&quot;7-les-unites-css&quot;&gt;7. Les unités CSS&lt;&#x2F;h1&gt;
&lt;p&gt;Le CSS utilise un grand nombre d&#x27;unités différentes pour indiquer les valeurs des propriétés.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;7-1-nombres-longueurs-et-pourcentages&quot;&gt;7.1 Nombres, longueurs et pourcentages&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;Les &lt;strong&gt;nombres entiers&lt;&#x2F;strong&gt; : ils n&#x27;ont pas d&#x27;unité associés. Ils sont utilisés par exemple pour indiquer le nombre de colonnes d&#x27;un élément grille (&lt;code&gt;grid-column&lt;&#x2F;code&gt;).&lt;&#x2F;li&gt;
&lt;li&gt;Les &lt;strong&gt;nombres&lt;&#x2F;strong&gt; (décimaux) : ils n&#x27;ont pas d&#x27;unté associés.Ils sont utilisés pour indiquer un facteur d&#x27;opacité par exemple.&lt;&#x2F;li&gt;
&lt;li&gt;Les &lt;strong&gt;longueurs&lt;&#x2F;strong&gt; : ils sont utilisés dans un très grand nombre d&#x27;attributs et peuvent être exprimés avec une grande variété d&#x27;unités.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Les &lt;strong&gt;unités absolues&lt;&#x2F;strong&gt; (à l&#x27;exception du pixel, la plupart ne sont utilisés que pour les rendus imprimables) :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cm&lt;&#x2F;code&gt; : centimètres&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;mm&lt;&#x2F;code&gt; : millimètres&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Q&lt;&#x2F;code&gt; : quart de millimètres&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;in&lt;&#x2F;code&gt; : pouces (2.54cm)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;pc&lt;&#x2F;code&gt; : picas (1&#x2F;6 de pouce)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;pt&lt;&#x2F;code&gt; : points (1&#x2F;72 de pouce)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;px&lt;&#x2F;code&gt; : pixel (1&#x2F;96 de pouce)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Les &lt;strong&gt;unités relatives&lt;&#x2F;strong&gt; (plus couramment utilisées pour les rendus écran car elle s&#x27;adaptent à la taille de l&#x27;affichage et au facteur de zoom de l&#x27;utilisateur) :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;em&lt;&#x2F;code&gt; : taille de la police du parent quand elle est utilisée pour donner la valeur d&#x27;une taille de police et taille de la police de l&#x27;élément lui-même dans les autres cas&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;ex&lt;&#x2F;code&gt; : hauteur du glyphe &quot;x&quot; dans la police en cours&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;ch&lt;&#x2F;code&gt; : largeur du glyph &quot;0&quot; dans la police en cours&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;rem&lt;&#x2F;code&gt; : taille de la police de l&#x27;élément racine&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;lh&lt;&#x2F;code&gt; : hauteur de ligne de l&#x27;élément&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;rlh&lt;&#x2F;code&gt; : hauteur de ligne de l&#x27;élément racine&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;vw&lt;&#x2F;code&gt; : 1% de la largeur du viewport&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;vh&lt;&#x2F;code&gt; : 1% de la hauteur du viewport&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;vmin&lt;&#x2F;code&gt; : 1% de la plus petite dimension du viewport&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;vmax&lt;&#x2F;code&gt; : 1% de la plus grande dimension du viewport&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Les &lt;strong&gt;angles&lt;&#x2F;strong&gt; : peuvent être exprimés en degrés (&lt;code&gt;deg&lt;&#x2F;code&gt;), radians (&lt;code&gt;rad&lt;&#x2F;code&gt;), grades (&lt;code&gt;grad&lt;&#x2F;code&gt;) ou nombre de tours (&lt;code&gt;turn&lt;&#x2F;code&gt;). Les angles positifs sont dans le sens horaire.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Les &lt;strong&gt;durées&lt;&#x2F;strong&gt; : exprimés en secondes (&lt;code&gt;s&lt;&#x2F;code&gt;) ou millisecondes (&lt;code&gt;ms&lt;&#x2F;code&gt;) et utilisées dans les animations et les transisitions&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Les &lt;strong&gt;résolutions&lt;&#x2F;strong&gt; : utilisées dans les media-query. Elles sont exprimées en points par pouce (&lt;code&gt;dpi&lt;&#x2F;code&gt;), point par centimètre (&lt;code&gt;dpcm&lt;&#x2F;code&gt;), point par pixel (&lt;code&gt;dppx&lt;&#x2F;code&gt; ou &lt;code&gt;x&lt;&#x2F;code&gt;). NOte : les pixels CSS ont une taille fixe de 1&#x2F;96 de pouce.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Les &lt;strong&gt;pourcentages&lt;&#x2F;strong&gt; : permettent d&#x27;indiquer une valeur relative à une autre. Ils sont exprimés avec des nombres décimaux.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;7-2-couleurs&quot;&gt;7.2 Couleurs&lt;&#x2F;h2&gt;
&lt;p&gt;Les couleurs peuvent être décrites d&#x27;un grand nombre de façons :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;en utilisant un nom de couleur (comme &lt;code&gt;blue&lt;&#x2F;code&gt;, &lt;code&gt;yellow&lt;&#x2F;code&gt; ou &lt;code&gt;transparent&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;avec les composantes RGB (en utilisant la fonction &lt;code&gt;rgb()&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;avec les composantes HSL (en utilisant la fonction &lt;code&gt;hsl()&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Note : &lt;code&gt;rgb()&lt;&#x2F;code&gt; et &lt;code&gt;rgba()&lt;&#x2F;code&gt; sont synonymes et acceptent toutes les deux un quatrième paramètre d&#x27;opacité. Il en est de même pour &lt;code&gt;hsl()&lt;&#x2F;code&gt; et &lt;code&gt;hsla()&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Et de façon moins fréquente :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;avec les composantes HWB (en utilisant la fonction &lt;code&gt;hwb()&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;avec les composantes LCH (en utilisant la fonction &lt;code&gt;lch()&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;avec les composantes du système CIELAB (en utilisant la fonction &lt;code&gt;lab()&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;7-3-images&quot;&gt;7.3 Images&lt;&#x2F;h2&gt;
&lt;p&gt;La valeur d&#x27;une image peut être spécifiées :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;par une URL en utilisant la fonction &lt;code&gt;url()&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;à l&#x27;aide du type de donnée &lt;strong&gt;dégradé&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;7-4-positions&quot;&gt;7.4 Positions&lt;&#x2F;h2&gt;
&lt;p&gt;Les positions (utilisées par exemple dans la propriété &lt;code&gt;background-position&lt;&#x2F;code&gt;) permettent d&#x27;indiquer un emplacement relativement à la boite de l&#x27;élément en cours.&lt;&#x2F;p&gt;
&lt;p&gt;On utilise pour cela un ou deux mot-clé parmi : &lt;code&gt;center&lt;&#x2F;code&gt;, &lt;code&gt;top&lt;&#x2F;code&gt;, &lt;code&gt;bottom&lt;&#x2F;code&gt;, &lt;code&gt;left&lt;&#x2F;code&gt; et &lt;code&gt;right&lt;&#x2F;code&gt; complété d&#x27;un offset optionnel indiquant le pourcentage (ou la distance) dans les dimensions horitonzales et verticales respectivement..&lt;&#x2F;p&gt;
&lt;h2 id=&quot;7-5-chaines-et-identificateurs&quot;&gt;7.5 Chaînes et identificateurs&lt;&#x2F;h2&gt;
&lt;p&gt;Certaines valeurs (&lt;code&gt;content&lt;&#x2F;code&gt; par exemple) peuvent contenir des chaînes. Elles sont simplement placées entre guillemets.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;7-6-fonctions&quot;&gt;7.6 Fonctions&lt;&#x2F;h2&gt;
&lt;p&gt;Enfin, certaines valeurs peuvent être exprimées à l&#x27;aide de fonctions CSS (comme &lt;code&gt;rgb()&lt;&#x2F;code&gt;ou la fonction &lt;code&gt;calc()&lt;&#x2F;code&gt; qui permet de réaliser des opérations arithmétiques simples).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;7-7-tailles&quot;&gt;7.7 Tailles&lt;&#x2F;h2&gt;
&lt;p&gt;Certains éléments HTML ont une tailles propres (les images par exemple), d&#x27;autres non (les &lt;code&gt;div&lt;&#x2F;code&gt; ou les &lt;code&gt;span&lt;&#x2F;code&gt;). On peut utiliser les unités CSS décrites en 7.1 pour donner une taille à un élément avec les attributs HTML &lt;code&gt;width&lt;&#x2F;code&gt; et &lt;code&gt;height&lt;&#x2F;code&gt; .&lt;&#x2F;p&gt;
&lt;p&gt;Cette taille peut être fixe mais il faut prendre garde aux problème de débordement.&lt;&#x2F;p&gt;
&lt;p&gt;Cette taille peut également être un pourcentage en restant attentif à quel élément le pourcentage se rapporte. Ne pas oublier que le pourcentage est défini par rapport à la taille qu&#x27;aurait l&#x27;élément sans indication de taille. Le pourcentage n&#x27;a de sens que pour les balises qui s&#x27;étendent (comme les &lt;code&gt;div&lt;&#x2F;code&gt;). &lt;strong&gt;ATTENTION&lt;&#x2F;strong&gt; : dans le cas de l&#x27;utilisation d&#x27;un pourcentage pour spécifier une taille de marge ou de padding, le pourcentage est relatif à la taille &lt;em&gt;inline&lt;&#x2F;em&gt; de l&#x27;élément parent, c&#x27;est à dire sans ternir compte de ses propres marges ou padding.&lt;&#x2F;p&gt;
&lt;p&gt;On peut définir des tailles mini et maxi avec les attributs &lt;code&gt;min-height&lt;&#x2F;code&gt;, &lt;code&gt;max-height&lt;&#x2F;code&gt;, &lt;code&gt;min-width&lt;&#x2F;code&gt;et &lt;code&gt;max-width&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Pour les images (et certaines autres balises : video...), on peut utiliser la propriété &lt;code&gt;object-fit&lt;&#x2F;code&gt; pour indiquer le mode de mise à l&#x27;échelle : &lt;code&gt;fill&lt;&#x2F;code&gt;, &lt;code&gt;cover&lt;&#x2F;code&gt;, &lt;code&gt;contain&lt;&#x2F;code&gt;...&lt;&#x2F;p&gt;
&lt;h1 id=&quot;8-css-pour-les-textes&quot;&gt;8. CSS pour les textes&lt;&#x2F;h1&gt;
&lt;h2 id=&quot;8-1-textes&quot;&gt;8.1 Textes&lt;&#x2F;h2&gt;
&lt;p&gt;La forme du texte peut être affecté par de nombreuses propriétés CSS.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;color&lt;&#x2F;code&gt; : une couleur HTML (voir ci-dessus).&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;font-family&lt;&#x2F;code&gt; : un certain nombre de famille de polices de caractères sont considérées comme &lt;em&gt;sûres&lt;&#x2F;em&gt; à utilisée (c&#x27;est à dire pratiquement toujours disponibles sur la majorité des appareil). Il y a les polices &lt;em&gt;ultra génériques&lt;&#x2F;em&gt; : &lt;code&gt;sans-serif&lt;&#x2F;code&gt;, &lt;code&gt;serif&lt;&#x2F;code&gt;et &lt;code&gt;monospace&lt;&#x2F;code&gt; et les familles &lt;code&gt;Arial&lt;&#x2F;code&gt;, &lt;code&gt;Courier New&lt;&#x2F;code&gt;, &lt;code&gt;Georgia&lt;&#x2F;code&gt;, &lt;code&gt;Times New Roman&lt;&#x2F;code&gt;, &lt;code&gt;Trebuchet MS&lt;&#x2F;code&gt; et &lt;code&gt;Verdana&lt;&#x2F;code&gt;. Plutôt que de spécifier une police précise, il est possible d&#x27;indiquer une liste. Le navigateur prendra la première police effectivement disponible, dans l&#x27;ordre de la liste.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;font-size&lt;&#x2F;code&gt; : c&#x27;est avec cette propriété que l&#x27;unité de mesure &lt;code&gt;em&lt;&#x2F;code&gt;devient utile. &lt;code&gt;1 em&lt;&#x2F;code&gt; représente la taille de la police de l&#x27;élément conteneur. On peut donc facilement faire des contenus dont la taille est proportionnelle aux parents. De la même façon, le &lt;code&gt;rem&lt;&#x2F;code&gt;est relatif à la taille de la police de l&#x27;élément racine de la page.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;font-style&lt;&#x2F;code&gt; : &lt;code&gt;normal&lt;&#x2F;code&gt;, &lt;code&gt;italic&lt;&#x2F;code&gt;, &lt;code&gt;oblique&lt;&#x2F;code&gt; ou &lt;code&gt;oblique &amp;lt;angle&amp;gt;&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;font-weight&lt;&#x2F;code&gt; : fixe la graisse de la police (&lt;code&gt;normal&lt;&#x2F;code&gt;, &lt;code&gt;bold&lt;&#x2F;code&gt;... ou une valeur entre 100 et 900).&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;text-transform&lt;&#x2F;code&gt;: &lt;code&gt;none&lt;&#x2F;code&gt;, &lt;code&gt;uppercase&lt;&#x2F;code&gt;, &lt;code&gt;lowercase&lt;&#x2F;code&gt;, &lt;code&gt;capitalize&lt;&#x2F;code&gt; (chaque première lettre en majuscule) ou &lt;code&gt;fixed-width&lt;&#x2F;code&gt; (tous les caractères ont la même largeur).&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;text-decoration&lt;&#x2F;code&gt; (contraction de &lt;code&gt;text-decoration-line&lt;&#x2F;code&gt; et &lt;code&gt;text-decoration-style&lt;&#x2F;code&gt;) pour les souligné ou les barrés.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;text-shadow&lt;&#x2F;code&gt; : fixe les ombres de texte.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;La mise en page possède également ses propriétés :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;text-align&lt;&#x2F;code&gt; : &lt;code&gt;left&lt;&#x2F;code&gt;, &lt;code&gt;right&lt;&#x2F;code&gt;, &lt;code&gt;center&lt;&#x2F;code&gt; ou &lt;code&gt;justify&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;line-height&lt;&#x2F;code&gt; : soit une unité de taille CSS, soit aucune unité. Dans ce dernier cas, la valeur indiquée est un multiplicateur de la taille de la police.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;letter-spacing&lt;&#x2F;code&gt; et &lt;code&gt;word-spacing&lt;&#x2F;code&gt; : fixent l&#x27;espacement entre les mots et entre les lettres dans un mot.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Et il existe de nombreuses autres propriétés de texte.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;8-2-listes&quot;&gt;8.2 Listes&lt;&#x2F;h2&gt;
&lt;p&gt;Les listes ont quelques propriétés spécifiques :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;list-style-type&lt;&#x2F;code&gt; : détermine le type de puces ou de nombres.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;list-style-position&lt;&#x2F;code&gt; : détermine la position des puces&#x2F;nombres, dans la liste ou en retrait.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;list-style-image&lt;&#x2F;code&gt; : permet d&#x27;utiliser une image de puce personnalisée.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;8-3-liens&quot;&gt;8.3 Liens&lt;&#x2F;h2&gt;
&lt;p&gt;Les liens reçoivent souvent des modifications de style en utilisant les pseudo-classes &lt;code&gt;hover&lt;&#x2F;code&gt;, &lt;code&gt;visited&lt;&#x2F;code&gt; ou &lt;code&gt;active&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;8-4-webfonts&quot;&gt;8.4 Webfonts&lt;&#x2F;h2&gt;
&lt;p&gt;En plus des polices &lt;em&gt;classiques&lt;&#x2F;em&gt;, il est possible d&#x27;inclure dans une feuille CSS des directives pour télécharger à la volée un fichier de polices de caractères. La syntaxe est la suivante :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;css&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;@&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FB4934;&quot;&gt;font-face&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FE8019;&quot;&gt;  font-family&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;nomDeFamille&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FE8019;&quot;&gt;  src&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;fichier.woff2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Le nom spécifié peut ensuite êtrre utilisé dans la propriété &lt;code&gt;font-family&lt;&#x2F;code&gt;.
La plupart des navigateurs acceptent les polices au format WOFF ou WOFF2 (Web Open Font Format).
Pour trouver des polices :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;www.fontsquirrel.com&#x2F;&quot;&gt;Font Squirrel&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;www.dafont.com&#x2F;&quot;&gt;daFont&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;fonts.google.com&#x2F;&quot;&gt;Google Fonts&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h1 id=&quot;9-mise-en-page-en-css&quot;&gt;9. Mise en page en CSS&lt;&#x2F;h1&gt;
&lt;p&gt;Au delà de la mise en forme, le CSS est également utilisé pour la mise en page des documents. Il propose pour cela plusieurs approches.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;9-1-mise-en-page-en-flux&quot;&gt;9.1 Mise en page en flux&lt;&#x2F;h2&gt;
&lt;p&gt;C&#x27;est le mode de mise en page par défaut si aucune autre instruction n&#x27;est donnée. Les éléments sont placés les uns après les autres. Les éléments de type &lt;em&gt;blocs&lt;&#x2F;em&gt; occupent toutes la largeur de l&#x27;affichage, ils se retrouvent donc les uns au dessous des autres et les éléments de type &lt;em&gt;inline&lt;&#x2F;em&gt; se placent les uns à droite des autres selon leur taille et l&#x27;espace disponible.
Remarque : il n&#x27;est pas possible de changer la taille des éléments &lt;em&gt;inline&lt;&#x2F;em&gt; (sauf les images).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;9-2-flexbox&quot;&gt;9.2 Flexbox&lt;&#x2F;h2&gt;
&lt;p&gt;Flexbox est un mécanisme de mise en page par lequel un élément conteur va positionner les éléments qu&#x27;il contient.&lt;&#x2F;p&gt;
&lt;p&gt;Pour sélectionner le conteneur chargé de la mise en page, on lui assigne l&#x27;attribut &lt;code&gt;display: flex&lt;&#x2F;code&gt;. Bien sûr des sous éléments peuvent également être des conteneur et eux-mêmes mettre en page leur propre contenu.&lt;&#x2F;p&gt;
&lt;p&gt;Le modèle de flexbox est conçu pour organiser la mise en page selon &lt;strong&gt;un&lt;&#x2F;strong&gt; axe (ligne ou colonne) et &lt;strong&gt;une&lt;&#x2F;strong&gt; direction principale (gauche à droite, droite à gauche, haut en bas ou bas en haut). Le mode de fonctionnement est choisi par l&#x27;attribut &lt;code&gt;flex-direction&lt;&#x2F;code&gt;qui peut prendre les valeurs &lt;code&gt;column&lt;&#x2F;code&gt;, &lt;code&gt;row&lt;&#x2F;code&gt;, &lt;code&gt;column-reverse&lt;&#x2F;code&gt; ou &lt;code&gt;row-reverse&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Dans le conteneur flexbox, les éléments sont mis en forme en flux, les uns après les autres. Si leur taille totale est supérieure à celle du conteneur, c&#x27;est l&#x27;attribut &lt;code&gt;flex-wrap&lt;&#x2F;code&gt; qui détermine le comportement :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;nowarp&lt;&#x2F;code&gt; : les éléments débordent du conteneur&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;wrap&lt;&#x2F;code&gt; : les éléments sont automatiquement mis à la ligne&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;wrap-reverse&lt;&#x2F;code&gt; : comme &lt;code&gt;wrap&lt;&#x2F;code&gt;mais l&#x27;ordre des lignes est inversé&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;La taille relative des éléments contenus dans le flexbox est déterminé par leurs attributs &lt;code&gt;flex-basis&lt;&#x2F;code&gt;, &lt;code&gt;flex-grow&lt;&#x2F;code&gt; et &lt;code&gt;flex-shrink&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;flex-basis&lt;&#x2F;code&gt; : détermine la taille initiale de l&#x27;élément, c&#x27;est soit une mesure dans une unité CSS valide, soit un nombre. Dans ce dernier cas, le nombre ramené proportionnellement à la taille totale des éléments à placer.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;flex-grow&lt;&#x2F;code&gt; : indique le facteur d&#x27;agrandissement de l&#x27;élément&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;flex-shrink&lt;&#x2F;code&gt; : indique le facteur de réduction de l&#x27;élément&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Généralement, on utilise l&#x27;attribut &lt;code&gt;flex&lt;&#x2F;code&gt;qui peut combiner les trois de la façon suivante :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;une valeur sans unité : &lt;code&gt;flex-grow&lt;&#x2F;code&gt; (ex : &lt;code&gt;flex: 2&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;une valeur avec unité &lt;code&gt;flex-basis&lt;&#x2F;code&gt; (ex : &lt;code&gt;flex: 50px&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;deux valeurs : &lt;code&gt;flex-grow flex-basis&lt;&#x2F;code&gt; ou &lt;code&gt;flex-grow flex-shrink&lt;&#x2F;code&gt; selon que la seconde valeur a une unité ou pas&lt;&#x2F;li&gt;
&lt;li&gt;trois valeurs : &lt;code&gt;flex-grow flex-shrink flex-basis&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Les éléments mis en page par un conteneur flexbox peuvent également être aligné. Ça se fait avec les attributs &lt;code&gt;align-items&lt;&#x2F;code&gt; (global), &lt;code&gt;align-self&lt;&#x2F;code&gt; (pour un élément précis), et &lt;code&gt;justify-content&lt;&#x2F;code&gt; pour déterminer la position de l&#x27;ensemble des éléments dans le conteneur.&lt;&#x2F;p&gt;
&lt;p&gt;Enfin, l&#x27;ordre des éléments dans le conteneur flexbox n&#x27;est par nécessairement l&#x27;ordre du flux. Il peut être altéré en utilisant l&#x27;attribut &lt;code&gt;order&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;9-3-grilles&quot;&gt;9.3 Grilles&lt;&#x2F;h2&gt;
&lt;p&gt;Le système de grille CSS est un mécanisme de mise en page sur deux dimensions. Il organise le contenu selon des lignes et des colonnes separées par des espaces généralement appelés &quot;gouttières&quot;.&lt;&#x2F;p&gt;
&lt;p&gt;De la même façon que le flexbox, le système de mise en page des grilles s&#x27;active sur le conteneur des éléments à mettre en page. Il suffit d&#x27;ajouter l&#x27;attribut &lt;code&gt;display: grid;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Pour définir les largeurs des colonnes d&#x27;une grille, on utilise l&#x27;attribut &lt;code&gt;grid-template-columns&lt;&#x2F;code&gt; suivi d&#x27;autant de valeurs qu&#x27;on veut de colonnes. Chaque valeur peut être exprimée avec une unité CSS, la valeur &lt;code&gt;auto&lt;&#x2F;code&gt; (pour indiquer que la taille sera calculée automatiquement par le navigateur) ou avec l&#x27;unité spéciale &lt;code&gt;fr&lt;&#x2F;code&gt;. Les &lt;code&gt;fr&lt;&#x2F;code&gt;représente une fraction de l&#x27;espace restant quand les autres tailles ont été allouées. &lt;em&gt;Remarque : on peut utiliser la fonction CSS &lt;code&gt;repeat&lt;&#x2F;code&gt; pour répéter une définition de colonne comme dans &lt;code&gt;grid-template-columns: repeat(3, 1fr);&lt;&#x2F;code&gt;.&lt;&#x2F;em&gt;. On peut également répéter des colonnes de largeur &lt;code&gt;auto-fill&lt;&#x2F;code&gt; pour indiquer à CSS d&#x27;en mettre autant que possible sur une ligne.&lt;&#x2F;p&gt;
&lt;p&gt;De la même façon, on peut définir les lignes avec l&#x27;attribut &lt;code&gt;grid-template-rows&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Si les colonnes ou les lignes ne sont pas définis explicitement, CSS utilise une grille de une colonne et d&#x27;autant de lignes que nécessaire pour placer tous les éléments. On peut également défiir les tailles des colonnes et des lignes construites automatiquement avec les attributs &lt;code&gt;grid-auto-columns&lt;&#x2F;code&gt; et &lt;code&gt;grid-auto-rows&lt;&#x2F;code&gt;. Une fonction CSS utilie pour définir ces tailles est &lt;code&gt;minmax&lt;&#x2F;code&gt; qui permet d&#x27;indiquer une taille minimale et une taille maximale (comme dans : &lt;code&gt;grid-auto-rows: minmax(100px, auto);&lt;&#x2F;code&gt; qui fixe la hauteur minimale des lignes à 100 pixels mais évite les débordement en laissant en automatique la hauteur maximale).&lt;&#x2F;p&gt;
&lt;p&gt;La largeur des gouttières se fixe avec les attributs &lt;code&gt;column-gap&lt;&#x2F;code&gt;, &lt;code&gt;row-gap&lt;&#x2F;code&gt; ou &lt;code&gt;gap&lt;&#x2F;code&gt;pour définir les deux à la même valeur.&lt;&#x2F;p&gt;
&lt;p&gt;Pour positionner un élément dans la grille, on dispose des attributs &lt;code&gt;grid-column-start&lt;&#x2F;code&gt; et &lt;code&gt;grid-column-end&lt;&#x2F;code&gt; (abrégés en &lt;code&gt;grid-column&lt;&#x2F;code&gt; avec les deux valeurs spéarées par un &lt;code&gt;&#x2F;&lt;&#x2F;code&gt;) et &lt;code&gt;grid-row-start&lt;&#x2F;code&gt;, &lt;code&gt;grid-row-end&lt;&#x2F;code&gt; (abrégés en &lt;code&gt;grid-row&lt;&#x2F;code&gt;). Les rangs des lignes et colonnes commencent à 1. Un nombre négatif indique un comptage à partir du dernier.&lt;&#x2F;p&gt;
&lt;p&gt;On peut aussi définir une grille avec l&#x27;attribut &lt;code&gt;grid-template-areas&lt;&#x2F;code&gt;. Cet attribut contient une chaîne par ligne. Dans ces chaînes, chaque &lt;em&gt;mot&lt;&#x2F;em&gt; représente une case. Les règles de définition sont les suivantes :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;chaque cellule de la grille doit être définie&lt;&#x2F;li&gt;
&lt;li&gt;pour étendre une case sur plusieurs lignes&#x2F;colonnes, il faut répéter son nom&lt;&#x2F;li&gt;
&lt;li&gt;pour sauter une cellule, on utilise un point&lt;&#x2F;li&gt;
&lt;li&gt;les zones doivent être rectangulaires&lt;&#x2F;li&gt;
&lt;li&gt;les noms des zones ne doivent pas être répétés à plusieurs endroits&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Un exemple :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;css&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;container&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FE8019;&quot;&gt;  display&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D3869B;&quot;&gt; grid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FE8019;&quot;&gt;  grid-template-areas&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;enteteCSS enteteCSS&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;sidebar content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;footer footer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;&amp;quot;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FE8019;&quot;&gt;  grid-template-columns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D3869B;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;fr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D3869B;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;fr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FE8019;&quot;&gt;  gap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D3869B;&quot;&gt; 20&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B8BB26;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;#&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FABD2F;&quot;&gt;entete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FE8019;&quot;&gt;  grid-area&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; enteteCSS&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Combinés avec les media queries, le système de grille permet de faire des mises en pages qui s&#x27;adaptent toatlement en fonction de la taille de l&#x27;affichage.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;9-4-les-elements-flottants&quot;&gt;9.4 Les éléments flottants&lt;&#x2F;h2&gt;
&lt;p&gt;Un élément flottant est sorti du flux de mise en page et placé à côté. Le contenu des éléments suivants est décalé pour entourer l&#x27;élément flottant. Ce comportement est contrôlé par l&#x27;attribut &lt;code&gt;float&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Pour empêcher que le contenu encadre l&#x27;élément flottant, on peut ajouter l&#x27;attribut &lt;code&gt;clear&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;9-5-les-methodes-de-positionnement&quot;&gt;9.5 Les méthodes de positionnement&lt;&#x2F;h2&gt;
&lt;p&gt;Le CSS définit différentes méthodes de positionnement. On choisit la méthode utilisée pour un élément avec l&#x27;attribut CSS &lt;code&gt;position&lt;&#x2F;code&gt; dont les valeurs sont les suivantes :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;static&lt;&#x2F;code&gt; : c&#x27;est la valeur par défaut, l&#x27;élément est positionné &lt;em&gt;&quot;normalement&quot;&lt;&#x2F;em&gt; dans le flux du document,&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;relative&lt;&#x2F;code&gt; : permet de décaler l&#x27;élément par rapport à la position &lt;em&gt;qu&#x27;il aurait eu&lt;&#x2F;em&gt; en positionnement &lt;code&gt;static&lt;&#x2F;code&gt;. Les attributs pour le décalage sont &lt;code&gt;top&lt;&#x2F;code&gt;, &lt;code&gt;bottom&lt;&#x2F;code&gt;, &lt;code&gt;left&lt;&#x2F;code&gt; et &lt;code&gt;right&lt;&#x2F;code&gt;. Par exemple &lt;code&gt;top: 30px;&lt;&#x2F;code&gt; va placer l&#x27;élément 30 pixels &lt;strong&gt;plus bas&lt;&#x2F;strong&gt; que le positionnement &lt;code&gt;static&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;absolute&lt;&#x2F;code&gt; : l&#x27;élément est sorti du flux de mise en page et positionné à des coordonnées absolue (indiquées par &lt;code&gt;top&lt;&#x2F;code&gt;, &lt;code&gt;bottom&lt;&#x2F;code&gt;, &lt;code&gt;left&lt;&#x2F;code&gt; et &lt;code&gt;right&lt;&#x2F;code&gt;) par rapport à la &lt;em&gt;boite&lt;&#x2F;em&gt; de son élément parent.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;sticky&lt;&#x2F;code&gt; : l&#x27;élément est positionné dans le flux tant que sa position effective est supérieure à la position définie. Ensuite, il devient fixe. Par exemple un élément &lt;code&gt;position: sticky; top: 30px;&lt;&#x2F;code&gt; va se placer dans le flux mais ne scrollera pas au dessus de 30 pixels (il restera visuellement en haut de page quand on scrolle vers le bas).&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Remarque : quand deux éléments se chevauchent, ils s&#x27;affichent dans l&#x27;ordre dans lequel il sont défini dans le HTML (le dernier devant). Il est possible de surcharger cet ordre avec l&#x27;attribut &lt;code&gt;z-index&lt;&#x2F;code&gt; (qui vaut 0 par défaut) en lui donnant une valeur positive pour placer un élémernt plus &lt;em&gt;haut&lt;&#x2F;em&gt; que les autres.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;9-6-mise-en-forme-multi-colonnes&quot;&gt;9.6 Mise en forme multi-colonnes&lt;&#x2F;h2&gt;
&lt;p&gt;Dans un conteneur donné, il est facile de mettre en forme le texte sur plusieurs colonnes avec l&#x27;attribut &lt;code&gt;column-count&lt;&#x2F;code&gt; ou avec &lt;code&gt;column-width&lt;&#x2F;code&gt;. Le premier fixe le nombre de colonnes (leur taille est calculée automatiquement), le second fixe la largeur des colonnes (leur nombre est calculé automatiquement).
L&#x27;espacement entre les colonnes est définni par l&#x27;attribut &lt;code&gt;column-gap&lt;&#x2F;code&gt;.
On peut également défini une ligne de séparation entre les les colonnes avec &lt;code&gt;column-rule&lt;&#x2F;code&gt;.
Un élément peut être placé, dans le flux, mais sur l&#x27;ensemble des colonnes avec l&#x27;attribut &lt;code&gt;column-span: all;&lt;&#x2F;code&gt;.
Pour indiquer qu&#x27;un élément ne doit pas être positionné à cheval entre deux colonnes, on peut utiliser l&#x27;attribut &lt;code&gt;break-inside: avoid;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;9-7-responsive-web-design&quot;&gt;9.7 Responsive Web Design&lt;&#x2F;h2&gt;
&lt;p&gt;Le responsive web design n&#x27;est pas une technologie en soit mais un ensemble de façon d&#x27;aborder la mise en page des documents pour proposer une lecture agréable quelle que soit la taille et la resolution d&#x27;affichage du navigateur. Elle repose en grande partie sur l&#x27;utilisation de &lt;em&gt;media queries&lt;&#x2F;em&gt; pour adapter le CSS au périphérique ainsi que sur diverses méthodes (images responsives à définitions multiples, utilisation de flexbox et&#x2F;ou grid, choix de taille de polices relatives à la taille de l&#x27;affichage).&lt;&#x2F;p&gt;
&lt;p&gt;Une media query est une condition évaluée par le navigateur qui va permettre d&#x27;appliquer ou non certaines règles CSS.&lt;&#x2F;p&gt;
&lt;p&gt;Une media query a la forme suivante :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;css&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;@&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FB4934;&quot;&gt;media&lt;&#x2F;span&gt;&lt;span&gt; type &lt;&#x2F;span&gt;&lt;span style=&quot;color: #FB4934;&quot;&gt;and&lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt; règles &lt;&#x2F;span&gt;&lt;span style=&quot;color: #A89984;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;	règles CSS à appliquer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;type&lt;&#x2F;code&gt; peut être &lt;code&gt;all&lt;&#x2F;code&gt; (par défaut), &lt;code&gt;print&lt;&#x2F;code&gt; ou &lt;code&gt;screen&lt;&#x2F;code&gt; selon que l&#x27;on vise les écrans, l&#x27;impression ou les deux.&lt;&#x2F;p&gt;
&lt;p&gt;Les autres règles permettent de cibler des largeurs ou hauteur d&#x27;affichage :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;width&lt;&#x2F;code&gt; : valide quand la largeur est égale au paramètre&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;min-width&lt;&#x2F;code&gt; : valide quand la largeur est supérieure au paramètre&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;maw-width&lt;&#x2F;code&gt; : valide quand la largeur est inférieure au paramètre&lt;&#x2F;li&gt;
&lt;li&gt;de même &lt;code&gt;height&lt;&#x2F;code&gt;, &lt;code&gt;min-height&lt;&#x2F;code&gt; et &lt;code&gt;max-height&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;orientation&lt;&#x2F;code&gt; : vise &lt;code&gt;landscape&lt;&#x2F;code&gt; ou &lt;code&gt;portrait&lt;&#x2F;code&gt; (il s&#x27;agit de l&#x27;orientation de la vue du navigateur, pas de l&#x27;écran physique)&lt;&#x2F;li&gt;
&lt;li&gt;et &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;@media&quot;&gt;beaucoup d&#x27;autres&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;On peut combiner les règles avec des opérations logiques :&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;et logique&lt;&#x2F;em&gt; : &lt;code&gt;@media screen and (min-width: 600px) and (orientation: landscape)&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;em&gt;ou logique&lt;&#x2F;em&gt; avec une virgule : &lt;code&gt;@media (min-width: 600px), (orientation: landscape)&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;em&gt;non logique&lt;&#x2F;em&gt; qui s&#x27;applique à l&#x27;ensemble de la media query: &lt;code&gt;@media not all and (min-width: 600px)&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</description>
      </item>
      <item>
          <title>Utiliser opensmtpd comme serveur sortant avec un relai</title>
          <pubDate>Mon, 16 Oct 2023 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://bernat.me/memos/memo-opensmtpd-relai/</link>
          <guid>https://bernat.me/memos/memo-opensmtpd-relai/</guid>
          <description xml:base="https://bernat.me/memos/memo-opensmtpd-relai/">&lt;h1 id=&quot;1-relai-avec-authentification&quot;&gt;1. Relai avec authentification&lt;&#x2F;h1&gt;
&lt;p&gt;J&#x27;utilise cette configuration quand j&#x27;ai un groupe de serveurs, notamment pour l&#x27;envoi des mails destinés à &lt;code&gt;root&lt;&#x2F;code&gt; vers une adresse d&#x27;administration.&lt;&#x2F;p&gt;
&lt;p&gt;Le serveur qui réalise l&#x27;envoi effectif est configuré pour signer les mails (DKIM) et n&#x27;est accessible (pour l&#x27;envoi) qu&#x27;à travers une authentification.&lt;&#x2F;p&gt;
&lt;p&gt;Les autres serveurs du groupe ont un OpenSMTPd qui n&#x27;écoute que localement. Cela permet d&#x27;envoyer facilement tous les mails d&#x27;administration et les notifications sans avoir un serveur SMTP sur chaque poste.&lt;&#x2F;p&gt;
&lt;p&gt;L&#x27;installation de OpenSMTPd se fait simplement avec &lt;code&gt;apt install opensmtpd&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;La configuration est la suivante :&lt;&#x2F;p&gt;
&lt;h2 id=&quot;dans-le-fichier-etc-smtpd-conf&quot;&gt;Dans le fichier &lt;code&gt;&#x2F;etc&#x2F;smtpd.conf&lt;&#x2F;code&gt; :&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;code&gt;monserveur&lt;&#x2F;code&gt; est le nom du serveur d&#x27;envoi&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;table aliases file:&#x2F;etc&#x2F;aliases&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;table smtp_secrets file:&#x2F;etc&#x2F;smtp_secrets&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;listen on lo&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;action act01 maildir alias &amp;lt;aliases&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;action act02 relay host smtp+tls:&#x2F;&#x2F;id@monserveur auth &amp;lt;smtp_secrets&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;match for local action act01&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;match for any action act02&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;dans-le-fichier-etc-smtp-secrets&quot;&gt;Dans le fichier &lt;code&gt;&#x2F;etc&#x2F;smtp_secrets&lt;&#x2F;code&gt; :&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;strong&gt;Attention&lt;&#x2F;strong&gt; : ce fichier doit être root:opensmtpd 600&lt;&#x2F;p&gt;
&lt;p&gt;Note : &lt;code&gt;id&lt;&#x2F;code&gt; est une chaine arbitraire&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;id user:password&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h1 id=&quot;2-relai-sans-authentification&quot;&gt;2. Relai sans authentification&lt;&#x2F;h1&gt;
&lt;p&gt;Cette configuration est à reserver aux cas où le serveur SMTP n&#x27;est accessible que depuis un réseau &lt;em&gt;de confiance&lt;&#x2F;em&gt; et si on estime que l&#x27;authentification pour envoyer des emails n&#x27;est pas nécessaire.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;dans-le-fichier-etc-smtpd-conf-1&quot;&gt;Dans le fichier &lt;code&gt;&#x2F;etc&#x2F;smtpd.conf&lt;&#x2F;code&gt; :&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;code&gt;monserveur&lt;&#x2F;code&gt; est le nom du serveur d&#x27;envoi&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;table aliases file:&#x2F;etc&#x2F;aliases&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;listen on lo&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;action act01 maildir alias &amp;lt;aliases&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;action act02 relay host smtp:&#x2F;&#x2F;monserveur&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;match for local action act01&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;match for any action act02&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h1 id=&quot;3-serveur-anterieurs-a-debian-11&quot;&gt;3. Serveur antérieurs à Debian 11&lt;&#x2F;h1&gt;
&lt;p&gt;Attention : au passage de la version 10 à la 11 de Debian, la syntaxe du fichier &lt;code&gt;smtpd.conf&lt;&#x2F;code&gt; a changé.&lt;br &#x2F;&gt;
Auparavant, il fallait employer la syntaxe suivante :&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #EBDBB2; background-color: #282828;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;table aliases file:&#x2F;etc&#x2F;aliases&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;table smtp_secrets file:&#x2F;etc&#x2F;smtp_secrets&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;listen on lo&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;accept for local alias &amp;lt;aliases&amp;gt; deliver to mbox&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;accept for any relay via tls+auth:&#x2F;&#x2F;id@monserveur auth &amp;lt;smtp_secrets&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;</description>
      </item>
    </channel>
</rss>
