/* Testeur v2 — feuille de la page /testeur.
   Portage de la maquette retenue par Antoine le 2026-09-21 (variante C).
   Source de référence, à consulter avant toute retouche visuelle :
   `Keyboard Layouts/projects/azerty-global/operations/2026-09-21-testeur-v2-maquette/`.

   ⛔ Deux couches, volontairement non fusionnées.
   `.tc__*` est la couche de base ; `#testeur …` est la couche de correction
   issue des allers-retours de validation. Les deux visent le même élément et
   se contredisent par endroits (couleur du glyphe actif, soulignement,
   géométrie de la touche Entrée) : c'est la couche `#testeur` qui fait foi.
   Les fusionner voudrait dire retrancher, à l'œil, ce qu'Antoine a validé au
   pixel. La règle générée par `clavier-cadre.css` a par ailleurs une
   spécificité que `.tc` seule ne bat pas — l'identifiant est nécessaire.

   ⛔ `clavier-cadre.css` doit être déclarée AVANT cette feuille dans
   `extraStyles` : sans elle, une touche mesure 1088 px de large.

   Quelques largeurs sont en pixels (25.5px, 18.7px, 17px) : ce sont des
   calages optiques des emplacements de glyphes, mesurés sur le rendu, pas des
   valeurs de l'échelle typographique. Elles n'ont pas de jeton et ne doivent
   pas en recevoir un.

   CSP : `style-src 'self'`. Aucun `style=`, aucune balise `<style>`. */

