/* Composants VocaDial. * * Extrait tel quel des 47 maquettes de référence, qui inlinent cette feuille * pour être autonomes. C'était une commodité de maquette ; ici elle est * chargée une fois, normalement. * * Les valeurs viennent toutes de tokens.css, lui-même produit depuis DESIGN.md. * Aucune valeur en dur : modifier une couleur se fait dans DESIGN.md, jamais ici. */ /* Les polices sont déclarées dans fonts.css, servie depuis ce serveur. */ /* tokens générés depuis DESIGN.md */ /* VocaDial — jetons générés depuis DESIGN.md npx @google/design.md export --format css-tailwind DESIGN.md NE PAS ÉDITER À LA MAIN — régénérer depuis DESIGN.md */ /* composants */ /* VocaDial — composants Chaque classe correspond à une entrée du bloc `components` de DESIGN.md. Aucune valeur en dur : tout passe par les jetons de tokens.css. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── app-shell ── */ body { background: var(--color-surface); color: var(--color-ink); font-family: var(--font-body-md, Nunito), system-ui, sans-serif; font-size: var(--text-body-md, 15px); font-weight: 600; line-height: 1.5; min-height: 100vh; } body.projection { background: var(--color-proj-surface); color: var(--color-proj-ink); } button, input { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } /* Un titre qui reçoit le focus par script — pour que le lecteur d'écran * annonce la page ou l'étape — n'est pas un contrôle : le cadre n'y dit rien à * qui voit, et il encadrait « Mon carnet » à l'ouverture. Les champs et les * boutons, eux, gardent leur anneau. */ [tabindex="-1"]:focus-visible { outline: none; } body.projection :focus-visible { outline-color: var(--color-proj-accent); } /* ── typographie ── */ .t-display-day { font-family: Fredoka; font-size: 96px; font-weight: 700; line-height: .82; letter-spacing: -.03em; } .t-display-month { font-family: Fredoka; font-size: 30px; font-weight: 600; line-height: 1.1; } .t-headline-lg { font-family: Fredoka; font-size: 38px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; } .t-headline-md { font-family: Fredoka; font-size: 24px; font-weight: 600; line-height: 1.15; } .t-title-module { font-family: Fredoka; font-size: 18px; font-weight: 600; line-height: 1.15; } .t-question { font-family: Fredoka; font-size: 22px; font-weight: 600; line-height: 1.3; } .t-answer-option { font-family: Fredoka; font-size: 19px; font-weight: 600; line-height: 1.3; } .t-label { font-family: Fredoka; font-size: 14px; font-weight: 600; line-height: 1.3; } .t-eyebrow { font-family: Fredoka; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; font-kerning: none; } .t-body-lg { font-size: 17px; line-height: 1.55; } .t-body-md { font-size: 15px; line-height: 1.5; } .t-body-sm { font-size: 13px; line-height: 1.45; } .t-code { font-family: "Space Mono", monospace; font-size: 15px; font-weight: 700; letter-spacing: .06em; } /* La projection se mesure en hauteur, pas en largeur. * * Calibrée en `vw`, la réponse plafonnait à 32 px : sur un vidéoprojecteur de * 1920 par 1080, cela fait un texte qui occupe trois pour cent de la hauteur et * que le fond de la classe ne lit pas. Un écran de projection est contraint par * sa hauteur — la largeur, il en a de reste, et c'est bien le reproche qu'on * lui fait : tout se tasse en haut à gauche. * * Les bornes basses restent en pixels pour les petits écrans, où la même règle * en `vh` donnerait un texte minuscule sur un téléphone en paysage. */ /* * Bornées en largeur autant qu'en hauteur, et dans la règle de base. * * Un plafond en `vw` existait déjà plus bas, sous `@media (max-width: 48rem)`. * Il n'a pas suffi : sur un téléphone, la phrase du mot du jour sortait encore * en capitales d'affiche sur quatre lignes. On n'a pas su dire laquelle des * conditions ne tenait pas — la cascade servie donne pourtant dix-huit pixels * sur un écran de trois cent quatre-vingt-dix. * * La borne est donc posée ici, dans la règle qui s'applique partout et ne * dépend d'aucune requête média : `min(vh, vw)` ne peut que réduire, et il ne * réduit qu'en portrait. Sur un vidéoprojecteur 1920 × 1080, `5vh` vaut 54 px * et `5.5vw` en vaut 105 : c'est la hauteur qui l'emporte, exactement comme * avant. C'est la forme que « El número » emploie depuis longtemps. */ .t-proj-q { font-family: Fredoka; font-size: calc(clamp(30px, min(7.2vh, 7.5vw), 86px) * var(--proj-fit, 1)); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; } .t-proj-a { font-family: Fredoka; font-size: calc(clamp(21px, min(5vh, 5.5vw), 58px) * var(--proj-fit, 1)); font-weight: 500; line-height: 1.25; } /* Vingt pixels fixes : c'était la taille d'une étiquette de formulaire, sur * un écran de trois mètres. Comme le reste de la projection, elle se mesure * maintenant en hauteur. */ .t-proj-label { font-family: Fredoka; font-size: calc(clamp(20px, 3vh, 34px) * var(--proj-fit, 1)); font-weight: 600; line-height: 1.3; letter-spacing: .04em; } .text-secondary { color: var(--color-ink-muted); } /* Le texte d'aide prend la teinte secondaire. `ink-faint` (2,3 : 1 sur le * fond crème) échouait au seuil de 4,5 : 1 des WCAG pour du texte ; il reste * aux éléments décoratifs — poignées, pastilles verrouillées. La hiérarchie * tient à la taille, plus à la pâleur. */ .text-hint { color: var(--color-ink-muted); } .text-points { color: var(--color-gold-strong); } /* ── relief : bordure + ombre pleine ── */ .depth-1 { border: 2.5px solid var(--color-ink); box-shadow: 0 4px 0 var(--color-ink); } .depth-2 { border: 2.5px solid var(--color-ink); box-shadow: 0 5px 0 var(--color-ink); } .pressable { transition: transform .12s, box-shadow .12s; } .pressable:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--color-ink); } .pressable:active { transform: translateY(5px); box-shadow: 0 0 0 var(--color-ink); } /* ── boutons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); font-family: Fredoka; font-size: 16px; font-weight: 600; border-radius: var(--radius-lg); padding: var(--spacing-4) var(--spacing-6); min-height: 52px; transition: transform .12s, box-shadow .12s; } .btn:active { transform: translateY(5px); box-shadow: 0 0 0 currentColor; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 5px 0 var(--color-primary-active); } .btn-primary:hover { background: var(--color-primary-hover); } .btn-primary:active { box-shadow: 0 0 0 var(--color-primary-active); } .btn-ghost { background: var(--color-surface-raised); color: var(--color-ink); border: 2.5px solid var(--color-ink); box-shadow: 0 5px 0 var(--color-ink); } .btn-ghost:active { box-shadow: 0 0 0 var(--color-ink); } .btn-validate { background: var(--color-success-strong); color: var(--color-on-success); box-shadow: 0 5px 0 #0d5a3d; } .btn-validate:active { box-shadow: 0 0 0 #0d5a3d; } .btn-danger { background: var(--color-error-strong); color: var(--color-on-error); box-shadow: 0 5px 0 #8d2a24; } .btn:disabled { background: var(--color-line); color: var(--color-ink-disabled); box-shadow: none; cursor: not-allowed; transform: none; } .btn-lg { font-size: 19px; min-height: 62px; padding: var(--spacing-5) var(--spacing-8); } .btn-block { width: 100%; } /* ── surfaces ── */ .surface-card { background: var(--color-surface-raised); border-radius: var(--radius-xl); padding: var(--spacing-4); } .divider { height: 2px; background: var(--color-line); border: none; } .divider-strong { height: 2px; background: var(--color-line-strong); border: none; } /* ── éphéméride ── */ .eph-stack { position: relative; padding-bottom: 14px; } .eph-stack .layer { position: absolute; left: 9px; right: 9px; bottom: 6px; height: 26px; background: var(--color-surface-raised); border: 2.5px solid var(--color-line); border-radius: var(--radius-2xl); z-index: 0; } .eph-stack .layer.b2 { left: 17px; right: 17px; bottom: 0; opacity: .6; } .eph-sheet { position: relative; z-index: 2; background: var(--color-surface-raised); border: 2.5px solid var(--color-ink); border-radius: var(--radius-2xl); box-shadow: 0 5px 0 var(--color-ink); overflow: hidden; } .eph-rule { height: 6px; } .eph-rule-es { background: var(--color-lang-es); } .eph-rule-en { background: var(--color-lang-en); } .eph-rule-fr { background: var(--color-lang-fr); } .eph-rule-it { background: var(--color-lang-it); } .eph-rule-de { background: var(--color-lang-de); } .eph-band { padding: var(--spacing-2) var(--spacing-5); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; color: var(--color-ink); } .eph-band-es { background: var(--color-lang-es-soft); } .eph-band-en { background: var(--color-lang-en-soft); } .eph-band-fr { background: var(--color-lang-fr-soft); } .eph-band-it { background: var(--color-lang-it-soft); } .eph-band-de { background: var(--color-lang-de-soft); } .eph-body { padding: var(--spacing-5); display: flex; align-items: center; gap: var(--spacing-5); flex-wrap: wrap; } .eph-month { color: var(--color-ink-muted); } /* ── progression ── */ .progress-track { height: 8px; background: var(--color-line); border-radius: var(--radius-full); overflow: hidden; flex: 1; } .progress-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); } /* ── tuiles de module ── */ .tile { background: var(--color-surface-raised); color: var(--color-ink); border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl); box-shadow: 0 5px 0 var(--color-ink); padding: var(--spacing-4); text-align: left; position: relative; display: flex; flex-direction: column; gap: var(--spacing-1-5); min-height: 156px; transition: transform .12s, box-shadow .12s; } .tile:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--color-ink); } .tile:active { transform: translateY(5px); box-shadow: 0 0 0 var(--color-ink); } .tile-done { background: var(--color-success-soft); border-color: var(--color-success-strong); box-shadow: 0 5px 0 var(--color-success-strong); cursor: default; } .tile-done:hover { transform: none; box-shadow: 0 5px 0 var(--color-success-strong); } .tile-locked { background: var(--color-surface-sunken); border-color: var(--color-line-strong); box-shadow: 0 5px 0 var(--color-line-strong); border-style: dashed; } .tile-locked .t-title-module { color: var(--color-ink-muted); } /* ── pastilles d'icône par famille ── */ .mod-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; } .mod-icon svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.1; fill: none; stroke-linecap: round; stroke-linejoin: round; } .fam-temporal { background: var(--color-family-temporal); } .fam-lexico { background: var(--color-family-lexico); } .fam-fonologia { background: var(--color-family-fonologia); } .fam-gramatica { background: var(--color-family-gramatica); } .fam-comprension { background: var(--color-family-comprension); } .fam-cultura { background: var(--color-family-cultura); } .fam-expresion { background: var(--color-family-expresion); } .fam-juegos { background: var(--color-family-juegos); } .fam-repaso { background: var(--color-family-repaso); } .fam-bienestar { background: var(--color-family-bienestar); } .fam-cierre { background: var(--color-brand-band); } .fam-locked { background: var(--color-ink-faint); } /* DESIGN.md nomme cette famille « repaso », le code l'appelle * « reactivacion » : deux noms pour la même chose, et la pastille restait * transparente faute que les deux se rencontrent. Trois modules s'affichaient * donc sans glyphe — le badge existait, il n'avait simplement pas de fond. */ .fam-reactivacion { background: var(--color-family-repaso); } /* Deux familles que DESIGN.md ne nomme pas, parce qu'elles ne portent pas de * matière : « outils de classe » compte les absents et lance un chronomètre, * « production » n'a pas encore de module. Une teinte neutre plutôt qu'une * couleur inventée — le jour où la charte les nomme, ces deux lignes tombent. */ .fam-herramientas { background: var(--color-ink-muted); } .fam-produccion { background: var(--color-family-expresion); } /* ── tampons ── */ .stamp { position: absolute; right: 10px; top: 12px; transform: rotate(-9deg); font-family: Fredoka; font-size: 12px; font-weight: 600; letter-spacing: .04em; border-radius: var(--radius-md); padding: var(--spacing-1) var(--spacing-2-5, 10px); } .stamp-done { background: var(--color-success-strong); color: var(--color-on-success); box-shadow: 0 3px 0 #0d5a3d; } .stamp-gold { background: var(--color-gold); color: var(--color-ink); box-shadow: 0 3px 0 var(--color-gold-strong); } /* ── pastilles ── */ .pill { display: inline-flex; align-items: center; gap: var(--spacing-1-5); background: var(--color-surface-sunken); color: var(--color-ink); border-radius: var(--radius-full); padding: var(--spacing-1) var(--spacing-3); font-size: 13px; font-weight: 700; } .pill-license { background: var(--color-primary-soft); color: var(--color-primary-active); } .pill-outline { background: transparent; border: 2px solid var(--color-line-strong); } .code-class { display: inline-block; background: var(--color-primary-soft); color: var(--color-primary-active); border: 2.5px dashed var(--color-primary); border-radius: var(--radius-md); padding: var(--spacing-2) var(--spacing-3); } /* ── options de réponse ── */ .option { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; text-align: left; background: var(--color-surface-raised); color: var(--color-ink); border: 2.5px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: 0 4px 0 var(--color-line); padding: var(--spacing-4); min-height: 58px; transition: transform .12s, box-shadow .12s; } .option:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--color-line); } .option-selected { background: var(--color-primary-soft); color: var(--color-primary-active); border-color: var(--color-primary); box-shadow: 0 4px 0 var(--color-primary); } .option-correct { background: var(--color-success-soft); color: var(--color-success-strong); border-color: var(--color-success-strong); box-shadow: 0 4px 0 var(--color-success-strong); } .option-incorrect { background: var(--color-error-soft); color: var(--color-error-strong); border-color: var(--color-error-strong); box-shadow: 0 4px 0 var(--color-error-strong); } /* ── projection ── */ .proj-shell { min-height: 100vh; display: flex; flex-direction: column; padding: var(--spacing-8); } .proj-eyebrow { color: var(--color-proj-ink-muted); } .proj-highlight { color: var(--color-proj-accent); font-style: normal; } .proj-answer { color: var(--color-proj-success); } .proj-divider { height: 2px; background: var(--color-proj-line); border: none; } .proj-btn { display: inline-flex; align-items: center; gap: var(--spacing-2); border: 2.5px solid var(--color-proj-ink); color: var(--color-proj-ink); border-radius: var(--radius-lg); padding: var(--spacing-3) var(--spacing-5); font-family: Fredoka; font-size: 18px; font-weight: 600; min-height: 56px; } .proj-btn-solid { background: var(--color-proj-ink); color: var(--color-proj-surface); } .proj-btn-accent { background: var(--color-proj-accent); border-color: var(--color-proj-accent); color: var(--color-proj-surface); } /* Un bouton de scène éteint se voit éteint : la roue qui tourne, la partie de * pendu qui se joue. Allumé, il invite à appuyer sur un geste refusé. */ .proj-btn:disabled { opacity: .45; cursor: default; } .proj-chip { border: 2px solid var(--color-proj-line); color: var(--color-proj-ink-muted); border-radius: var(--radius-md); padding: var(--spacing-2) var(--spacing-4); font-family: Fredoka; font-size: 17px; font-weight: 600; } .proj-chip[aria-pressed="true"] { background: var(--color-proj-ink); color: var(--color-proj-surface); border-color: var(--color-proj-ink); } .kbd { font-family: "Space Mono", monospace; font-size: 12px; border: 1.5px solid currentColor; border-radius: 5px; padding: 1px 6px; opacity: .75; } /* ── mur d'archives ── */ /* Le mur garde `auto-fill` : ici la taille de la case est le sujet, et une * colonne vide en fin de ligne vaut mieux qu'un carré étiré. */ .wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 5px; } .wall-cell { aspect-ratio: 3/4; border-radius: var(--radius-sm); background: var(--color-line); } .wall-cell-done { background: var(--color-success); } .wall-cell-gold { background: var(--color-gold); box-shadow: inset 0 0 0 2.5px var(--color-gold-strong); } .wall-cell-missed { background: var(--color-surface); border: 2px dashed var(--color-line-strong); } /* ── utilitaires de mise en page ── */ /* La largeur de l'application : celle de la page Start (84 rem), et non plus 1000 px, * qui laissait 300 px vides de chaque côté sur un écran de 1600. Une seule valeur * pour le contenu, le bandeau, les onglets, la barre de langues et le pied de page, * pour qu'ils restent alignés. */ :root { --page-w: 84rem; } /* Un formulaire n'a rien à gagner à s'étendre sur 1300 px : les champs y deviennent des barres. */ .wrap.wrap-form { max-width: 52rem; } .wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--spacing-4) var(--spacing-16); } .row { display: flex; align-items: center; gap: var(--spacing-3); } .row-wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .col { display: flex; flex-direction: column; } /* `auto-fit`, et non `auto-fill`. * * Avec `auto-fill`, la grille réserve autant de colonnes que la largeur en * accepte — cinq sur mille pixels — et les trois cartes de l'accueil en * occupaient trois, laissant deux colonnes vides à droite. Les cartes * paraissaient étriquées sur un écran manifestement large, ce qui est * exactement ce qu'on lit : des colonnes fantômes. * * `auto-fit` réduit les colonnes vides à zéro et rend leur place aux autres. * Là où la grille est pleine — le sommaire, ses quinze modules — les deux mots * font strictement la même chose. La différence n'apparaît qu'au moment où * elle compte. * * Le défaut venait des maquettes et a été recopié tel quel : elles montraient * assez de tuiles pour que les colonnes vides ne se voient jamais. */ .grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--spacing-3); } .stack-1 > * + * { margin-top: var(--spacing-1); } .stack-2 > * + * { margin-top: var(--spacing-2); } .stack-3 > * + * { margin-top: var(--spacing-3); } .stack-4 > * + * { margin-top: var(--spacing-4); } .stack-5 > * + * { margin-top: var(--spacing-5); } .stack-6 > * + * { margin-top: var(--spacing-6); } /* `.mt-1`, `.mt-2` et `.mt-3` figuraient dans plus de cent balises sans avoir * jamais été définies : la remise à zéro générale l'emportait, et le texte * d'aide collait au champ qu'il commente. */ .mt-1 { margin-top: var(--spacing-1); } .mt-2 { margin-top: var(--spacing-2); } .mt-3 { margin-top: var(--spacing-3); } .mt-4 { margin-top: var(--spacing-4); } .mt-5 { margin-top: var(--spacing-5); } .mt-6 { margin-top: var(--spacing-6); } .mt-8 { margin-top: var(--spacing-8); } .mt-12 { margin-top: var(--spacing-12); } /* La marge basse n'existait pas : un `.mb-3` écrit dans un gabarit n'avait * aucun effet, et en silence. `tests/test-charte.php` le contrôle. */ .mb-2 { margin-bottom: var(--spacing-2); } .mb-3 { margin-bottom: var(--spacing-3); } .mb-4 { margin-bottom: var(--spacing-4); } .push { margin-left: auto; } .grow { flex: 1; } /* ── barre de maquette (hors produit) ── */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* * Le réglage « Animations » a été retiré des préférences. * * Il ne servait qu'au professeur dont le système ne demande rien mais qui * trouve les dévoilements gênants — un cas rare, sur un écran de réglages qui * n'en comptait que trois. La ligne au-dessus, elle, reste et suffit : elle * obéit au choix de l'appareil, qui est l'endroit où ce choix se fait une fois * pour toutes et pour tous les sites. */ /* ══ chrome d'application ══ */ /* Le bandeau est blanc, comme celui de la page Start et comme la barre du bas sur * téléphone : il se détache du fond crème de la page au lieu de s'y fondre. */ .chrome { position: sticky; top: 0; z-index: 40; background: var(--color-surface-raised); border-bottom: 2px solid var(--color-line); } .chrome-in { max-width: var(--page-w); margin: 0 auto; padding: var(--spacing-3) var(--spacing-4); display: flex; align-items: center; gap: var(--spacing-2-5, 10px); flex-wrap: wrap; } /* La marque est un logotype, plus un mot composé. Le violet n'y a jamais eu sa * place : `primary` est la couleur de l'action dans l'interface, pas celle de * la marque — c'est une règle du dossier de marque, et elle explique pourquoi * l'ancien « Dial » violet jurait avec tout le reste. */ .brand { display: inline-flex; align-items: center; } .langdots { display: flex; gap: var(--spacing-1-5); margin-left: var(--spacing-2); } .langdot { width: 26px; height: 26px; border-radius: var(--radius-full); border: 3px solid transparent; box-shadow: 0 3px 0 rgba(46,38,80,.16); } .langdot[aria-pressed="true"] { border-color: var(--color-ink); transform: translateY(1px); box-shadow: 0 2px 0 rgba(46,38,80,.28); } .dot-es { background: var(--color-lang-es); } .dot-en { background: var(--color-lang-en); } .dot-fr { background: var(--color-lang-fr); } .dot-it { background: var(--color-lang-it); } .dot-de { background: var(--color-lang-de); } .chip { display: inline-flex; align-items: center; gap: var(--spacing-1-5); background: var(--color-surface-raised); border: 2px solid var(--color-line); border-radius: var(--radius-full); padding: var(--spacing-1) var(--spacing-3); font-family: Fredoka; font-weight: 600; font-size: 15px; } .chip svg { width: 17px; height: 17px; } .seg { display: flex; gap: 3px; background: var(--color-line); padding: 3px; border-radius: var(--radius-full); } .seg button { font-family: Fredoka; font-weight: 600; font-size: 14px; padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); color: var(--color-ink-muted); } .seg button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-surface); } /* `flex-wrap` par précaution : trois onglets tiennent en français sur un * téléphone, et « Mis clases · Ajustes · Descubrir » y tient moins bien. Un * onglet qui sort de l'écran ne se rattrape pas au doigt. */ .tabs { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--spacing-4); display: flex; flex-wrap: wrap; gap: var(--spacing-2); } .tabs a { font-family: Fredoka; font-weight: 600; font-size: 16px; padding: var(--spacing-2-5, 10px) var(--spacing-4); color: var(--color-ink-muted); border-radius: var(--radius-lg) var(--radius-lg) 0 0; text-decoration: none; } .tabs a[aria-current="page"] { color: var(--color-ink); background: var(--color-surface-sunken); } /* ══ le sous-menu d'une classe ══ * * Sept destinations sur une ligne, sous le titre de la classe. Ce n'est pas * une seconde rangée d'onglets : les onglets disent où l'on est dans le * produit, celui-ci dit ce qu'on peut faire de la classe qu'on regarde. D'où * la boîte, qui l'attache visiblement au titre au lieu de le laisser flotter * sous le bandeau. * * Les liens portent une classe explicite. Un `a` nu hérite ici de la règle de * couleur des liens de texte, et sa spécificité égale celle d'un `.submenu a` — * à égalité c'est l'ordre du fichier qui tranche, ce qui est une façon de * décider par accident. */ .submenu { display: flex; flex-wrap: wrap; gap: var(--spacing-1); padding: var(--spacing-1); border: 2.5px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface-raised); } a.submenu-link { font-family: Fredoka; font-weight: 600; font-size: 14px; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); color: var(--color-ink-muted); text-decoration: none; } a.submenu-link:hover { background: var(--color-surface-sunken); color: var(--color-ink); } a.submenu-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* ══ le code d'appairage ══ * * Il est lu depuis le fond de la salle, sur un vidéoprojecteur qui délave, par * quelqu'un qui le recopie sur un téléphone tenu à bout de bras. D'où la * taille, l'interlettrage, et rien d'autre autour. */ /* Quatre caractères très espacés débordent d'un écran étroit si leur taille ne * se mesure qu'en hauteur : sur un téléphone en portrait, 14 vh valent plus de * cent pixels par signe, et la ligne dépasse. La largeur entre donc dans le * calcul — c'est elle qui manque. */ /* Le code en repli (étape 2) : quatre cases, lisibles à bout de bras mais * loin derrière le QR. */ .pair-code { display: flex; gap: 8px; margin: var(--spacing-4) 0 0; font-family: Fredoka; font-weight: 700; line-height: 1; } .pair-code span { display: grid; place-items: center; width: clamp( 48px, 17vw, 72px ); height: clamp( 60px, 21vw, 88px ); font-size: clamp( 34px, 11vw, 52px ); color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-md); } /* Le QR du même code : fond blanc franc et marge calme (ajoutée par le tracé), * sans quoi un reflet sur le tableau le rend illisible. Il est la pièce * principale de la carte : grand, mais borné par la hauteur de l'écran. */ .pair-qr { width: min( 250px, 100%, 36vh ); min-width: 180px; aspect-ratio: 1; background: #fff; border: 3px solid var(--color-ink); border-radius: var(--radius-lg); padding: var(--spacing-3); } .pair-qr svg { display: block; width: 100%; height: 100%; } .pair-qr[hidden] { display: none; } /* La carte : étapes à gauche, QR à droite ; l'une sur l'autre en étroit, le QR * d'abord puisque c'est le geste le plus court. */ .pair-card { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 220px, 260px ); gap: var(--spacing-8); align-items: center; padding: var(--spacing-6) var(--spacing-8); } .pair-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-8); } .pair-step { display: grid; grid-template-columns: 36px 1fr; gap: var(--spacing-4); align-items: start; } .pair-step h2 { margin: 4px 0; font-size: 22px; } .pair-step p { font-size: 16px; } .pair-step p { margin: 0; } .pair-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font: 700 17px Fredoka; } .pair-side { display: grid; justify-items: center; min-width: 0; } .pair-wait, .pair-ok { align-items: center; text-align: center; gap: var(--spacing-3); } .pair-wait[hidden], .pair-ok[hidden] { display: none; } .pair-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; } .pair-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); animation: pair-pulse 1.6s ease-in-out infinite; } @keyframes pair-pulse { 0%, 100% { opacity: .35; transform: scale( .8 ); } 50% { opacity: 1; transform: scale( 1.15 ); } } @media ( prefers-reduced-motion: reduce ) { .pair-dot { animation: none; } } .pair-tick { width: 84px; height: 84px; border-radius: 50%; background: var(--color-success-soft); position: relative; } .pair-tick::after { content: ""; position: absolute; left: 31px; top: 21px; width: 16px; height: 30px; border: solid var(--color-success-strong); border-width: 0 5px 5px 0; transform: rotate( 40deg ); } .pair-ok-title { color: var(--color-success-strong); margin: 0; } .pair-ok p { margin: 0; max-width: 28ch; } .pair-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-4); } @media ( max-width: 640px ) { .pair-card { grid-template-columns: 1fr; gap: var(--spacing-6); padding: var(--spacing-5) var(--spacing-4); } .pair-side { order: -1; } .pair-foot { display: grid; } .pair-foot .btn { width: 100%; } } /* La saisie, elle, se fait au pouce : mêmes caractères, même espacement, pour * qu'on reconnaisse ce qu'on est en train de recopier. */ input.pair-input { font-family: Fredoka; font-weight: 700; font-size: 32px; letter-spacing: .3em; text-align: center; text-transform: uppercase; } /* L'invitation à poser l'icône sur l'écran d'accueil. Elle vit sous le * formulaire, en retrait : c'est un confort, pas une étape. Le script la * découvre là où elle a un sens — un téléphone, et pas une application déjà * installée — et elle reste invisible partout ailleurs. */ .install-hint { border: 1px dashed var(--color-line-strong); border-radius: var(--radius-md); padding: var(--spacing-4); background: var(--color-surface-sunken); } /* L'écran de saisie de la télécommande : reprendre, scanner, saisir. */ .pair-resume-card { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); width: 100%; text-align: left; min-height: 72px; padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-raised); color: inherit; font: inherit; text-decoration: none; border: 2.5px solid var(--color-ink); border-radius: var(--radius-xl); box-shadow: 0 5px 0 var(--color-ink); } .pair-resume-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--color-ink); } .pair-resume-go { color: var(--color-primary); white-space: nowrap; } .pair-scan svg { flex: none; } .pair-or { display: flex; align-items: center; gap: var(--spacing-3); margin: 0; color: var(--color-ink-muted); font-family: Fredoka; font-weight: 500; font-size: var(--text-body-sm); } .pair-or::before, .pair-or::after { content: ""; flex: 1; height: 2px; background: var(--color-line); } input.pair-input::placeholder { color: var(--color-ink-faint); font-weight: 500; } input.pair-input:disabled { background: var(--color-surface-sunken); color: var(--color-ink-disabled); } /* L'invitation à installer, sur une ligne ; la note d'iPhone passe dessous. */ .pair-install { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); } .pair-install[hidden] { display: none; } .pair-install p { margin: 0; flex: 1; min-width: 0; } .pair-install .btn { flex: none; margin: 0; } .pair-install .pair-install-note { flex-basis: 100%; } .pair-install .pair-install-note[hidden] { display: none; } /* La caméra du scan : plein écran, le temps de lire. */ .pair-cam { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-4) max( var(--spacing-4), env( safe-area-inset-right, 0px ) ) calc( var(--spacing-4) + env( safe-area-inset-bottom, 0px ) ) max( var(--spacing-4), env( safe-area-inset-left, 0px ) ); } .pair-cam[hidden] { display: none; } .pair-cam-video { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: var(--radius-xl); } .pair-cam-hint { margin: 0; color: #fff; text-align: center; } .pair-cam-cancel { width: 100%; max-width: 24rem; } html.has-cam { overflow: hidden; } /* ══ trois formes d'une même réponse ══ * * « Falta … », « Faltan … y … », « No falta nadie. » : ce ne sont pas trois * étapes mais trois cas, et c'est leur alignement qui fait voir l'accord. * Empilées et centrées, la ligne du milieu se lit comme la variante de celle * du dessus. */ /* * Trois formes d'une même phrase se lisent l'une sous l'autre, alignées à * gauche. Centrées, leurs premiers mots — « Falta », « Faltan », « No falta » — * ne commençaient jamais au même endroit, alors que c'est précisément leur * début qui diffère et qu'il faut comparer. */ .proj-shapes { align-items: flex-start; gap: var(--spacing-4); text-align: left; } /* « La última vez » : sous les amorces, les modules de la séance précédente. */ .proj-recall { align-items: flex-start; gap: var(--spacing-2); margin-top: var(--spacing-4); text-align: left; } .proj-recall-chips { gap: var(--spacing-3); justify-content: flex-start; } /* La date de la séance précédente se lit sous la question, pas à sa suite. */ [data-vd-module="la-ultima-vez"] .proj-ask { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); } [data-vd-module="la-ultima-vez"] .proj-hint { font-size: calc(clamp(17px, 2.8vh, 30px) * var(--proj-fit, 1)); } .proj-recall .proj-chip { font-size: calc(clamp(15px, 2.4vh, 26px) * var(--proj-fit, 1)); } /* ══ anneau de progression ══ */ .ring { position: relative; width: 88px; height: 88px; flex: none; } .ring svg { transform: rotate(-90deg); } .ring b { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font-family: Fredoka; font-weight: 700; font-size: 21px; line-height: 1; } .ring b small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--color-ink-muted); margin-top: 3px; } /* ══ carte de série ══ */ .streak { display: flex; align-items: center; gap: var(--spacing-3); background: var(--color-surface-raised); border: 2.5px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--spacing-3) var(--spacing-4); flex-wrap: wrap; } .streak .flame { font-size: 24px; line-height: 1; } .dots7 { display: flex; gap: var(--spacing-1-5); margin-left: auto; } .dots7 i { width: 15px; height: 15px; border-radius: var(--radius-full); background: var(--color-line); } .dots7 i.on { background: var(--color-lang-es); } .dots7 i.now { background: transparent; border: 3px solid var(--color-lang-es); } /* * `hidden` doit toujours gagner. * * L'attribut n'est qu'un `display: none` posé par la feuille du navigateur : * n'importe quelle règle d'auteur qui déclare un `display` le bat, et sans * qu'aucune erreur ne le signale. C'est ce qui laissait deux boutons * « Revenir au sommaire » côte à côte, et « Module suivant » visible là où il * n'y a pas de suivant — les deux étaient bien marqués `hidden`, mais * `.proj-btn` déclare `display: inline-flex`. * * `!important` se justifie ici et à peu près nulle part ailleurs : la règle ne * décrit pas une apparence mais une invariance, et le jour où quelqu'un pose * un `display` sur un composant, il ne doit pas avoir à y penser. */ [hidden] { display: none !important; } /* ══ en-tête de section ══ */ .sec { display: flex; align-items: center; gap: var(--spacing-3); margin-top: var(--spacing-8); margin-bottom: var(--spacing-3); } .sec h2 { font-family: Fredoka; font-weight: 600; font-size: 20px; } .sec .count { background: var(--color-primary-soft); color: var(--color-primary-active); border-radius: var(--radius-full); padding: 2px var(--spacing-3); font-family: Fredoka; font-weight: 600; font-size: 14px; } /* ══ bandeau de maquette, doux ══ */ /* ══ barre de progression du rituel en projection ══ */ .proj-steps { display: flex; gap: var(--spacing-1-5); flex: 1; } .proj-steps i { height: 6px; flex: 1; border-radius: var(--radius-full); background: var(--color-proj-line); } .proj-steps i.done { background: var(--color-proj-success); } .proj-steps i.now { background: var(--color-proj-accent); } /* ── Projection ────────────────────────────────────────────────────────── * Composants employés uniquement par la scène projetée : carte, halo, * étiquettes de langue, roue de tirage, et les quatre animations. Les * maquettes de projection sont les seules à les charger. */ /* ══ projection : fond vivant ══ */ body.projection { background: radial-gradient(900px 520px at 12% -5%, rgba(108,79,216,.42) 0%, transparent 62%), radial-gradient(760px 460px at 92% 108%, rgba(63,182,217,.30) 0%, transparent 60%), radial-gradient(620px 420px at 78% 8%, rgba(245,162,61,.16) 0%, transparent 58%), var(--color-proj-surface); background-attachment: fixed; } .proj-card { background: rgba(255,255,255,.045); border: 3px solid var(--color-proj-line); border-radius: var(--radius-2xl); backdrop-filter: blur(2px); } .proj-glow { box-shadow: 0 0 0 6px rgba(111,227,180,.10), 0 18px 60px -20px rgba(111,227,180,.55); } /* apparitions */ @keyframes popIn { 0%{opacity:0;transform:scale(.72) translateY(10px);filter:blur(10px)} 62%{opacity:1;transform:scale(1.06) translateY(0);filter:blur(0)} 100%{transform:scale(1)} } @keyframes riseIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } @keyframes pulseRing { 0%{box-shadow:0 0 0 0 rgba(255,196,107,.55)} 70%{box-shadow:0 0 0 18px rgba(255,196,107,0)} 100%{box-shadow:0 0 0 0 rgba(255,196,107,0)} } @keyframes floaty { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-9px) rotate(2deg)} } .revealed { animation: popIn .52s cubic-bezier(.34,1.5,.64,1) both; } .rise { animation: riseIn .45s var(--bounce, cubic-bezier(.34,1.4,.64,1)) both; } .floaty { animation: floaty 5.5s ease-in-out infinite; } .pulse { animation: pulseRing 2.2s ease-out infinite; } /* pastilles de langue en projection */ /* L'étiquette de langue. Elle porte un code écrit, ou un drapeau tracé quand * la langue en a un — voir `Lang::flag()`. */ .lang-tag { display:inline-flex; align-items:center; justify-content:center; font-family: Fredoka; font-weight:700; font-size:19px; letter-spacing:.06em; width:66px; height:46px; border-radius: var(--radius-md); flex:none; } /* * Avec un drapeau, la pastille disparaît. * * Elle avait d'abord gardé l'accent de langue en cadre autour du tracé. Trois * pixels d'orange autour d'un drapeau rouge et jaune ne se lisent pas comme * un accent : ils se lisent comme une bordure de tableau, et le drapeau a * l'air encadré au mur. L'accent servait à identifier la langue d'un coup * d'œil ; c'est précisément ce que le drapeau fait, et mieux. Il n'a besoin * de rien autour de lui. */ .lang-tag-flag { width: calc(clamp(46px, 5.4vh, 64px) * var(--proj-fit, 1)); height: calc(clamp(31px, 3.6vh, 43px) * var(--proj-fit, 1)); padding: 0; background: none; border: none; border-radius: 4px; overflow: hidden; } .lang-tag-flag svg { width: 100%; height: 100%; display: block; /* Un liseré, pas un cadre : un drapeau à bande blanche perdrait son bord * sur un fond clair, et le blanc de l'Union Jack touche les quatre côtés. */ outline: 1px solid rgb(255 255 255 / .18); outline-offset: -1px; } .lang-tag-es { background: var(--color-lang-es); color: var(--color-ink); } .lang-tag-en { background: var(--color-lang-en); color: var(--color-ink); } .lang-tag-fr { background: var(--color-lang-fr); color: var(--color-ink); } .lang-tag-it { background: var(--color-lang-it); color: var(--color-ink); } .lang-tag-de { background: var(--color-lang-de); color: var(--color-ink); } .lang-tag-off { background: transparent; border: 3px solid var(--color-proj-line); color: var(--color-proj-ink-muted); } /* roue */ .wheel-wrap { position: relative; width: 100%; max-width: 340px; margin: 0 auto; } .wheel { transition: transform 2.9s cubic-bezier(.12,.86,.16,1); transform-origin: 50% 50%; } .wheel-hub { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; } .wheel-hub b { font-family: Fredoka; font-weight:700; font-size:34px; color: var(--color-proj-ink); text-align:center; line-height:1.05; } .wheel-hub small { display:block; font-family: Fredoka; font-weight:500; font-size:14px; color: var(--color-proj-ink-muted); margin-top:6px; } /* confettis discrets */ .spark { position:absolute; width:12px; height:12px; border-radius:3px; opacity:.9; animation: floaty 6s ease-in-out infinite; } /* ── Addendum de production ────────────────────────────────────────────── * Les maquettes portent en attribut `style` ce qui, dans le plugin, doit être * une classe : un balisage produit par PHP ne peut pas être ajusté à la main * écran par écran. Rien ici n'introduit de valeur nouvelle — tout vient de * tokens.css. */ /* Le dévoilement se fait par masquage, et non plus par floutage : la classe * voit qu'il reste quelque chose à découvrir — une barre pleine à la largeur * du mot —, ce qu'un élément absent ne dirait pas, et ce qu'un flou disait * mal. Voir plus bas, à `.proj-veiled`. */ /* C'est le contenu qui défile, jamais la page. * * `min-height: 100vh` laissait la coquille grandir avec le contenu : cinq * items d'« El acento » suffisaient à repousser le pied sous la ligne de * flottaison, et le professeur perdait « Découvrir », « Autre variante » et * « Revenir au sommaire » au moment précis où il en avait besoin — devant sa * classe, sans pouvoir chercher. * * La coquille tient donc exactement la hauteur de l'écran. L'en-tête et le * pied ne se compriment pas ; seul le corps défile. Le `min-height: 0` est * indispensable : un élément flex refuse par défaut de devenir plus petit que * son contenu, et sans lui le débordement ressort au lieu de défiler. */ /* `overflow: hidden` masque le débordement mais laisse le conteneur défiler * par programme : quand le navigateur amène un élément qui vient de recevoir le * focus dans la vue, la coquille entière glissait, et l'en-tête sortait de * l'écran sans que rien ne puisse le ramener. `clip` interdit ce défilement. * Le corps, lui, défile toujours — c'est son rôle. */ body.projection .proj-shell { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; overflow: hidden; overflow: clip; padding: var(--spacing-5) var(--spacing-6); } body.projection .proj-head, body.projection .proj-foot { flex: 0 0 auto; } /* * Le corps défile verticalement, jamais horizontalement. * * `overflow-y: auto` seul ne suffit pas : quand un axe est réglé et l'autre * laissé à `visible`, le navigateur ramène le second à `auto`. Une barre * horizontale apparaissait donc au moindre dépassement — et il y en a un à * chaque dévoilement, parce qu'un voile peint bien au-delà de * sa boîte, d'environ trois fois son rayon de chaque côté. La réponse voilée * suivante poussait ainsi une quarantaine de pixels de halo hors du cadre. * * `clip` plutôt que `hidden` : `hidden` autoriserait encore un défilement * horizontal par programme, celui-là même qui avait fait glisser la scène * entière quand le menu de signalement prenait le focus. */ body.projection .proj-body { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; } /* `min-width: 0` sans quoi un enfant large — une phrase d'exemple, une carte — * refuse de se réduire et pousse la colonne au-delà du cadre. C'est la règle * qu'on oublie une fois sur deux avec les boîtes flexibles. */ /* * La colonne principale s'étire sur toute la hauteur du corps et devient une * boîte flexible : sans cela, une carte réglée sur « toute la hauteur » n'a * aucune hauteur à quoi se référer, et retombe à zéro. */ body.projection .proj-main { min-height: 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; } /* * Une scène qui porte un planisphère lui donne toute la hauteur : la carte du * monde n'a de sens qu'en grand. * * La règle nommait « La hora ». Depuis que « El tiempo » pose ses villes sur * la même carte, elle ne le suivait pas : la carte réglée sur « toute la * hauteur » n'avait aucune hauteur à quoi se référer, retombait à zéro, et les * trois villes se superposaient en un point sur un fond vide. On désigne donc * ce qu'il y a dans la scène, et non le module qui l'a écrite — le prochain * module à villes marchera sans qu'on y revienne. */ body.projection .proj-body.has-map .proj-main > [data-vd-start], body.projection .proj-body.has-map .proj-main > [data-vd-start] > .proj-row { flex: 1 1 auto; min-height: 0; display: flex; } /* * Sur un petit écran, la scène s'empile et chaque bloc prend la largeur. * * Elle est bâtie pour un écran large : une colonne média à gauche, la scène à * droite, un panneau d'aide dans le coin. Sur un téléphone tenu debout, cela * donnait une image par-dessus la phrase du mot du jour, un visage sur une * demi-largeur, une roue des verbes à côté d'un texte coupé. Les seuils * d'empilement étaient dispersés — quarante-huit rem ici, soixante là —, si * bien qu'entre les deux la scène restait en colonnes sans plus en avoir la * place. * * Un seul seuil désormais, celui de la carte : en dessous, la scène s'empile. * Les `!important` ne sont pas un aveu : ils reprennent la main sur les règles * de « phase 2 » du mot du jour, qui imposent une colonne média étroite et qui * sont elles-mêmes marquées ainsi. */ @media (max-width: 63.9375rem) { body.projection .proj-body { flex-direction: column; align-items: stretch; gap: var(--spacing-4); } body.projection .proj-media, body.projection .proj-shell[data-vd-phases].is-phase-2 .proj-media { flex: 0 0 auto !important; width: 100%; max-width: 100%; align-self: stretch !important; } body.projection .proj-main, body.projection .proj-shell[data-vd-phases].is-phase-2 .proj-main { flex: 1 1 auto !important; width: 100%; min-width: 0; } /* L'aide revient dans le flux, sous la scène, sur toute la largeur. */ body.projection .proj-panel, body.projection .proj-shell[data-vd-phases].is-phase-2 .proj-panel { position: static; width: auto; max-height: none; overflow: visible; } body.projection .proj-main.has-panel > .t-proj-q, body.projection .proj-main.has-panel > [data-vd-start] { padding-right: 0; } /* Une zone par ligne : un visage ou une ville à demi-largeur ne se lit pas. */ .proj-zones, .emo-zones, .col-zones { grid-template-columns: 1fr; } /* * L'image du mot du jour ne prend pas tout l'écran : elle illustre, elle * n'est pas le contenu — le mot et sa phrase le sont. */ body.projection .proj-media .proj-frame { max-height: 38vh; aspect-ratio: auto; } body.projection .proj-media .proj-frame img { max-height: 36vh; width: auto; margin-inline: auto; } /* * La roue obéit au même plafond, par sa largeur. * * Le cadre plafonne à trente-huit pour cent de la hauteur et rogne ce qui * dépasse — c'est ce qu'il faut pour une photo, qu'on préfère voir * recadrée que minuscule. Mais la roue est un carré : sa hauteur vaut sa * largeur, et rien ne lui disait de se réduire. Sur un écran large et * court, elle gardait ses vingt-deux rem et se faisait couper au tiers * inférieur — « visitar », « cerrar », « querer » disparaissaient sous le * bord du cadre, et le verbe tiré pouvait être l'un d'eux. * * On la borne donc par la hauteur disponible. Le rapport d'un pour un * fait le reste : contrainte en largeur, elle l'est en hauteur. */ body.projection .proj-media .wheel-wrap { max-width: min( 22rem, 34vh ); } /* * Les commandes restent sous le pouce. * * Depuis que la scène se déroule au lieu de se rogner, elles partaient * sous la ligne de flottaison : il fallait faire défiler tout le contenu * pour atteindre « Découvrir », c'est-à-dire pour faire avancer le * rituel. Elles se collent donc au bas de la fenêtre, sur un fond opaque * — sans quoi le texte défilerait en transparence derrière elles. */ body.projection .proj-foot { position: sticky; bottom: 0; z-index: 5; margin-top: var(--spacing-5); padding-block: var(--spacing-3); padding-bottom: calc( var(--spacing-3) + env( safe-area-inset-bottom, 0px ) ); background: var(--color-proj-surface); box-shadow: 0 -12px 18px -12px rgb(0 0 0 / .8); } /* * Et la scène se termine au-dessus d'elle. * * Collée au bas de la fenêtre, la barre passe devant ce qui défile : la * dernière ligne d'une phrase, les deux dernières formes d'une * conjugaison, finissaient derrière les boutons. * * La réserve vaut la hauteur de la barre, pas une marge de confort : un * bouton fait deux lignes de texte et ses marges, soit environ quatre * rems, et l'encoche du téléphone s'y ajoute. Trop courte, elle ne * corrige rien — c'est l'erreur du premier essai, à une seule mesure * d'espacement. */ body.projection .proj-body { padding-bottom: calc( 5rem + env( safe-area-inset-bottom, 0px ) ); } } /* * Sur un petit écran, la scène se déroule au lieu de se rogner. * * La scène tient dans la hauteur de l'écran et coupe ce qui dépasse : devant * une classe, ce qui déborde n'est jamais lu, et faire défiler ne se fait * pas. Mais la carte y devient une liste de villes, et la liste, le bandeau * des tournures et les commandes ne tiennent pas dans un téléphone tenu * debout : la liste débordait de sa case et venait se poser sur le bandeau. * * Un téléphone n'est pas un vidéoprojecteur. En dessous du seuil de la carte, * la scène reprend donc la hauteur de son contenu, et la page défile. */ @media (max-width: 63.9375rem) { body.projection .proj-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } /* * Et le corps cesse d'être un ascenseur dans l'ascenseur. * * La coquille reprenait bien la hauteur de son contenu, mais le corps * gardait son `overflow-y: auto` et son `flex: 1` : il se calait sur la * place restante et faisait défiler *à l'intérieur*, dans une coquille * haute d'exactement un écran. Résultat, la page ne bougeait pas d'un * pixel et le pouce glissait dans une boîte dont rien ne signalait le * bord — c'est le défilement qu'on cherche sans le trouver. * * Sur un téléphone, il n'y a qu'un ascenseur et c'est la page. Le corps * reprend donc sa hauteur naturelle et laisse passer. */ body.projection .proj-body { flex: 0 0 auto; min-height: 0; overflow: visible; overscroll-behavior: auto; } body.projection .proj-main, body.projection .proj-main > [data-vd-start] { flex: 0 0 auto; min-height: 0; } body.projection .proj-body.has-map .proj-main > [data-vd-start], body.projection .proj-body.has-map .proj-main > [data-vd-start] > .proj-row { flex: 0 0 auto; min-height: auto; } } /* * Mais un paysage de seize neuvièmes n'est pas un téléphone. * * Un cadre collé dans Canva, Genially ou un Padlet fait souvent 860 à 960 * pixels de large : sous le seuil des soixante-quatre rem, donc empilé comme * sur un téléphone, avec une page qui défile sous des boutons restés en bas. * Dès que la fenêtre est couchée et assez haute, la scène reprend la * hauteur de l'écran et se réduit pour tenir, comme sur un grand écran. La * roue des verbes a son propre palier, plus bas, qui garde la main. */ @media (max-width: 63.9375rem) and (min-width: 40rem) and (min-height: 30rem) and (orientation: landscape) { body.projection .proj-shell:not([data-vd-module="rueda-verbos"]) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; overflow: clip; } body.projection .proj-shell:not([data-vd-module="rueda-verbos"]) .proj-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } body.projection .proj-shell:not([data-vd-module="rueda-verbos"]) .proj-main > [data-vd-start] { flex: 1 1 auto; min-height: 0; } } /* * Partout ailleurs, la pile de lignes occupe la hauteur disponible et se * centre dedans — sans étirer les lignes elles-mêmes. * * La distinction est ce qui manquait. Étirer les lignes distribuerait la * hauteur entre les items et laisserait des trous entre des textes d'une * ligne ; centrer la pile ne change rien à leur taille et met le contenu là * où l'œil le cherche. Une scène d'un seul mot occupait le seizième supérieur * gauche d'un écran de trois mètres. */ body.projection .proj-main > [data-vd-start] { flex: 1 1 auto; min-height: 0; justify-content: center; } .proj-row { display: flex; align-items: center; gap: var(--spacing-4); } .proj-row[data-row][aria-hidden="true"] { opacity: .4; } /* * Ce qui reste à trouver se masque, il ne se floute plus. * * Le voile était un flou de quatorze pixels. Il disait bien qu'il y avait * quelque chose — mais une scène qui compte cinq lignes en attente était * floue aux cinq sixièmes, et un écran flou ne se lit pas comme un secret : * il se lit comme une panne de vidéoprojecteur. Un professeur ne sait pas si * la mise au point est mauvaise ou si c'est voulu. * * Le texte devient donc transparent sur une barre pleine, à la largeur exacte * du mot qu'elle cache. Rien ne bouge au dévoilement — la barre s'efface, le * mot paraît à sa place — et personne ne peut lire au travers, ce que le flou * ne garantissait pas sur les mots courts. */ .proj-row[data-row][aria-hidden="true"] .proj-answer, .proj-row[data-row][aria-hidden="true"] .t-proj-a, .proj-row[data-row][aria-hidden="true"] .word-chip, .proj-veiled { color: transparent; user-select: none; /* * Une barre posée sur la ligne, et non un pavé de la hauteur du texte. * * Le fond appliqué à toute la boîte donnait une dalle grise haute comme * une réponse de quatre-vingts pixels — plus voyante que la question * qu'elle accompagne. Le dégradé la ramène à la moitié de la hauteur de * fonte, centrée sur la ligne : c'est un caviardage, et cela se lit * comme tel. * * `box-decoration-break` la refait à chaque ligne quand la phrase se * replie ; sans lui, une phrase sur deux lignes n'aurait qu'une barre à * cheval sur les deux. */ background-image: linear-gradient(var(--color-proj-line), var(--color-proj-line)); background-size: 100% .52em; background-position: 0 55%; background-repeat: no-repeat; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .proj-row[data-row][aria-hidden="false"] { opacity: 1; } .proj-row[data-row][aria-hidden="false"] .proj-answer, .proj-row[data-row][aria-hidden="false"] .t-proj-a { filter: none; } /* Un voile dévoilé perd son flou, où qu'il soit — et ses enfants avec lui. * * Le dévoilement retire d'ordinaire `proj-veiled` ; cette règle couvre les * chemins où les deux classes se croisent. Les enfants y sont nommés parce que * « sous un voile, rien ne parle » les éteint tous : sans cette ligne, un voile * levé resterait muet à l'intérieur. */ .proj-veiled.revealed, .proj-row[data-row][aria-hidden="false"] .proj-answer, .proj-row[data-row][aria-hidden="false"] .t-proj-a { color: inherit; background-image: none; user-select: auto; } /* Un voile qui garderait ses deux classes ne doit pas rester muet à * l'intérieur : l'invariant ne vaut que tant que le voile est fermé. */ .proj-veiled.revealed * { color: inherit !important; } /* * La phrase, bornée en largeur autant qu'en hauteur. * * La projection se mesure en `vh`, et c'est juste : un vidéoprojecteur est * contraint par sa hauteur, jamais par sa largeur. Un téléphone tenu debout * est l'exact contraire — beaucoup de hauteur, très peu de largeur —, et la * même règle y donnait une typographie calibrée pour une hauteur dont l'écran * dispose, dans une largeur dont il ne dispose pas : « Mi hermano abre el * cuaderno en clase. » sortait sur quatre lignes de capitales d'affiche. * * Le professeur relit la scène sur son téléphone avant le cours — c'est déjà * la raison pour laquelle « El número » avait reçu le même traitement, et la * phrase du mot du jour n'avait jamais été bornée. * * Rien ne change sur un vidéoprojecteur : en 1920 × 1080, `6.4vh` vaut 69 px * et `9vw` en vaut 173 — c'est la hauteur qui l'emporte, comme avant. La * borne en largeur ne mord qu'en portrait. */ .proj-answer-lead { font-weight: 700; font-size: calc(clamp(26px, min(6.4vh, 9vw), 74px) * var(--proj-fit, 1)); } /* Une réponse de quelques signes est tout le contenu de la scène : elle prend * l'écran. Le seuil qui décide est posé dans le module — douze caractères, au * -delà de quoi c'est une phrase et non un mot. */ .proj-answer-display { font-size: calc(clamp(48px, 16vh, 220px) * var(--proj-fit, 1)); line-height: 1; } /* * « El número » : une seule colonne, au centre. * * Le nombre flottait au milieu et sa réponse partait sur le côté, plus * petite, sur une ligne décalée : l'œil ne savait pas où aller, et la moitié * de l'écran restait vide. Le nombre prend donc toute la place en haut, la * réponse se lit dessous, dans un cadre — flouté avant d'être dévoilé, comme * partout : la classe voit qu'il reste quelque chose à dire. */ body.projection .proj-shell[data-vd-module="numero"] .proj-row[data-row] { flex-direction: column; align-items: center; justify-content: center; gap: 3vh; text-align: center; } body.projection .proj-shell[data-vd-module="numero"] .proj-answer-display { font-size: calc(min(30vh, 24vw) * var(--proj-fit, 1)); line-height: .9; } body.projection .proj-shell[data-vd-module="numero"] [data-vd-veil] { display: flex; flex-direction: column; align-items: center; gap: 1vh; padding: 2.2vh 5vw; border: 2.5px solid var(--color-proj-line); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--color-proj-ink) 6%, transparent); } @supports not (color: color-mix(in srgb, red, blue)) { body.projection .proj-shell[data-vd-module="numero"] [data-vd-veil] { background: rgba(255,246,233,0.06); } } body.projection .proj-shell[data-vd-module="numero"] [data-vd-veil] .t-proj-a { font-size: calc(min(7.5vh, 5.5vw) * var(--proj-fit, 1)); font-weight: 600; } /* « En letras » : un plancher en pixels, sinon l'étiquette disparaît sur un * téléphone tenu debout, où un centième de la largeur ne fait que neuf * pixels. Le professeur relit la scène sur son téléphone avant le cours. */ body.projection .proj-shell:is([data-vd-module="numero"], [data-vd-module="efemerides"]) [data-vd-veil] .t-eyebrow { font-size: calc(clamp(14px, 2.2vh, 26px) * var(--proj-fit, 1)); color: var(--color-proj-ink-muted); } /* * Les morceaux du nombre s'écartent les uns des autres. * * Le dévoilement remet chacun de ses enfants en bloc — `[data-vd-veil] > *` —, * et cette règle-là, plus forte, annulait la disposition en ligne : les * morceaux se touchaient, « trescientossetenta y tres ». On la reprend donc * ici, sous le module, avec la force qu'il faut. * * « Un día como hoy » décompose l'année avec le même balisage, et attrape donc * le même défaut : les deux modules sont nommés ensemble plutôt que la règle * recopiée. */ body.projection .proj-shell:is([data-vd-module="numero"], [data-vd-module="efemerides"]) [data-vd-veil] .num-words { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .1em .45em; } /* * Le nombre décomposé : chaque groupe de chiffres a la couleur des mots qui le * disent, et sa valeur s'écrit en petit sous les mots. « 373 » : 3 et * « trescientos » en or, 73 et « setenta y tres » en vert — la construction * du nombre se voit, là où les élèves se trompent. * * Quatre couleurs, du plus grand au plus petit, prises aux jetons de la scène * ou éclaircies vers l'encre pour tenir sur le fond sombre du vidéoprojecteur. */ .num-m { color: color-mix( in oklab, var(--color-family-fonologia) 55%, var(--color-proj-ink) ); } @supports not (color: color-mix(in srgb, red, blue)) { /* * Le nombre décomposé : chaque groupe de chiffres a la couleur des mots qui le * disent, et sa valeur s'écrit en petit sous les mots. « 373 » : 3 et * « trescientos » en or, 73 et « setenta y tres » en vert — la construction * du nombre se voit, là où les élèves se trompent. * * Quatre couleurs, du plus grand au plus petit, prises aux jetons de la scène * ou éclaircies vers l'encre pour tenir sur le fond sombre du vidéoprojecteur. */ .num-m { color: rgb(231,158,184); } } .num-k { color: color-mix( in oklab, var(--color-primary) 45%, var(--color-proj-ink) ); } @supports not (color: color-mix(in srgb, red, blue)) { .num-k { color: rgb(189,171,225); } } .num-h { color: var(--color-proj-accent); } .num-u { color: var(--color-proj-success); } .num-words { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .1em .45em; } .num-part { display: inline-flex; flex-direction: column; align-items: center; } /* * La valeur sous les mots se lit à trois mètres, ou ne sert à rien. * * Elle sortait à un tiers de la taille des mots, en gris pâle : sur un * vidéoprojecteur, « 1.000 » sous « mil » devenait une tache. Elle prend la * couleur de son morceau — c'est ce qui les relie — et presque la moitié de * sa taille. */ .num-part small { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; font-size: .46em; margin-top: .2em; letter-spacing: .02em; } .num-link { color: var(--color-proj-ink-muted); } /* * Un voile ne cache que ce qui n'a pas sa propre couleur. * * Le caviardage travaille en `color: transparent`. Les morceaux du nombre, * eux, posent leur couleur en clair — quatre règles plus spécifiques que * celle du voile. Résultat : la réponse restait lisible sous une barre qui * la traversait, et la scène donnait l'année avant qu'on l'ait demandée. Il * faut donc éteindre aussi les morceaux, et les rallumer au dévoilement. */ /* * Rien ne se lit sous un voile, quelle que soit sa couleur. * * `color: transparent` posé sur la boîte voilée ne tient que par héritage : * tout enfant qui déclare sa propre couleur passe devant, et son texte se lit * au travers du caviardage. C'est arrivé deux fois — les chiffres colorés de * l'année, puis « esta sobra » de l'intrus —, et cela arrivera à chaque module * qui donnera une couleur à ce qu'il cache. * * D'où le sélecteur universel, qui est ici le bon outil : la règle n'est pas * « ces classes-là se taisent » mais « sous un voile, rien ne parle ». Une * liste à tenir à jour est une liste qu'on oubliera d'allonger, et l'oubli ne * se verra qu'en classe, sur le mur, devant trente élèves. * * Les fonds et les bordures restent : ce qui doit disparaître est le texte, * pas la forme qui le contiendra. * * `!important`, et c'est l'un des rares endroits qui le méritent. La règle a * le poids d'une classe, comme celles des modules — `.intru-out`, * `.num-k` — qui sont écrites plus loin dans la feuille : à poids égal, la * dernière gagne, et c'était la couleur du module. La réponse se lisait donc * sous sa propre barre de caviardage. Ce n'est pas une préférence de style * qu'on surcharge ici, c'est un invariant : sous un voile, rien ne se lit, et * aucun module n'a le droit d'en décider autrement. */ .proj-veiled, .proj-veiled * { color: transparent !important; } /* * « Aujourd'hui dans l'histoire » : la phrase, et le bouton qui la dit. * * Le bouton est dans la scène et non dans le pied. À trois mètres, une barre * d'outils ne se lit pas ; et comme le navigateur refuse de parler tant que * rien n'a été cliqué, c'est ce bouton qui porte le premier geste. */ .efem-line { gap: var(--spacing-4); align-items: flex-start; } .efem-line .listen-row .proj-btn { font-size: calc(clamp(15px, 2.4vh, 26px) * var(--proj-fit, 1)); } /* « Un día como hoy » : l'année et ses mots, centrés l'un sous l'autre. */ .efem-year { align-items: center; gap: var(--spacing-2); width: 100%; } /* La soustraction, en chiffres monospacés : les deux années s'alignent. */ .efem-sum { font-family: "Space Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--color-proj-ink-muted); } /* Le compteur, en haut à droite de la scène, là où il ne dispute rien. */ /* Le compteur « 3 / 5 » est posé dans le coin de la scène : il lui faut un repère. Déclaré par le serveur, qui sait s'il l'a mis. */ .proj-main.has-count { position: relative; } .proj-count { position: absolute; top: 0; right: 0; font-family: Fredoka; font-weight: 600; font-size: calc(clamp(16px, 3vh, 34px) * var(--proj-fit, 1)); color: var(--color-proj-ink-muted); font-variant-numeric: tabular-nums; } /* Une réponse qui prend l'écran se centre dedans — quand elle est seule. * * Alignée à gauche, elle laissait les deux tiers droits vides, ce qu'on * reproche à juste titre à une scène de projection. Mais la règle s'appliquait * aussi aux scènes qui empilent plusieurs lignes, et là elle cassait tout : * sur « La fecha », « martes » se centrait pendant que le jour, le mois, * l'année et la phrase restaient calés à gauche. Une ligne au milieu, quatre * au bord — on ne voit plus que ça. * * Le centrage vaut donc là où il n'y a qu'une chose à l'écran : les modules * qui ne montrent qu'un item à la fois, et les scènes d'une seule ligne. * Partout ailleurs, toutes les lignes partagent le même bord. */ body.projection .proj-shell[data-vd-solo] .proj-row:has(.proj-answer-display), body.projection .proj-shell[data-vd-steps="1"] .proj-row:has(.proj-answer-display) { justify-content: center; } /* Les étiquettes tiennent une colonne, et les réponses commencent toutes au * même endroit. * * « EL DÍA », « EL MES », « EL AÑO », « EL DÍA DE LA SEMANA » : quatre * étiquettes de largeurs différentes, posées à gauche, faisaient démarrer * leurs quatre réponses à quatre abscisses différentes. L'œil cherche * l'alignement qu'il attend d'une liste, ne le trouve pas, et l'écran paraît * bâclé sans qu'on sache dire pourquoi. * * Une largeur fixe en `ch` plutôt qu'une grille : la colonne doit être la même * d'une ligne à l'autre, or chaque ligne est sa propre boîte flexible et ne * sait rien de ses voisines. Vingt caractères logent la plus longue étiquette * des trois langues ; au-delà elle passe à la ligne dans sa colonne, et les * réponses restent alignées. */ body.projection .proj-shell:not([data-vd-solo]) .proj-row > .t-eyebrow:first-child { flex: 0 0 auto; width: 20ch; text-align: right; overflow-wrap: break-word; } /* * Une réponse en tête de liste n'est pas une réponse qui prend l'écran. * * « querer » fait six signes : la règle du mot court lui donnait cent * quarante-quatre pixels. Mais il n'est pas le contenu de la scène — les six * formes conjuguées le sont, et elles passaient sous la ligne de flottaison * pour lui laisser la place. Un mot ne prend l'écran que lorsqu'il n'y a rien * d'autre à montrer. */ .proj-row:has(.proj-group) .proj-answer-display { font-size: calc(clamp(26px, 6.4vh, 74px) * var(--proj-fit, 1)); } body.projection .proj-row:has(.proj-group) { justify-content: flex-start; } /* Le sourcil qui porte la règle — « sin tilde y termina en vocal » — est le * seul texte que la classe recopie. Il ne peut pas rester en corps * d'étiquette. */ body.projection .proj-row .t-eyebrow { font-size: calc(clamp(14px, 2.2vh, 24px) * var(--proj-fit, 1)); } .proj-media { flex: 1 1 340px; min-width: 270px; position: relative; } .proj-main { flex: 1 1 460px; min-width: 300px; gap: var(--spacing-6); } /* L'espace entre la scène et son panneau était calibré pour une page qui * défile. Sur un écran d'une seule hauteur, il se prend sur le contenu — et le * contenu est ce qu'on projette. */ .proj-body { gap: var(--spacing-6); align-items: center; } .proj-head { gap: var(--spacing-3); } .proj-head .proj-eyebrow { width: 100%; } .proj-steps-bar { max-width: 300px; } .proj-levels { gap: var(--spacing-1); } .proj-note { border: none; color: var(--color-proj-ink-muted); } .proj-foot { gap: var(--spacing-3); } .proj-panel { padding: var(--spacing-5); } /* La mention de source : obligatoire, et discrète. Elle doit être lisible de * qui la cherche, invisible de qui regarde la réponse. */ .proj-credit { margin: var(--spacing-3) 0 0; font-size: calc(clamp(11px, 1.6vh, 16px) * var(--proj-fit, 1)); color: var(--color-proj-ink-muted); } .proj-frame { padding: var(--spacing-4); overflow: hidden; } /* ══ une illustration projetée ══ * * L'image du mot du jour partait avec `width: 100%` et rien d'autre. Une * illustration carrée de mille pixels prenait donc toute la largeur de sa * colonne, puis toute la hauteur qui va avec — et la scène, qui tient en un * écran par principe, se mettait à défiler. Le professeur voyait un sac à dos * magnifique et la moitié du mot. * * La contrainte est en hauteur, parce que c'est la hauteur qui manque : un * vidéoprojecteur est large. `contain` garde les proportions, et la colonne * s'étire d'elle-même autour. * * Le plafond est doublé — la hauteur disponible dans la boîte, et une valeur * en `vh`. La première suffit quand toute la chaîne flexible se comporte ; la * seconde tient même si l'un des ancêtres perd sa hauteur définie, ce qui * arrive dès qu'un module intercale une boîte. Une image trop petite n'a * jamais fait défiler personne ; une image trop grande, si. */ body.projection .proj-body.has-illus .proj-media { align-self: stretch; min-height: 0; display: flex; } body.projection .proj-body.has-illus .proj-media > .proj-frame { flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; /* * Un cadre carré, borné en hauteur d'écran, quelle que soit l'image. * * Les illustrations n'ont pas toutes la même forme : un stylo est * nettement plus haut que large, et le cadre s'étirait avec lui jusqu'à * pousser la scène sous le bord de l'écran — une barre de défilement * apparaissait en pleine projection. * * `max-height: 100%` ne suffisait pas : un pourcentage de hauteur ne * résout rien quand le parent n'a pas de hauteur définie, et le navigateur * le traite alors comme absent. La borne est donc en unités d'écran, qui * ne dépendent de personne, et le rapport carré fixe la largeur d'après * elle. L'image se contient dedans : plus haute que large ou l'inverse, * elle tient. */ aspect-ratio: 1 / 1; max-height: min( 62vh, 62vw ); width: auto; /* * Le cadre porte le papier de l'illustration. * * Les images sont dessinées sur un fond crème, et le cadre était * transparent : une image plus étroite que son cadre laissait voir le * violet de la scène de part et d'autre, et le carton clair flottait au * milieu comme un rectangle rapporté. Le cadre prend donc la même teinte * que le papier des illustrations — la frontière disparaît, et le tout se * lit comme une seule carte posée sur la scène. */ background: var(--color-proj-paper); /* * Et l'image touche les bords. * * Le cadre gardait sa marge intérieure : le papier du cadre formait donc * un anneau autour du papier du dessin, deux crèmes voisins mais pas * identiques, et la carte semblait doublée. Sans marge, l'image remplit le * carré et le fond ne se voit plus que là où il sert — les bandes d'une * image qui n'est pas au format. */ padding: 0; overflow: hidden; } /* ══ la carte d'une ville, dans « El tiempo » ══ * * Le pictogramme d'abord, puis la ville, puis le degré : c'est l'ordre de * lecture d'une carte météo, et celui dans lequel la classe formule sa * réponse — « en Madrid hace sol, treinta y cinco grados ». * * Le degré est gros mais pas autant que la réponse dévoilée : il pose la * question, il ne la remplace pas. */ .sky-glyph { display: block; } .sky-glyph svg { width: clamp( 34px, 7vh, 72px ); height: clamp( 34px, 7vh, 72px ); fill: none; stroke: var(--color-proj-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sky-degrees { font-family: Fredoka; font-weight: 700; font-size: calc(clamp(22px, 5vh, 52px) * var(--proj-fit, 1)); line-height: 1.1; color: var(--color-proj-ink); } .proj-illus { display: block; width: 100%; height: 100%; /* Le cadre borne déjà : l'image n'a qu'à s'y contenir. */ max-height: 100%; object-fit: contain; border-radius: var(--radius-lg); } .proj-missing { display: grid; place-items: center; min-height: 220px; font-family: Fredoka; font-size: clamp(48px, 9vw, 96px); color: var(--color-proj-line); } /* Zones cliquables : le schéma `zones` du § 4.3. */ .proj-zone { display: flex; flex-direction: column; gap: var(--spacing-1); padding: var(--spacing-4); text-align: left; background: rgba(255, 255, 255, .045); border: 3px solid var(--color-proj-line); border-radius: var(--radius-xl); color: inherit; font: inherit; cursor: pointer; } .proj-zone[aria-expanded="true"] { border-color: var(--color-proj-accent); } .proj-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--spacing-4); } /* La syllabe tonique se distingue par la taille et le poids autant que par la * couleur : sur un vidéoprojecteur délavé, la nuance seule disparaît. */ .syll { color: var(--color-proj-ink-muted); } .syll-stress { font-style: normal; font-size: 1.25em; font-weight: 700; color: var(--color-proj-accent); border-bottom: .08em solid currentColor; } .syll-sep { color: var(--color-proj-line); } /* La découpe en syllabes est la réponse du module : elle se lit d'aussi loin * que le mot. Elle sortait à la taille d'une réponse ordinaire, moitié moins * grande que le mot qu'elle explique. */ .proj-answer:has(> .syll) { font-size: calc(clamp(30px, 9vh, 120px) * var(--proj-fit, 1)); } /* Champs de saisie. Les maquettes n'en montrent pas — leurs valeurs sont * figées — mais un écran qui corrige en a besoin. Hauteur 52 px, comme * l'exige le § 11 des specs. */ .field { display: flex; flex-direction: column; gap: var(--spacing-1); } .field-input { width: 100%; min-height: 52px; padding: var(--spacing-2) var(--spacing-3); background: var(--color-surface-raised); color: var(--color-ink); border: 2px solid var(--color-line-strong); border-radius: var(--radius-md); font-family: var(--font-body-md, Nunito), system-ui, sans-serif; font-size: var(--text-body-md); } /* ══ les groupes de champs ══ * * Aucune règle ne portait sur `fieldset` ni sur `legend` : les formulaires * héritaient donc du style par défaut du navigateur — un cadre en relief * gravé, hérité de 1996, avec l'intitulé encoché dedans qui coupe le trait. * Sur l'écran de création d'une classe, cela donnait cinq boîtes grises aux * titres à moitié effacés, au milieu de champs qui, eux, suivaient la charte. * * Le `fieldset` reste pour ce qu'il vaut — il groupe des boutons radio, et les * lecteurs d'écran annoncent la légende avant chaque option —, mais il ne * dessine plus rien. La légende redevient une étiquette posée au-dessus de son * groupe, comme celle de n'importe quel champ. * * `min-width: 0` parce qu'un `fieldset` refuse de se réduire dans une boîte * flexible sans cela : c'est une particularité de l'élément, pas un oubli. */ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: var(--spacing-2); } .field-input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } /* Un champ touché mais non enregistré doit se voir : un relecteur qui perd * son travail à 23 h ne recommence pas. */ .field-input.is-dirty { border-color: var(--color-gold); } /* ══ l'œil d'un champ de mot de passe ══ * * Trois états, et le second est celui qui compte : `armed` avertit SANS * dévoiler. Le champ se borde alors de la couleur du bandeau, pour que le * professeur qui ne lit pas voie quand même que quelque chose attend sa * décision. Voir `includes/class-password-eye.php`. * * L'œil se centre sur `.pwd-box` plutôt que de se caler à `top: 0` : la * hauteur d'un champ appartient à `.field-input`, et un bouton qui la * recopierait se décalerait le jour où elle change. */ .pwd-field { display: flex; flex-direction: column; gap: var(--spacing-2); } .pwd-box { position: relative; display: block; } /* La place de l'œil, réservée dans le champ : sans cela le dernier caractère * tapé passe sous le bouton. */ .pwd-field .pwd-input { padding-right: 52px; } .pwd-eye { position: absolute; right: var(--spacing-1); top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-ink-muted); } .pwd-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pwd-eye:hover { background: var(--color-surface-sunken); color: var(--color-ink); } /* Un seul des deux tracés est monté à la fois : l'œil ouvert dit « on peut * afficher », l'œil barré dit « on peut masquer ». */ .pwd-eye-shut { display: none; } [data-vd-state="shown"] .pwd-eye-open { display: none; } [data-vd-state="shown"] .pwd-eye-shut { display: block; } [data-vd-state="shown"] .pwd-eye { color: var(--color-primary); } [data-vd-state="armed"] .pwd-eye { color: var(--color-gold-strong); background: var(--color-surface-sunken); } [data-vd-state="armed"] .pwd-input { border-color: var(--color-brand-band); } .pwd-warn { background: var(--color-surface-sunken); border-left: 4px solid var(--color-gold); border-radius: var(--radius-md); padding: var(--spacing-3); color: var(--color-gold-strong); font-size: 14px; line-height: 1.45; } .pwd-warn-say { display: flex; gap: var(--spacing-2); align-items: flex-start; margin: 0; } .pwd-warn-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; margin-top: 2px; } .pwd-warn-acts { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin: var(--spacing-3) 0 0; } /* Les deux actions portent le même poids visuel que leur avertissement, et pas * celui de l'action principale du formulaire : dévoiler son mot de passe n'est * pas ce que le professeur est venu faire sur cet écran. */ .pwd-warn-go { background: var(--color-gold-strong); color: var(--color-surface-raised); box-shadow: 0 4px 0 #6b4906; } .pwd-warn-go:active { box-shadow: 0 0 0 #6b4906; } .pwd-warn-no { background: var(--color-surface-raised); color: var(--color-gold-strong); border: 2px solid var(--color-gold-strong); } .pwd-left { display: flex; gap: var(--spacing-2); align-items: center; margin: 0; font-size: 13px; color: var(--color-ink-muted); } .pwd-left-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; } .review-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 3px solid var(--color-line-strong); border-radius: var(--radius-xl); background: var(--color-proj-surface); } /* Texte réservé aux technologies d'assistance. Les pastilles de langue n'ont * pas de libellé visible — c'est le parti pris des maquettes — mais elles * doivent en avoir un pour qui n'en voit pas la couleur. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Signalement en projection. Discret : il sert deux fois par trimestre, pas * deux fois par séance. Mais atteignable en un geste quand il sert. */ /* Le contrôle n'est plus un
: plus de marqueur de divulgation à * masquer, et plus de position relative à tenir puisque le panneau a quitté * cet élément pour le corps du document. */ .proj-report { display: inline-flex; } /* * Le menu est ancré à la fenêtre, et vit dans le corps du document. * * Le déplacer là est ce qui a fini par le rendre atteignable. En absolu ou en * fixe mais laissé dans le pied de scène, il dépendait de tous ses ancêtres : * la coquille de projection découpe ce qui la dépasse, et un élément en * position fixe se laisse quand même contenir par un ancêtre qui porte une * transformation ou un filtre — la scène en compte plusieurs. * * En bas à droite, au-dessus du pied : c'est là que se trouve son bouton, et * c'est le seul coin dont on soit sûr qu'il reste libre. */ .proj-report-menu { position: fixed; right: var(--spacing-8); bottom: calc(var(--spacing-8) + 4.5rem); z-index: 60; display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 18rem; max-width: min(24rem, calc(100vw - 2 * var(--spacing-4))); padding: var(--spacing-3); background: var(--color-proj-surface); border: 3px solid var(--color-proj-line); border-radius: var(--radius-xl); color: var(--color-proj-ink); } /* `hidden` doit gagner : la règle ci-dessus pose un `display: flex` qui, sans * cela, l'emporterait sur le `display: none` du navigateur — et le panneau * resterait ouvert en permanence. */ .proj-report-menu[hidden] { display: none; } .proj-report-menu .proj-chip { text-align: left; } .proj-report-menu .t-eyebrow { color: var(--color-proj-ink-muted); margin: 0 0 var(--spacing-1); } /* La provenance d'un contenu de remplacement s'annonce : un professeur doit * savoir qu'il projette un autre niveau ou une archive, pas le contenu du jour. */ .proj-origin { display: inline-block; padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); background: var(--color-proj-line); color: var(--color-proj-ink); font-family: var(--font-label), Nunito, sans-serif; font-size: var(--text-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } /* Une puce qui est un lien doit s'annoncer comme tel : le survol et le focus * répondent, et le soulignement par défaut disparaît. */ /* Une ancre déguisée en contrôle ne se souligne pas. Un vrai lien dans une * phrase, si : le soulignement est le seul repère qui ne dépende pas de la * couleur, et le supprimer partout d'un `a { text-decoration: none }` global * priverait de ce repère les daltoniens. D'où une liste — mais une liste dont * le sélecteur d'attribut attrape `btn`, `btn-ghost` et `proj-btn` du même * coup, ainsi que les variantes à venir. Corriger ce défaut une classe à la * fois l'a laissé revenir trois fois. */ /* Un lien de texte. * * Faute de règle, les quelques liens qui n'habillent pas un contrôle — * « Mot de passe oublié ? », « Essayer » — tombaient sur le bleu souligné du * navigateur, au milieu d'une page qui n'a pas une seule autre note de bleu. * Ils se voyaient, et c'est bien ce qu'on leur demande ; ils se voyaient comme * une pièce rapportée, ce qu'on ne leur demandait pas. * * Le soulignement reste, décalé sous la ligne de base : c'est ce qui distingue * un lien d'un mot en couleur, et le retirer coûterait à ceux qui distinguent * mal les couleurs. Les contrôles, eux, se déclarent juste en dessous et * gardent le leur. */ /* `a:not([class])` et non `a`. * * Écrite sur `a` nu, la règle de survol l'emportait sur celle des boutons : * `a:hover` pèse 0,1,1 quand `.btn-primary` pèse 0,1,0. Au survol, un bouton * primaire prenait donc le violet du lien pour couleur de texte — violet sur * violet, un rectangle vide. La couleur au repos, elle, passait inaperçue : * c'est le survol seul qui inversait la hiérarchie. * * Un contrôle porte toujours une classe, un lien de texte n'en porte jamais. * Le sélecteur dit exactement cela, et ne peut plus atteindre un bouton même * s'il pèse davantage. */ a:not([class]) { color: var(--color-primary); text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; } a:not([class]):hover { color: var(--color-primary-hover); text-decoration-color: currentColor; } a:not([class]):focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } a[class*="btn"], a.chip, a.tile, a.tile-row, a.push, a.langdot, a.brand, a.class-card-band, a.class-head-back, a.icon-btn, .class-crumb a, a.ui-lang { text-decoration: none; } a.chip { display: inline-flex; align-items: center; gap: var(--spacing-2); } a.chip:hover { border-color: var(--color-primary); color: var(--color-primary); } a.chip:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } a.chip .mod-icon { width: 22px; height: 22px; } a.tile { color: inherit; } a.tile:hover { border-color: var(--color-primary); } a.tile:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* Un lien qui prend l'apparence d'un bouton ne garde pas son soulignement. * Oubli des maquettes, qui n'emploient que des