SNT/sequences/web/epoques/2026.html

<!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>