.tc { margin-block:var(--e-6) var(--e-7); scroll-margin-top:var(--e-4); }
.tc [hidden] { display:none !important; }
.tc__entete { display:flex; align-items:center; justify-content:space-between; gap:var(--e-5); margin-bottom:var(--e-6); }
.tc__entete h1 { max-width:none; margin-bottom:var(--e-2); }
.tc__entete p { color:var(--texte-2); margin:0; }
.tc__progression { display:flex; gap:var(--e-4); list-style:none; padding:0; margin:0; font-size:var(--t-petit); }
.tc__progression li { display:flex; align-items:center; gap:var(--e-2); color:var(--texte-2); white-space:nowrap; }
.tc__progression li span { font-weight:600; }
.tc__progression li[aria-current="step"] { color:var(--encre); font-weight:600; text-decoration:underline; text-underline-offset:var(--e-2); }
.tc__instrument { margin:0; }
.tc .clavier { width:100%; padding:var(--e-4); border:1px solid var(--bordure); background:var(--papier); }
.tc .clavier__cadre { gap:var(--e-2); grid-template-rows:repeat(5,var(--e-8)); }
.tc .clavier__touche { position:relative; min-width:0; border:1px solid var(--bordure); border-radius:var(--rayon-controle); background:var(--surface); color:var(--encre); }
.tc .clavier__glyphe { display:none; }
.tc .clavier__glyphe[data-slot] { display:block; position:absolute; line-height:1; font-family:var(--police-sans); font-weight:400; color:var(--texte-2); }
.tc .clavier__glyphe[data-slot="base"] { bottom:var(--e-2); left:var(--e-2); font-size:var(--t-h3); color:var(--encre); }
.tc .clavier__touche[data-lettre] .clavier__glyphe[data-slot="base"] { text-transform:lowercase; }
.tc .clavier__glyphe[data-slot="maj"] { top:var(--e-2); left:var(--e-2); font-size:var(--t-corps); }
.tc .clavier__glyphe[data-slot="verrmaj"] { top:var(--e-2); right:var(--e-2); font-size:var(--t-corps); }
.tc .clavier__glyphe[data-slot="altgr"] { bottom:var(--e-2); right:var(--e-2); font-size:var(--t-h4); }
.tc .clavier__glyphe[data-slot="majaltgr"] { top:var(--e-2); right:var(--e-2); font-size:var(--t-corps); }
.tc .clavier__glyphe[data-invisible][data-slot] { font-size:var(--t-petit); }
.tc .clavier__glyphe[data-actif] { font-weight:600; color:var(--encre); text-decoration:underline; text-underline-offset:var(--e-1); }
.tc .clavier__glyphe[data-exercice] { color:var(--action); font-weight:600; }
.tc .clavier__touche[data-attendue] { outline:2px solid var(--avertissement); outline-offset:-2px; background:var(--avertissement-fond); }
.tc .clavier__touche[data-appuyee] { background:var(--encre); color:var(--papier); }
.tc .clavier__touche[data-appuyee] .clavier__glyphe { color:var(--papier); }
.tc .clavier__touche[data-mod-attendu] { border-color:var(--avertissement); background:var(--avertissement-fond); }
.tc .clavier__touche[data-mod-actif] { background:var(--encre); color:var(--papier); }
.tc .clavier__touche--mod { display:flex; align-items:center; justify-content:center; padding:var(--e-2); text-align:center; }
.tc .clavier__libelle { font-family:var(--police-sans); font-size:var(--t-petit); line-height:1.2; }
.tc .clavier__touche--entree { align-items:center; }
.tc__legende { display:flex; justify-content:space-between; gap:var(--e-5); padding-block:var(--e-3) var(--e-5); color:var(--texte-2); font-size:var(--t-petit); }
.tc__legende [data-mode] { white-space:nowrap; color:var(--encre); }
.tc__dialogue { padding-block:var(--e-5); border-top:1px solid var(--bordure); min-height:calc(var(--e-9) + var(--e-8)); }
.tc__question { display:grid; grid-template-columns:1fr 2fr; gap:var(--e-7); }
.tc__question h2 { font-size:var(--t-h4); line-height:1.25; margin-bottom:var(--e-3); }
.tc__question p { color:var(--texte-2); font-size:var(--t-petit); margin:0; }
.tc__choix { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2); align-content:start; }
.tc__choix button { font:inherit; color:var(--encre); background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon-controle); min-height:var(--cible-min); padding:var(--e-2) var(--e-3); text-align:left; cursor:pointer; }
.tc__choix button:hover { border-color:var(--action); color:var(--action); }
.tc__lien { display:inline-flex; align-items:center; min-height:var(--cible-min); padding:0; border:0; background:none; color:var(--action); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.tc__lien:hover { text-decoration-thickness:2px; }
.tc__usages { display:grid; grid-template-columns:1fr 1fr; column-gap:var(--e-4); margin-bottom:var(--e-3); }
.tc__usages label { display:flex; align-items:center; gap:var(--e-2); min-height:var(--cible-min); cursor:pointer; }
.tc__usages input { accent-color:var(--action); width:var(--e-4); height:var(--e-4); flex-shrink:0; }
/* Variante C, retenue par Antoine le 2026-09-21 : un seul axe, la consigne et
   ses actions sur une ligne, la phrase à taper sous elle, le tout dans un
   cadre posé au-dessus du clavier. Le libellé de saisie devient invisible à
   l'œil et reste au nom accessible du champ. */
.tc__exercice { display:flex; flex-direction:column; gap:var(--e-1);
  background:var(--surface); border:1px solid var(--bordure);
  padding:var(--e-3) var(--e-5); margin-bottom:var(--e-4);
  border-top:1px solid var(--bordure); min-height:0; }
.tc__exercice > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:var(--e-5); }
.tc__exercice .tc__actions { flex-shrink:0; }
.tc__saisie-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tc__saisie-label [data-reussite] { color:var(--succes); }
.tc__frappe { min-height:0; padding-block:var(--e-2); font-size:var(--t-h1); line-height:1.2; white-space:pre-wrap; cursor:text; border-bottom:0; caret-color:var(--action); }
.tc__frappe::selection, .tc__frappe *::selection { background:var(--action); color:var(--surface); }
.tc__frappe [data-etat="a-taper"] { color:var(--texte-2); }
.tc__frappe [data-etat="attendu"] { color:var(--encre); border-bottom:2px solid var(--encre); }
/* Cible réussie en vert (QCM d'Antoine du 2026-10-03) : en gras seul, le É
   réussi ne se distinguait presque pas du É attendu. Le vert attend la
   réussite, que les félicitations nomment : pendant la frappe, le vert et le
   gris « à taper » ont la même luminance (1,01:1, critique du 2026-10-03).
   Exception locale de DESIGN.md. */
