/* ==========================================================================
   Juger l'IA · ds.css · shared by every page of the app
   « Qui parle, et comment le texte nous est parvenu. »
   Two layers. (1) The older pages (lire, journal, s3, entrainement, atelier)
   open on the system's band (header.ja-bande: .ja-tete, then the one heading
   h1.ja-question) and keep their own classes, restyled below on the system's
   tokens: ink on cold paper, Instrument Sans, ink rules, square corners, no boxes,
   no colour for states. Rules that would reach home and skill/ are wrapped in
   :where(body:not(.ja)), which adds no specificity. (2) Home and skill/ carry
   body.ja and are built on the design system itself (_build/ds: tokens.css,
   bundle.css), in the last section of this file.
   Load AFTER each page's inline <style>.
   ========================================================================== */

@import url("tokens.css"); /* fonts, colour, pairs, themes, scale, aliases: all custom properties live there */

/* ---------- 2 · base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{background-color:var(--fond);color:var(--encre);font:400 var(--t-texte)/1.5 var(--f-sans);-webkit-text-size-adjust:100%}
body{margin:0;background-image:none!important}
button,input,textarea,select{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.vis-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--bande);color:var(--sur-bande,var(--encre))}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a{color:var(--encre)}
em,i,cite{font-style:normal}
.m{font:400 15px/1.55 var(--f-sans);white-space:pre-wrap;word-break:break-word;margin:0}
/* the one action: an ink block; everything else is text */
.act{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);background:var(--encre);color:var(--fond);border:0;border-radius:0;
  font:500 17px/1.2 var(--f-sans);letter-spacing:0;padding:16px 26px;min-height:var(--cible);text-decoration:none;cursor:pointer}
