activité sur l'évolution du design web, sept pages de 1995 à 2026

sequences/web/README.md

@@ -6,6 +6,7 @@
 |----------|-------------|
 | [Introduction au Web](INTRODUCTION.md) | Surface Web, Deep Web, Dark Web, navigateurs |
 | [Historique du Web](historique/README.md) | Évolution du Web, archives, Minitel |
+| [Trente ans de design web](activite_epoques.md) | La même page d'accueil habillée à sept époques, de 1995 à 2026 |
 | [Moteurs de recherche](recherches/README.md) | Google, référencement, alternatives |
 
 ---

sequences/web/activite_epoques.md

@@ -0,0 +1,98 @@
+# Trente ans de design web
+
+> Voici la page d'accueil de votre site de cours. La même, sept fois.
+
+> Le texte ne change jamais : même titre, même phrase de présentation, mêmes quatre matières. Seul l'habillage change, selon l'année où la page aurait été écrite.
+
+Ouvrez-les dans l'ordre, et gardez cette page de questions à côté.
+
+| Année | Page |
+|-------|------|
+| 1995 | [Ouvrir la page de 1995](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/1995.html) |
+| 1998 | [Ouvrir la page de 1998](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/1998.html) |
+| 2002 | [Ouvrir la page de 2002](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2002.html) |
+| 2005 | [Ouvrir la page de 2005](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2005.html) |
+| 2010 | [Ouvrir la page de 2010](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2010.html) |
+| 2020 | [Ouvrir la page de 2020](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2020.html) |
+| 2026 | [Ouvrir la page de 2026](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2026.html) |
+
+**Pour chaque page, faites deux choses** : regardez-la, puis affichez son code source avec **Ctrl + U**, comme au TP 1. Les commentaires laissés dans le code vous aideront.
+
+---------
+
+### 1. 1995
+
+1. Ouvrez le code source. Cherchez une balise `<style>` ou un fichier `.css`. Que constatez-vous ?
+2. Puisqu'il n'existe pas de feuille de style, où sont écrites les couleurs et les polices ? Donnez un exemple précis tiré du code.
+3. Le bas de page annonce « optimisee pour une resolution de 640x480 ». Mesurez la largeur de votre écran. Que cela vous dit-il des écrans de 1995 ?
+4. Cette page contient un tableau. À quoi sert-il ici ?
+
+### 2. 1998
+
+5. Ouvrez le code source. Combien de balises `<table>` trouvez-vous ? À quoi servent-elles cette fois ?
+6. Le fond de la page est une seule petite image, répétée automatiquement. En 1998, la plupart des gens se connectaient avec un modem à 56 kbit/s, soit environ 7 ko par seconde. Expliquez pourquoi on préférait une petite image répétée plutôt qu'une grande image de fond.
+7. Repérez la balise `<marquee>`. Que fait-elle ? Cette balise est aujourd'hui abandonnée : à votre avis, pourquoi ?
+8. La page se dit « optimise pour Netscape Navigator 4.0 ». Que pensez-vous d'un site qui ne fonctionne bien que dans un seul navigateur ?
+
+### 3. 2002
+
+9. Cherchez de nouveau la balise `<style>`. Elle existe cette fois. Qu'est-ce que cela change pour la personne qui écrit le site ?
+10. Malgré cette nouveauté, la mise en page repose toujours sur un tableau. Retrouvez-le dans le code.
+11. La page fait 760 pixels de large, et pas davantage. Comparez avec 1995 : qu'en déduisez-vous sur les écrans de 2002 ?
+12. Comparez visuellement 1998 et 2002. Quel mot choisiriez-vous pour décrire ce qui a changé ?
+
+### 4. 2005
+
+13. Cette page n'est plus un site officiel, mais un blog personnel. Relevez trois éléments qui le montrent.
+14. Cliquez sur le bouton « Lecture ». Lisez le message affiché. Pourquoi les navigateurs ont-ils fini par interdire ce comportement ?
+15. Combien de couleurs différentes comptez-vous, à vue d'œil ? Et combien sur la page de 2002 ?
+16. Cette page est-elle agréable à lire ? Justifiez, en distinguant ce qui vous amuse de ce qui vous gêne.
+
+### 5. 2010
+
+17. Les coins arrondis, les dégradés et les ombres de cette page ne sont pas des images : ils sont écrits en CSS. Retrouvez dans le code les mots `border-radius`, `gradient` et `shadow`.
+18. Avant 2010, ces effets s'obtenaient en découpant des images dans un logiciel de retouche. Quel avantage voyez-vous à les écrire en CSS ?
+19. Cherchez la balise `<table>`. Combien en trouvez-vous ? Comparez avec 1998.
+20. Réduisez la largeur de la fenêtre du navigateur, jusqu'à la moitié de l'écran. Que se passe-t-il ? Pourquoi, à votre avis ?
+
+### 6. 2020
+
+21. Tout en haut du code, repérez la ligne qui commence par `<meta name="viewport"`. D'après le commentaire qui la précède, à quoi sert-elle ?
+22. Refaites le test de la question 20 sur cette page. Qu'observez-vous de différent ?
+23. Quel événement, entre 2010 et 2020, explique cette évolution ?
+24. Comparez la quantité de couleurs et d'effets avec la page de 2010. La tendance vous semble-t-elle aller vers le plus ou vers le moins ?
+
+### 7. 2026
+
+25. Cette page s'adapte à un réglage de votre ordinateur. Changez le thème de votre système, ou de votre navigateur, de clair à sombre. Que se passe-t-il ?
+26. Le code contient une règle `prefers-reduced-motion`. Cherchez le commentaire qui l'accompagne et expliquez à qui elle sert.
+27. En quoi est-ce différent de toutes les époques précédentes, où c'était le site qui décidait de tout ?
+
+---------
+
+### Pour finir
+
+28. Rangez les sept pages de la plus lisible à la moins lisible, selon vous. Comparez votre classement avec celui de votre voisin.
+29. Sur les sept, laquelle fonctionnerait encore correctement sur un téléphone ? Justifiez.
+30. Une seule chose n'a pas changé en trente ans sur ces pages. Laquelle ? Que pouvez-vous en conclure ?
+
+---------
+
+### Synthèse
+
+À recopier et compléter.
+
+- De 1995 à 2002, la mise en page se fabrique avec des ........................, détournés de leur usage normal.
+- L'arrivée du ................ permet de séparer le contenu de sa mise en forme.
+- La largeur des pages augmente au fil du temps parce que les .................... deviennent plus grands.
+- À partir de ................, la page doit s'adapter à la taille de l'écran : c'est ce qu'on appelle le ..........................
+- Aujourd'hui, la page s'adapte aussi aux ............................ de la personne qui la consulte, comme le thème sombre.
+- Ce qui n'a jamais changé, c'est ..............................
+
+---------
+
+Auteur : Florian Mathieu
+
+Licence CC BY-SA
+
+<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.