.tc__frappe [data-etat="juste"] { color:var(--encre); font-weight:600; }
.tc__frappe[data-reussie] [data-etat="juste"] { color:var(--succes); }
.tc__frappe [data-etat="erreur"] { color:var(--erreur); text-decoration:underline wavy; text-underline-offset:var(--e-1); }
.tc__consigne { color:var(--texte-2); font-size:var(--t-petit); margin:var(--e-2) 0 0; }
/* Félicitations : composant message, texte à gauche, téléchargement à droite. */
.tc__bravo { display:flex; align-items:center; justify-content:space-between; gap:var(--e-5); margin:var(--e-2) 0 var(--e-1); padding:var(--e-3) var(--e-4); }
.tc__bravo p { margin:0; max-width:68ch; text-wrap:pretty; }
.tc__bravo .bouton { flex-shrink:0; }
/* Variante C : la consigne redevient une phrase de corps, sur la même ligne
   que les actions, sans hauteur réservée qui creuserait le cadre. */
.tc__indice { font-family:var(--police-sans); font-size:var(--t-corps); font-weight:400; line-height:1.55; color:var(--texte-2); margin:0; min-height:0; }
.tc__explication { margin:0; color:var(--texte-2); font-size:var(--t-petit); }
.tc__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-4); font-size:var(--t-petit); }
.tc__actions a { display:inline-flex; align-items:center; min-height:var(--cible-min); }
.tc__bilan { display:grid; grid-template-columns:minmax(15rem,1fr) 3fr; gap:var(--e-6); border-top:1px solid var(--bordure); padding-top:var(--e-5); }
.tc__bilan-texte { margin:0 0 var(--e-4); color:var(--texte-2); }
.tc__systemes { font-size:var(--t-petit); color:var(--texte-2); margin:var(--e-2) 0; }
.tc__faits { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-4); list-style:none; margin:0 0 var(--e-4); padding:0; }
.tc__faits li { display:flex; flex-direction:column; font-size:var(--t-petit); }
.tc__faits strong { font-size:var(--t-h3); font-weight:600; margin-block:var(--e-1); }
.tc__faits [data-bilan] { color:var(--texte-2); }
.tc__faits [data-bilan][data-valide] { color:var(--succes); }
.tc__reste { font-size:var(--t-petit); color:var(--texte-2); margin:0; }
.tc__etroit { display:none; }
[data-theme="dark"] #testeur .clavier { --surface:#302A21; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) #testeur .clavier { --surface:#302A21; }
}
/* The shared generated synthesis rules have higher specificity. Reset them only
   inside this prototype; data-slot is the sole authority for visible legends. */