.act:hover{box-shadow:inset 0 -4px 0 var(--accent)}
.act:disabled{background:transparent;color:var(--encre-2);box-shadow:inset 0 0 0 1px var(--encre-2);cursor:default}
/* skill/ keeps this one grid from the older layer (.ja-versions.versions) */
.versions{display:grid}
/* toast, dialog, and the dossier's parts drawn by commun.js (export, import, criteria: skill/#dossier) */
.toast{position:fixed;left:var(--g);right:var(--g);bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:600px;margin:0 auto;background:var(--encre);color:var(--fond);padding:12px 16px;font:500 15px/1.4 var(--f-sans);opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.toast.on{opacity:1}
dialog,html body .ja-dlg{background:var(--fond);color:var(--encre);border:0;border-top:2px solid var(--encre);border-radius:0;max-width:520px;width:calc(100% - 36px);padding:var(--e-5);font-family:var(--f-sans)}
dialog::backdrop,html body .ja-dlg::backdrop{background:var(--voile)}
html body .ja-k{font:500 var(--t-etiq)/1.3 var(--f-sans);color:var(--encre-2)}
html body .ja-s{font:400 var(--t-petit)/1.45 var(--f-sans);color:var(--encre-2)}
html body .ja-v{font:400 12px/1.4 var(--f-sans);color:var(--encre-2)}
html body .ja-act{background:var(--encre);color:var(--fond);border:0;border-radius:0;font:500 17px/1.2 var(--f-sans);letter-spacing:0;min-height:var(--cible);padding:0 var(--e-5)}
html body .ja-txt{background:none;border:0;color:var(--encre);font:500 16px/1.35 var(--f-sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
html body .ja-crit{gap:0}
html body .ja-li{display:grid;grid-template-columns:3em 1fr;gap:var(--e-3);background:none;padding:var(--e-4) 0;font:400 17px/1.45 var(--f-sans)}
html body .ja-n{font:600 24px/1 var(--f-sans);color:var(--encre)}
html body .ja-compte{font:500 var(--t-etiq)/1 var(--f-sans);color:var(--encre-2);margin-left:.4em}
@media print{.toast,.ja-pas,.ja-vues,.ja-tete .outils{display:none!important}}

/* ==========================================================================
   The older pages (lire, journal, s3, entrainement, atelier), on the system.
   Their inline <style> blocks come first; what follows restyles their
   classes in the system's terms. Everything is scoped to body:not(.ja).
   ========================================================================== */
/* the band: the header, an optional label, the one heading */
:where(body:not(.ja)) .ja-bande .ja-lab{margin:56px 0 0}
:where(body:not(.ja)) .ja-bande .ja-lab+.ja-question{margin-top:14px}
:where(body:not(.ja)) .ja-question{text-wrap:balance}
:where(body:not(.ja)) .ja-question::first-letter{text-transform:uppercase}
:where(body:not(.ja)) .ja-bande .ja-vues{margin-top:48px}
:where(body:not(.ja)) .ja-tete .save{font:400 14px var(--f-sans);color:var(--encre-2);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
:where(body:not(.ja)) .ja-tete .save.err{color:var(--encre);font-weight:600}
@media (max-width:520px){:where(body:not(.ja)) .ja-tete .outils #save.err{display:inline}}
/* a page below the band: the band's grid, 1200px, 40px gutters (20px on a phone) */
:where(body:not(.ja)) main{max-width:1200px;margin:0 auto;padding:0 40px var(--e-8)}
@media (max-width:700px){:where(body:not(.ja)) main{padding-left:20px;padding-right:20px}}
/* fields: the label names the thing (14px, encre-2), the field is a line */
:where(body:not(.ja)) label,:where(body:not(.ja)) .lab{display:block;font:500 14px/1.35 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--encre-2);margin:var(--e-5) 0 var(--e-2)}
:where(body:not(.ja)) input[type=text],:where(body:not(.ja)) input[type=date],:where(body:not(.ja)) input[type=number],:where(body:not(.ja)) textarea,:where(body:not(.ja)) select{width:100%;background:transparent!important;color:var(--encre);border:0!important;border-bottom:1px solid var(--encre)!important;border-radius:0!important;
  padding:10px 0 8px;font:400 var(--t-texte)/1.45 var(--f-sans);min-height:var(--cible)}
:where(body:not(.ja)) label::first-letter,:where(body:not(.ja)) .lab::first-letter{text-transform:uppercase}
:where(body:not(.ja)) textarea{min-height:120px;resize:vertical}
:where(body:not(.ja)) input:focus,:where(body:not(.ja)) textarea:focus,:where(body:not(.ja)) select:focus{outline:0;border-bottom:2px solid var(--accent)!important;padding-bottom:7px;box-shadow:none}
/* the pair's own words (names, place, why, their answers) in Source Serif 4 italic, as .ja-champ; a field that holds the machine's text stays in Archivo */
:where(body:not(.ja)) input.voix,:where(body:not(.ja)) textarea.voix{font:italic 400 22px/1.3 var(--f-voix);resize:none}
/* labels and sections: a 2px ink rule opens a section, its label under it */
:where(body:not(.ja)) .k{font:500 14px/1.3 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--encre-2)}
:where(body:not(.ja)) .top{position:static;height:auto;background:none;border-top:2px solid var(--encre);margin-top:48px;padding-top:12px}
:where(body:not(.ja)) .top .k{position:static;display:block;padding:0;font:500 14px/1.3 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--encre-2)}
:where(body:not(.ja)) .top .k::first-letter,:where(body:not(.ja)) .k::first-letter{text-transform:uppercase}
:where(body:not(.ja)) .top .tag{position:static;display:inline-block;background:var(--encre);color:var(--fond);font:500 14px/1 var(--f-sans);letter-spacing:0;padding:6px 10px}
/* the voices: headings in weight 500, body 17px, quiet text in encre-2 */
:where(body:not(.ja)) .big{font:500 clamp(34px,4.6vw,56px)/1.05 var(--f-sans);letter-spacing:-.025em}
:where(body:not(.ja)) .med{font:500 clamp(22px,3vw,28px)/1.2 var(--f-sans);letter-spacing:-.015em}
:where(body:not(.ja)) .l{font:400 clamp(17px,2vw,20px)/1.5 var(--f-sans);color:var(--encre)}
:where(body:not(.ja)) .s{font:400 14px/1.45 var(--f-sans);color:var(--encre-2)}
:where(body:not(.ja)) .intro{font:400 17px/1.5 var(--f-sans);color:var(--encre-2);max-width:40em}
:where(body:not(.ja)) .help{font:400 14px/1.45 var(--f-sans);color:var(--encre-2);opacity:1;letter-spacing:0}
/* the rules span the band's grid; running text keeps its measure */
:where(body:not(.ja)) .s,:where(body:not(.ja)) .l,:where(body:not(.ja)) .help,:where(body:not(.ja)) .empty{max-width:46em}
/* no boxes: a note, a command, a model's text is text under an ink rule */
:where(body:not(.ja)) .m{font:400 15px/1.55 var(--f-sans);border:0;border-top:1px solid var(--encre);background:none;padding:8px 0 0}
:where(body:not(.ja)) p.m{border-top-width:2px;padding-top:10px}
:where(body:not(.ja)) .notice{border:0;border-top:2px solid var(--encre);background:none;padding:12px 0 0;margin:24px 0;font:400 16px/1.5 var(--f-sans);color:var(--encre);max-width:none}
:where(body:not(.ja)) pre.raw,:where(body:not(.ja)) pre.out{font:400 15px/1.55 var(--f-sans);border:0;border-top:1px solid var(--encre);background:none;padding:8px 0 0}
/* a text under a rule: the rule runs across the grid, the text keeps its measure */
:where(body:not(.ja)) .notice,:where(body:not(.ja)) .m,:where(body:not(.ja)) pre.raw,:where(body:not(.ja)) pre.out{padding-right:max(0px,calc(100% - 46em))}
:where(body:not(.ja)) blockquote{border-left:0;background:none;margin:.5em 0 0;padding:0;font:400 17px/1.55 var(--f-sans)}
/* a line: the letter or number in ink, the text */
:where(body:not(.ja)) .ln .meta{color:var(--encre);font:600 17px/1.45 var(--f-sans)}
:where(body:not(.ja)) .ln .txt{font:400 17px/1.5 var(--f-sans)}
:where(body:not(.ja)) .ln .txt b{font-weight:600}
:where(body:not(.ja)) .ln .sub,:where(body:not(.ja)) .entry .sub,:where(body:not(.ja)) .tour .sub{font:400 14px/1.5 var(--f-sans);color:var(--encre-2)}
:where(body:not(.ja)) hr.r{border:0;border-top:2px solid var(--encre);margin:24px 0 8px}
/* buttons and links: the action is the ink block (.act), everything else is underlined text */
:where(body:not(.ja)) .txtbtn,:where(body:not(.ja)) .lnk,:where(body:not(.ja)) .wink{display:inline-flex;align-items:center;background:none;border:0;border-radius:0;padding:6px 0;min-height:var(--cible);color:var(--encre);
  font:500 17px/1.35 var(--f-sans);letter-spacing:0;text-align:left;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
:where(body:not(.ja)) .txtbtn.quiet,:where(body:not(.ja)) .wink{color:var(--encre-2)}
:where(body:not(.ja)) .txtbtn:disabled{opacity:1;color:var(--encre-2);text-decoration:none;cursor:default}
/* choices: words or letters in a row in a 1px ink frame, the chosen one in an ink block (SegmentedChoice) */
:where(body:not(.ja)) .seg{display:flex;flex-wrap:wrap;gap:0;padding:1px 0 0 1px}
:where(body:not(.ja)) .opt{background:transparent;color:var(--encre);border:1px solid var(--encre);margin:-1px 0 0 -1px;border-radius:0;font:500 15px/1.25 var(--f-sans);padding:10px 16px;min-height:var(--cible);text-align:left;cursor:pointer}
:where(body:not(.ja)) .opt[aria-pressed=true]{background:var(--encre);color:var(--fond);font-weight:500}
@media (max-width:700px){:where(body:not(.ja)) .seg{flex-direction:column}:where(body:not(.ja)) .opt{width:calc(100% + 1px)}}
:where(body:not(.ja)) .letters{display:inline-flex;flex-wrap:nowrap;gap:0!important;width:max-content;border:1px solid var(--encre)}
:where(body:not(.ja)) .letters button{background:transparent;color:var(--encre);border:0;border-left:1px solid var(--encre);border-radius:0;font:600 24px/1 var(--f-sans);cursor:pointer}
:where(body:not(.ja)) .letters button:first-child{border-left:0}
:where(body:not(.ja)) .letters button[aria-pressed=true]{background:var(--encre);color:var(--fond)}
:where(body:not(.ja)) .letters button:focus-visible,:where(body:not(.ja)) .opt:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
:where(body:not(.ja)) .chip{border:1px solid var(--encre);border-radius:0;font:600 .95em/1.5 var(--f-sans);color:var(--encre)}
/* numbers: weight 500, the figure in ink */
:where(body:not(.ja)) .score{font:500 44px/1 var(--f-sans);letter-spacing:-.02em}

/* ==========================================================================
   « Juger l'IA » design system V3, for home and skill/ (body.ja).
   Tokens as in _build/ds/tokens.css, read from the app's own (they already follow
   the theme and the pair); then bundle.css as published; then what the app needs
   that the system has no component for (selects, the diff, the list of runs),
   drawn with the system's own means: ink rules, Instrument Sans, no boxes.
   ========================================================================== */
.ja{--papier:var(--fond);--sur-encre:var(--fond);--filet:var(--encre);--font-sans:var(--f-sans);--font-voix:var(--f-voix)} /* --nuit, --sur-nuit, --nuit-2, --accent-nuit: tokens.css */

/* ---- bundle.css (components) ---- */
.ja{background:var(--papier);color:var(--encre);font:400 17px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
.ja *{box-sizing:border-box}
.ja-page{max-width:1200px;margin:0 auto;padding:0 40px}
@media (max-width:700px){.ja-page{padding:0 20px}}
/* the band (2 October): the colour, or in saturation its grey with the stepped gradient (Itten's plate); its own light ink, which every
   ink token inside the band takes: rules, step squares, outlines, header text. The aliases are computed where they are declared, so they are declared again here. */
.ja-bande{background-color:var(--bande);background-image:var(--bande-degrade,none);color:var(--sur-bande,var(--encre));padding:1px 0 56px;
  --encre:var(--sur-bande,#271B18);--encre-2:var(--sur-bande-2,#4C3935);--encre2:var(--encre-2);--sourd:var(--encre-2);--trait:var(--encre);--filet:var(--encre);
  --orange:var(--encre);--focus-bande:var(--encre);--sur-encre:var(--bande);--sur-orange:var(--bande)}
.ja-question{margin:56px 0 0;font:500 clamp(34px,4.6vw,64px)/1.02 var(--font-sans);letter-spacing:-.025em;max-width:15em;overflow-wrap:anywhere}
.ja-lab{margin:0;font:500 14px/1.3 var(--font-sans);color:var(--encre-2)}
.ja-tete{display:flex;justify-content:space-between;align-items:baseline;padding-top:28px}
.ja-mot{font:600 17px/1 var(--font-sans);letter-spacing:-.01em}
.ja-mot i{font-style:normal;font-weight:400;color:var(--encre-2);margin-left:.6em}
.ja-langue{font:400 14px var(--font-sans);color:var(--encre-2)}.ja-langue b{color:var(--encre);font-weight:600}
.ja-pas{display:flex;align-items:center;gap:14px;margin-top:48px;border-top:2px solid var(--filet);padding-top:14px;font:500 14px var(--font-sans)}
.ja-pas .q{display:flex;gap:6px}
.ja-pas .q i{display:block;width:12px;height:12px;border:1.5px solid var(--encre)}
.ja-pas .q i.fait{background:var(--encre)}
.ja-pas .q i.ici{background:var(--accent-plein);border-color:var(--encre)}
.ja-pas .nom{margin-left:4px}
.ja-pas .ailleurs{margin-left:auto;color:var(--encre-2)}
.ja-pas a{color:inherit;text-decoration:none}
.ja-vues{display:flex;gap:28px;border-top:2px solid var(--filet);font:500 15px var(--font-sans)}
.ja-vues button{background:none;border:0;padding:12px 0 0;color:var(--encre-2);font:inherit;cursor:pointer}
.ja-vues button[aria-pressed=true]{color:var(--encre);box-shadow:inset 0 4px 0 var(--accent);margin-top:-2px;padding-top:14px}
.ja-btn{display:inline-block;background:var(--encre);color:var(--sur-encre);border:0;border-radius:0;font:500 17px/1.2 var(--font-sans);padding:16px 26px;min-height:44px;text-decoration:none;cursor:pointer}
.ja-btn:hover{box-shadow:inset 0 -4px 0 var(--accent)}
.ja-btn:focus-visible,.ja-lien:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ja-btn[disabled]{background:transparent;color:var(--encre-2);box-shadow:inset 0 0 0 1px var(--encre-2);cursor:default}
.ja-lien{background:none;border:0;padding:0;color:var(--encre);font:500 17px var(--font-sans);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer}
.ja-champ{display:block}
.ja-champ label{display:block;font:500 14px var(--font-sans);color:var(--encre-2);margin-bottom:10px}
.ja-champ input,.ja-champ textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--encre-2);border-radius:0;color:var(--encre);font:italic 400 22px/1.3 var(--font-voix);padding:4px 0 8px;resize:none}
.ja-champ textarea.long{font-size:24px}
.ja-champ input:focus,.ja-champ textarea:focus{outline:none;border-bottom:2px solid var(--accent);padding-bottom:7px}
.ja-champ input::placeholder,.ja-champ textarea::placeholder{color:var(--encre-2);opacity:.6}
.ja-champ .aide{margin:8px 0 0;font:400 14px/1.4 var(--font-sans);color:var(--encre-2)}
.ja-champ textarea.question{font:500 clamp(30px,4.2vw,58px)/1.06 var(--font-sans);letter-spacing:-.025em;border-bottom:2px solid var(--encre);padding-bottom:14px}
.ja-case{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--filet);cursor:pointer;min-height:44px}
.ja-case input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:2px 0 0;border:1.5px solid var(--encre);border-radius:0;background:transparent;cursor:pointer}
.ja-case input:checked{background:var(--encre);box-shadow:inset 0 0 0 3px var(--papier)}
.ja-case input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ja-case span{font:400 16px/1.4 var(--font-sans)}
.ja-choix{display:inline-flex;border:1px solid var(--encre)}
.ja-choix button{background:transparent;border:0;border-left:1px solid var(--encre);color:var(--encre);font:500 15px var(--font-sans);padding:10px 18px;min-height:44px;cursor:pointer}
.ja-choix button:first-child{border-left:0}
.ja-choix button[aria-pressed=true]{background:var(--encre);color:var(--sur-encre)}
.ja-choix button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.ja-etat{font:400 14px/1.4 var(--font-sans);color:var(--encre-2)}
.ja-etat.erreur{color:var(--encre);font-weight:600}
.ja-etat.erreur::before{content:"";display:inline-block;width:10px;height:10px;background:var(--encre);margin-right:8px;vertical-align:0}
.ja-compteur{font:500 14px var(--font-sans);color:var(--encre-2)}
.ja-compteur.trop{color:var(--encre);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ja-cond .tete{display:flex;align-items:baseline;gap:14px}
.ja-l{font:600 64px/.9 var(--font-sans);letter-spacing:-.03em}
.ja-cond .nom{font:500 14px var(--font-sans)}
.ja-rep{font:400 17px/1.5 var(--font-sans);max-width:36em;margin:24px 0;padding-top:18px;border-top:2px solid var(--filet)}
.ja-score{margin:0;font:500 44px/1 var(--font-sans);letter-spacing:-.02em}
.ja-score span{font-weight:400;color:var(--encre-2)}
.ja-score.meilleur b{color:var(--accent)}
.ja-trois{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--filet);border-bottom:2px solid var(--filet)}
.ja-trois>div{position:relative;display:flex;flex-direction:column;min-height:340px;padding:22px 24px 28px;cursor:pointer}
.ja-trois>div+div{border-left:1px solid var(--filet)}
.ja-trois .ja-score{margin-top:auto;padding-top:32px;margin-bottom:14px}
.ja-trois p.m{margin:0;font:400 16px/1.45 var(--font-sans)}
.ja-trois>div.signe{box-shadow:inset 0 0 0 4px var(--rose)}
.ja-trois>div:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.ja-signee{position:absolute;top:0;right:0;background:var(--rose);color:var(--nuit);font:600 13px/1 var(--font-sans);padding:9px 12px 8px}
.ja-pourquoi{display:grid;grid-template-columns:1fr 2fr;gap:24px;margin-top:44px}
.ja-pourquoi p.v{margin:0;font:italic 400 30px/1.3 var(--font-voix);border-bottom:1px solid var(--encre-2);padding-bottom:16px}
@media (max-width:700px){.ja-trois{grid-template-columns:1fr}.ja-trois>div{min-height:0}.ja-trois>div+div{border-left:0;border-top:1px solid var(--filet)}.ja-pourquoi{grid-template-columns:1fr}.ja-pourquoi p.v{font-size:24px}.ja-l{font-size:48px}}
.ja-version{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--filet)}
.ja-version .n{font:600 28px/1 var(--font-sans);letter-spacing:-.02em}
.ja-version .quoi{font:italic 400 20px/1.35 var(--font-voix)}
.ja-version .quand{font:400 14px var(--font-sans);color:var(--encre-2)}
.ja-version.courante .n{box-shadow:inset 0 -4px 0 var(--accent)}
.ja-nuit{position:relative;background:var(--nuit);color:var(--sur-nuit);display:flex;flex-direction:column;justify-content:center;padding:0 max(24px,calc(50% - 520px))}
.ja-nuit .k{margin:0 0 10px;font:500 14px var(--font-sans);color:var(--nuit-2)}
.ja-nuit input{background:transparent;border:0;border-bottom:1px solid #4A4D52;color:var(--sur-nuit);font:italic 400 clamp(30px,4.4vw,56px)/1.2 var(--font-voix);width:100%;padding:0 0 10px;margin:0 0 40px;border-radius:0}
.ja-nuit input:focus{outline:none;border-bottom-color:var(--accent)}
.ja-nuit input::placeholder{color:#55595E}
.ja-carre{position:absolute;right:28px;bottom:28px;width:28px;height:18px;border:0;padding:0;background:var(--carre-a,var(--accent-plein));cursor:pointer;animation:ja-souffle 3.2s ease-in-out infinite}
.ja-carre::after{content:"";position:absolute;inset:0 0 0 62%;background:var(--carre-b,var(--compagnon))}
.ja-carre::before{content:"";position:absolute;inset:-13px -8px}
@keyframes ja-souffle{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.ja-carre{animation:none}}
.ja-entrer{position:absolute;left:max(24px,calc(50% - 520px));bottom:13px;background:none;border:0;padding:11px 0;min-height:44px;color:var(--sur-nuit);font:500 17px var(--font-sans);opacity:.35;cursor:pointer}
.ja-nuit.pret .ja-entrer{opacity:1}
.ja-entrer:disabled{cursor:default}
.ja-nuit{--accent-sur-nuit:var(--accent-nuit,var(--accent))}
.ja-nuit .ja-carre{background:var(--carre-a,var(--accent-plein))}.ja-nuit input:focus{border-bottom-color:var(--accent-sur-nuit)}

/* ---- the app on the system ---- */
.ja :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ja .ja-bande :focus-visible{outline-color:var(--focus-bande)}
:where(.ja) a{color:inherit}
.ja-champ label,.ja-lab,.ja-nuit .k{letter-spacing:0}
.ja-champ label::first-letter,.ja-lab::first-letter,.ja-nuit .k::first-letter{text-transform:uppercase}
.ja-champ label{margin:0 0 10px}
/* header: the word, the pair's names in its own voice, language, theme, the pair's square */
.ja-tete{align-items:center;gap:16px}
.ja-mot{display:flex;align-items:baseline;min-width:0;flex:1 1 auto}
.ja-mot a,.ja-mot>span:first-child{text-decoration:none;flex:none;white-space:nowrap}
.ja-mot i{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ja-mot .qui{margin-left:.7em;font:italic 400 17px/1.2 var(--font-voix);color:var(--encre);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ja-tete .outils{display:flex;align-items:center;gap:6px;flex:none}
.ja-tete button{background:none;border:0;padding:0;min-height:44px;min-width:44px;cursor:pointer;color:var(--encre-2);font:400 14px var(--font-sans)}
/* the colour square (V4): the chosen colour, its complement on the right third */
.ja-tete #paire{position:relative;width:26px;min-width:26px;height:17px;min-height:17px;background:var(--carre-a,var(--accent-plein));box-shadow:0 0 0 1px var(--encre)}
.ja-tete #paire::after{content:"";position:absolute;inset:0 0 0 62%;background:var(--carre-b,var(--compagnon))}
.ja-tete #paire::before{content:"";position:absolute;inset:-15px -8px}
@media (max-width:520px){.ja-tete #save:not(.erreur){display:none}}
.ja-tete #paire,.ja-tete .ja-paire{margin:0 14px}
/* « autre » : any colour, through the device's colour picker (the input itself is not shown) */
.ja-tete .ja-autre{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin-right:8px;cursor:pointer;color:var(--encre);font:500 14px var(--font-sans,var(--f-sans));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ja-tete .ja-autre input{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}
.ja-tete .ja-autre:focus-within{outline:2px solid var(--focus-bande);outline-offset:2px}
.ja-mot a{padding:14px 0;margin:-14px 0}
/* steps: the squares are the way back to any step */
.ja-pas{flex-wrap:wrap;row-gap:10px}
.ja-pas .q a{display:block;padding:10px 3px;margin:-10px -3px}
.ja-pas .nom{white-space:nowrap}
.ja-pas .mots{display:flex;flex-wrap:wrap;gap:6px 22px}
.ja-pas .mots a{color:var(--encre-2);padding:6px 0;margin:-6px 0}
.ja-pas .mots a[aria-current=true]{color:var(--encre)}
.ja-pas .ailleurs{padding:6px 0;margin:-6px 0 -6px auto}
/* a screen below the band */
.ja-ecran{padding-top:48px;padding-bottom:112px}
.ja-section{margin-top:56px;border-top:2px solid var(--filet);padding-top:20px}
.ja-sous{margin:0 0 20px;font:500 28px/1.1 var(--font-sans);letter-spacing:-.015em}
.ja-suite{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;margin-top:40px}
.ja-suite.droite{justify-content:flex-end}
.ja-bande .ja-suite{margin-top:24px}
.ja-lien.petit{font-size:15px}
.ja-bande .ja-etat.erreur{margin:18px 0 0}
.ja-aide{margin:8px 0 0;font:400 14px/1.4 var(--font-sans);color:var(--encre-2)}
.ja-rangee{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px 40px;align-items:end}
.ja-rangee .ja-choix{display:flex;width:max-content;max-width:100%}
.ja-champs{display:grid;gap:32px}
.ja-deux{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
@media (max-width:700px){.ja-deux{grid-template-columns:1fr}.ja-suite.droite{justify-content:stretch}.ja-suite.droite .ja-btn{flex:1;text-align:center}}
/* the course and the machine in Archivo: a field that holds a model's text, a name, a date */
.ja-champ .machine{font:400 17px/1.5 var(--font-sans)}
.ja-champ textarea.machine{min-height:9em}
.ja-champ input.machine.grand{font:500 26px/1.2 var(--font-sans);letter-spacing:-.015em}
.ja-champ select{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--encre-2);border-radius:0;color:var(--encre);font:400 17px/1.3 var(--font-sans);padding:8px 22px 8px 0;min-height:44px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);
  background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.ja-champ select:focus{outline:none;border-bottom:2px solid var(--accent)}
.ja-champ select option{background:var(--papier);color:var(--encre)}
.ja-champ input[type=date]{font:400 17px/1.3 var(--font-sans);min-height:44px}
.ja-champ input[type=number]{font:400 22px/1.3 var(--font-sans)}
.ja-champ textarea{min-height:2.6em;resize:vertical}
/* the question on its band */
.ja-bande .ja-champ.question{margin-top:44px}
.ja-bande .ja-champ.question textarea{max-width:17em;min-height:0;overflow:hidden}
.ja-bande .ja-champ.question textarea::placeholder{font-style:normal}
.ja-bande .actions{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px}
/* one condition */
.ja-consigne{margin:14px 0 0;color:var(--encre-2);max-width:40em}
.ja-rep{white-space:pre-wrap;overflow-wrap:anywhere}
.ja-rep a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;word-break:break-all}
.ja-cases{border-bottom:1px solid var(--filet);margin-top:10px}
.ja-case.c5{display:grid;gap:10px;cursor:default}
.ja-case.c5 .ja-choix{display:flex;flex-wrap:wrap;width:max-content;max-width:100%}
@media (max-width:700px){.ja-case.c5 .ja-choix{flex-direction:column;width:100%}.ja-case.c5 .ja-choix button{border-left:0;text-align:left}.ja-case.c5 .ja-choix button+button{border-top:1px solid var(--encre)}}
.ja-note{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-top:32px}
.ja-note .score-ligne{display:grid;gap:8px;justify-items:end;text-align:right}
@media (max-width:700px){.ja-note{grid-template-columns:1fr}.ja-note .score-ligne{justify-items:start;text-align:left}}
.ja-citer{margin-top:44px;border-top:2px solid var(--filet);padding-top:18px;display:grid;gap:18px;justify-items:start}
.ja-citer .ja-champ{width:100%}
.ja details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;font:500 15px var(--font-sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ja details>summary::-webkit-details-marker{display:none}
.ja details>summary::before{content:"+";width:1em;text-decoration:none}
.ja details[open]>summary::before{content:"−"}
details.repli{margin-top:28px}
details.repli[open]>.ja-champs{padding:12px 0 8px}
.ja-nombres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:700px){.ja-nombres{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ja pre.m{font:400 15px/1.55 var(--font-sans);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
/* les trois: B joins narrower when an old dossier has it */
.ja-trois.avec-b{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.6fr)}
.ja-trois>div{min-width:0}
.ja-trois>div[data-c=B]{padding:20px 18px 24px}
.ja-trois>div[data-c=B] .ja-l{font-size:44px}
.ja-trois>div[data-c=B] .ja-score{font-size:32px}
.ja-trois .ja-cond{padding-right:64px}
.ja-trois p.m{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.ja-trois p.vide{margin:auto 0 0;color:var(--encre-2);padding-top:32px}
@media (max-width:700px){.ja-trois.avec-b{grid-template-columns:1fr}}
.ja-pourquoi .ja-champ{grid-column:2}
@media (max-width:700px){.ja-pourquoi .ja-champ{grid-column:1}}
/* versions */
.ja-versions{border-bottom:1px solid var(--filet)}
.ja-version .corps{display:grid;gap:6px;min-width:0}
.ja-version .corps .machine{font:500 17px/1.3 var(--font-sans)}
.ja-version .pq{margin:0;font:italic 400 17px/1.4 var(--font-voix);color:var(--encre-2)}
.ja-version details>summary{min-height:36px}
@media (max-width:700px){.ja-version{grid-template-columns:auto minmax(0,1fr)}.ja-version .quand{grid-column:2}}
.ja-diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px;font:400 14px/1.55 var(--font-sans);border-bottom:2px solid var(--filet)}
.ja-diff>div{padding:1px 12px 1px 0;white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.55em}
.ja-diff>div:nth-child(even){padding-left:12px;border-left:1px solid var(--filet)}
.ja-diff .en{font-weight:500;color:var(--encre-2);border-bottom:2px solid var(--filet);padding-bottom:8px;margin-bottom:6px}
.ja-diff .moins{color:var(--encre-2);text-decoration:line-through}.ja-diff .moins::before{content:"− "}
.ja-diff .plus{font-weight:600}.ja-diff .plus::before{content:"+ "}
.ja-diff .saut{color:var(--encre-2);border-top:1px solid var(--encre-2);border-bottom:1px solid var(--encre-2)}
/* three columns between rules (the help on « charger ») */
.ja-colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-top:2px solid var(--filet);border-bottom:2px solid var(--filet)}
.ja-colonnes>div{padding:20px 24px 24px 0}
.ja-colonnes>div+div{padding-left:24px;border-left:1px solid var(--filet)}
.ja-colonnes h2{margin:0 0 4px;font:500 22px/1.2 var(--font-sans)}
.ja-colonnes ol{margin:14px 0 0;padding-left:1.2em;font:400 16px/1.5 var(--font-sans)}
@media (max-width:700px){.ja-colonnes{grid-template-columns:1fr}.ja-colonnes>div+div{padding-left:0;border-left:0;border-top:1px solid var(--filet)}}
/* the dossier: criteria as rows, export and import, every run */
.ja .ja-crit{gap:0;border-bottom:1px solid var(--filet)}
.ja .ja-crit>.ja-s{margin:0 0 16px;font:400 17px/1.5 var(--font-sans);color:var(--encre-2)}
.ja .ja-li{background:none;border-top:1px solid var(--filet);padding:14px 0;grid-template-columns:2.2em 1fr;font:400 17px/1.45 var(--font-sans)}
.ja .ja-n{font:600 24px/1 var(--font-sans)}
.ja .ja-compte{font:500 14px var(--font-sans);color:var(--encre-2);white-space:nowrap}
.ja-outils .ja-s{margin:10px 0 0;font:400 17px/1.5 var(--font-sans);color:var(--encre-2);max-width:40em}
.ja-outils .ja-suite{margin-top:24px}
.ja-outils .ja-v{margin-top:24px}
.ja-essais{border-bottom:1px solid var(--filet)}
.ja-essais details{border-top:1px solid var(--filet);padding:4px 0 8px}
.ja-essais summary{font:500 17px/1.3 var(--font-sans);text-decoration:none!important}
.ja-essais .sub{margin:6px 0 0;font:400 14px/1.5 var(--font-sans);color:var(--encre-2);overflow-wrap:anywhere}
.ja-essais .champ{margin-top:14px}
.ja-essais .champ b{display:block;font:500 14px var(--font-sans);color:var(--encre-2);margin-bottom:4px}
.ja-essais .champ .voix{font:italic 400 18px/1.4 var(--font-voix)}
/* dialog and toast on the system */
.ja dialog,.ja .ja-dlg{border-top:2px solid var(--encre);font:400 17px/1.5 var(--font-sans)}
.ja .ja-dlg .ja-s{font:400 15px/1.45 var(--font-sans);color:var(--encre-2)}
.ja .ja-dlg .ja-row,.ja dialog .ja-suite{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:flex-end;margin-top:20px}
.ja .ja-dlg .ja-act{background:var(--encre);color:var(--sur-encre);font:500 17px/1.2 var(--font-sans);letter-spacing:0;padding:16px 26px;min-height:44px}
.ja .ja-dlg .ja-txt{font:500 17px var(--font-sans);text-decoration-thickness:1px;text-underline-offset:4px}
.ja .toast{font:500 15px/1.4 var(--font-sans);background:var(--encre);color:var(--sur-encre)}
/* home: the first screen, then the band with its two views */
.ja-nuit#qui{min-height:100vh;min-height:100svh;padding-top:88px;padding-bottom:104px}
.ja-nuit .ja-choix{align-self:flex-start;margin:0 0 44px;border-color:#4A4D52}
.ja-nuit .ja-choix button{color:var(--sur-nuit);border-left-color:#4A4D52}
.ja-nuit .ja-choix button[aria-pressed=true]{background:var(--sur-nuit);color:var(--nuit)}
.ja-nuit .ja-choix button:focus-visible,.ja-nuit button:focus-visible,.ja-nuit input:focus-visible{outline:2px solid var(--accent-sur-nuit);outline-offset:3px}
.ja-nuit label.k{display:block}
.ja-nuit .noms{display:grid}
.ja-bande .ja-vues{margin-top:48px}
.ja-vues button{text-align:left;line-height:1.3;min-height:44px}
@media (max-width:700px){.ja-vues{gap:20px}.ja-vues button{flex:0 1 auto}}
.ja-plan{margin-top:8px;border-top:2px solid var(--filet);border-bottom:2px solid var(--filet)}
.ja-plan>div{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px 32px;align-items:baseline;padding:26px 0}
.ja-plan>div+div{border-top:1px solid var(--filet)}
.ja-plan .no{font:600 28px/1 var(--font-sans);letter-spacing:-.02em}
.ja-plan h2{margin:0 0 8px;font:500 24px/1.2 var(--font-sans);letter-spacing:-.01em}
.ja-plan p{margin:0;max-width:40em}
.ja-plan .texte{color:var(--encre-2)}
.ja-plan .mur{font:500 20px/1.35 var(--font-sans);color:var(--encre)}
.ja-plan .voix{font:italic 400 19px/1.35 var(--font-voix);color:var(--encre)}
/* 2 oct. : la séance en une rangée (une chose à faire) ; les autres pages repliées, leur titre à 44 px pour le doigt */
.ja-plan.ja-une>div{padding:32px 0}
.ja-plan .ja-ensuite{margin-top:12px}
/* the fold keeps the app's own « + / − » marker (.ja details>summary); no second rule right under the plan's */
.ja-plis.ja-section{margin-top:28px;border-top:0;padding-top:0}
.ja-plan .abc{display:flex;gap:12px;margin-top:14px;font:500 14px var(--font-sans)}
.ja-plan .abc span{display:flex;align-items:center;gap:6px}
.ja-plan .abc i{display:block;width:12px;height:12px;border:1.5px solid var(--encre)}
.ja-plan .abc i.fait{background:var(--encre)}
@media (max-width:700px){.ja-plan>div{grid-template-columns:40px minmax(0,1fr)}.ja-plan>div>:last-child{grid-column:2;justify-self:start}}
.ja-autres{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:14px}
.ja-autres a.ja-lien{display:inline-flex;align-items:center;min-height:44px}
.ja-version-app{margin:64px 0 0}
.ja-mot>a,.ja-mot>span:first-child{white-space:nowrap}
.ja-mot i{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* course view */
/* The home's course view (index.html#cours) on the session view's rows (.ja-plan): the number or the letter
   in 28px, the title 24px/500, the detail 17px; 2px ink opens and closes each list, 1px between rows.
   It opens scrolled to the band; the black first screen stays above it, as in the session view. */
.ja-cours section{margin-top:56px}
.ja-cours section:first-child{margin-top:0}
.ja-cours .ja-plan{margin-top:12px}
.ja-cours .ja-plan .no{white-space:nowrap}
.ja-plan h3{margin:0 0 8px;font:500 24px/1.2 var(--font-sans);letter-spacing:-.01em}
/* the detail is body text (encre); encre-2 is left for past sessions and the 14px « quand » line */
.ja-cours .ja-plan p.texte{color:var(--encre)}
.ja-cours .passe p.texte{color:var(--encre-2)}
.ja-cours .travaux p.texte::first-letter{text-transform:uppercase}
.ja-cours .ja-plan p.quand{margin-top:10px;font:400 14px/1.4 var(--font-sans);color:var(--encre-2)}
.ja-cours .passe .no,.ja-cours .passe h3{color:var(--encre-2)}
/* the card: the name and its definition on one line, « Observation · directement vu… » */
.ja-cours .carte h3{display:inline;margin:0}
.ja-cours .carte .def{color:var(--encre)}
/* the current session: the accent square, once, under its number in « le semestre » */
.ja-cours .semestre .maintenant .no::after{content:"";display:block;width:12px;height:12px;margin-top:10px;background:var(--accent)}
/* the card: each letter as the system's condition letter, bare ink */
.ja-cours .carte .no{font:600 64px/.9 var(--font-sans);letter-spacing:-.03em}
.ja-cours .ja-suite{margin:24px 0 0}
.ja-cours .ja-suite a{display:inline-block;padding:12px 0;margin:-12px 0}
/* on a phone one number column for all four lists, wide enough for the weights (« 40 % ») */
@media (max-width:700px){.ja-cours .carte .no{font-size:48px}.ja-cours .ja-plan>div{grid-template-columns:64px minmax(0,1fr);column-gap:20px}}
/* the band header: the pair's square drawn as in skill/ (the bundle's split square) */
.ja-tete .ja-paire{position:relative;width:26px;min-width:26px;height:17px;min-height:17px;background:var(--carre-a,var(--accent-plein));box-shadow:0 0 0 1px var(--encre)}
.ja-tete .ja-paire::after{content:"";position:absolute;inset:0 0 0 62%;background:var(--carre-b,var(--compagnon))}
.ja-tete .ja-paire::before{content:"";position:absolute;inset:-15px -8px}
/* on a phone the home's subtitle takes its own line under « judging ai » and the tools, instead of being cut */
@media (max-width:700px){.ja-accueil .ja-tete{flex-wrap:wrap;row-gap:0}.ja-accueil .ja-mot{display:contents}
 .ja-accueil .ja-mot i{order:3;flex:1 0 100%;margin:0;overflow:visible;text-overflow:clip;white-space:normal}}

.ja-pas .ailleurs[aria-current]{color:var(--encre);font-weight:600}
/* the first screen: Itten's contrast, three plates in the pair's colours, then the short note */
.ja-nuit .ja-contrastes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:420px;margin:0 0 8px}
.ja-contrastes button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;min-height:44px;padding:10px 4px;background:none;border:1px solid #4A4D52;border-radius:0;color:var(--sur-nuit);font:500 13px/1.2 var(--font-sans);text-align:left;cursor:pointer}
.ja-contrastes button[aria-pressed=true]{border-color:var(--sur-nuit);box-shadow:inset 0 0 0 1px var(--sur-nuit)}
.ja-contrastes .plaque{position:relative;display:block;width:40px;height:40px;flex:none}
.ja-contrastes .plaque i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ja-contrastes .nom{max-width:100%;white-space:nowrap;letter-spacing:-.015em}
@media (max-width:379px){.ja-nuit .ja-contrastes{grid-template-columns:1fr}.ja-contrastes button{flex-direction:row;align-items:center;padding:4px 8px 4px 4px}.ja-contrastes .plaque{width:36px;height:36px}}
.ja-nuit .ja-itten-btn{align-self:flex-start;background:none;border:0;padding:0;min-height:44px;color:var(--sur-nuit);font:500 15px var(--font-sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.ja-nuit .ja-itten{max-width:40em;margin:4px 0 0;color:var(--sur-nuit);font:400 15px/1.5 var(--font-sans)}
.ja-nuit .envoi-go{background:var(--sur-nuit);color:var(--nuit);border:0;padding:10px 20px;min-height:44px;font:500 17px var(--font-sans);cursor:pointer;margin:6px 0}