/* Base commune à toutes les pages (v3, D34). Police, palette, composants partagés.
Ne jamais renommer ni retirer une classe ou une variable : toutes les pages s'appuient dessus.
Les pages ne lient que ce fichier ; il importe base-controles.css (boutons, champs, focus) et
base-composants.css (barre d'état, toast, menu « ⋯ », feuille). La pastille d'état est ici.
COMPOSANTS (exemples de balisage)
- Boutons : + une variante. Un seul principal par zone.
.btn-principal bleu --agir : l'étape suivante (« Lancer », « Imprimer »).
.btn fond doux : action courante.
.btn-secondaire contour : action de second rang.
.btn-danger discret (texte rouge) ; .btn-danger.confirmer = rouge plein (2e clic).
.btn-arreter rouge plein : arrêter (« Stop », sur le téléphone).
.btn-lien sans fond, souligné au survol. .btn-icone : carré de 48 px.
Cibles ≥ 48 px partout. Sur un fond clair, entourer de .sur-papier (couleurs adaptées).
- Champs : ;
; select avec flèche visible.
- .note : petit texte d'aide. .erreurs : liste d'erreurs (ul).
- Barre d'état (commun.js, creerBarreEtat) : .barre-etat > .barre-accueil, .barre-titre, .barre-classe,
.barre-liaison[data-niveau] > .barre-voyant. Le seul endroit qui dit l'état de l'appareil.
- Toast (commun.js, toast) : .toast ; placé par le script hors des commandes
(au-dessus de la barre du bas sur téléphone, en haut à droite sur grand écran).
- Menu « ⋯ » (commun.js s'occupe du clavier, d'Échap et du clic dehors) :
⋯
.menu-plus.a-gauche (s'ouvre vers la droite), .menu-plus.vers-le-haut (barre du bas).
- Feuille (panneau qui monte du bas sur téléphone, fenêtre centrée sur grand écran) :
ouvrirFeuille(dialog) / fermerFeuille(dialog) (commun.js) ; Échap, ✕ et clic à côté ferment.
- Pastille d'état : Juste (juste | faux | absent | agir | attente),
ou data-etat="juste". Toujours avec un mot : la couleur seule ne suffit pas.
- Réponses (js/reponses.js) : .rep-A … .rep-D, [data-rep], .pastille-rep. Médias : .media-image…
- .cache-visuel : texte lu par les lecteurs d'écran, invisible à l'écran. */
@import url('base-controles.css');
@import url('base-composants.css');
@font-face {
font-family: 'Fredoka';
src: url('../vendor/polices/Fredoka-Variable.ttf') format('truetype');
font-weight: 300 700;
font-display: swap;
}
:root {
--ardoise: #2b3a42;
--ardoise-claire: #37474f;
--ardoise-foncee: #1f2b31;
--papier: #fdf6e3;
--papier-ombre: #e8dfc6;
--encre: #1f2933;
--encre-douce: #5b6770;
--texte: #f4f4f2;
--texte-doux: #b9c4cb;
--jaune: #f7c948; /* accents seulement (repère de salle, attente), jamais un bouton */
--jaune-fonce: #b98a00;
--bleu: #4c8fe0;
--bleu-fonce: #1f5fb0;
--vert: #43b581;
--rouge: #e0533b;
--rayon: 12px;
--ombre: 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.2);
/* v3 : surfaces, cibles, focus */
--surface: rgba(255, 255, 255, 0.06);
--bordure: rgba(255, 255, 255, 0.14);
--rayon-petit: 8px;
--cible: 48px;
--focus: #9cc8ff;
}
* {
box-sizing: border-box;
}
/* L'attribut hidden doit gagner sur les display définis ailleurs. */
[hidden] {
display: none !important;
}
/* ---------- Pastille d'état (juste / faux / absent / agir / attente) ---------- */
.pastille-etat {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.15em 0.7em;
border-radius: 999px;
background: var(--absent);
color: var(--absent-texte);
font-size: 0.9rem;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
}
.pastille-etat::before {
content: '';
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: currentColor;
opacity: 0.85;
}
.pastille-etat.juste, .pastille-etat[data-etat='juste'] { background: var(--juste); color: var(--juste-texte); }
.pastille-etat.faux, .pastille-etat[data-etat='faux'] { background: var(--faux); color: var(--faux-texte); }
.pastille-etat.absent, .pastille-etat[data-etat='absent'] { background: var(--absent); color: var(--absent-texte); }
.pastille-etat.agir, .pastille-etat[data-etat='agir'] { background: var(--agir); color: var(--agir-texte); }
.pastille-etat.attente, .pastille-etat[data-etat='attente'] { background: var(--jaune); color: var(--encre); }
/* ---------- v3 (D34) : identités des réponses et couleurs d'état ----------
Une réponse = une couleur + une forme + une lettre, partout (js/reponses.js : IDENTITES, pastille()).
A violet ▲ · B orange ◆ · C sarcelle ● · D rose ■. Jamais de rouge ni de vert pour une réponse.
État : bleu = agir, vert = juste, rouge = faux, gris = absent. -texte : couleur lisible sur la teinte.
-fonce : survol d'un bouton ; -clair : fond teinté ; -vif / -doux : lisible sur l'ardoise. */
:root {
--rep-a: #7a4ad6;
--rep-a-texte: #ffffff;
--rep-a-clair: #e7ddf8;
--rep-b: #ee8a14;
--rep-b-texte: #1a1209;
--rep-b-clair: #fde6c9;
--rep-c: #0a7f84;
--rep-c-texte: #ffffff;
--rep-c-clair: #cfeced;
--rep-d: #d22f79;
--rep-d-texte: #ffffff;
--rep-d-clair: #f8d6e6;
--agir: #1f6fd6;
--agir-texte: #ffffff;
--agir-fonce: #1a5cb3;
--agir-clair: #d8e7fb;
--juste: #1e8550;
--juste-texte: #ffffff;
--juste-clair: #d3efdf;
--juste-vif: #4cc98a;
--faux: #d93a2b;
--faux-texte: #ffffff;
--faux-fonce: #b92e21;
--faux-clair: #fbdcd7;
--faux-doux: #ffb4a6;
--absent: #8a949b;
--absent-texte: #1a1209;
--absent-clair: #e3e7ea;
}
/* data-rep="A" : seulement les variables (--rep, --rep-texte, --rep-clair) ; .rep-A : variables + fond + texte. */
.rep-A, [data-rep='A'] { --rep: var(--rep-a); --rep-texte: var(--rep-a-texte); --rep-clair: var(--rep-a-clair); }
.rep-B, [data-rep='B'] { --rep: var(--rep-b); --rep-texte: var(--rep-b-texte); --rep-clair: var(--rep-b-clair); }
.rep-C, [data-rep='C'] { --rep: var(--rep-c); --rep-texte: var(--rep-c-texte); --rep-clair: var(--rep-c-clair); }
.rep-D, [data-rep='D'] { --rep: var(--rep-d); --rep-texte: var(--rep-d-texte); --rep-clair: var(--rep-d-clair); }
.rep-A, .rep-B, .rep-C, .rep-D {
background-color: var(--rep);
color: var(--rep-texte);
}
.pastille-rep {
display: inline-block;
flex: none;
vertical-align: middle;
overflow: visible;
}
/* ---------- v3 : rendu des médias (js/media-rendu.js) ----------
Image : conteneur aux proportions du cadre (--ratio, posé au chargement), image placée en % (pas de canvas :
marche sans CORS). La page choisit la taille, par ex. width: min(100%, calc(60vh * var(--ratio))). */
.media-image {
width: 100%;
background: rgba(0, 0, 0, 0.06);
user-select: none;
}
.media-image.media-erreur {
outline: 3px dashed var(--absent);
outline-offset: -3px;
}
.media-point {
width: var(--taille-point, 9%);
min-width: 1.4rem;
aspect-ratio: 1;
pointer-events: none;
container-type: inline-size;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}
/* Contour blanc net autour de la forme (proportionnel à sa taille) + ombre : le point A violet reste
visible sur une image violette, le point C sarcelle sur une image verte, etc. */
.media-point .pastille-rep polygon,
.media-point .pastille-rep circle,
.media-point .pastille-rep rect {
stroke: #ffffff;
stroke-width: 16px;
paint-order: stroke fill;
}
.media-point .pastille-rep {
display: block;
width: 100%;
height: 100%;
}
.media-point-numero {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border: 0.14em solid #ffffff;
border-radius: 50%;
background: var(--ardoise-foncee);
color: #ffffff;
font-size: 1rem;
font-size: 55cqi;
font-weight: 700;
line-height: 1;
}
/* Lecteur YouTube (creerLecteurYouTube) : le cadre est posé par la page. Son seul (D30) : l'iframe est rendue
invisible par media-rendu.js ; .media-youtube.son-seul sert de repère à la page pour ses contrôles. */
.media-youtube {
position: relative;
}
.media-repli {
display: inline-block;
margin: 0.5rem;
color: inherit;
}