#testeur .clavier__cadre { border:0; padding:0; gap:var(--e-1); grid-template-rows:repeat(5,var(--e-8)); }
#testeur .clavier__touche { margin:0; }
#testeur .clavier__touche--mod,
#testeur .clavier__touche[data-position="A03"] { background:color-mix(in srgb,var(--bordure) 42%,var(--surface)); }
#testeur .clavier__touche--entree::after { background:color-mix(in srgb,var(--bordure) 42%,var(--surface)); }
#testeur .clavier__touche[data-mod-actif] { background:color-mix(in srgb,var(--action) 16%,var(--surface)); border-color:color-mix(in srgb,var(--action) 48%,var(--bordure)); color:var(--encre); }
#testeur .clavier__touche[data-mod-attendu] { background:var(--avertissement-fond); border-color:var(--avertissement); }
#testeur .clavier__touche[data-mod-actif] .clavier__libelle { color:inherit; }
#testeur .clavier__glyphe { display:none; }
#testeur .clavier__glyphe[data-slot] { display:block; position:absolute; inset:auto; transform:none; font-family:var(--police-sans); line-height:1; color:var(--texte-2); font-weight:400; }
#testeur .clavier__glyphe[data-slot="base"] { left:var(--e-2); bottom:var(--e-2); font-size:var(--t-h3); color:var(--encre); }
#testeur .clavier__glyphe[data-slot="maj"] { left:var(--e-2); top:var(--e-2); font-size:var(--t-corps); }
#testeur .clavier__glyphe[data-slot="verrmaj"] { right:var(--e-2); top:var(--e-2); font-size:var(--t-corps); }
#testeur .clavier__glyphe[data-slot="altgr"] { right:var(--e-2); bottom:var(--e-2); font-size:var(--t-h4); }
#testeur .clavier__glyphe[data-slot="majaltgr"] { right:var(--e-2); top:var(--e-2); font-size:var(--t-corps); }
#testeur .clavier__glyphe[data-invisible][data-slot] { font-size:var(--t-petit); }
#testeur .clavier__glyphe[data-actif] { color:var(--encre); font-weight:600; text-decoration:underline; text-underline-offset:var(--e-1); }
#testeur .clavier__glyphe[data-exercice] { font-weight:600; }
#testeur .clavier__touche[data-appuyee] .clavier__glyphe { color:var(--papier); }
#testeur .clavier__libelle { font-family:var(--police-sans); font-size:var(--t-petit); }
#testeur .clavier__touche[data-lettre] .clavier__glyphe[data-slot="base"] { left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); }
#testeur[data-majuscules-actives] .clavier__touche[data-lettre] .clavier__glyphe[data-slot="base"] { text-transform:uppercase; }
#testeur .clavier__glyphe[data-slot] { font-size:calc(var(--t-corps) * 1.18); width:25.5px; text-align:center; font-variant-numeric:tabular-nums; transition:none; }
#testeur .clavier__glyphe[data-invisible][data-slot] { width:auto; font-size:var(--t-petit); }
#testeur .clavier__touche[data-position="A03"] .clavier__glyphe[data-slot="base"] { left:50% !important; right:auto !important; bottom:50% !important; width:auto !important; transform:translate(-50%,50%) !important; text-align:center; }
#testeur .clavier__touche:not([data-lettre]) .clavier__glyphe[data-slot="base"],
#testeur .clavier__touche:not([data-lettre]) .clavier__glyphe[data-slot="maj"] { left:var(--e-1); width:17px; text-align:center; }
#testeur .clavier__touche:not([data-lettre]) .clavier__glyphe[data-slot="altgr"],
#testeur .clavier__touche:not([data-lettre]) .clavier__glyphe[data-slot="majaltgr"] { right:var(--e-1); width:17px; text-align:center; }
#testeur .clavier__glyphe[data-actif] { color:var(--action); font-weight:600; text-decoration:none; }
#testeur .clavier__touche--entree { clip-path:none; border:0; background:transparent; overflow:visible; padding-left:calc(16.667% + var(--e-2)); }
#testeur .clavier__touche--entree::before,
#testeur .clavier__touche--entree::after { content:""; position:absolute; pointer-events:none; }
#testeur .clavier__touche--entree::before { inset:0; background:var(--bordure); clip-path:polygon(0 0,100% 0,100% 100%,16.667% 100%,16.667% 50%,0 50%); }
#testeur .clavier__touche--entree::after { inset:1px; background:var(--surface); clip-path:polygon(0 0,100% 0,100% 100%,calc(16.667% + 1px) 100%,calc(16.667% + 1px) calc(50% - 1px),0 calc(50% - 1px)); }
#testeur .clavier__touche--entree .clavier__libelle { position:relative; z-index:1; }
#testeur .clavier__touche--entree::after { background:color-mix(in srgb,var(--bordure) 42%,var(--surface)); }
.tc__faits li { min-width:0; padding-right:var(--e-3); }
.tc__faits li > span:last-child { max-width:16ch; white-space:normal; }
@media (min-width:1080px) and (max-width:1279px) { .tc__entete { align-items:flex-start; flex-direction:column; gap:var(--e-3); } .tc .clavier__cadre { gap:var(--e-1); } }
@media (max-width:767px) { .tc__etroit { display:block; } }
.tc__etroit h2 { margin:0 0 var(--e-3); }
.tc__etroit-action { margin:var(--e-5) 0 0; }

