lrdlg
298 lines
8.0 KiB
CSS
298 lines
8.0 KiB
CSS
/* ==================================================================
|
|
Jeux du module A — 2e différenciée
|
|
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
|
Les jeux sont conçus pour la projection au TBI : cibles larges,
|
|
contrastes francs, aucun texte sous 0,85 rem.
|
|
================================================================== */
|
|
|
|
/* ---------- séances affichées une par une ---------- */
|
|
|
|
section[hidden] { display: none; }
|
|
|
|
/* ---------- plan et objectifs de la séance ---------- */
|
|
|
|
ol.plan {
|
|
counter-reset: s;
|
|
list-style: none;
|
|
padding: 0;
|
|
max-width: var(--lecture);
|
|
}
|
|
ol.plan li {
|
|
counter-increment: s;
|
|
position: relative;
|
|
padding: .45rem 0 .45rem 3rem;
|
|
border-bottom: 1px solid var(--trait);
|
|
}
|
|
ol.plan li::before {
|
|
content: counter(s);
|
|
position: absolute;
|
|
left: 0;
|
|
top: .45rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
background: var(--encre);
|
|
color: var(--papier);
|
|
font-size: .9rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
ul.but { list-style: none; padding: 0; max-width: var(--lecture); }
|
|
ul.but li { padding: .35rem 0 .35rem 1.6rem; position: relative; }
|
|
ul.but li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: .95rem;
|
|
width: .7rem;
|
|
height: .7rem;
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* ---------- carte d'un jeu ---------- */
|
|
|
|
.atelier {
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
margin: 1.2rem 0;
|
|
background: var(--blanc);
|
|
overflow: hidden;
|
|
}
|
|
.atelier > h4 {
|
|
margin: 0;
|
|
padding: .6rem 1rem;
|
|
background: var(--encre);
|
|
color: var(--papier);
|
|
font-family: var(--police-titre);
|
|
font-size: .95rem;
|
|
font-weight: 700;
|
|
display: flex;
|
|
gap: .6rem;
|
|
align-items: baseline;
|
|
}
|
|
.atelier > h4 .num {
|
|
background: var(--accent);
|
|
color: var(--encre);
|
|
font-size: .78rem;
|
|
padding: .05rem .45rem;
|
|
border-radius: .2rem;
|
|
}
|
|
.atelier .corps { padding: 1rem; }
|
|
.consigne { margin: 0 0 .9rem; font-size: .95rem; max-width: var(--lecture); }
|
|
|
|
/* ---------- barre d'état d'un jeu ---------- */
|
|
|
|
.barre {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .7rem 1.4rem;
|
|
align-items: center;
|
|
margin: .2rem 0 .9rem;
|
|
font-size: .95rem;
|
|
}
|
|
.cible-txt { font-weight: 700; font-size: 1.05rem; }
|
|
.score { color: var(--encre-douce); font-size: .9rem; }
|
|
|
|
/* ---------- boutons de jeu ---------- */
|
|
|
|
.vf button,
|
|
.qcm .choix button,
|
|
.paires button,
|
|
.liste button,
|
|
.etape {
|
|
font: inherit;
|
|
background: var(--blanc);
|
|
color: var(--encre);
|
|
border: 2px solid var(--encre);
|
|
border-radius: .3rem;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
/* ---------- aire de pions (jeu des nombres) ---------- */
|
|
|
|
.aire {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 22rem;
|
|
background: var(--papier);
|
|
border: 2px solid var(--trait-fort);
|
|
border-radius: .4rem;
|
|
overflow: hidden;
|
|
touch-action: none;
|
|
}
|
|
.pion {
|
|
position: absolute;
|
|
width: 3.2rem;
|
|
height: 3.2rem;
|
|
line-height: 3.2rem;
|
|
text-align: center;
|
|
font-family: var(--police-titre);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
background: var(--blanc);
|
|
color: var(--encre);
|
|
border: 2px solid var(--encre);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
padding: 0;
|
|
}
|
|
.pion.fait { background: var(--juste); border-color: var(--juste); color: #fff; }
|
|
.pion.actif { background: var(--cible); border-color: var(--cible); }
|
|
|
|
.rate { animation: secousse .25s; }
|
|
@keyframes secousse { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
|
|
|
|
/* ---------- double-clic : les douze boîtes ---------- */
|
|
|
|
.boites {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: .7rem;
|
|
max-width: 34rem;
|
|
}
|
|
.boite {
|
|
aspect-ratio: 1 / 1;
|
|
border: 2px solid var(--encre);
|
|
border-radius: .3rem;
|
|
background: var(--blanc);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.boite.ouverte { background: var(--juste); border-color: var(--juste); }
|
|
.boite .forme { width: 52%; height: 52%; opacity: 0; }
|
|
.boite.ouverte .forme { background: #fff; opacity: 1; border-radius: 50%; }
|
|
|
|
/* ---------- glisser-déposer dans des bacs ---------- */
|
|
|
|
.tri { display: flex; flex-wrap: wrap; gap: 1.2rem; }
|
|
.reserve {
|
|
flex: 1 1 16rem;
|
|
min-height: 8rem;
|
|
padding: .6rem;
|
|
border: 2px dashed var(--trait-fort);
|
|
border-radius: .4rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
align-content: flex-start;
|
|
}
|
|
.bacs { flex: 2 1 22rem; display: flex; gap: .8rem; flex-wrap: wrap; }
|
|
.bac {
|
|
flex: 1 1 7rem;
|
|
min-height: 8rem;
|
|
border: 2px solid var(--encre);
|
|
border-radius: .4rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
align-content: flex-start;
|
|
padding: .5rem;
|
|
cursor: pointer;
|
|
}
|
|
.bac .titre {
|
|
flex: 1 0 100%;
|
|
font-size: .85rem;
|
|
text-align: center;
|
|
color: var(--encre-douce);
|
|
}
|
|
.bac.vise { background: var(--cible-fond); border-color: var(--cible); }
|
|
|
|
.jeton {
|
|
font: inherit;
|
|
padding: .4rem .65rem;
|
|
background: var(--blanc);
|
|
border: 2px solid var(--encre);
|
|
border-radius: .3rem;
|
|
cursor: grab;
|
|
user-select: none;
|
|
font-size: .88rem;
|
|
touch-action: none;
|
|
}
|
|
/* Sélection au clic : alternative au glisser pour qui ne maîtrise pas
|
|
encore le maintien du bouton, et seul moyen au clavier. */
|
|
.jeton.choisi { background: var(--cible); border-color: var(--cible); }
|
|
.jeton.pris {
|
|
position: fixed;
|
|
z-index: 99;
|
|
pointer-events: none;
|
|
cursor: grabbing;
|
|
box-shadow: 0 6px 14px rgba(22, 48, 43, .3);
|
|
}
|
|
.jeton .glyphe { display: block; width: 2rem; height: 2rem; }
|
|
|
|
/* ---------- remise en ordre ---------- */
|
|
|
|
.etapes { display: flex; flex-direction: column; gap: .5rem; max-width: 42rem; }
|
|
.etape { padding: .5rem .75rem; }
|
|
.etape.placee { background: var(--juste); border-color: var(--juste); color: #fff; cursor: default; }
|
|
.rang { display: inline-block; min-width: 1.6rem; font-weight: 700; }
|
|
|
|
/* ---------- vrai ou faux ---------- */
|
|
|
|
.vf { max-width: var(--lecture); }
|
|
.vf .ligne {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
align-items: center;
|
|
padding: .5rem 0;
|
|
border-bottom: 1px solid var(--trait);
|
|
}
|
|
.vf .txt { flex: 1 1 18rem; }
|
|
.vf .verdict { font-size: .85rem; flex: 1 1 100%; }
|
|
.vf button { padding: .25rem .8rem; }
|
|
.vf button.choisi { background: var(--encre); color: var(--papier); }
|
|
|
|
.juste { color: var(--juste); }
|
|
.faux { color: var(--erreur); }
|
|
|
|
/* ---------- questions à choix ---------- */
|
|
|
|
.qcm { max-width: var(--lecture); }
|
|
.qcm .q { font-weight: 700; margin: .2rem 0 .6rem; }
|
|
.qcm .choix { display: flex; flex-wrap: wrap; gap: .5rem; }
|
|
.qcm .choix button { padding: .4rem .85rem; }
|
|
.qcm .choix button.bon { background: var(--juste); border-color: var(--juste); color: #fff; }
|
|
.qcm .choix button.mauvais { background: var(--erreur); border-color: var(--erreur); color: #fff; }
|
|
.qcm .retour { margin-top: .7rem; font-size: .9rem; min-height: 1.4rem; }
|
|
|
|
/* ---------- paires à relier ---------- */
|
|
|
|
.paires { display: flex; gap: 1rem; flex-wrap: wrap; max-width: var(--lecture); }
|
|
.paires .col { flex: 1 1 13rem; display: flex; flex-direction: column; gap: .45rem; }
|
|
.paires button { font-size: .88rem; padding: .45rem .7rem; }
|
|
.paires button.choisi { background: var(--cible); border-color: var(--cible); }
|
|
.paires button.liee { background: var(--juste); border-color: var(--juste); color: #fff; cursor: default; }
|
|
|
|
/* ---------- parcours de dossiers ---------- */
|
|
|
|
.chemin { max-width: 40rem; }
|
|
.chemin .fil {
|
|
font-size: .9rem;
|
|
color: var(--encre-douce);
|
|
margin-bottom: .6rem;
|
|
word-break: break-word;
|
|
}
|
|
.liste { display: flex; flex-direction: column; gap: .4rem; }
|
|
.liste button { padding: .45rem .7rem; }
|
|
.liste button.dossier::before { content: "[dossier] "; color: var(--encre-douce); font-size: .8rem; }
|
|
.liste button.fichier::before { content: "[fichier] "; color: var(--encre-douce); font-size: .8rem; }
|
|
|
|
/* ---------- schémas à zones ---------- */
|
|
|
|
figure.schema { margin: 0; max-width: 30rem; }
|
|
.zone { fill: var(--blanc); stroke: var(--encre); stroke-width: 2; cursor: pointer; }
|
|
.zone:hover { fill: var(--cible-fond); }
|
|
.zone.trouve { fill: var(--juste-fond); stroke: var(--juste); }
|
|
svg text { font-family: inherit; font-size: 11px; fill: var(--encre); pointer-events: none; }
|
|
|
|
@media print {
|
|
section[hidden] { display: block; }
|
|
.aire, .boites { display: none; }
|
|
}
|