sequences/web/epoques/1995.html

@@ -0,0 +1,102 @@
+<HTML>
+<HEAD>
+<TITLE>Cours NSI / SNT / Socio</TITLE>
+</HEAD>
+
+<!-- 1995. Il n'existe pas encore de feuille de style : la mise en forme se fait
+     avec des attributs directement dans les balises. Les couleurs de la page et
+     des liens sont declarees sur la balise BODY. -->
+
+<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000EE" VLINK="#551A8B">
+
+<CENTER>
+<H1>Cours NSI / SNT / Socio</H1>
+<FONT SIZE="2" FACE="Times New Roman">Lycee Charlotte Perriand</FONT>
+</CENTER>
+
+<HR SIZE="2">
+
+<P>
+<FONT FACE="Times New Roman" SIZE="3">
+Bienvenue sur cette page. Vous trouverez ici les cours, les exercices et les
+ressources de NSI, de SNT et d'algorithmes des graphes en L3 de sociologie
+quantitative.
+</FONT>
+</P>
+
+<HR>
+
+<H2><FONT FACE="Times New Roman">Les matieres</FONT></H2>
+
+<!-- Pas de liste a puces stylisee : on utilise UL, et c'est tout. -->
+
+<UL>
+  <LI><FONT FACE="Times New Roman"><A HREF="#">NSI Premiere</A> - Numerique et Sciences Informatiques</FONT>
+  <LI><FONT FACE="Times New Roman"><A HREF="#">NSI Terminale</A> - Numerique et Sciences Informatiques</FONT>
+  <LI><FONT FACE="Times New Roman"><A HREF="#">SNT</A> - Sciences Numeriques et Technologie</FONT>
+  <LI><FONT FACE="Times New Roman"><A HREF="#">L3 Sociologie</A> - Algorithmes des graphes</FONT>
+</UL>
+
+<HR>
+
+<!-- Le tableau sert ici a ce a quoi il sert vraiment : presenter des donnees.
+     A partir de 1998, on s'en servira pour tout autre chose. -->
+
+<TABLE BORDER="1" CELLPADDING="4">
+<TR BGCOLOR="#C0C0C0">
+  <TD><FONT FACE="Times New Roman"><B>Niveau</B></FONT></TD>
+  <TD><FONT FACE="Times New Roman"><B>Horaire</B></FONT></TD>
+</TR>
+<TR>
+  <TD><FONT FACE="Times New Roman">Seconde</FONT></TD>
+  <TD><FONT FACE="Times New Roman">1h30 par semaine</FONT></TD>
+</TR>
+<TR>
+  <TD><FONT FACE="Times New Roman">Premiere</FONT></TD>
+  <TD><FONT FACE="Times New Roman">4h par semaine</FONT></TD>
+</TR>
+<TR>
+  <TD><FONT FACE="Times New Roman">Terminale</FONT></TD>
+  <TD><FONT FACE="Times New Roman">6h par semaine</FONT></TD>
+</TR>
+</TABLE>
+
+<HR>
+
+<CENTER>
+
+<!-- Le compteur de visites, signe distinctif de l'epoque. -->
+<FONT FACE="Courier New" SIZE="2">
+Cette page a ete visitee
+<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="0" BGCOLOR="#000000"><TR>
+<TD><FONT COLOR="#00FF00" FACE="Courier New"><B>0&nbsp;0&nbsp;0&nbsp;4&nbsp;2</B></FONT></TD>
+</TR></TABLE>
+fois
+</FONT>
+
+<P>
+<FONT FACE="Times New Roman" SIZE="2">
+Derniere mise a jour : 14 novembre 1995<BR>
+Cette page est optimisee pour une resolution de 640x480<BR>
+<A HREF="#">Ecrire au webmestre</A>
+</FONT>
+</P>
+
+<HR>
+
+<!-- Barre de navigation entre les epoques. En 1995 elle ne peut etre
+     qu'une suite de liens separes par des barres verticales. -->
+<FONT FACE="Times New Roman" SIZE="2">
+<B>1995</B> |
+<A HREF="1998.html">1998</A> |
+<A HREF="2002.html">2002</A> |
+<A HREF="2005.html">2005</A> |
+<A HREF="2010.html">2010</A> |
+<A HREF="2020.html">2020</A> |
+<A HREF="2026.html">2026</A>
+</FONT>
+
+</CENTER>
+
+</BODY>
+</HTML>