/* C: focus on the current question, then on typing. */
#testeur .clavier__touche[data-lettre] .clavier__glyphe[data-slot="altgr"],
#testeur .clavier__touche[data-lettre] .clavier__glyphe[data-slot="majaltgr"] { right:2px; width:18.7px; font-size:18px; }
#testeur .clavier__glyphe[data-morte] { border:0; text-decoration:none; }
#testeur .clavier__glyphe[data-morte][data-actif] { color:var(--erreur); }

/* Conclusion: the decision to download belongs beside the result, never below it. */
#testeur[data-ecran="synthese"] .tc__entete { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"intro action" "progress progress"; align-items:start; column-gap:var(--e-6); row-gap:var(--e-2); margin-bottom:var(--e-4); }
#testeur[data-ecran="synthese"] .tc__resultat-intro { grid-area:intro; }
#testeur[data-ecran="synthese"] .tc__resultat-intro h1 { max-width:28ch; text-wrap:balance; }
#testeur[data-ecran="synthese"] .tc__resultat-actions { grid-area:action; display:flex; flex-direction:column; align-items:flex-end; padding-top:var(--e-1); }
#testeur[data-ecran="synthese"] .tc__resultat-actions p { margin-top:var(--e-2); font-size:var(--t-petit); white-space:nowrap; }
#testeur[data-ecran="synthese"] .tc__progression { display:none; }
#testeur[data-ecran="synthese"] .tc__progression-terminee { grid-area:progress; margin:0; color:var(--texte-2); font-size:var(--t-petit); }
#testeur[data-ecran="synthese"] { margin-bottom:var(--e-5); }
#testeur[data-ecran="synthese"] .tc__instrument { margin-bottom:var(--e-3); }
#testeur[data-ecran="synthese"] .tc__bilan { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"acquis" "disponible" "suite"; align-items:start; gap:var(--e-3); border-top:0; padding-top:0; }
#testeur[data-ecran="synthese"] .tc__acquis { grid-area:acquis; min-width:0; }
#testeur[data-ecran="synthese"] .tc__bilan-texte { margin:0 0 var(--e-3); color:var(--texte-2); font-size:var(--t-petit); }
#testeur[data-ecran="synthese"] .tc__faits { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; }
#testeur[data-ecran="synthese"] .tc__faits li { padding:0 var(--e-4); }
#testeur[data-ecran="synthese"] .tc__faits li:first-child { padding-left:0; }
#testeur[data-ecran="synthese"] .tc__faits li:not(:last-child) { border-right:1px solid var(--bordure); }
#testeur[data-ecran="synthese"] .tc__faits strong { font-size:var(--t-h4); line-height:1.15; margin-block:var(--e-1); white-space:nowrap; }
#testeur[data-ecran="synthese"] .tc__disponible { grid-area:disponible; display:flex; align-items:baseline; gap:var(--e-3); width:max-content; max-width:100%; padding:var(--e-3) var(--e-4); border:1px solid var(--bordure); font-size:var(--t-petit); }
#testeur[data-ecran="synthese"] .tc__disponible p { margin:0; color:var(--texte-2); }
#testeur[data-ecran="synthese"] .tc__disponible strong { font-size:var(--t-h4); font-weight:600; white-space:nowrap; }
#testeur[data-ecran="synthese"] .tc__disponible span { color:var(--texte-2); }
#testeur[data-ecran="synthese"] .tc__suite { grid-area:suite; display:flex; align-items:center; gap:var(--e-4); padding-top:var(--e-4); border-top:1px solid var(--bordure); }
#testeur[data-ecran="synthese"] .tc__guide { display:inline-flex; align-items:center; justify-content:center; min-height:var(--cible-min); padding-inline:var(--e-4); border:1px solid var(--bordure); border-radius:var(--rayon-controle); color:var(--encre); font-weight:600; text-decoration:none; }
#testeur[data-ecran="synthese"] .tc__guide:hover { border-color:var(--action); color:var(--action); }
#testeur[data-ecran="intro"] .tc__instrument,
#testeur[data-ecran="intro"] .tc__progression,
#testeur[data-ecran="parcours"] [data-sous-titre],
#testeur .tc__explication,
#testeur .tc__legende { display:none; }
#testeur[data-ecran="intro"] .tc__dialogue { max-width:860px; margin:var(--e-6) 0; padding:var(--e-6); }
#testeur[data-ecran="intro"] .tc__question { display:block; }
#testeur[data-ecran="intro"] .tc__choix,
#testeur[data-ecran="intro"] .tc__usages { margin-block:var(--e-5); }
#testeur .tc__depart { max-width:65ch; }
#testeur .tc__depart h2 { font-size:var(--t-h3); }
#testeur .tc__geste { border-top:1px solid var(--bordure); padding-top:var(--e-4); margin-top:var(--e-5); }
#testeur .tc__geste strong { display:block; margin-bottom:var(--e-2); }
#testeur .tc__instrument { margin-bottom:var(--e-6); }

