lrdlg
805 lines
27 KiB
CSS
805 lines
27 KiB
CSS
/* ==================================================================
|
|
Formation numérique — 1re tronc commun
|
|
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
|
------------------------------------------------------------------
|
|
Deux familles de pages partagent cette feuille :
|
|
- les pages de cours, projetées et suivies par les élèves ;
|
|
- les pages de pilotage, réservées à l'enseignant.
|
|
Composants issus de la maquette d'origine, rebranchés sur les
|
|
jetons de la plateforme. Deux classes ont été renommées pour ne pas
|
|
entrer en conflit avec le thème : .entete est devenue .carte-entete,
|
|
et .module est devenue .partie.
|
|
================================================================== */
|
|
|
|
/* ------------------------------------------------------------------
|
|
Alias de compatibilité
|
|
La maquette d'origine nommait ses couleurs --ink, --line, --blue…
|
|
Les pages en gardent quelques-unes dans des styles en ligne et dans
|
|
les schémas. Ces alias les font retomber sur les jetons du thème,
|
|
sans avoir à réécrire chaque attribut.
|
|
À terme, écrire directement les jetons de la plateforme.
|
|
------------------------------------------------------------------ */
|
|
.classe-tc {
|
|
--ink: var(--encre);
|
|
--muted: var(--encre-douce);
|
|
--blue: var(--accent-encre);
|
|
--navy: var(--encre);
|
|
--green: var(--juste);
|
|
--red: var(--erreur);
|
|
--card: var(--blanc);
|
|
--line: var(--trait);
|
|
--shadow: none;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Colonne large : tableaux de bord, rail de six onglets, grilles de
|
|
cartes. Trop à l'étroit dans la colonne de lecture standard.
|
|
------------------------------------------------------------------ */
|
|
.contenu--large,
|
|
.entete__interieur--large {
|
|
max-width: calc(74rem + 2 * var(--gouttiere));
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Titres : on reprend la chasse fixe de la plateforme, sans le filet
|
|
du thème qui n'a pas de sens à l'intérieur d'une carte.
|
|
------------------------------------------------------------------ */
|
|
.contenu h2,
|
|
.contenu h3 {
|
|
font-family: var(--police-titre);
|
|
font-weight: 700;
|
|
color: var(--encre); /* le thème colore h3 à l'accent : pas ici */
|
|
border: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Le thème borne les listes à la largeur de lecture : c'est ce qu'il
|
|
faut pour de la prose, pas pour une grille de cartes. */
|
|
.apercu, .etiquettes, .blocs, .answer-grid, .check, .steps, .accordeon { max-width: none; }
|
|
.card > h2:first-child,
|
|
.card > h3:first-child { margin-top: 0; }
|
|
.card h2 { font-size: 1.35rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
|
|
.card h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; color: var(--encre); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Chapeau, étiquettes et aperçu des activités
|
|
(ce que la maquette d'origine mettait dans sa bannière)
|
|
------------------------------------------------------------------ */
|
|
.etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
|
|
.etiquette {
|
|
background: var(--accent-fond);
|
|
color: var(--accent-encre);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 999px;
|
|
padding: .2rem .7rem;
|
|
font-size: .8rem;
|
|
font-weight: 600;
|
|
}
|
|
.etiquette--alerte { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
|
|
|
|
.apercu {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
|
gap: .6rem;
|
|
margin: 0 0 1.6rem;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.apercu li {
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-top: .3rem solid var(--accent);
|
|
border-radius: .5rem;
|
|
padding: .9rem .7rem;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: .9rem;
|
|
margin: 0;
|
|
}
|
|
.apercu svg {
|
|
display: block;
|
|
margin: 0 auto .4rem;
|
|
width: 1.7rem;
|
|
height: 1.7rem;
|
|
fill: none;
|
|
stroke: var(--accent-encre);
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
svg.i {
|
|
width: 1em; height: 1em; vertical-align: -.14em;
|
|
fill: none; stroke: currentColor;
|
|
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Tableau de bord de la séance
|
|
------------------------------------------------------------------ */
|
|
.dashboard {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: .7rem;
|
|
margin-bottom: 1.3rem;
|
|
}
|
|
.stat {
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
padding: .8rem .9rem;
|
|
}
|
|
.stat small { color: var(--encre-douce); font-weight: 600; font-size: .78rem; }
|
|
.stat strong {
|
|
display: block;
|
|
font-family: var(--police-titre);
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
margin-top: .2rem;
|
|
}
|
|
.stat.ok strong { color: var(--juste); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Chronomètre de pilotage
|
|
------------------------------------------------------------------ */
|
|
.chrono {
|
|
background: var(--encre);
|
|
color: var(--papier);
|
|
border-radius: .5rem;
|
|
padding: 1rem 1.1rem;
|
|
margin-bottom: 1.2rem;
|
|
display: grid;
|
|
gap: .8rem;
|
|
}
|
|
.chrono-haut { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: space-between; }
|
|
.pendule {
|
|
font-family: var(--police-titre);
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
.pendule small {
|
|
display: block;
|
|
font-family: var(--police-texte);
|
|
font-size: .7rem;
|
|
font-weight: 600;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
opacity: .75;
|
|
margin-top: .35rem;
|
|
}
|
|
.ecart {
|
|
font-size: .88rem;
|
|
font-weight: 600;
|
|
padding: .55rem .9rem;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .12);
|
|
border: 1px solid rgba(255, 255, 255, .28);
|
|
min-width: 15rem;
|
|
text-align: center;
|
|
}
|
|
.ecart.avance { background: var(--juste); border-color: var(--juste); color: #fff; }
|
|
.ecart.retard { background: var(--erreur); border-color: var(--erreur); color: #fff; }
|
|
.chrono .row button { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: var(--papier); }
|
|
.chrono .row button:hover { background: rgba(255, 255, 255, .24); }
|
|
.chrono .row button.go { background: var(--papier); border-color: var(--papier); color: var(--encre); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Rail d'activités
|
|
------------------------------------------------------------------ */
|
|
.navtabs {
|
|
display: grid;
|
|
gap: .5rem;
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
padding: .7rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
.navtabs.n6 { grid-template-columns: repeat(6, 1fr); }
|
|
.tab {
|
|
font: inherit;
|
|
border: 2px solid var(--trait);
|
|
background: var(--blanc);
|
|
border-radius: .4rem;
|
|
padding: .7rem .6rem;
|
|
font-weight: 600;
|
|
font-size: .9rem;
|
|
cursor: pointer;
|
|
color: var(--encre);
|
|
text-align: left;
|
|
position: relative;
|
|
}
|
|
.tab span {
|
|
display: block;
|
|
font-size: .72rem;
|
|
font-weight: 600;
|
|
color: var(--encre-douce);
|
|
margin-top: .2rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.tab:hover { border-color: var(--accent); }
|
|
.tab.active { background: var(--encre); color: var(--papier); border-color: var(--encre); }
|
|
.tab.active span { color: var(--papier); opacity: .75; }
|
|
/* Activité prévue au programme du jour */
|
|
.tab.prevue::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: .7rem; right: .7rem; bottom: -2px;
|
|
height: 4px;
|
|
border-radius: 99px;
|
|
background: var(--cible);
|
|
}
|
|
|
|
.panel { display: none; }
|
|
.panel.active { display: block; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Cartes et blocs de texte
|
|
------------------------------------------------------------------ */
|
|
.card {
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
padding: 1.3rem 1.4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.muted { color: var(--encre-douce); line-height: 1.6; }
|
|
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
|
|
|
|
/* En-tête interne d'une carte : titre à gauche, durée à droite.
|
|
(Renommée depuis .entete, qui appartient au thème.) */
|
|
.carte-entete {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: .9rem;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
margin-bottom: .9rem;
|
|
}
|
|
.carte-entete p { margin: .2rem 0 0; max-width: none; }
|
|
|
|
.btn {
|
|
font: inherit;
|
|
border: 1px solid var(--accent-encre);
|
|
border-radius: .4rem;
|
|
padding: .5rem .95rem;
|
|
font-weight: 600;
|
|
font-size: .92rem;
|
|
cursor: pointer;
|
|
background: var(--accent-fond);
|
|
color: var(--accent-encre);
|
|
}
|
|
.btn:hover { background: var(--blanc); }
|
|
.btn.primary { background: var(--accent-encre); border-color: var(--accent-encre); color: var(--papier); }
|
|
.btn.primary:hover { background: var(--encre); border-color: var(--encre); }
|
|
.btn.soft { background: var(--blanc); border-color: var(--trait-fort); color: var(--encre); }
|
|
.btn.soft:hover { border-color: var(--encre); }
|
|
.btn:disabled { opacity: .5; cursor: default; }
|
|
|
|
.score {
|
|
display: inline-block;
|
|
background: var(--accent-fond);
|
|
color: var(--accent-encre);
|
|
border-radius: 999px;
|
|
padding: .3rem .75rem;
|
|
font-weight: 600;
|
|
font-size: .85rem;
|
|
white-space: nowrap;
|
|
}
|
|
.feedback { min-height: 1.9rem; margin-top: .8rem; font-weight: 600; }
|
|
|
|
/* Consigne projetée : c'est l'élément le plus lu de la page. */
|
|
.consigne {
|
|
background: var(--accent-fond);
|
|
border: 2px solid var(--accent);
|
|
border-radius: .5rem;
|
|
padding: 1.1rem 1.3rem;
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
margin: 1rem 0;
|
|
max-width: none;
|
|
}
|
|
.consigne small {
|
|
display: block;
|
|
font-family: var(--police-titre);
|
|
text-transform: uppercase;
|
|
letter-spacing: .1em;
|
|
font-size: .7rem;
|
|
font-weight: 700;
|
|
color: var(--accent-encre);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.info {
|
|
border-left: .25rem solid var(--trait-fort);
|
|
background: var(--papier);
|
|
border-radius: 0 .4rem .4rem 0;
|
|
padding: .8rem 1rem;
|
|
color: var(--encre-douce);
|
|
font-size: .95rem;
|
|
line-height: 1.6;
|
|
margin-top: 1rem;
|
|
max-width: none;
|
|
}
|
|
.info b { color: var(--encre); }
|
|
.info.alerte { border-color: var(--erreur); background: var(--erreur-fond); color: var(--erreur); }
|
|
.info.alerte b { color: var(--erreur); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Saisie collective et tri en colonnes
|
|
------------------------------------------------------------------ */
|
|
.saisie { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
|
|
.saisie input {
|
|
flex: 1;
|
|
min-width: 13rem;
|
|
padding: .65rem .8rem;
|
|
border: 2px solid var(--trait-fort);
|
|
border-radius: .4rem;
|
|
}
|
|
.saisie input:focus { border-color: var(--accent); outline: none; }
|
|
.saisie select, .envoi select, .cases select {
|
|
font: inherit;
|
|
padding: .65rem .8rem;
|
|
border: 2px solid var(--trait-fort);
|
|
border-radius: .4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .7rem; }
|
|
.colonne {
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
background: var(--papier);
|
|
min-height: 9rem;
|
|
padding: .8rem;
|
|
}
|
|
.colonne h3 {
|
|
font-size: .85rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0 0 .6rem;
|
|
padding-bottom: .5rem;
|
|
border-bottom: 1px solid var(--trait);
|
|
color: var(--accent-encre);
|
|
}
|
|
.colonne h3 em { font-style: normal; color: var(--encre-douce); font-size: .78rem; }
|
|
.colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-width: none; }
|
|
.colonne li {
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-radius: .35rem;
|
|
padding: .4rem .6rem;
|
|
font-size: .88rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: .4rem;
|
|
margin: 0;
|
|
}
|
|
.colonne li button { background: none; border: 0; color: var(--trait-fort); cursor: pointer; padding: 0 .2rem; font-weight: 700; }
|
|
.colonne li button:hover { color: var(--erreur); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Accordéon
|
|
------------------------------------------------------------------ */
|
|
.accordeon { display: grid; gap: .6rem; }
|
|
.item { border: 1px solid var(--trait); border-radius: .5rem; background: var(--blanc); overflow: hidden; }
|
|
.item > button {
|
|
font: inherit;
|
|
width: 100%;
|
|
display: flex;
|
|
gap: .8rem;
|
|
align-items: flex-start;
|
|
text-align: left;
|
|
background: none;
|
|
border: 0;
|
|
padding: .9rem 1.1rem;
|
|
cursor: pointer;
|
|
color: var(--encre);
|
|
}
|
|
.item > button:hover { background: var(--accent-fond); }
|
|
.item .n {
|
|
width: 1.8rem; height: 1.8rem; flex: none;
|
|
border-radius: .35rem;
|
|
background: var(--accent-fond);
|
|
color: var(--accent-encre);
|
|
font-family: var(--police-titre);
|
|
font-weight: 700;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: .82rem;
|
|
}
|
|
.item .t { font-weight: 600; font-size: 1.02rem; flex: 1; }
|
|
.item .plus {
|
|
color: var(--encre-douce);
|
|
font-size: .72rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
padding-top: .3rem;
|
|
}
|
|
.item .corps { display: none; padding: 0 1.1rem 1rem 3.7rem; color: var(--encre-douce); line-height: 1.6; }
|
|
.item.ouvert .corps { display: block; }
|
|
.item.ouvert { border-color: var(--accent); }
|
|
.item.ouvert .n { background: var(--accent-encre); color: var(--papier); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Question projetée, avec réponse à dévoiler
|
|
------------------------------------------------------------------ */
|
|
.qcard {
|
|
border: 2px solid var(--accent);
|
|
border-radius: .5rem;
|
|
background: var(--accent-fond);
|
|
padding: 1.4rem 1.5rem;
|
|
}
|
|
.qtag {
|
|
display: inline-block;
|
|
background: var(--blanc);
|
|
color: var(--accent-encre);
|
|
border-radius: 999px;
|
|
padding: .25rem .7rem;
|
|
font-size: .75rem;
|
|
font-weight: 600;
|
|
margin-bottom: .6rem;
|
|
}
|
|
.qtag.cle { background: var(--cible-fond); color: var(--encre); border: 1px solid var(--cible); }
|
|
.qtxt {
|
|
font-family: var(--police-titre);
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
letter-spacing: -.02em;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.answer-grid { display: grid; gap: .5rem; }
|
|
.answer {
|
|
font: inherit;
|
|
border: 2px solid var(--trait-fort);
|
|
background: var(--blanc);
|
|
border-radius: .4rem;
|
|
padding: .6rem .85rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
.answer.ok { border-color: var(--juste); background: var(--juste-fond); }
|
|
.reveal { display: none; margin-top: 1rem; border-top: 2px dashed var(--accent); padding-top: .9rem; }
|
|
.reveal.on { display: block; }
|
|
.verdict { font-weight: 700; color: var(--juste); margin-bottom: .5rem; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Étapes guidées
|
|
------------------------------------------------------------------ */
|
|
.steps { display: grid; gap: .6rem; }
|
|
.step {
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
background: var(--blanc);
|
|
padding: 1rem 1.2rem;
|
|
display: flex;
|
|
gap: .9rem;
|
|
align-items: flex-start;
|
|
opacity: .45;
|
|
}
|
|
.step.on { opacity: 1; border-color: var(--accent); }
|
|
.step.fait { opacity: 1; }
|
|
.step .n {
|
|
width: 2.1rem; height: 2.1rem; flex: none;
|
|
border-radius: .4rem;
|
|
background: var(--papier);
|
|
color: var(--encre-douce);
|
|
font-family: var(--police-titre);
|
|
font-weight: 700;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.step.on .n { background: var(--accent-encre); color: var(--papier); }
|
|
.step.fait .n { background: var(--juste-fond); color: var(--juste); }
|
|
.step h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
|
|
.step p { margin: 0; color: var(--encre-douce); font-size: .95rem; line-height: 1.55; max-width: none; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Figures et schémas
|
|
------------------------------------------------------------------ */
|
|
figure { margin: 0 0 1.1rem; max-width: none; }
|
|
figure svg {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
}
|
|
figcaption { font-size: .88rem; color: var(--encre-douce); margin-top: .6rem; line-height: 1.55; }
|
|
.figpetit { max-width: 35rem; margin: 0 auto .9rem; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Trace écrite à recopier
|
|
------------------------------------------------------------------ */
|
|
.trace {
|
|
border: 2px solid var(--accent);
|
|
background: var(--accent-fond);
|
|
border-radius: .5rem;
|
|
padding: 1.5rem 1.7rem;
|
|
font-size: 1.1rem;
|
|
line-height: 1.85;
|
|
}
|
|
.trace h3 { margin: 0 0 .7rem; font-size: 1.25rem; }
|
|
.trace p { margin: 0 0 .5em; max-width: none; }
|
|
.trace code { background: var(--blanc); border: 1px solid var(--accent); border-radius: .25rem; padding: .05rem .4rem; font-size: .92em; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Liste à cocher
|
|
------------------------------------------------------------------ */
|
|
.check { display: grid; gap: .5rem; }
|
|
.check label {
|
|
display: flex;
|
|
gap: .8rem;
|
|
align-items: flex-start;
|
|
border: 1px solid var(--trait);
|
|
border-radius: .45rem;
|
|
background: var(--blanc);
|
|
padding: .8rem 1rem;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
.check label:hover { border-color: var(--accent); }
|
|
.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--juste); flex: none; }
|
|
.check input:checked + span { color: var(--juste); font-weight: 600; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Grille de correction
|
|
------------------------------------------------------------------ */
|
|
table.grille { width: 100%; border-collapse: collapse; font-size: .92rem; max-width: none; }
|
|
table.grille th, table.grille td { border: 1px solid var(--trait); padding: .6rem .8rem; text-align: left; }
|
|
table.grille th {
|
|
background: var(--papier);
|
|
font-family: var(--police-titre);
|
|
font-weight: 700;
|
|
font-size: .75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
color: var(--encre-douce);
|
|
border-bottom: 1px solid var(--trait);
|
|
}
|
|
table.grille td.masque { color: transparent; background: var(--papier); }
|
|
table.grille tr.on td { background: var(--juste-fond); }
|
|
table.grille td b { color: var(--juste); }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Progression et questions rapides
|
|
------------------------------------------------------------------ */
|
|
.progres {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-radius: 0 0 .5rem .5rem;
|
|
padding: .7rem 1.1rem;
|
|
margin-bottom: 1.2rem;
|
|
display: flex;
|
|
gap: .9rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.barre { flex: 1; min-width: 11rem; height: .6rem; background: var(--accent-fond); border-radius: 99px; overflow: hidden; }
|
|
.barre i { display: block; height: 100%; width: 0; background: var(--juste); border-radius: 99px; transition: width .25s; }
|
|
|
|
.q { border: 1px solid var(--trait); border-radius: .5rem; background: var(--blanc); padding: .9rem 1rem; margin-bottom: .6rem; }
|
|
.q.bon { border-color: var(--juste); background: var(--juste-fond); }
|
|
.q.faux { border-color: var(--cible); background: var(--cible-fond); }
|
|
.q .txt { font-weight: 600; margin-bottom: .6rem; font-size: 1.02rem; }
|
|
.q .opts { display: flex; gap: .5rem; flex-wrap: wrap; }
|
|
.q .opts button {
|
|
font: inherit;
|
|
border: 2px solid var(--trait-fort);
|
|
background: var(--blanc);
|
|
border-radius: .4rem;
|
|
padding: .5rem .85rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color: var(--encre);
|
|
}
|
|
.q .opts button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-encre); }
|
|
.q .opts button:disabled { cursor: default; opacity: .55; }
|
|
.q .opts button.pick { border-color: var(--juste); background: var(--juste-fond); color: var(--juste); opacity: 1; }
|
|
.q .opts button.rate { border-color: var(--cible); background: var(--cible-fond); color: var(--encre); opacity: 1; }
|
|
.q .expl {
|
|
display: none;
|
|
margin-top: .6rem;
|
|
font-size: .93rem;
|
|
color: var(--encre-douce);
|
|
line-height: 1.55;
|
|
border-left: 3px solid var(--trait-fort);
|
|
padding-left: .8rem;
|
|
}
|
|
.q.done .expl { display: block; }
|
|
|
|
#bilan { display: none; }
|
|
#bilan.on { display: block; }
|
|
.gros { font-family: var(--police-titre); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--accent-encre); }
|
|
|
|
textarea {
|
|
width: 100%;
|
|
min-height: 7rem;
|
|
border: 2px solid var(--trait-fort);
|
|
border-radius: .4rem;
|
|
padding: .7rem;
|
|
font: inherit;
|
|
font-size: .9rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Tri de fichiers (cours 3)
|
|
------------------------------------------------------------------ */
|
|
.fichiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin: .9rem 0; }
|
|
.fic {
|
|
font: inherit;
|
|
border: 2px solid var(--trait-fort);
|
|
background: var(--blanc);
|
|
border-radius: .45rem;
|
|
padding: .7rem .85rem;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: .9rem;
|
|
overflow-wrap: anywhere;
|
|
min-width: 0;
|
|
color: var(--encre);
|
|
}
|
|
.fic small { display: block; font-weight: 500; color: var(--encre-douce); margin-top: .2rem; font-size: .82rem; }
|
|
.fic b { display: block; font-family: var(--police-titre); font-size: 1.15rem; color: var(--accent-encre); margin-bottom: .15rem; }
|
|
.fic:hover { border-color: var(--accent); }
|
|
.fic.pris { opacity: .25; cursor: default; }
|
|
.fic.rate { border-color: var(--cible); background: var(--cible-fond); }
|
|
|
|
.rangee {
|
|
display: flex; gap: .4rem; flex-wrap: wrap;
|
|
min-height: 3.4rem;
|
|
border: 2px dashed var(--trait-fort);
|
|
border-radius: .45rem;
|
|
padding: .5rem;
|
|
align-items: center;
|
|
}
|
|
.rangee .pas { background: var(--juste-fond); color: var(--juste); border-radius: .35rem; padding: .45rem .6rem; font-weight: 600; font-size: .88rem; }
|
|
.etape3 { display: none; }
|
|
.etape3.on { display: block; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Plan du réseau (cours 4)
|
|
------------------------------------------------------------------ */
|
|
#plan svg { width: 100%; height: auto; display: block; background: var(--blanc); border: 1px solid var(--trait); border-radius: .5rem; }
|
|
#plan .allume rect, #plan rect.allume { stroke: var(--erreur) !important; stroke-width: 5 !important; }
|
|
#plan line.allume { stroke: var(--erreur) !important; stroke-width: 7 !important; }
|
|
#plan .panne rect { fill: var(--erreur-fond) !important; stroke: var(--erreur) !important; stroke-dasharray: 6 4; }
|
|
|
|
.envoi { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .9rem 0; }
|
|
.journal { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; max-width: none; }
|
|
.journal li {
|
|
background: var(--papier);
|
|
border: 1px solid var(--trait);
|
|
border-radius: .4rem;
|
|
padding: .55rem .8rem;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
}
|
|
.journal li.stop { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
|
|
.journal li b { color: var(--accent-encre); }
|
|
|
|
.cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .8rem; }
|
|
.cases label { font-weight: 600; font-size: .8rem; color: var(--encre-douce); display: grid; gap: .3rem; }
|
|
.cases select.ok { border-color: var(--juste); background: var(--juste-fond); }
|
|
.cases select.ko { border-color: var(--cible); background: var(--cible-fond); }
|
|
.cache { display: none; }
|
|
.cache.on { display: block; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Pages de pilotage : filtres et parties de l'année
|
|
(.partie remplace .module, qui appartient au thème)
|
|
------------------------------------------------------------------ */
|
|
.filtres {
|
|
display: flex;
|
|
gap: .5rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
background: var(--blanc);
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
padding: .7rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
.filtres .compte { margin-left: auto; font-weight: 600; color: var(--encre-douce); font-size: .88rem; }
|
|
|
|
.partie { margin-bottom: 2rem; }
|
|
.partie-tete { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .4rem; }
|
|
.partie-tete h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
|
|
.partie-tete .p {
|
|
background: var(--encre);
|
|
color: var(--papier);
|
|
border-radius: 999px;
|
|
padding: .25rem .75rem;
|
|
font-family: var(--police-titre);
|
|
font-size: .72rem;
|
|
font-weight: 700;
|
|
}
|
|
.partie-tete .champ { color: var(--encre-douce); font-size: .88rem; margin-left: auto; }
|
|
.partie-note { color: var(--encre-douce); line-height: 1.6; margin: 0 0 1rem; max-width: 76ch; }
|
|
|
|
.blocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .7rem; }
|
|
.bloc {
|
|
border: 1px solid var(--trait);
|
|
border-radius: .5rem;
|
|
background: var(--blanc);
|
|
padding: 1rem 1.15rem;
|
|
display: flex;
|
|
gap: .9rem;
|
|
align-items: flex-start;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.bloc .n {
|
|
width: 2.4rem; height: 2.4rem; flex: none;
|
|
border-radius: .45rem;
|
|
background: var(--papier);
|
|
color: var(--encre-douce);
|
|
font-family: var(--police-titre);
|
|
font-weight: 700;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 1rem;
|
|
}
|
|
/* Le bloc de texte occupe toute la place restante à droite du numéro,
|
|
sinon il se recentre quand le titre passe sur deux lignes. */
|
|
.bloc > div { flex: 1; min-width: 0; text-align: left; }
|
|
.bloc h3 { margin: 0 0 .25rem; font-size: 1.02rem; line-height: 1.3; }
|
|
.bloc .att { font-size: .82rem; color: var(--encre-douce); font-weight: 500; }
|
|
.ets { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
|
|
.et {
|
|
font-size: .7rem;
|
|
font-weight: 600;
|
|
border-radius: 999px;
|
|
padding: .2rem .55rem;
|
|
background: var(--papier);
|
|
border: 1px solid var(--trait);
|
|
color: var(--encre-douce);
|
|
}
|
|
.et.eval { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
|
|
.et.fac { background: var(--cible-fond); border-color: var(--cible); color: var(--encre); }
|
|
.et.pret { background: var(--juste-fond); border-color: var(--juste); color: var(--juste); }
|
|
|
|
/* Une carte de bloc qui mène quelque part se distingue nettement
|
|
d'un bloc encore à écrire. */
|
|
a.bloc { border-top: .3rem solid var(--accent); }
|
|
a.bloc:hover { border-color: var(--accent); }
|
|
a.bloc .n { background: var(--accent-encre); color: var(--papier); }
|
|
.bloc.vide { border-style: dashed; opacity: .7; }
|
|
.bloc.vide h3 { font-weight: 600; }
|
|
|
|
.masque { display: none !important; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Petits écrans
|
|
------------------------------------------------------------------ */
|
|
@media (max-width: 62rem) {
|
|
.dashboard { grid-template-columns: repeat(2, 1fr); }
|
|
.navtabs.n6 { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
@media (max-width: 40rem) {
|
|
.dashboard { grid-template-columns: 1fr; }
|
|
.navtabs.n6 { grid-template-columns: repeat(2, 1fr); }
|
|
.blocs { grid-template-columns: 1fr; }
|
|
.ecart { min-width: 0; flex: 1; }
|
|
.filtres .compte { margin-left: 0; width: 100%; }
|
|
.cases { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
|
|
@media print {
|
|
.chrono, .navtabs, .filtres, .saisie, .progres { display: none; }
|
|
.panel { display: block !important; }
|
|
}
|