lrdlg/2CInfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mise à niveau de tout le site

Browse Source
This commit is contained in:
lrdlg
2026-09-21 10:56:04 +02:00
parent 5c644d17fc
commit a489298897
36 changed files with 3667 additions and 929 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+103 -89
View File
@@ -3,66 +3,46 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Informatique en 2e | M. Courcelle</title>
<meta name="description" content="Choisis ta classe pour accéder au cours d'informatique de 2e secondaire.">
<!-- Pas d'indexation : page destinée aux élèves, pas au public. -->
<title>Mes cours | M. Courcelle</title>
<meta name="description" content="Choisis ta classe pour accéder à ton cours.">
<!-- Pas d'indexation : pages destinées aux élèves, pas au public. -->
<meta name="robots" content="noindex">
<!--
Mêmes polices que courcellematthi.eu pour garder une identité commune.
Si le réseau de l'école bloque Google Fonts, les polices de secours
prennent le relais sans casser la mise en page.
déclarées dans assets/theme.css prennent le relais sans casser la page.
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<!-- Jetons de couleur, typographie et composants communs à toute la plateforme. -->
<link rel="stylesheet" href="assets/theme.css">
<style>
/* ------------------------------------------------------------------
Jetons de design
Mode clair uniquement, comme le site principal.
Le vert #05BC8A n'est jamais utilisé pour du texte (contraste
insuffisant sur fond clair) : il sert de fond et de filet.
Chaque classe reçoit sa propre couleur pour que les élèves
repèrent leur côté d'un coup d'œil, même au fond de la classe
devant le TBI.
Mise en page propre à l'aiguillage : cinq tuiles pleine hauteur.
Les couleurs viennent de assets/theme.css (--tc-fond, --tc-trait…).
Pour ajouter une classe : un couple de jetons dans theme.css, une
règle .classe--xxx ici, et un bloc <a> dans le HTML plus bas.
------------------------------------------------------------------ */
:root {
--encre: #16302B; /* texte principal, vert très sombre */
--encre-douce: #3E5751; /* texte secondaire, contraste AA sur les deux fonds */
--papier: #FBFCFB; /* fond de l'en-tête et du pied */
--diff-fond: #DDF5EC; /* 2e différenciée : dérivé du vert de marque */
--diff-trait: #05BC8A;
--comm-fond: #FDF0CF; /* 2e commune : jaune chaud, bien distinct du vert */
--comm-trait: #E0A100;
--police-titre: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
--police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
/* La page occupe exactement l'écran : en-tête, deux moitiés, pied.
height: 100% plutôt que 100vh pour éviter le débordement
des barres d'adresse mobiles. */
html, body { height: 100%; margin: 0; }
/* min-height et non height : avec cinq classes, la page peut dépasser
l'écran sur un petit appareil et doit alors défiler. */
html { height: 100%; }
body {
min-height: 100%;
display: flex;
flex-direction: column;
background: var(--papier);
color: var(--encre);
font-family: var(--police-texte);
font-size: 1.125rem;
line-height: 1.5;
}
/* ------------------------------------------------------------------
En-tête : sobre, il ne fait qu'identifier le cours et le prof.
En-tête : sobre, il identifie seulement le prof et l'année.
------------------------------------------------------------------ */
.entete {
.accueil-entete {
padding: 1.25rem 1.5rem;
display: flex;
flex-wrap: wrap;
@@ -71,7 +51,7 @@
gap: 0.25rem 1.5rem;
}
.entete h1 {
.accueil-entete h1 {
margin: 0;
font-family: var(--police-titre);
font-size: 1.25rem;
@@ -79,84 +59,97 @@
letter-spacing: -0.01em;
}
.entete p {
.accueil-entete p {
margin: 0;
max-width: none;
color: var(--encre-douce);
font-size: 1rem;
}
/* ------------------------------------------------------------------
Aiguillage : deux moitiés côte à côte.
Chaque moitié est un lien entier, pour offrir la plus grande
zone de clic possible (doigt sur le TBI, souris imprécise).
Aiguillage : grille de 6 colonnes sur grand écran.
Première ligne : le 1er degré (1re, 2e différenciée, 2e commune),
chaque case occupe 2 colonnes, donc un tiers de la largeur.
Seconde ligne : le qualifiant (3e et 4e TQ), chaque case occupe
3 colonnes, donc la moitié de la largeur.
Chaque case est un lien entier, pour offrir la plus grande zone
de clic possible (doigt sur le TBI, souris imprécise).
------------------------------------------------------------------ */
.aiguillage {
flex: 1;
display: flex;
min-height: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(15rem, 1fr);
}
.classe--tc, .classe--diff, .classe--comm { grid-column: span 2; }
.classe--ts, .classe--ae { grid-column: span 3; }
.classe {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem 1.5rem 2.5rem;
padding: 2rem 1.5rem 1.75rem;
color: var(--encre);
text-decoration: none;
position: relative;
}
.classe--diff { background: var(--diff-fond); }
.classe--comm { background: var(--comm-fond); }
/* Filet de couleur vive en haut de chaque moitié */
/* Filet de couleur vive en haut de chaque case */
.classe::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 0.5rem;
}
.classe--diff::before { background: var(--diff-trait); }
.classe--comm::before { background: var(--comm-trait); }
/* Le nom de la classe est l'élément fort de la page :
très grand, pour être lisible depuis le fond du local. */
.classe--tc { background: var(--tc-fond); }
.classe--tc::before { background: var(--tc-trait); }
.classe--diff { background: var(--diff-fond); }
.classe--diff::before { background: var(--diff-trait); }
.classe--comm { background: var(--comm-fond); }
.classe--comm::before { background: var(--comm-trait); }
.classe--ts { background: var(--ts-fond); }
.classe--ts::before { background: var(--ts-trait); }
.classe--ae { background: var(--ae-fond); }
.classe--ae::before { background: var(--ae-trait); }
/* Le nom de la classe est l'élément fort de la page.
Taille calculée pour que le mot le plus long (« différenciée »,
12 caractères à chasse fixe) tienne sur une ligne dans un tiers
de largeur d'écran. Les noms en deux mots (« tronc commun »,
« Technique sociale ») peuvent passer sur deux lignes. */
.classe__nom {
margin: 0;
font-family: var(--police-titre);
font-weight: 700;
/* Taille calculée pour que « différenciée » (12 caractères à chasse
fixe) tienne sur une ligne dans une demi-largeur d'écran. */
font-size: clamp(2.25rem, 5vw, 4.5rem);
line-height: 0.95;
font-size: clamp(2rem, 3.6vw, 3.25rem);
line-height: 1;
letter-spacing: -0.03em;
hyphens: none;
border: 0;
padding: 0;
}
/* « 2e » sur sa propre ligne, plus discret que le nom de la filière */
/* Niveau (« 2e », « 3e TQ ») sur sa propre ligne, plus discret */
.classe__niveau {
display: block;
margin-bottom: 0.1em;
color: var(--encre-douce);
}
.classe__cours {
margin: 1rem 0 0;
font-size: clamp(1.125rem, 1.8vw, 1.375rem);
margin: 0.75rem 0 0;
max-width: none;
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
font-weight: 600;
}
.classe__detail {
margin: 0.25rem 0 0;
max-width: 34ch;
color: var(--encre-douce);
}
/* Faux bouton : purement visuel, c'est toute la moitié qui est cliquable */
/* Faux bouton : purement visuel, c'est toute la case qui est cliquable */
.classe__action {
align-self: flex-start;
margin-top: 1.5rem;
padding: 0.7rem 1.25rem;
margin-top: 1.25rem;
padding: 0.6rem 1.15rem;
border: 2px solid var(--encre);
border-radius: 0.5rem;
font-weight: 600;
@@ -178,56 +171,77 @@
/* ------------------------------------------------------------------
Pied de page
------------------------------------------------------------------ */
.pied {
.accueil-pied {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
color: var(--encre-douce);
}
/* ------------------------------------------------------------------
Mobile : les deux moitiés s'empilent.
Mobile : les cinq cases s'empilent.
Même point de rupture que courcellematthi.eu (56rem).
------------------------------------------------------------------ */
@media (max-width: 56rem) {
.aiguillage { flex-direction: column; }
.classe { padding: 1.75rem 1.25rem 2rem; }
.classe__nom { font-size: clamp(2rem, 10vw, 3.5rem); }
.aiguillage {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.classe--tc, .classe--diff, .classe--comm,
.classe--ts, .classe--ae { grid-column: auto; }
.classe { padding: 1.75rem 1.25rem 1.5rem; }
.classe__nom { font-size: clamp(2rem, 9.5vw, 3.25rem); }
}
</style>
</head>
<body>
<header class="entete">
<h1>Informatique en 2e</h1>
<header class="accueil-entete">
<h1>Mes cours</h1>
<p>M. Courcelle, année 2026-2027</p>
</header>
<!--
Les liens sont relatifs ("differenciee/" et non "/differenciee/") :
la page fonctionne donc à la racine d'un sous-domaine comme dans
un sous-dossier (courcellematthi.eu/2e/), sans rien modifier.
Les liens sont relatifs ("2e-commune/index.html" et non "/2e-commune/…") :
la page fonctionne à la racine d'un sous-domaine, dans un sous-dossier
(courcellematthi.eu/cours/) et depuis une clé USB, sans rien modifier.
Chaque lien mène à l'index de la classe, qui liste ses modules.
-->
<main class="aiguillage" aria-label="Choix de la classe">
<a class="classe classe--diff" href="differenciee/">
<h2 class="classe__nom"><span class="classe__niveau">2e</span>différenciée</h2>
<p class="classe__cours">Initiation à l'informatique</p>
<p class="classe__detail">Pour les élèves de 2e différenciée.</p>
<a class="classe classe--tc" href="1re-numerique/index.html">
<h2 class="classe__nom"><span class="classe__niveau">1re</span>tronc commun</h2>
<p class="classe__cours">Numérique</p>
<span class="classe__action">Ouvrir mon cours</span>
</a>
<a class="classe classe--comm" href="commune/">
<a class="classe classe--diff" href="2e-differenciee/index.html">
<h2 class="classe__nom"><span class="classe__niveau">2e</span>différenciée</h2>
<p class="classe__cours">Initiation à l'informatique</p>
<span class="classe__action">Ouvrir mon cours</span>
</a>
<a class="classe classe--comm" href="2e-commune/index.html">
<h2 class="classe__nom"><span class="classe__niveau">2e</span>commune</h2>
<p class="classe__cours">Informatique</p>
<p class="classe__detail">Pour les élèves de 2e commune.</p>
<span class="classe__action">Ouvrir mon cours</span>
</a>
<a class="classe classe--ts" href="3tq-technique-sociale/index.html">
<h2 class="classe__nom"><span class="classe__niveau">3e TQ</span>Technique sociale</h2>
<p class="classe__cours">Traitement de texte</p>
<span class="classe__action">Ouvrir mon cours</span>
</a>
<a class="classe classe--ae" href="4tq-agent-education/index.html">
<h2 class="classe__nom"><span class="classe__niveau">4e TQ</span>Agent d'éducation</h2>
<p class="classe__cours">Traitement de texte</p>
<span class="classe__action">Ouvrir mon cours</span>
</a>
</main>
<footer class="pied">
Tu ne sais pas dans quelle classe tu es ? Regarde ton horaire ou demande à ton professeur.
<footer class="accueil-pied">
Tu ne sais pas quelle case choisir ? Regarde ton horaire ou demande à ton professeur.
</footer>
</body>