/* Onboarding: one shared axis for heading, question, choices and actions. */
#testeur[data-ecran="intro"] { --intro-width:760px; margin-top:var(--e-7); }
#testeur[data-ecran="intro"] .tc__entete,
#testeur[data-ecran="intro"] .tc__dialogue { width:100%; max-width:var(--intro-width); margin-inline:0; padding:0; }
#testeur[data-ecran="intro"] .tc__entete { margin-bottom:var(--e-7); }
#testeur[data-ecran="intro"] .tc__entete h1 { font-size:var(--t-h1); }
#testeur[data-ecran="intro"] .tc__entete p { font-size:var(--t-corps); }
#testeur[data-ecran="intro"] .tc__dialogue { border:0; margin-top:0; margin-bottom:var(--e-6); min-height:340px; }
#testeur[data-ecran="intro"] .tc__question h2,
#testeur[data-ecran="intro"] .tc__depart h2 { font-size:var(--t-h3); margin:0 0 var(--e-2); text-wrap:balance; }
#testeur[data-ecran="intro"] .tc__question p { font-size:var(--t-corps); }
#testeur[data-ecran="intro"] .tc__usages,
#testeur[data-ecran="intro"] .tc__choix { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-3); margin:var(--e-5) 0 var(--e-6); }
#testeur[data-ecran="intro"] .tc__usages button,
#testeur[data-ecran="intro"] .tc__choix button { min-height:var(--e-8); padding:var(--e-4) var(--e-5); font:inherit; line-height:1.4; color:var(--encre); background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon-controle); text-align:left; cursor:pointer; }
#testeur[data-ecran="intro"] .tc__usages button:hover,
#testeur[data-ecran="intro"] .tc__choix button:hover { border-color:var(--action); color:var(--action); }
#testeur[data-ecran="intro"] .tc__usages button[aria-pressed="true"] { border-color:var(--action); background:var(--action); color:var(--bouton-primaire-texte); font-weight:600; }
#testeur[data-ecran="intro"] button:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
#testeur[data-ecran="intro"] [data-action="passer-intro"] { margin-left:var(--e-5); }
#testeur[data-ecran="intro"] .tc__depart { max-width:none; }
#testeur[data-ecran="intro"] .tc__depart p { max-width:65ch; }
#testeur[data-ecran="intro"] .tc__question-entete { display:grid; grid-template-columns:1fr auto; column-gap:var(--e-5); align-items:center; }
#testeur[data-ecran="intro"] .tc__question-entete h2 { font-size:var(--t-h4); margin:0; }
#testeur[data-ecran="intro"] .tc__question-entete > p { grid-column:1 / -1; margin-top:var(--e-2); }
#testeur[data-ecran="intro"] .tc__intro-actions { display:flex; align-items:center; gap:var(--e-4); }
#testeur[data-ecran="intro"] .tc__intro-actions [data-action="passer-intro"] { margin-left:0; white-space:nowrap; }

