lrdlg
250 lines
9.0 KiB
HTML
250 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<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
|
|
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">
|
|
<script defer src="https://umami.ghostinthemachine.fr/script.js" data-website-id="f9c9d0cf-0ac8-4b49-8cf3-5aff5019b6f2"></script>
|
|
|
|
<style>
|
|
/* ------------------------------------------------------------------
|
|
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.
|
|
------------------------------------------------------------------ */
|
|
|
|
/* 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;
|
|
font-size: 1.125rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
En-tête : sobre, il identifie seulement le prof et l'année.
|
|
------------------------------------------------------------------ */
|
|
.accueil-entete {
|
|
padding: 1.25rem 1.5rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 0.25rem 1.5rem;
|
|
}
|
|
|
|
.accueil-entete h1 {
|
|
margin: 0;
|
|
font-family: var(--police-titre);
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.accueil-entete p {
|
|
margin: 0;
|
|
max-width: none;
|
|
color: var(--encre-douce);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
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: 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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding: 2rem 1.5rem 1.75rem;
|
|
color: var(--encre);
|
|
text-decoration: none;
|
|
position: relative;
|
|
}
|
|
|
|
/* Filet de couleur vive en haut de chaque case */
|
|
.classe::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 0 auto 0;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.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;
|
|
font-size: clamp(2rem, 3.6vw, 3.25rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.03em;
|
|
hyphens: none;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 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: 0.75rem 0 0;
|
|
max-width: none;
|
|
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Faux bouton : purement visuel, c'est toute la case qui est cliquable */
|
|
.classe__action {
|
|
align-self: flex-start;
|
|
margin-top: 1.25rem;
|
|
padding: 0.6rem 1.15rem;
|
|
border: 2px solid var(--encre);
|
|
border-radius: 0.5rem;
|
|
font-weight: 600;
|
|
background: var(--papier);
|
|
}
|
|
|
|
/* Survol et focus clavier : le bouton se remplit, même retour visuel
|
|
à la souris et au clavier. Pas d'animation, volontairement. */
|
|
@media (hover: hover) {
|
|
.classe:hover .classe__action { background: var(--encre); color: var(--papier); }
|
|
}
|
|
|
|
.classe:focus-visible {
|
|
outline: 4px solid var(--encre);
|
|
outline-offset: -8px;
|
|
}
|
|
.classe:focus-visible .classe__action { background: var(--encre); color: var(--papier); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Pied de page
|
|
------------------------------------------------------------------ */
|
|
.accueil-pied {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.875rem;
|
|
color: var(--encre-douce);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Mobile : les cinq cases s'empilent.
|
|
Même point de rupture que courcellematthi.eu (56rem).
|
|
------------------------------------------------------------------ */
|
|
@media (max-width: 56rem) {
|
|
.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="accueil-entete">
|
|
<h1>Mes cours</h1>
|
|
<p>M. Courcelle, année 2026-2027</p>
|
|
</header>
|
|
|
|
<!--
|
|
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--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--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>
|
|
<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="accueil-pied">
|
|
Tu ne sais pas quelle case choisir ? Regarde ton horaire ou demande à ton professeur.
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|