sequences/web/epoques/1998.html

@@ -0,0 +1,110 @@
+<HTML>
+<HEAD>
+<TITLE>*** Cours NSI / SNT / Socio - Le site ! ***</TITLE>
+</HEAD>
+
+<!-- 1998. Le fond en mosaique est une image minuscule repetee par le navigateur.
+     Ici elle est dessinee en SVG et integree directement dans la page, pour que
+     le fichier fonctionne sans aucun telechargement. Le principe, lui, est
+     exactement celui de l'epoque : une petite image qui se repete a l'infini. -->
+
+<BODY BACKGROUND="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23000066'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='26' r='1' fill='%23ccccff'/%3E%3Ccircle cx='20' cy='34' r='1.2' fill='%23ffffcc'/%3E%3C/svg%3E"
+      TEXT="#FFFF00" LINK="#00FFFF" VLINK="#FF99FF">
+
+<CENTER>
+<FONT FACE="Comic Sans MS, Arial" SIZE="6" COLOR="#FFFF00">
+<B>~*~ Cours NSI / SNT / Socio ~*~</B>
+</FONT>
+<BR>
+<MARQUEE BEHAVIOR="scroll" DIRECTION="left" SCROLLAMOUNT="4" WIDTH="80%">
+<FONT FACE="Comic Sans MS" COLOR="#00FF00" SIZE="4">
+Bienvenue sur mon site !!! N'oubliez pas de signer le livre d'or !!! Bonne visite a tous !!!
+</FONT>
+</MARQUEE>
+</CENTER>
+
+<!-- Le grand changement de 1998 : le tableau ne sert plus a presenter des
+     donnees, il sert a fabriquer la mise en page. Colonne de gauche pour le
+     menu, colonne de droite pour le contenu. C'est le seul moyen disponible. -->
+
+<TABLE WIDTH="100%" CELLPADDING="10" CELLSPACING="0" BORDER="0">
+<TR VALIGN="TOP">
+
+  <!-- Colonne de gauche : le menu -->
+  <TD WIDTH="170" BGCOLOR="#330066">
+    <FONT FACE="Comic Sans MS" SIZE="3" COLOR="#FFFF00"><B>MENU</B></FONT>
+    <HR COLOR="#FFFF00">
+    <FONT FACE="Comic Sans MS" SIZE="2">
+    &gt; <A HREF="#">Accueil</A><BR><BR>
+    &gt; <A HREF="#">NSI Premiere</A><BR><BR>
+    &gt; <A HREF="#">NSI Terminale</A><BR><BR>
+    &gt; <A HREF="#">SNT</A><BR><BR>
+    &gt; <A HREF="#">L3 Sociologie</A><BR><BR>
+    &gt; <A HREF="#">Livre d'or</A><BR><BR>
+    &gt; <A HREF="#">Mes liens</A>
+    </FONT>
+    <HR COLOR="#FFFF00">
+    <CENTER>
+    <FONT FACE="Courier New" SIZE="1" COLOR="#00FF00">
+    Visiteurs<BR><B>0 0 3 8 1 7</B>
+    </FONT>
+    </CENTER>
+  </TD>
+
+  <!-- Colonne de droite : le contenu -->
+  <TD BGCOLOR="#000033">
+    <FONT FACE="Comic Sans MS" SIZE="4" COLOR="#FF99FF"><B>Bienvenue !!</B></FONT>
+    <P>
+    <FONT FACE="Comic Sans MS" SIZE="3" COLOR="#FFFFFF">
+    Vous trouverez ici les cours, les exercices et les ressources de
+    <FONT COLOR="#00FF00">NSI</FONT>, de <FONT COLOR="#00FF00">SNT</FONT> et
+    d'algorithmes des graphes en L3 de sociologie quantitative.
+    </FONT>
+    </P>
+
+    <P>
+    <FONT FACE="Comic Sans MS" SIZE="3" COLOR="#FFFFFF">Les matieres :</FONT>
+    </P>
+
+    <TABLE CELLPADDING="6" CELLSPACING="2" BORDER="0">
+    <TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">NSI Premiere</A> - Numerique et Sciences Informatiques</FONT></TD></TR>
+    <TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">NSI Terminale</A> - Numerique et Sciences Informatiques</FONT></TD></TR>
+    <TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">SNT</A> - Sciences Numeriques et Technologie</FONT></TD></TR>
+    <TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">L3 Sociologie</A> - Algorithmes des graphes</FONT></TD></TR>
+    </TABLE>
+
+    <P>
+    <!-- Le fameux panneau "en construction", dessine ici en SVG. -->
+    <IMG SRC="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cpolygon points='60,8 112,82 8,82' fill='%23FFCC00' stroke='%23000' stroke-width='4'/%3E%3Crect x='40' y='34' width='40' height='10' fill='%23000' transform='rotate(-20 60 40)'/%3E%3Ccircle cx='60' cy='66' r='6' fill='%23000'/%3E%3C/svg%3E"
+         WIDTH="120" HEIGHT="90" ALT="En construction" BORDER="0">
+    <BR>
+    <FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFF00"><B>Page en construction !</B></FONT>
+    </P>
+  </TD>
+
+</TR>
+</TABLE>
+
+<CENTER>
+<HR COLOR="#FFFF00" WIDTH="80%">
+<FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF">
+Site optimise pour Netscape Navigator 4.0 en 800x600<BR>
+Derniere mise a jour : 3 mars 1998<BR>
+<A HREF="#">webmestre@lycee-perriand.fr</A>
+</FONT>
+
+<P>
+<FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF">
+<A HREF="1995.html">1995</A> |
+<B><FONT COLOR="#FFFF00">1998</FONT></B> |
+<A HREF="2002.html">2002</A> |
+<A HREF="2005.html">2005</A> |
+<A HREF="2010.html">2010</A> |
+<A HREF="2020.html">2020</A> |
+<A HREF="2026.html">2026</A>
+</FONT>
+</P>
+</CENTER>
+
+</BODY>
+</HTML>

