/* =========================================================================== HOLANGCOURS : UNE QUESTION DE TEST, TELLE QU'ON LA VOIT Ces règles habillaient le test de positionnement, écrites dans la page. L'administration doit montrer À QUOI RESSEMBLERA une question avant de la publier : deux feuilles de style auraient fini par diverger, et l'aperçu aurait menti le jour où l'une des deux aurait bougé. Il n'y en a donc qu'une, chargée par les deux écrans. Elle ne porte QUE le rendu d'une question : le média, l'énoncé, les réponses, la zone de rédaction, le passage à lire. Le fil des rubriques, l'avancement et les boutons de la page restent à la page : ils n'ont pas de sens dans un aperçu. ======================================================================== */ /* Une réponse est une cible tactile pleine largeur : on clique la ligne, pas le petit rond. */ .rep{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;cursor:pointer; background:var(--hol-surface-1);border:1px solid var(--hol-border-strong); border-radius:var(--hol-r-sm);transition:border-color .15s ease,background .15s ease} .rep:hover{border-color:var(--hol-brand)} /* La réponse choisie se repère au premier regard. `:has` manque aux Android anciens que nous servons : la classe, posée par le script, fait le même travail là-bas, et les deux écritures disent exactement la même chose. */ .rep:has(input:checked),.rep--choisi{border-color:var(--hol-brand);background:var(--hol-brand-wash)} .rep:has(input:focus-visible){outline:none;box-shadow:0 0 0 3px var(--hol-brand-wash)} .rep input{margin-top:2px;width:20px;height:20px;flex:none} /* LE MÉDIA N'EST PAS UNE ILLUSTRATION : il PORTE la question. Il a donc un cadre, et c'est toujours le même, qu'on y dépose une photo, une vidéo ou une boucle muette : même largeur, même hauteur, mêmes angles. Deux écrans qui se suivent ne se décalent pas parce que l'un portait un paysage et l'autre un portrait. LA SCÈNE FIXE UNE HAUTEUR, PAS UN RAPPORT. Le fichier arrive de la médiathèque sans ses dimensions : lui imposer 16/9 recadrait les images verticales, le laisser libre faisait sauter la mise en page au chargement. La scène tient sa hauteur, le média s'y inscrit en entier et se centre. Rien n'est coupé, rien ne bouge. ET ELLE RESTE COURTE. L'énoncé et son média doivent tomber sous les yeux d'un seul coup : un quart de la hauteur de l'écran au plus, pour qu'il reste la place de la question et des réponses sans défiler. `aspect-ratio` est écarté : les Android anciens que nous servons ne le connaissent pas, et la boîte s'y écrase à zéro. */ .media{display:inline-block;max-width:100%;margin:0 0 24px; border-radius:var(--hol-r-lg);overflow:hidden; background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); box-shadow:var(--hol-shadow-1)} /* LE CADRE ÉPOUSE LE MÉDIA. La hauteur est imposée, la largeur suit : une photo en largeur donne un cadre en largeur, une photo en hauteur un cadre en hauteur, et aucune des deux ne flotte au milieu d'un rectangle à moitié vide. Un plancher de largeur évite qu'une image très étroite ne finisse en languette. */ .media-scene{display:block;height:clamp(156px,26vh,258px); min-width:260px;max-width:560px;background:var(--hol-surface-0); text-align:center} .media-scene img,.media-scene video{display:inline-block;vertical-align:top; height:100%;width:auto;max-width:100%;object-fit:contain} /* Sous une vidéo, le tapis se fonce : les commandes du lecteur sont claires, et les bandes qui restent de part et d'autre cessent de se voir. */ .media--film .media-scene{background:var(--hol-surface-inverse)} /* Quand l'image manque, c'est son texte de remplacement qui s'affiche : il doit rester lisible dans le cadre. */ .media-scene img{color:var(--hol-text-secondary);font-size:14px;padding:12px} .media--son{background:var(--hol-surface-1);padding:20px 22px;max-width:none} .media audio{width:100%;display:block} /* Sans commandes, le navigateur n'affiche plus l'élément sonore : la carte se remplit du bouton et de son état. */ .media-son{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:46px} /* LE BOUTON UNIQUE. Sur une vidéo il se pose au centre de l'image ; sous un son il tient sa ligne. Dans les deux cas c'est le seul geste possible : lancer. Il disparaît pendant la lecture et quand les écoutes sont finies. */ .media-jouer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); display:inline-flex;align-items:center;gap:11px;cursor:pointer; min-height:48px;padding:0 20px 0 10px;font:inherit;font-size:15px;font-weight:600; color:var(--hol-text-inverse);background:var(--hol-glass-hi); border:1px solid var(--hol-border-on-dark);border-radius:var(--hol-r-pill); backdrop-filter:blur(10px) saturate(150%); transition:background .15s ease,border-color .15s ease} .media-jouer:hover{background:var(--hol-brand);border-color:var(--hol-brand)} /* `display` écrit sur l'élément bat le « caché » du navigateur : sans cette ligne, le bouton restait à l'écran pendant la lecture. */ .media-jouer[hidden],.media-etat[hidden],.media-regle[hidden]{display:none} .media-jouer:focus-visible{outline:none;box-shadow:0 0 0 3px var(--hol-focus-inverse)} /* Le triangle est dessiné par des bordures : pas d'image à charger, et il garde son dessin partout. */ .media-jouer__rond{flex:none;display:inline-block;width:28px;height:28px;border-radius:50%; background:var(--hol-surface-1);position:relative} .media-jouer__rond::after{content:"";position:absolute;top:50%;left:50%; margin:-6px 0 0 -3px; border-style:solid;border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--hol-brand)} .media-scene{position:relative} /* Sous un son, le même bouton quitte le centre et reprend les couleurs de la page : il n'y a pas d'image sombre pour le porter. */ .media-jouer--ligne{position:static;transform:none; color:var(--hol-text-inverse);background:var(--hol-brand); border-color:var(--hol-brand);backdrop-filter:none} .media-jouer--ligne:hover{background:var(--hol-brand);box-shadow:var(--hol-shadow-2)} .media-etat{font-family:var(--hol-police-mono),monospace;font-size:12px;letter-spacing:.06em; color:var(--hol-text-muted)} .media-regle{color:var(--hol-text-muted)} .media-pied{display:flex;gap:14px;align-items:center;flex-wrap:wrap; padding:11px 16px;background:var(--hol-surface-1); border-top:1px solid var(--hol-border-subtle); font-family:var(--hol-police-mono),monospace;font-size:11.5px;letter-spacing:.06em; color:var(--hol-text-muted)} .media--son .media-pied{border-top:0;padding:12px 0 0} .zone{display:block;width:100%;min-height:200px;padding:16px 18px;font:inherit;font-size:16px; line-height:1.6;resize:vertical;color:var(--hol-text-primary); background:var(--hol-surface-1);border:1px solid var(--hol-border-strong); border-radius:var(--hol-r-sm)} .zone:focus-visible{outline:none;border-color:var(--hol-brand);box-shadow:0 0 0 3px var(--hol-brand-wash)} /* UN PASSAGE SE LIT. Mesure de ligne courte, interligne large, fond de carte : c'est un texte qu'on lit une fois pour de bon, pas une légende. */ .passage{background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); border-radius:var(--hol-r-lg);padding:clamp(22px,4vw,34px);margin:0 0 30px} .passage-titre{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(21px,2.8vw,27px);line-height:1.25;letter-spacing:-.015em; margin:0 0 16px;text-wrap:balance} .passage-texte{white-space:pre-wrap;font-size:17px;line-height:1.75;max-width:62ch; color:var(--hol-text-primary)} .enonce{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(23px,3.2vw,30px);line-height:1.3;letter-spacing:-.015em; margin:0 0 20px;text-wrap:balance;white-space:pre-line} .enonce--suite{display:flex;gap:12px;align-items:baseline;font-size:18px; font-weight:600;line-height:1.45;letter-spacing:0;margin:0 0 14px} .mono-num{flex:none;font-family:var(--hol-police-mono),monospace;font-size:13px; font-weight:600;color:var(--hol-brand);background:var(--hol-brand-wash); border:1px solid var(--hol-border-subtle);border-radius:6px;padding:2px 8px} /* =========================================================================== L'APERÇU CÔTÉ ADMINISTRATION Le rendu ci-dessus est servi tel quel ; ce qui suit ne fait que l'encadrer, et dire les deux choses qu'un candidat ne voit pas : la bonne réponse, et ce qui manque encore. ======================================================================== */ /* Dans un panneau étroit, la scène du média garde ses proportions mais cesse d'imposer sa largeur minimale : le panneau ne doit pas déborder. */ .adt-vue .media-scene{min-width:0;height:clamp(130px,18vh,200px)} .adt-vue .enonce{font-size:clamp(19px,2.4vw,24px)} .adt-vue .zone{min-height:96px} .qv-aide{font-size:15px;line-height:1.6;color:var(--hol-text-secondary);margin:0 0 18px} .qv-reponses{display:flex;flex-direction:column;gap:10px} .qv-texte{font-size:16px;line-height:1.5;flex:1 1 auto;min-width:0} .qv-mots{font-family:var(--hol-police-mono),monospace;font-size:12px; color:var(--hol-text-muted);margin:9px 0 0} /* CE QUI N'EST PAS ENCORE ÉCRIT se dit, plutôt que de laisser un trou : on doit pouvoir distinguer « rien à afficher » de « rien n'a été saisi ». */ .qv-attente{font-size:15px;line-height:1.5;color:var(--hol-text-muted); font-style:italic;margin:0 0 18px} /* LA BONNE RÉPONSE, marquée pour l'administration seule. Elle ne part jamais vers le navigateur d'un candidat : ce rendu n'existe que derrière le contrôle d'accès de l'administration. */ .qv-bonne{flex:none;align-self:center;font-family:var(--hol-police-mono),monospace; font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; padding:3px 9px;border-radius:var(--hol-r-pill); color:var(--hol-succes);background:var(--hol-succes-wash); border:1px solid var(--hol-border-subtle)} /* ═══════════════════════════════════════════════════════════════════════════ L'ÉCRAN DE QUESTION : UNE PAGE DE CAHIER, PAS UNE AFFICHE Jimmy, en passant le test : « l'apparence des questions, c'est un petit peu en vrac », « j'aurais aimé que le texte soit positionné plus à gauche, comme si on écrit sur un cahier, et à droite des petits trucs pour que ce soit joli ». Trois décisions en découlent, et une quatrième qui corrige une faute. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LE FIL DES RUBRIQUES CHANGE DE NOM ──────────────────────────────── Il s'appelait « .fil », et ce nom était DÉJÀ PRIS dans les jetons par le petit graphique de tendance de l'administration : 140 pixels de large, 30 de haut. Les pastilles de compétence en héritaient, se coupaient en deux lignes et débordaient sur « Question 2 sur 11 », qu'elles recouvraient. Rien ne le signalait : les deux règles vivent dans deux fichiers. Deuxième collision de nom du projet, après « .hol-rang ». */ .tst-rubriques{display:flex;flex-direction:column;gap:8px;margin:0 0 18px} .tst-rubriques__ligne{display:flex;align-items:center;gap:10px; font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.08em;text-transform:uppercase; color:var(--hol-text-muted)} .tst-rubriques__pastille{flex:none;width:9px;height:9px;border-radius:50%; background:var(--hol-border-strong)} .tst-rubriques__ligne[data-faite] .tst-rubriques__pastille{background:var(--hol-brand-clair)} .tst-rubriques__ligne[data-faite]{color:var(--hol-brand)} .tst-rubriques__ligne[data-ici] .tst-rubriques__pastille{background:var(--hol-brand); box-shadow:0 0 0 4px var(--hol-brand-wash)} .tst-rubriques__ligne[data-ici]{color:var(--hol-text-primary);font-weight:600} .tst-rubriques__nb{margin-left:auto;font-size:11px;color:var(--hol-text-muted)} /* ── 2. DEUX COLONNES : L'ÉPREUVE À GAUCHE, LES REPÈRES À DROITE ────────── Le texte tenait au milieu d'une colonne centrée, et la page paraissait vide des deux côtés. Il se cale maintenant à gauche, sur une largeur de lecture, et la droite porte le temps et l'avancement. LA COLONNE DE DROITE N'EST PAS DU DÉCOR. Elle dit combien de temps il reste et où l'on en est, rubrique par rubrique : c'est l'information qu'on cherche au milieu d'une épreuve, et elle encombrait le haut de l'écran. Rien n'y est inventé. SOUS 1040 PIXELS, UNE SEULE COLONNE, et le panneau devient une barre mince collée sous l'en-tête : sur un téléphone, une colonne de côté n'existe pas. Il vient avant la question dans le balisage, ce qui donne cet ordre sans écrire un seul `order`. */ .tst-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} @media (min-width:1040px){ .tst-grille{grid-template-columns:minmax(0,1fr) 248px;align-items:start;gap:40px} .tst-cote{grid-column:2;grid-row:1} .tst-travail{grid-column:1;grid-row:1} } /* ── 2 bis. LE PANNEAU DE CÔTÉ ─────────────────────────────────────────── Jimmy, le 11 octobre, devant le compte à rebours en bandeau pleine largeur : « cette barre-là, je ne l'aime pas. Place-la à droite, il y a plein d'espace à droite, comme ça il y aura plus de place pour que les questions puissent rester. » DEUX FORMES POUR UN SEUL BALISAGE. Sur un grand écran, une carte posée à droite, qui suit le défilement. Sous 1040 pixels, la même carte s'aplatit en barre horizontale : le cadran passe en ligne, la liste des rubriques se replie, et la rubrique en cours s'écrit en toutes lettres à sa place. */ .tst-cote{position:sticky;top:calc(var(--hol-collant,128px) + 8px);z-index:5} /* LA BARRE TIENT EN DEUX COLONNES ET SOIXANTE PIXELS. À trois cent soixante pixels de large, une seule rangée se cassait en trois et la barre mangeait cent quarante pixels de haut, c'est-à-dire tout ce qu'on venait de gagner. Le cadran tient la colonne de gauche sur les deux rangées ; la rubrique et l'avancement s'empilent à sa droite. */ .tst-cote__carte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px; align-items:center; background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); border-radius:var(--hol-r-lg);padding:9px 14px;box-shadow:var(--hol-shadow-1)} .tst-minuteur{grid-column:1;grid-row:1 / span 2} .tst-cote__ici{grid-column:2;grid-row:1} .tst-cote__avance{grid-column:2;grid-row:2} /* Le mot est lu, il ne se voit pas : le cadran dit déjà ce qu'il est, et la largeur d'un téléphone ne permet pas de l'écrire. */ .tst-minuteur__mot{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* La rubrique en cours ne se dit QUE dans la barre : au-dessus de 1040 pixels, la liste complète la nomme déjà, et la répéter serait du bruit. */ .tst-cote__ici{font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--hol-text-primary); font-weight:600} @media (min-width:1040px){ .tst-cote{top:calc(var(--hol-collant,128px) + 20px)} .tst-cote__carte{display:block;padding:20px 22px} .tst-cote__ici{display:none} .tst-minuteur__mot{position:static;width:auto;height:auto;overflow:visible; clip:auto;clip-path:none} } .tst-rubriques{display:none} @media (min-width:1040px){ .tst-rubriques{display:flex} } .tst-repere__barre{height:6px;border-radius:3px;background:var(--hol-surface-0); border:1px solid var(--hol-border-subtle);overflow:hidden;margin:4px 0 0} .tst-repere__barre span{display:block;height:100%;background:var(--hol-brand); transition:width .3s ease} .tst-repere__rang{font-family:var(--hol-police-mono),monospace;font-size:12.5px; color:var(--hol-text-muted)} /* La marque, discrète, en bas du panneau : c'est le « petit truc » demandé, et c'est le seul ornement qu'on s'autorise sur un écran d'épreuve. Elle n'a pas sa place dans la barre d'un téléphone, où chaque pixel de hauteur compte. */ .tst-repere__signe{display:none} @media (min-width:1040px){ .tst-repere__signe{display:flex;justify-content:flex-end;margin:16px 0 0;opacity:.5} } /* ── 3. LE MINUTEUR : UN CADRAN, PAS UNE BARRE ─────────────────────────── Le compte à rebours prenait un bandeau sur toute la largeur de la page pour afficher un seul nombre, et c'est ce que Jimmy n'aimait pas. Rangé à droite, il devient ce qu'il est : une horloge. L'anneau se vide dans le sens des aiguilles, et les chiffres disent le temps en toutes lettres. LE SIGNE N'EST PAS LA COULEUR. Les chiffres et l'anneau disent le temps restant ; la teinte d'alerte des dernières secondes n'est qu'un renfort, elle ne porte aucune information seule. */ .tst-minuteur{display:flex;align-items:center;gap:10px} .tst-minuteur__cadran{position:relative;flex:none;width:52px;height:52px} .tst-minuteur__cadran svg{display:block;width:100%;height:100%} .tst-minuteur__piste{stroke:var(--hol-surface-0);stroke-width:9} .tst-minuteur__arc{stroke:var(--hol-brand);stroke-width:9;stroke-linecap:round; transition:stroke-dashoffset .5s linear} .tst-minuteur__temps{position:absolute;top:50%;left:0;width:100%; transform:translateY(-50%);text-align:center; font-family:var(--hol-police-mono),monospace;font-size:13px; font-weight:600;line-height:1;font-variant-numeric:tabular-nums; color:var(--hol-text-primary)} .tst-minuteur__mot{font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--hol-text-muted)} .tst-minuteur--court .tst-minuteur__arc{stroke:var(--hol-alerte)} .tst-minuteur--court .tst-minuteur__temps, .tst-minuteur--court .tst-minuteur__mot{color:var(--hol-alerte)} .tst-minuteur__sans{font-size:13px;line-height:1.5;color:var(--hol-text-muted);margin:9px 0 0} @media (min-width:1040px){ .tst-minuteur{display:block;text-align:center;margin:0 0 18px; padding:0 0 18px;border-bottom:1px solid var(--hol-border-subtle)} .tst-minuteur__cadran{width:104px;height:104px;margin:0 auto 10px} .tst-minuteur__temps{font-size:23px} .tst-minuteur__piste,.tst-minuteur__arc{stroke-width:7} } /* ── 4. LA CARTE DE LA QUESTION ────────────────────────────────────────── « Une petite carte en bordure, ça va plus bien. » Le matériel, l'énoncé et les réponses forment un seul objet posé sur le fond, au lieu de trois blocs qui flottent. TROIS TEMPS, TOUJOURS DANS LE MÊME ORDRE. On annonce ce qu'on donne à comprendre, on le donne, puis on demande. Jimmy, le 11 octobre : « les questions sont tombées n'importe comment, c'est un peu cacophonie ». Un écran se lit quand chaque chose y est annoncée et séparée de la suivante. */ .tst-carte{background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); border-radius:var(--hol-r-lg);box-shadow:var(--hol-shadow-1); padding:clamp(20px,2.6vw,27px)} .tst-carte .media{margin-bottom:22px} /* LA TÊTE NOMME LE MATÉRIEL. « Document à lire », « Enregistrement à écouter » : deux mots, en haut, et l'on sait ce qu'on a sous les yeux avant d'avoir lu une ligne. Texte nu, sans pastille ni point coloré. */ .tst-carte__tete{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; margin:0 0 16px;padding:0 0 12px; border-bottom:1px solid var(--hol-border-subtle)} .tst-carte__quoi{font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--hol-brand); font-weight:600} .tst-carte__genre{font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--hol-text-muted)} .tst-carte__genre::before{content:"·";margin-right:9px} /* ET LE TRAVAIL EST ANNONCÉ LUI AUSSI, par un filet et un mot. C'est la « conclusion » que Jimmy demandait : on a lu, maintenant on répond. */ .tst-carte__mot{font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--hol-text-muted); margin:0 0 14px;padding:18px 0 0; border-top:1px solid var(--hol-border-subtle)} /* ── 5. L'ÉNONCÉ SE LIT, IL NE S'AFFICHE PAS ────────────────────────────── Il était composé en 30 pixels de titre gras. Un titre se balaye du regard ; un énoncé de test se LIT, mot à mot, et certains portent un passage entier entre guillemets. Trois cents caractères en gras de trente pixels, ce n'est plus une question, c'est un mur. Corps de lecture, graisse intermédiaire, interligne confortable, et la largeur bornée à la mesure de lecture. */ .tst-carte .enonce{font-family:var(--hol-police-texte),system-ui,sans-serif; font-weight:600;font-size:19px;line-height:1.55; letter-spacing:0;max-width:62ch;margin:0 0 16px; text-wrap:initial} .tst-item{margin:0} .tst-item--suite{margin:0 0 30px} .tst-item--suite:last-of-type{margin-bottom:0} .tst-aide{font-size:15px;line-height:1.6;color:var(--hol-text-secondary);margin:0 0 18px} .tst-alerte{margin:0 0 20px;padding:12px 14px;border-radius:var(--hol-r-sm); background:var(--hol-accent-wash);border:1px solid var(--hol-accent-border); color:var(--hol-erreur);font-size:14.5px} .tst-pied{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:20px} .tst-valider{min-height:52px;padding:0 28px;border:0;cursor:pointer; background:var(--hol-brand);color:var(--hol-text-inverse); font:inherit;font-weight:600;font-size:16px;border-radius:var(--hol-r-sm)} /* ── 6. L'IMAGE PREND LA PLACE QU'ELLE MÉRITE ───────────────────────────── La scène était plafonnée à 258 pixels de haut et 560 de large, réglage pensé pour un lecteur audio ou vidéo, qu'on veut court pour garder la question sous les yeux. Mais quand l'image EST le matériel de la question, la brider revient à cacher ce qu'on demande de regarder. Jimmy : « l'image est apparue à peine, pourquoi elle ne prendrait pas plus de largeur ? » Le son et la vidéo gardent leur plafond. */ .media--image{display:block;max-width:none} .media--image .media-scene{height:auto;max-width:none;min-width:0} .media--image .media-scene img{width:100%;height:auto;object-fit:cover; max-height:clamp(260px,42vh,460px)} /* ── 7. L'ARRIVÉE ──────────────────────────────────────────────────────── Le passage de la dernière question au verdict se faisait sans transition. Un bandeau d'arrivée marque le moment : on a fini, et voilà ce qu'on vient de faire. Il est sobre, parce qu'une épreuve n'est pas une fête. */ .tst-arrivee{display:flex;align-items:center;gap:16px;margin:0 0 26px; padding:18px 22px;border-radius:var(--hol-r-lg); background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); box-shadow:var(--hol-shadow-1)} .tst-arrivee__rond{flex:none;display:flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:50%; background:var(--hol-brand-wash);color:var(--hol-brand)} .tst-arrivee__mot{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:19px;line-height:1.2;color:var(--hol-text-primary)} .tst-arrivee__detail{font-size:14px;line-height:1.5;color:var(--hol-text-secondary); margin-top:3px} /* ── 8. L'ÉCRAN TIENT D'UN SEUL REGARD ─────────────────────────────────── « Si les questions et les visuels restent sur une même page, l'étudiant n'aura pas à descendre jusqu'en bas. » DEUX MISES EN PAGE, ET LE MATÉRIEL DÉCIDE. UN TEXTE À LIRE SE MET AU MILIEU, pleine largeur de carte, et la question vient dessous. Jimmy : « s'il y a un texte à lire, le texte est au milieu, et à la conclusion la question est posée en dessous ». Un passage coincé dans une colonne de trois cents pixels fait vingt lignes de quarante signes : on ne lit pas un document dans une gouttière. UNE IMAGE, UN SON, UNE VIDÉO PASSENT À CÔTÉ de la question. Ceux-là ne se lisent pas en ligne : au-dessus, ils poussaient l'énoncé et les quatre réponses sous la ligne de flottaison, et il fallait faire défiler pendant que le chronomètre court. SOUS 880 PIXELS, on revient à l'empilement dans les deux cas : deux colonnes sur un téléphone donneraient deux colonnes illisibles. */ @media (min-width:880px){ .tst-carte--duo{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); gap:0 30px;align-items:start} .tst-carte--duo .tst-carte__tete{grid-column:1 / -1} .tst-carte--multi{grid-template-columns:minmax(240px,0.85fr) minmax(0,1.6fr)} /* LE MATÉRIEL SUIT LA DESCENTE. Sur un écran à trois questions, la colonne de droite est plus longue que la fenêtre : sans cela le lecteur sortait du champ à la deuxième question et il fallait remonter pour le relancer. Il se cale sous l'en-tête, dont la hauteur est mesurée par le script du pied de page et jamais devinée. */ .tst-carte--duo .tst-carte__materiel{position:sticky; top:calc(var(--hol-collant,128px) + 16px)} /* Côte à côte, la colonne de droite n'a pas besoin du filet : l'espace entre les deux sépare déjà le matériel du travail. */ .tst-carte--duo .tst-carte__mot{border-top:0;padding-top:0} } /* Le matériel ne pousse rien devant lui : c'est la grille qui l'espace de la question quand les deux sont côte à côte. */ .tst-carte--duo .tst-carte__materiel > :last-child{margin-bottom:0} .tst-carte--duo .tst-carte__materiel .media{margin-bottom:0} /* LE SUJET DE L'ENREGISTREMENT, au-dessus du lecteur. Même corps que le titre d'un document : c'est la même chose, le nom de ce qu'on va recevoir. */ .tst-sujet{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(18px,2.2vw,21px);line-height:1.25;letter-spacing:-.015em; margin:0 0 10px;color:var(--hol-text-primary);text-wrap:balance} .tst-consigne{font-size:15px;line-height:1.6;color:var(--hol-text-secondary);margin:0 0 14px} /* LE DOCUMENT EST POSÉ SUR LA CARTE, il ne se confond pas avec elle. Un cadre blanc sur une carte blanche ne se voit pas : dans la carte, le document prend le fond de la page, et c'est ce décrochement qui le fait lire comme une feuille qu'on aurait posée là. Il se centre à la mesure de lecture. */ .tst-carte .tst-doc{background:var(--hol-surface-0);margin-left:auto;margin-right:auto; max-width:760px} .tst-carte .tst-doc__texte{margin-left:auto;margin-right:auto} /* Les réponses se resserrent un peu : quatre lignes gagnent ainsi la hauteur d'une cinquième, et c'est souvent ce qui manquait. */ .tst-carte .rep{padding:13px 16px} .tst-carte .tst-reponses{display:flex;flex-direction:column;gap:9px} /* L'image garde sa part de l'écran sans l'avaler. Dans la colonne de côté elle prend toute la largeur disponible ; empilée, elle se plafonne pour laisser passer l'énoncé. */ .tst-carte--duo .media--image .media-scene img{max-height:clamp(240px,52vh,560px)} /* ── 9. LE DOCUMENT À LIRE A LA FORME D'UN DOCUMENT ─────────────────────── Jimmy : « peut-on rendre vraiment ces types de question en de vrais visuels ? », devant un courriel recopié entre guillemets dans l'énoncé. RECONNAÎTRE LE SUPPORT FAIT PARTIE DE LA COMPRÉHENSION. On ne lit pas un avis affiché à l'entrée comme on lit le mot d'un collègue : le cadre dit lequel des deux c'est avant le premier mot, et c'est ce que font les examens internationaux depuis toujours. LE CADRE NE PORTE AUCUN CONTENU : pas d'expéditeur, pas d'objet, pas d'heure. Ces lignes n'existent pas dans la banque, et les inventer ajouterait du texte que personne n'a écrit dans une épreuve où chaque mot compte. Le cadre porte le genre, rien d'autre. */ .tst-doc{background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); border-radius:var(--hol-r-lg);overflow:hidden;margin:0 0 26px} .tst-doc__bandeau{display:flex;align-items:center;gap:10px; padding:11px 20px;background:var(--hol-surface-0); border-bottom:1px solid var(--hol-border-subtle); color:var(--hol-text-muted)} .tst-doc__signe{flex:none} .tst-doc__genre{font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.12em;text-transform:uppercase} .tst-doc__corps{padding:clamp(18px,2.4vw,24px)} .tst-doc__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(19px,2.4vw,23px);line-height:1.25;letter-spacing:-.015em; margin:0 0 14px;text-wrap:balance} .tst-doc__texte{white-space:pre-wrap;font-size:17px;line-height:1.75;max-width:62ch; color:var(--hol-text-primary)} /* Un passage nu n'a pas de bandeau : c'est le cas ordinaire, et le cadre d'avant lui va très bien. */ .tst-doc--texte .tst-doc__corps{padding:clamp(22px,4vw,34px)} /* UN MESSAGE EST UNE BULLE. C'est la seule forme que tout le monde reconnaît du premier coup d'œil, et elle dit déjà qu'une personne écrit à une autre. Le coin inférieur gauche se ferme : c'est ce qui la distingue d'un encadré. */ .tst-doc--message .tst-doc__texte{padding:16px 20px;border-radius:18px 18px 18px 4px; background:var(--hol-brand-wash); border:1px solid var(--hol-border-subtle); font-size:16.5px;line-height:1.7;max-width:48ch} /* UN COURRIEL S'OUVRE SOUS UN EN-TÊTE. La ligne qui sépare l'en-tête du corps est tout ce qu'il faut : on la reconnaît sans qu'on ait rien écrit dedans. */ .tst-doc--courriel .tst-doc__texte{font-size:16.5px} /* UN AVIS EST AFFICHÉ. Bordure marquée, texte un peu plus serré : il a été imprimé et punaisé, il n'a pas été écrit pour vous. */ .tst-doc--avis{border-color:var(--hol-border-strong)} .tst-doc--avis .tst-doc__bandeau{background:var(--hol-surface-1); border-bottom-style:dashed} .tst-doc--avis .tst-doc__texte{font-size:16.5px;max-width:56ch} /* UNE ANNONCE S'ADRESSE À UN GROUPE. Même traitement que l'avis, le signe change et c'est lui qui porte la différence. */ .tst-doc--annonce .tst-doc__texte{font-size:16.5px;max-width:58ch} /* UN ARTICLE SE LIT EN COLONNE. Mesure de lecture courte, interligne large. */ .tst-doc--article .tst-doc__texte{max-width:60ch} /* SUR UN TÉLÉPHONE, LE DOCUMENT PERD SON CADRE. Trois marges intérieures s'ajoutaient sur une largeur de trois cent quatre-vingt-dix pixels, celle de la carte, celle du document et celle de la bulle : il restait deux cent soixante-dix pixels de texte. Le cadre de la carte suffit, le bandeau de genre reste, et le texte récupère sa largeur. */ @media (max-width:600px){ /* SUR UN TÉLÉPHONE, L'IMAGE CÈDE DE LA HAUTEUR À L'ÉNONCÉ. Empilés, trois cent trente pixels de photo repoussaient la question hors du premier écran : on voyait le matériel, pas ce qu'on en demandait. */ .tst-carte .media--image .media-scene img{max-height:30vh} .tst-doc{border:0;border-radius:0;background:none} /* Le fond posé par la carte s'en va lui aussi, et il faut le dire avec la même spécificité : « .tst-carte .tst-doc » compte deux classes, et une règle de média écrite plus loin avec une seule ne la bat pas. */ .tst-carte .tst-doc{background:none} .tst-doc__bandeau{padding:0 0 10px;background:none} .tst-doc__corps,.tst-doc--texte .tst-doc__corps{padding:14px 0 0} .tst-doc__texte{font-size:15.5px;line-height:1.65} .tst-doc--message .tst-doc__texte{padding:14px 16px} } /* ═══════════════════════════════════════════════════════════════════════════ L'ÉCRAN D'ENTRÉE DU TEST (.tsi-) Jimmy, le 11 octobre : « c'est la rentrée de la maison, il faut que ce soit joli pour que ça donne envie de rentrer ». Préfixe « tsi- » pour « test, introduction » : « tst- » est pris par l'écran de question, et deux composants de même nom dans la même feuille, c'est le dernier qui gagne partout. ═══════════════════════════════════════════════════════════════════════════ */ /* L'entrée respire plus que l'épreuve : on y décide, on n'y court pas. */ .tst-section--entree{padding:var(--hol-bloc-dense) 0 var(--hol-bloc)} /* ── Le héros ───────────────────────────────────────────────────────────── Le composant « .hol-bloc-image » fait tout le travail : photo au fond, bord gauche noyé dans le marine, texte par-dessus. On ne règle ici que l'échelle du texte et l'air autour. */ /* LA PORTE A UNE HAUTEUR. Réglé sur son seul contenu, le héros faisait deux cent quatre-vingt-dix pixels : une bande, pas une entrée. La photo a besoin de place pour exister, et le titre d'air autour de lui. */ .tsi-hero{margin:0 0 var(--hol-bloc-dense);min-height:300px} @media (min-width:900px){ .tsi-hero{min-height:380px} } .tsi-hero__sur{font-family:var(--hol-police-mono),monospace;font-size:12.5px; letter-spacing:.14em;text-transform:uppercase; color:var(--hol-accent-clair);margin:0 0 14px} .tsi-hero__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:800; font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:-.025em; color:var(--hol-text-inverse);margin:0 0 16px;text-wrap:balance} .tsi-hero__chapo{font-size:clamp(16px,1.3vw,18.5px);line-height:1.6; color:var(--hol-text-inverse-2);margin:0;max-width:46ch} /* L'ACTION, PARTOUT LA MÊME. Rouge de marque : c'est le seul endroit du site où l'accent porte une action, et c'est le choix déjà fait sur cet écran. */ .tsi-cta{display:inline-flex;align-items:center;justify-content:center; min-height:54px;padding:0 30px;border:0;cursor:pointer; background:var(--hol-accent);color:var(--hol-accent-encre,var(--hol-text-inverse)); font:inherit;font-weight:600;font-size:16px;border-radius:var(--hol-r-sm); text-decoration:none;box-shadow:var(--hol-shadow-2)} /* ── Les blocs qui suivent ───────────────────────────────────────────────── */ .tsi-bloc{margin:0 0 var(--hol-bloc-dense)} .tsi-h2{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(24px,3vw,31px);line-height:1.14;letter-spacing:-.018em; margin:0 0 8px;text-wrap:balance} .tsi-sous{font-size:16px;line-height:1.6;color:var(--hol-text-secondary); margin:0 0 26px;max-width:68ch} /* ── Les parties, en cartes numérotées sur la piste maison ──────────────── Le retrait du haut n'est pas décoratif : le chiffre est posé AU-DESSUS du cadre, et sans ces vingt pixels l'« overflow » de la piste le coupe net. */ .tsi-parties{display:flex;gap:20px;align-items:stretch;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:22px 0 4px;-webkit-overflow-scrolling:touch} .tsi-parties > *{flex:1 0 258px;scroll-snap-align:start} @media (prefers-reduced-motion:reduce){ .tsi-parties{scroll-behavior:auto} } .tsi-partie{display:flex;flex-direction:column;padding:26px 24px 22px} .tsi-partie__nom{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:19.5px;line-height:1.2;letter-spacing:-.012em; margin:0 0 9px;color:var(--hol-text-primary)} .tsi-partie__quoi{font-size:14.5px;line-height:1.6;color:var(--hol-text-secondary); margin:0 0 18px;flex:1 1 auto} /* Le compte de questions est une mesure : en mono, discret, poussé en bas de carte pour que les trois s'alignent quelles que soient les descriptions. */ .tsi-partie__nb{font-family:var(--hol-police-mono),monospace;font-size:12px; letter-spacing:.08em;text-transform:uppercase; color:var(--hol-brand);padding-top:14px; border-top:1px solid var(--hol-border-subtle)} /* ── Les quatre choses à savoir ────────────────────────────────────────── Deux colonnes sur un grand écran, une seule en dessous. Pas de carte : ces points sont des précisions, pas des objets à comparer, et quatre cartes de plus après trois cartes feraient une page en damier. */ .tsi-savoir{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 40px} @media (min-width:820px){ .tsi-savoir{grid-template-columns:repeat(2,minmax(0,1fr))} } .tsi-point{display:flex;align-items:flex-start;gap:15px} /* LE ROND SE DÉTACHE DU FOND. En lavis de marque sur le gris de la page, il ne se voyait pas et les signes flottaient nus. Blanc et cerclé, c'est le même objet que les cartes de la page. */ .tsi-point__signe{flex:none;display:flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%; background:var(--hol-surface-1);color:var(--hol-brand); border:1px solid var(--hol-border-subtle); box-shadow:var(--hol-shadow-1)} .tsi-point__nom{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:16.5px;line-height:1.25;margin:3px 0 6px; color:var(--hol-text-primary)} .tsi-point__texte{font-size:14.5px;line-height:1.62;color:var(--hol-text-secondary); margin:0;max-width:52ch} /* ── L'action de fin, et le mur de compte ────────────────────────────────── */ .tsi-fin{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px} .tsi-fin form{margin:0} .tsi-fin__note{font-size:14px;line-height:1.55;color:var(--hol-text-muted); margin:0;max-width:44ch} .tsi-mur{padding:clamp(24px,3.6vw,34px)} .tsi-mur__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(20px,2.4vw,24px);line-height:1.22;margin:0 0 10px} .tsi-mur__texte{font-size:15.5px;line-height:1.62;color:var(--hol-text-secondary); margin:0 0 22px;max-width:58ch} .tsi-mur__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* ═══════════════════════════════════════════════════════════════════════════ L'ÉCRAN DE RÉSULTAT (.tsr-) C'était six cartes grises empilées, toutes de la même voix : le verdict se perdait au milieu, et les trois actions de fin flottaient à nu au-dessus du pied de page. Trois temps maintenant : ce qu'on a obtenu, ce que ça veut dire, ce qu'on fait ensuite. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LE VERDICT ─────────────────────────────────────────────────────── Carte sombre, grain maison. Pas de photo : un résultat n'est pas une vitrine, et une image derrière un niveau viendrait chercher l'œil au moment précis où l'on veut qu'il lise un chiffre. */ .tsr-verdict{padding:clamp(28px,4vw,44px);margin:0 0 var(--hol-bloc-dense)} .tsr-verdict__haut{display:flex;align-items:center;gap:11px;flex-wrap:wrap; margin:0 0 18px} .tsr-verdict__coche{flex:none;display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; background:var(--hol-glass); color:var(--hol-brand-clair); border:1px solid var(--hol-glass-border)} /* LE SIGNE N'EST JAMAIS SEUL : la coche s'accompagne du mot, parce qu'un symbole ne se lit pas à voix haute et ne se distingue pas pour tout le monde. */ .tsr-verdict__mot{font-family:var(--hol-police-mono),monospace;font-size:11.5px; letter-spacing:.12em;text-transform:uppercase; color:var(--hol-text-inverse);font-weight:600} .tsr-verdict__detail{font-size:13.5px;line-height:1.5; color:var(--hol-text-inverse-2)} .tsr-verdict__titre{font-family:var(--hol-police-titre),sans-serif;font-weight:800; font-size:clamp(30px,4.6vw,48px);line-height:1.05; letter-spacing:-.025em;color:var(--hol-text-inverse); margin:0 0 26px;text-wrap:balance} /* La réglette va jusqu'aux marges de la carte : elle mesure une échelle, elle n'est pas un paragraphe, et bornée à la mesure de lecture elle paraissait posée de travers. */ .tsr-verdict__jauge{margin:0} /* ── 2. LES COMPÉTENCES, UNE CARTE CHACUNE ────────────────────────────── La piste maison, pour la même raison que partout : à quatre cartes, une grille en laisse une seule sur la deuxième rangée juste à la largeur d'une tablette. Pas de numéro ici : les compétences n'ont pas d'ordre de mérite, et le titre n'annonce aucun nombre. */ .tsr-comps{display:flex;gap:18px;align-items:stretch;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:4px 0;-webkit-overflow-scrolling:touch} .tsr-comps > *{flex:1 0 236px;scroll-snap-align:start} @media (prefers-reduced-motion:reduce){ .tsr-comps{scroll-behavior:auto} } .tsr-comp{display:flex;flex-direction:column;padding:24px 22px 20px} .tsr-comp__nom{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:18px;line-height:1.2;letter-spacing:-.01em; margin:0 0 8px;color:var(--hol-text-primary)} .tsr-comp__quoi{font-size:14px;line-height:1.55;color:var(--hol-text-secondary); margin:0 0 18px;flex:1 1 auto} /* LE PALIER EST LE CHIFFRE DE LA CARTE. Il était dans une pastille de 13 pixels au bout d'une ligne, à la même force que le reste ; c'est pourtant la seule chose qu'on vient chercher. */ .tsr-comp__palier{font-family:var(--hol-police-mono),monospace;font-size:30px; font-weight:600;line-height:1;letter-spacing:-.01em; color:var(--hol-brand);padding-top:14px; border-top:1px solid var(--hol-border-subtle)} /* UNE PRODUCTION N'A PAS DE PALIER, et la carte ne doit pas faire semblant d'en avoir un. Pas de chiffre, pas de couleur de marque : une mention, au même endroit, qui dit qu'on attend un enseignant. */ .tsr-comp--attente{border-style:dashed} .tsr-comp__attente{font-family:var(--hol-police-mono),monospace;font-size:11.5px; letter-spacing:.1em;text-transform:uppercase; color:var(--hol-text-muted);padding-top:14px; border-top:1px dashed var(--hol-border-strong)} .tsr-note{font-size:14.5px;line-height:1.62;color:var(--hol-text-secondary); margin:18px 0 0;max-width:72ch} /* ── 3. CE QU'ON FAIT MAINTENANT ───────────────────────────────────────── Deux blocs côte à côte. Le conseil porte le bleu de marque : c'est la réponse à la question qu'on se pose en lisant son niveau, et elle ne doit pas avoir la même voix que la note qui l'accompagne. */ .tsr-suite{display:grid;grid-template-columns:minmax(0,1fr);gap:18px} @media (min-width:880px){ .tsr-suite{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch} } .tsr-conseil{padding:clamp(22px,3vw,30px);border-color:var(--hol-brand)} .tsr-apres{padding:clamp(22px,3vw,30px)} .tsr-conseil__sur{font-family:var(--hol-police-mono),monospace;font-size:11px; letter-spacing:.1em;text-transform:uppercase; color:var(--hol-text-muted);margin:0 0 10px} .tsr-conseil__mode{font-family:var(--hol-police-titre),sans-serif;font-weight:700; font-size:clamp(19px,2.2vw,23px);line-height:1.2; color:var(--hol-brand);margin:0 0 8px} .tsr-conseil__texte{font-size:15px;line-height:1.62;color:var(--hol-text-secondary); margin:0} .tsr-retour{padding:22px 26px;margin:0 0 var(--hol-bloc-dense); border-color:var(--hol-brand)} .tsr-retour__titre{font-size:16.5px;font-weight:600;margin:0 0 6px} .tsr-retour .hol-btn{margin-top:16px} /* ── 4. LA SUITE DU PARCOURS ───────────────────────────────────────────── Les trois actions étaient alignées à nu sous la dernière carte, à la même hauteur que le pied de page : on ne savait plus si elles appartenaient encore au résultat. Posées sur une bande blanche, elles ferment l'écran. */ .tsr-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center; padding:clamp(20px,2.6vw,26px);border-radius:var(--hol-r-lg); background:var(--hol-surface-1);border:1px solid var(--hol-border-subtle); box-shadow:var(--hol-shadow-1)} .tsr-actions__refaire{margin:0 0 0 auto} /* LA NOTE QUI REMPLACE LE BOUTON. Elle dit que le test se passe une fois, à la place exacte où l'on chercherait à le relancer : un écran qui retire une action sans un mot passe pour un écran cassé. */ .tsr-actions__note{margin:0 0 0 auto;font-size:13.5px;line-height:1.5; color:var(--hol-text-muted);max-width:34ch} @media (max-width:700px){ .tsr-actions__refaire, .tsr-actions__note{margin-left:0} }