/* Sans JavaScript, le composant est inerte : le clavier se dessine mais aucun
   bouton ne repond. On ne montre le plateau qu'une fois le script en place, et
   `<noscript>` porte la sortie honnete. `data-js` est pose sur `<html>` par
   `js/v2/theme.js`, synchrone dans `<head>`, donc AVANT le premier rendu :
   le plateau est la des le premier affichage et ne pousse plus la page
   (P-01, audit perf du 2026-10-05 : CLS 0,428 quand testeur.js, en defer,
   posait le drapeau sur #testeur). L'ecran d'erreur de chargement, interne
   au plateau, reste visible.
   ⛔ `:where()` garde la specificite de l'ancien `#testeur[data-js]` (1,1,0
   au lieu de 1,2,1) : sans lui, ces regles battraient la sortie tactile. */
.tc__bureau { display:none; }
:where(html[data-js]) #testeur .tc__bureau { display:block; }
:where(html[data-js]) #testeur .tc__etroit { display:none; }

/* Tactile : meme sortie que sous 768 px, quelle que soit la largeur.
   La requete media couvre le premier rendu ; `data-tactile`, pose par
   testeur.js, reste la reference du script. */
#testeur[data-tactile] .tc__etroit { display:block; }
@media (hover:none) and (pointer:coarse) { #testeur .tc__etroit { display:block; } }

.tc__sans-js { max-width:65ch; padding-block:var(--e-6); }
.tc__sans-js h2 { margin:0 0 var(--e-3); }
.tc__sans-js p { margin:0; color:var(--texte-2); }

@media (max-width:767px) { :where(html[data-js]) #testeur .tc__etroit { display:block; } }

/* Sortie étroite (sous 768 px, tactile) : le parcours est masqué, l'en-tête
   du bureau reste. Il porte l'unique h1 de la page : avec deux h1 dont un
   seul s'affichait, un téléphone (Googlebot mobile compris) lisait « À essayer
   sur ordinateur » comme sujet de la page (SEO-02, audit du 2026-10-09).
   `.tc__etroit` suit le bureau dans le HTML : il se lit après l'h1. */
@media (max-width:767px) {
  #testeur .tc__bureau { display:block; }
  #testeur .tc__bureau > :not(.tc__entete),
  #testeur .tc__entete > :not(.tc__resultat-intro) { display:none; }
}
#testeur[data-tactile] .tc__bureau { display:block; }
#testeur[data-tactile] .tc__bureau > :not(.tc__entete),
#testeur[data-tactile] .tc__entete > :not(.tc__resultat-intro) { display:none; }
@media (hover:none) and (pointer:coarse) {
  #testeur .tc__bureau { display:block; }
  #testeur .tc__bureau > :not(.tc__entete),
  #testeur .tc__entete > :not(.tc__resultat-intro) { display:none; }
}