sequences/web/epoques/2002.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Cours NSI / SNT / Socio</title>
+
+<!-- 2002. Grande nouveaute : la feuille de style. Les couleurs et les polices
+     quittent enfin les balises pour se regrouper ici. En revanche la mise en
+     page repose toujours sur un tableau : les techniques CSS de positionnement
+     ne sont pas encore fiables d'un navigateur a l'autre.
+
+     Largeur fixe de 760 pixels, calee sur les ecrans 800x600 de l'epoque. -->
+
+<style type="text/css">
+body {
+  background-color: #6b7d94;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  color: #333333;
+  margin: 0;
+  padding: 16px 0;
+}
+#page {
+  width: 760px;
+  margin: 0 auto;
+  background-color: #ffffff;
+  border: 1px solid #44536b;
+}
+#entete {
+  background-color: #44536b;
+  color: #ffffff;
+  padding: 14px 18px;
+}
+#entete h1 { font-size: 18px; margin: 0; letter-spacing: 1px; }
+#entete .sous { font-size: 10px; color: #c3cedd; }
+#menu {
+  background-color: #eef1f5;
+  border-right: 1px solid #c3cedd;
+  width: 160px;
+  padding: 14px;
+  vertical-align: top;
+}
+#menu a { display: block; padding: 4px 0; border-bottom: 1px dotted #c3cedd; }
+#contenu { padding: 16px 20px; vertical-align: top; }
+h2 { font-size: 13px; color: #44536b; border-bottom: 1px solid #c3cedd; padding-bottom: 4px; }
+a { color: #1f4e8c; }
+a:hover { color: #cc3300; }
+ul.matieres { list-style: square; padding-left: 18px; line-height: 1.8; }
+#pied {
+  background-color: #eef1f5;
+  border-top: 1px solid #c3cedd;
+  padding: 10px 18px;
+  font-size: 10px;
+  color: #666666;
+}
+.badge {
+  border: 1px solid #44536b;
+  padding: 1px 5px;
+  font-size: 9px;
+  background-color: #ffffff;
+}
+</style>
+</head>
+
+<body>
+
+<div id="page">
+
+  <div id="entete">
+    <h1>Cours NSI / SNT / Socio</h1>
+    <span class="sous">Lycee Charlotte Perriand</span>
+  </div>
+
+  <!-- La mise en page reste un tableau, avec les attributs de l'epoque. -->
+  <table cellpadding="0" cellspacing="0" border="0" width="100%">
+  <tr>
+
+    <td id="menu">
+      <a href="#">Accueil</a>
+      <a href="#">NSI Premiere</a>
+      <a href="#">NSI Terminale</a>
+      <a href="#">SNT</a>
+      <a href="#">L3 Sociologie</a>
+      <a href="#">Contact</a>
+    </td>
+
+    <td id="contenu">
+      <h2>Bienvenue</h2>
+      <p>
+        Vous trouverez ici les cours, les exercices et les ressources de NSI,
+        de SNT et d'algorithmes des graphes en L3 de sociologie quantitative.
+      </p>
+
+      <h2>Les matieres</h2>
+      <ul class="matieres">
+        <li><a href="#">NSI Premiere</a> : Numerique et Sciences Informatiques</li>
+        <li><a href="#">NSI Terminale</a> : Numerique et Sciences Informatiques</li>
+        <li><a href="#">SNT</a> : Sciences Numeriques et Technologie</li>
+        <li><a href="#">L3 Sociologie</a> : Algorithmes des graphes</li>
+      </ul>
+
+      <h2>Horaires</h2>
+      <table cellpadding="4" cellspacing="0" border="0" width="100%" style="border: 1px solid #c3cedd;">
+      <tr style="background-color: #eef1f5;">
+        <th align="left">Niveau</th><th align="left">Horaire hebdomadaire</th>
+      </tr>
+      <tr><td>Seconde</td><td>1h30</td></tr>
+      <tr style="background-color: #f7f9fb;"><td>Premiere</td><td>4h</td></tr>
+      <tr><td>Terminale</td><td>6h</td></tr>
+      </table>
+    </td>
+
+  </tr>
+  </table>
+
+  <div id="pied">
+    Derniere mise a jour : 12 septembre 2002 &nbsp;|&nbsp;
+    <span class="badge">XHTML 1.0</span>
+    <span class="badge">CSS</span>
+    &nbsp;|&nbsp; Optimise pour 800x600
+    <div style="margin-top: 8px;">
+      <a href="1995.html">1995</a> |
+      <a href="1998.html">1998</a> |
+      <strong>2002</strong> |
+      <a href="2005.html">2005</a> |
+      <a href="2010.html">2010</a> |
+      <a href="2020.html">2020</a> |
+      <a href="2026.html">2026</a>
+    </div>
+  </div>
+
+</div>
+
+</body>
+</html>

sequences/web/epoques/2005.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<title>xX-cours-nsi-snt-socio-Xx :: Mon blog</title>
+
+<!-- 2005. L'epoque des blogs personnels et des profils que chacun decorait
+     lui-meme. Le contraste avec 2002 est brutal : ce n'est plus un site
+     institutionnel, c'est une page qu'on personnalise a l'extreme.
+
+     Les elements caracteristiques : fond a paillettes, texte qui clignote,
+     musique qui se lance toute seule, module de commentaires, pseudo a
+     rallonge, et beaucoup, beaucoup de rose. -->
+
+<style>
+body {
+  margin: 0;
+  padding: 10px;
+  background-color: #12002b;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ff66cc' stroke-width='1.2'%3E%3Cpath d='M12 4 L13.5 9 L18 10 L13.5 11 L12 16 L10.5 11 L6 10 L10.5 9 Z'/%3E%3Cpath d='M44 30 L45 33 L48 34 L45 35 L44 38 L43 35 L40 34 L43 33 Z' stroke='%2366ffff'/%3E%3Cpath d='M28 48 L29 51 L32 52 L29 53 L28 56 L27 53 L24 52 L27 51 Z' stroke='%23ffff66'/%3E%3C/g%3E%3C/svg%3E");
+  font-family: "Comic Sans MS", cursive;
+  color: #ffffff;
+}
+#cadre {
+  max-width: 800px;
+  margin: 0 auto;
+  border: 4px double #ff66cc;
+  background-color: rgba(30, 0, 60, 0.88);
+  padding: 12px;
+}
+h1 {
+  text-align: center;
+  font-size: 34px;
+  color: #ff66cc;
+  text-shadow: 2px 2px 0 #000000, 4px 4px 0 #66ffff;
+  margin: 6px 0;
+}
+.pseudo { text-align: center; color: #66ffff; font-size: 13px; }
+.clignote { animation: clignote 1s steps(2, start) infinite; color: #ffff66; font-weight: bold; }
+@keyframes clignote { to { visibility: hidden; } }
+.article {
+  border: 2px dashed #66ffff;
+  background-color: #2a0050;
+  padding: 10px;
+  margin: 14px 0;
+}
+.article h2 { color: #ffff66; font-size: 20px; margin: 0 0 6px 0; text-shadow: 1px 1px 0 #ff0066; }
+.date { font-size: 11px; color: #ff99dd; }
+a { color: #66ffff; }
+a:hover { color: #ffff66; }
+ul { list-style: none; padding-left: 0; }
+ul li { padding: 5px; margin: 4px 0; background-color: #3d0070; border-left: 6px solid #ff66cc; }
+#lecteur {
+  border: 2px solid #ffff66; background-color: #000000;
+  padding: 8px; text-align: center; margin: 10px 0; font-size: 12px;
+}
+#lecteur button {
+  font-family: "Comic Sans MS", cursive; font-size: 13px;
+  background-color: #ff66cc; color: #12002b; border: 2px outset #ffffff;
+  padding: 4px 12px; cursor: pointer;
+}
+#coms { border: 2px solid #ff66cc; padding: 10px; margin-top: 14px; }
+#coms h3 { color: #ff66cc; margin: 0 0 8px 0; }
+.com { background-color: #2a0050; padding: 6px; margin: 6px 0; font-size: 12px; }
+#pied { text-align: center; font-size: 11px; margin-top: 14px; color: #ff99dd; }
+marquee { color: #ffff66; font-size: 16px; }
+</style>
+</head>
+
+<body>
+<div id="cadre">
+
+  <h1>xX-Cours-NSI-SNT-Socio-Xx</h1>
+  <p class="pseudo">
+    Le blog officiel des cours du lycee Charlotte Perriand<br>
+    <span class="clignote">NOUVEAU !!!</span> 4 matieres en ligne !!
+  </p>
+
+  <marquee scrollamount="5">
+    Bienvenue sur mon blog !!! Lache tes coms !!! Ajoute-moi dans tes favoris !!! ^^
+  </marquee>
+
+  <!-- En 2005, la musique se lancait toute seule au chargement de la page.
+       Les navigateurs modernes l'interdisent : il faut desormais une action
+       de l'utilisateur. Le bouton ci-dessous explique justement pourquoi. -->
+  <div id="lecteur">
+    <span style="color:#ffff66;">&#9835; Ma musique &#9835;</span>
+    <button type="button" onclick="expliquer()">Lecture</button>
+    <div id="message" style="color:#66ffff; margin-top:6px;"></div>
+  </div>
+
+  <div class="article">
+    <h2>Bienvenue sur mon blog !!</h2>
+    <p class="date">Poste le 14 mars 2005 a 22h47</p>
+    <p>
+      Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
+      et d'algorithmes des graphes en L3 de sociologie quantitative. Bonne visite
+      a tous et a toutes :-)
+    </p>
+  </div>
+
+  <div class="article">
+    <h2>Les matieres</h2>
+    <p class="date">Poste le 14 mars 2005 a 22h51</p>
+    <ul>
+      <li><a href="#">NSI Premiere</a> :: Numerique et Sciences Informatiques</li>
+      <li><a href="#">NSI Terminale</a> :: Numerique et Sciences Informatiques</li>
+      <li><a href="#">SNT</a> :: Sciences Numeriques et Technologie</li>
+      <li><a href="#">L3 Sociologie</a> :: Algorithmes des graphes</li>
+    </ul>
+  </div>
+
+  <div id="coms">
+    <h3>Lache tes coms (3)</h3>
+    <div class="com"><b>xX_camille_Xx</b> : trop bien ton blog !! passe sur le mien ^^</div>
+    <div class="com"><b>sofiane62</b> : +1 continue comme ca</div>
+    <div class="com"><b>anonyme</b> : la musique elle est trop bien</div>
+  </div>
+
+  <div id="pied">
+    Visiteurs : 0 0 9 3 4 2 &nbsp;|&nbsp; Derniere mise a jour : 14 mars 2005<br>
+    <a href="#">Livre d'or</a> - <a href="#">Mes amis</a> - <a href="#">Me contacter</a>
+    <p>
+      <a href="1995.html">1995</a> |
+      <a href="1998.html">1998</a> |
+      <a href="2002.html">2002</a> |
+      <b style="color:#ffff66;">2005</b> |
+      <a href="2010.html">2010</a> |
+      <a href="2020.html">2020</a> |
+      <a href="2026.html">2026</a>
+    </p>
+  </div>
+
+</div>
+
+<script>
+function expliquer() {
+  document.getElementById("message").textContent =
+    "En 2005, cette musique se lancait toute seule des l'ouverture de la page. " +
+    "Depuis, les navigateurs le refusent : le son exige une action de votre part.";
+}
+</script>
+
+</body>
+</html>

sequences/web/epoques/2010.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<title>Cours NSI / SNT / Socio</title>
+
+<!-- 2010. L'epoque dite "web 2.0". Les tableaux ont disparu de la mise en page,
+     remplaces par des blocs flottants. Le CSS3 arrive et apporte enfin, sans
+     images, ce qu'il fallait auparavant decouper dans Photoshop : coins
+     arrondis, degrades, ombres portees.
+
+     La largeur reste fixe, 960 pixels, parce que le telephone ne sert pas
+     encore vraiment a naviguer. Les boutons brillants et les badges "beta"
+     sont la signature visuelle de ces annees. -->
+
+<style>
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  padding: 0 0 40px 0;
+  background: #e8ebee url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23e8ebee'/%3E%3Crect width='2' height='2' fill='%23e3e6ea'/%3E%3C/svg%3E");
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  color: #444;
+}
+#bandeau {
+  background: linear-gradient(to bottom, #4a7fb5, #2f5c8a);
+  border-bottom: 3px solid #1d3f61;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+}
+#conteneur { width: 960px; margin: 0 auto; }
+#bandeau #conteneur { padding: 18px 0; }
+h1 {
+  margin: 0; color: #fff; font-size: 28px; font-weight: bold;
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
+  float: left;
+}
+.beta {
+  display: inline-block; margin-left: 10px; vertical-align: 8px;
+  background: linear-gradient(to bottom, #ffd54a, #e8a712);
+  color: #6b4700; font-size: 10px; font-weight: bold; text-transform: uppercase;
+  padding: 3px 8px; border-radius: 10px; border: 1px solid #c98f0a;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+}
+#nav { float: right; padding-top: 10px; }
+#nav a {
+  color: #dce8f4; text-decoration: none; margin-left: 18px; font-size: 13px;
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
+}
+#nav a:hover { color: #fff; text-decoration: underline; }
+.clear { clear: both; }
+
+#intro {
+  background: #fff; border: 1px solid #c8cdd3; border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+  padding: 22px 26px; margin-top: 26px;
+}
+#intro p { font-size: 15px; line-height: 1.6; margin: 0; color: #555; }
+
+.cartes { margin-top: 22px; }
+.carte {
+  float: left; width: 228px; margin-right: 16px;
+  background: #fff; border: 1px solid #c8cdd3; border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+  padding: 16px;
+}
+.carte:last-child { margin-right: 0; }
+.carte h2 { margin: 0 0 8px 0; font-size: 15px; color: #2f5c8a; }
+.carte p { margin: 0 0 12px 0; color: #777; line-height: 1.5; }
+.bouton {
+  display: inline-block; text-decoration: none;
+  background: linear-gradient(to bottom, #6ba3d6, #3a6f9f);
+  border: 1px solid #2c5a86; border-radius: 5px;
+  color: #fff; font-weight: bold; font-size: 12px; padding: 6px 14px;
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.2);
+}
+.bouton:hover { background: linear-gradient(to bottom, #7db3e2, #457fb0); }
+
+#partage {
+  margin-top: 26px; padding: 14px 18px; background: #fff;
+  border: 1px solid #c8cdd3; border-radius: 8px; color: #888;
+}
+#partage span {
+  display: inline-block; margin-right: 8px; padding: 4px 10px;
+  border: 1px solid #c8cdd3; border-radius: 4px;
+  background: linear-gradient(to bottom, #ffffff, #eef1f4); font-size: 11px;
+}
+#pied {
+  margin-top: 26px; padding-top: 14px; border-top: 1px solid #c8cdd3;
+  color: #999; font-size: 12px; text-align: center;
+}
+#pied a { color: #2f5c8a; }
+</style>
+</head>
+
+<body>
+
+<div id="bandeau">
+  <div id="conteneur">
+    <h1>Cours NSI / SNT / Socio <span class="beta">beta</span></h1>
+    <div id="nav">
+      <a href="#">Accueil</a><a href="#">Matieres</a><a href="#">Ressources</a><a href="#">Contact</a>
+    </div>
+    <div class="clear"></div>
+  </div>
+</div>
+
+<div id="conteneur">
+
+  <div id="intro">
+    <p>
+      Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
+      et d'algorithmes des graphes en L3 de sociologie quantitative.
+    </p>
+  </div>
+
+  <div class="cartes">
+    <div class="carte">
+      <h2>NSI Premiere</h2>
+      <p>Numerique et Sciences Informatiques</p>
+      <a class="bouton" href="#">Acceder</a>
+    </div>
+    <div class="carte">
+      <h2>NSI Terminale</h2>
+      <p>Numerique et Sciences Informatiques</p>
+      <a class="bouton" href="#">Acceder</a>
+    </div>
+    <div class="carte">
+      <h2>SNT</h2>
+      <p>Sciences Numeriques et Technologie</p>
+      <a class="bouton" href="#">Acceder</a>
+    </div>
+    <div class="carte">
+      <h2>L3 Sociologie</h2>
+      <p>Algorithmes des graphes</p>
+      <a class="bouton" href="#">Acceder</a>
+    </div>
+    <div class="clear"></div>
+  </div>
+
+  <div id="partage">
+    Partager cette page :
+    <span>J'aime</span><span>Tweeter</span><span>Partager</span><span>+1</span>
+  </div>
+
+  <div id="pied">
+    Lycee Charlotte Perriand &nbsp;|&nbsp; Derniere mise a jour : 4 octobre 2010
+    &nbsp;|&nbsp; Largeur optimale : 1024 pixels
+    <p>
+      <a href="1995.html">1995</a> |
+      <a href="1998.html">1998</a> |
+      <a href="2002.html">2002</a> |
+      <a href="2005.html">2005</a> |
+      <strong>2010</strong> |
+      <a href="2020.html">2020</a> |
+      <a href="2026.html">2026</a>
+    </p>
+  </div>
+
+</div>
+
+</body>
+</html>

sequences/web/epoques/2020.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Cours NSI / SNT / Socio</title>
+
+<!-- 2020. Le changement le plus important ne se voit pas a l'ecran : c'est la
+     balise meta viewport, juste au-dessus. Elle indique au telephone de ne pas
+     faire semblant d'etre un ecran d'ordinateur. Plus de la moitie des visites
+     se font desormais sur mobile, et la page doit donc s'adapter a la largeur
+     disponible : c'est ce qu'on appelle le responsive.
+
+     Le style change aussi : fini les degrades et les ombres imitant le relief.
+     On revient au plat, avec beaucoup d'espace vide, peu de couleurs, et des
+     polices deja installees sur la machine pour eviter un telechargement. -->
+
+<style>
+:root {
+  --fond: #ffffff;
+  --texte: #1f2933;
+  --gris: #616e7c;
+  --trait: #e4e7eb;
+  --accent: #2f6f4f;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 17px;
+  line-height: 1.6;
+  color: var(--texte);
+  background: var(--fond);
+}
+header {
+  position: sticky; top: 0;
+  background: var(--fond);
+  border-bottom: 1px solid var(--trait);
+  padding: 14px 0;
+}
+.conteneur { width: min(1080px, 92vw); margin: 0 auto; }
+header .conteneur { display: flex; align-items: center; justify-content: space-between; }
+.marque { font-weight: 600; font-size: 17px; }
+nav a {
+  color: var(--gris); text-decoration: none; margin-left: 22px; font-size: 15px;
+}
+nav a:hover { color: var(--texte); }
+
+h1 {
+  font-size: clamp(30px, 5vw, 44px);
+  line-height: 1.15;
+  margin: 56px 0 16px 0;
+  letter-spacing: -0.02em;
+}
+.chapo { font-size: 19px; color: var(--gris); max-width: 62ch; margin: 0 0 48px 0; }
+
+.grille {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 18px;
+  margin-bottom: 64px;
+}
+.carte {
+  border: 1px solid var(--trait);
+  border-radius: 10px;
+  padding: 22px;
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.carte:hover { border-color: var(--accent); transform: translateY(-2px); }
+.carte h2 { font-size: 17px; margin: 0 0 6px 0; }
+.carte p { margin: 0; color: var(--gris); font-size: 15px; }
+
+footer {
+  border-top: 1px solid var(--trait);
+  padding: 28px 0 48px 0;
+  color: var(--gris);
+  font-size: 14px;
+}
+footer a { color: var(--gris); }
+.epoques { margin-top: 12px; }
+.epoques a, .epoques strong { margin-right: 6px; }
+
+/* Sous 640 pixels, la barre de navigation passe sous le titre au lieu
+   de rester a cote : c'est la media query qui le decide. */
+@media (max-width: 640px) {
+  header .conteneur { flex-direction: column; align-items: flex-start; gap: 8px; }
+  nav a { margin-left: 0; margin-right: 18px; }
+}
+</style>
+</head>
+
+<body>
+
+<header>
+  <div class="conteneur">
+    <span class="marque">Cours NSI / SNT / Socio</span>
+    <nav>
+      <a href="#">NSI</a>
+      <a href="#">SNT</a>
+      <a href="#">L3 Socio</a>
+      <a href="#">Ressources</a>
+    </nav>
+  </div>
+</header>
+
+<main class="conteneur">
+
+  <h1>Cours, exercices et ressources</h1>
+
+  <p class="chapo">
+    Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
+    et d'algorithmes des graphes en L3 de sociologie quantitative.
+  </p>
+
+  <div class="grille">
+    <a class="carte" href="#">
+      <h2>NSI Premiere</h2>
+      <p>Numerique et Sciences Informatiques</p>
+    </a>
+    <a class="carte" href="#">
+      <h2>NSI Terminale</h2>
+      <p>Numerique et Sciences Informatiques</p>
+    </a>
+    <a class="carte" href="#">
+      <h2>SNT</h2>
+      <p>Sciences Numeriques et Technologie</p>
+    </a>
+    <a class="carte" href="#">
+      <h2>L3 Sociologie</h2>
+      <p>Algorithmes des graphes</p>
+    </a>
+  </div>
+
+</main>
+
+<footer>
+  <div class="conteneur">
+    Lycee Charlotte Perriand
+    <div class="epoques">
+      <a href="1995.html">1995</a>
+      <a href="1998.html">1998</a>
+      <a href="2002.html">2002</a>
+      <a href="2005.html">2005</a>
+      <a href="2010.html">2010</a>
+      <strong>2020</strong>
+      <a href="2026.html">2026</a>
+    </div>
+  </div>
+</footer>
+
+</body>
+</html>

sequences/web/epoques/2026.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Cours NSI / SNT / Socio</title>
+
+<!-- 2026. La page s'adapte maintenant a deux choses en plus de la largeur de
+     l'ecran : la preference d'affichage de la personne, clair ou sombre, et son
+     eventuel besoin de reduire les animations. Ce ne sont plus des reglages du
+     site, ce sont des reglages de l'utilisateur, que la page vient lire.
+
+     Le reste de la mode : de tres grandes typographies, des tailles fluides qui
+     n'ont plus de valeur fixe, et des elements qui apparaissent au defilement.
+
+     Une question pour la classe : parmi tout ce que vous voyez ici, qu'est-ce
+     qui sert vraiment a lire le contenu ? -->
+
+<style>
+:root {
+  color-scheme: light dark;
+  --fond: #0e1116;
+  --panneau: #161b22;
+  --texte: #e6edf3;
+  --gris: #8b949e;
+  --trait: #262d36;
+  --accent: #5fd08a;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --fond: #fbfcfd; --panneau: #ffffff; --texte: #131820;
+    --gris: #5b6672; --trait: #e2e6ea; --accent: #1f7a4d;
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--fond);
+  color: var(--texte);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: clamp(16px, 1.1vw + 13px, 19px);
+  line-height: 1.65;
+}
+.conteneur { width: min(1120px, 90vw); margin: 0 auto; }
+
+header {
+  position: sticky; top: 0; z-index: 10;
+  backdrop-filter: blur(10px);
+  background: color-mix(in srgb, var(--fond) 80%, transparent);
+  border-bottom: 1px solid var(--trait);
+  padding: 12px 0;
+}
+header .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
+.marque { font-weight: 650; letter-spacing: -0.01em; }
+nav a { color: var(--gris); text-decoration: none; margin-left: 20px; font-size: 0.9em; }
+nav a:hover { color: var(--accent); }
+
+h1 {
+  font-size: clamp(38px, 7vw, 76px);
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  font-weight: 680;
+  margin: clamp(48px, 9vw, 104px) 0 20px 0;
+  max-width: 16ch;
+}
+.chapo { font-size: 1.15em; color: var(--gris); max-width: 58ch; margin: 0 0 clamp(40px, 7vw, 80px) 0; }
+
+.grille {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 14px;
+  margin-bottom: 96px;
+}
+.carte {
+  background: var(--panneau);
+  border: 1px solid var(--trait);
+  border-radius: 16px;
+  padding: 26px;
+  color: inherit; text-decoration: none; display: block;
+  transition: border-color 0.2s ease, transform 0.2s ease;
+}
+.carte:hover { border-color: var(--accent); transform: translateY(-3px); }
+.carte h2 { font-size: 1em; margin: 0 0 6px 0; }
+.carte p { margin: 0; color: var(--gris); font-size: 0.9em; }
+
+/* Apparition au defilement. La preference systeme "reduire les animations"
+   est respectee juste en dessous : sans cela, la page serait penible pour
+   les personnes sensibles au mouvement. */
+.apparait { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
+.apparait.visible { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  .apparait { opacity: 1; transform: none; transition: none; }
+  .carte:hover { transform: none; }
+}
+
+footer { border-top: 1px solid var(--trait); padding: 30px 0 60px 0; color: var(--gris); font-size: 0.85em; }
+footer a { color: var(--gris); }
+.epoques { margin-top: 12px; }
+.epoques a, .epoques strong { margin-right: 8px; }
+</style>
+</head>
+
+<body>
+
+<header>
+  <div class="conteneur">
+    <span class="marque">Cours NSI / SNT / Socio</span>
+    <nav>
+      <a href="#">NSI</a>
+      <a href="#">SNT</a>
+      <a href="#">L3 Socio</a>
+      <a href="#">Ressources</a>
+    </nav>
+  </div>
+</header>
+
+<main class="conteneur">
+
+  <h1 class="apparait">Cours, exercices et ressources</h1>
+
+  <p class="chapo apparait">
+    Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
+    et d'algorithmes des graphes en L3 de sociologie quantitative.
+  </p>
+
+  <div class="grille">
+    <a class="carte apparait" href="#"><h2>NSI Premiere</h2><p>Numerique et Sciences Informatiques</p></a>
+    <a class="carte apparait" href="#"><h2>NSI Terminale</h2><p>Numerique et Sciences Informatiques</p></a>
+    <a class="carte apparait" href="#"><h2>SNT</h2><p>Sciences Numeriques et Technologie</p></a>
+    <a class="carte apparait" href="#"><h2>L3 Sociologie</h2><p>Algorithmes des graphes</p></a>
+  </div>
+
+</main>
+
+<footer>
+  <div class="conteneur">
+    Lycee Charlotte Perriand
+    <div class="epoques">
+      <a href="1995.html">1995</a>
+      <a href="1998.html">1998</a>
+      <a href="2002.html">2002</a>
+      <a href="2005.html">2005</a>
+      <a href="2010.html">2010</a>
+      <a href="2020.html">2020</a>
+      <strong>2026</strong>
+    </div>
+  </div>
+</footer>
+
+<script>
+const observateur = new IntersectionObserver((entrees) => {
+  for (const e of entrees) {
+    if (e.isIntersecting) { e.target.classList.add("visible"); observateur.unobserve(e.target); }
+  }
+}, { threshold: 0.15 });
+document.querySelectorAll(".apparait").forEach(el => observateur.observe(el));
+</script>
+
+</body>
+</html>