/* Ribbon Font — feuille de style (charte : blanc, noir, vert fluo #2bff00, IBM Plex Mono). */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}
:root{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}
/* Charte : papier blanc, filets noirs de 1px, un seul signal vert fluo pour ce qui est actif ; tout en Plex Mono. */
:root{
  --bg:#ffffff; --panel:#ffffff; --paper:#ffffff; --line:#000000; --rule:#e6e6e6; --cell:#f5f5f5; --muted:#8a8a8a; --fg:#000000;
  --ink:#000000; --accent:#000000; --neon:#2bff00; --accent-soft:rgba(43,255,0,.28); --proof:#8a8a8a; --proof-soft:rgba(43,255,0,.22);
  --track:rgba(0,0,0,.045); --hair:rgba(0,0,0,.16); --ok:#000000;
  /* Une seule taille de texte dans toute l'interface : la hiérarchie se fait par
     les barres, les filets et le vert fluo, jamais par le corps. Les seules
     exceptions sont les dessins (spécimen OTF, plan de travail), qui montrent la
     fonte et non du texte d'interface. */
  --fs:12px;
  --f-display:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --f-ui:var(--f-display); --f-mono:var(--f-display);
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:var(--fs)/1.45 var(--f-ui);}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{height:100%;display:flex;flex-direction:column;padding-inline:16px;padding-block:0}
header.top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:10px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font:700 var(--fs)/1 var(--f-display);letter-spacing:.01em}
nav.tabs{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px}
nav.tabs button{border:0;background:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-weight:500;color:var(--muted)}
nav.tabs button[aria-selected="true"]{background:var(--accent);color:#fff}
.spacer{flex:1}
.status{font:var(--fs) var(--f-mono);color:var(--muted)}
main{flex:1;min-height:0;padding-block:12px}
.view{height:100%;min-height:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.lab{font:600 var(--fs) var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.field{display:grid;gap:5px;min-width:0}
.field input,.field select{width:100%;min-width:0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row > *{min-width:0}
input[type=number],input[type=text],select,textarea{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
input[type=range]{accent-color:var(--accent);width:100%}
textarea{resize:vertical;min-height:96px;font:600 var(--fs)/1.35 var(--f-mono);letter-spacing:.06em}
.btn{border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--proof)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:var(--paper);padding:5px 9px;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.hint{font-size:var(--fs);color:var(--muted)}
.val{font:var(--fs) var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}

/* Composer */
#v-compose{display:grid;grid-template-columns:minmax(260px,300px) 1fr;gap:12px}
#v-compose aside{padding:16px;display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0}
#stage{overflow:auto;min-height:0;display:flex;padding:24px;background:var(--paper)}
#stage svg{margin:auto;display:block;flex:none}
.missing{font:var(--fs) var(--f-mono);color:var(--proof)}
.otf{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:10px}
.otf h3{margin:0;font:700 var(--fs)/1.1 var(--f-display)}
#otf-prev{border:1px solid var(--line);border-radius:7px;background:var(--paper);padding:10px;font-size:34px;line-height:1.15;overflow-wrap:anywhere;white-space:pre-line;color:var(--ink)}
.field input[type=checkbox]{width:auto}
#otf-prev small{display:block;font:var(--fs) var(--f-mono);color:var(--muted);margin-top:6px}

/* Dessiner */
#v-draw{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:12px}
#glist{display:flex;flex-direction:column;min-height:0}
#glist .head{padding:12px 12px 8px;display:flex;justify-content:space-between;align-items:center}
#gitems{flex:1;overflow:auto;padding:0 10px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
.gi{position:relative;border:1px solid var(--line);border-radius:7px;background:var(--paper);cursor:pointer;padding:4px 2px 2px;display:grid;justify-items:center;gap:1px}
.gi[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.gi svg{width:100%;height:46px}
.gi .k{font:500 var(--fs) var(--f-mono);color:var(--muted)}
.gi .lock{position:absolute;top:3px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--proof)}
#work{display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* La barre tient sur une seule ligne : les réglages sont désignés par un picto,
   les libellés longs sont passés en infobulle. */
.toolbar{display:flex;flex-wrap:nowrap;gap:7px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);overflow-x:auto}
.toolbar .lab.picto{color:#000;flex:none}
.toolbar input[type=number]{width:46px;padding:4px 6px}
.toolbar select{max-width:134px;padding:4px 6px}
.tool.picto{padding:5px 8px}
.tool .cpt{font:var(--fs) var(--f-mono);line-height:1}
.tool .mot{white-space:nowrap}
/* Texte lu par les lecteurs d'écran seulement : les pictos n'ont pas de mot visible. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.toolbar .sep{width:1px;align-self:stretch;background:var(--line)}
.tool{border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:5px 9px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.tool kbd{font:var(--fs) var(--f-mono);color:var(--muted)}
.tool[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tool[aria-pressed="true"] kbd{color:rgba(255,255,255,.75)}
.tool[disabled]{opacity:.45;cursor:not-allowed}
.stagerow{flex:1;min-height:320px;display:flex}
.toolbox{--tb:#3a3f45;flex:none;width:52px;background:var(--tb);display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;border-right:1px solid var(--line)}
.toolbox .tb{width:40px;height:40px;border:0;border-radius:6px;background:transparent;color:#d9dde2;display:grid;place-items:center;cursor:pointer;position:relative}
.toolbox .tb:hover{background:rgba(255,255,255,.08)}
.toolbox .tb[aria-pressed="true"]{background:#1e2226;color:#fff;--tb:#1e2226;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.toolbox .tb[aria-pressed="true"]::after{content:"";position:absolute;right:3px;bottom:3px;border:3px solid transparent;border-right-color:#9aa3ad;border-bottom-color:#9aa3ad}
.toolbox .tbsep{width:28px;height:1px;background:rgba(255,255,255,.12);margin:4px 0}
#cvwrap{flex:1;min-width:0;min-height:320px;position:relative;background:var(--paper);touch-action:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
#cv.t-select{cursor:default}
#cv.t-edit{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M6 3v16.5l4.3-4.1 2.9 6.2 2.6-1.2-2.9-6.1h6.1z' fill='white' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") 6 3,default}
#cv.t-ribbon{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3 10.4 6l7.4 7.4-4.4 4.4L6 10.4z' fill='black' stroke='white' stroke-width='1'/%3E%3Cpath d='M3 3l5.6 5.6' stroke='white' stroke-width='1.1'/%3E%3C/svg%3E") 3 3,crosshair}
#cv.t-erase{cursor:cell}
#cv.t-hand{cursor:grab}
#cv.t-zoom{cursor:zoom-in}
#cv.t-zoom.alt{cursor:zoom-out}
#cv.panning{cursor:grabbing}
#insp{padding:14px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:16px}
#insp section{display:grid;gap:9px}
#insp h3{margin:0}
.vlist{display:grid;gap:8px}
.vrow{display:grid;grid-template-columns:1fr 64px;gap:4px 8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:7px}
.vrow .vh{grid-column:1/-1;font:var(--fs) var(--f-mono);color:var(--muted);display:flex;justify-content:space-between}
.vrow.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.vrow.on .vh{color:var(--accent)}
.vtable .on{color:var(--accent);font-weight:600}
.warn{font-size:var(--fs);color:var(--proof);background:var(--proof-soft);border-radius:6px;padding:6px 8px}
.okmsg{font-size:var(--fs);color:var(--ok)}

/* Règles */
#v-rules{overflow:auto}
.rules{max-width:1080px;margin:0 auto;display:grid;gap:22px;padding-block:8px 40px}
.rules h2{font:700 var(--fs)/1.1 var(--f-display);margin:0;text-wrap:balance}
.rules p{max-width:68ch;margin:0}
/* Les règles : toutes les cartes ont la même hauteur et sont alignées ; chaque
   carte porte son illustration dans une bande de hauteur fixe, puis son texte. */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-rows:1fr;gap:12px}
.rule{padding:0;display:grid;grid-template-rows:auto 1fr;align-content:start;overflow:hidden}
.rule .art{display:block;width:100%;height:92px;background:var(--paper);border-bottom:1px solid var(--rule)}
.rule .corps{padding:12px 14px 14px;display:grid;gap:6px;align-content:start}
.rule.large{padding:16px;grid-template-rows:none;display:grid;gap:6px}
.chapeau{display:grid;gap:10px}
.rule b{font:600 var(--fs) var(--f-ui)}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:1fr;gap:10px}
.pcard{padding:10px;display:grid;gap:4px;align-content:start}
.pcard svg{width:100%;height:auto;aspect-ratio:1;max-width:100%}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--fs)}
.keys kbd{font:var(--fs) var(--f-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--paper)}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:8px;font-size:var(--fs);opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.toast.on{opacity:1}
dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);max-width:min(720px,92vw);width:100%}
dialog textarea{width:100%;min-height:240px;font:var(--fs) var(--f-mono);letter-spacing:0}
@media (max-width:1100px){#v-draw{grid-template-columns:170px minmax(0,1fr)} #insp{grid-column:1/-1}}
@media (max-width:760px){
  #v-compose,#v-draw{grid-template-columns:1fr;height:auto}
  main{overflow:auto} .view{height:auto}
  #gitems{grid-template-columns:repeat(6,1fr);max-height:180px}
  #cvwrap{min-height:58vh}
  #stage{min-height:50vh}
  #v-alphabet{display:block;height:auto}
  #v-alphabet .panel{overflow:visible}
  #sheet{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
/* ---- charte ---- */
/* Alphabet : la planche des glyphes, en grand. Une grille de filets de 1 px, le
   vert fluo pour le glyphe courant, rien d'autre. */
#v-alphabet{display:flex;min-height:0;height:100%}
#v-alphabet .panel{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.sheetbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1px solid #000}
#sheet{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));align-content:start}
.sh{position:relative;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#fff;padding:10px 6px 6px;display:grid;justify-items:center;gap:2px;cursor:pointer}
.sh:hover{background:var(--cell)}
.sh[aria-current="true"]{background:var(--neon)}
.sh svg{width:100%;height:64px}
.sh .k{font-size:var(--fs);color:#000}
.sh .lock{position:absolute;top:6px;right:6px;width:7px;height:7px;background:#000}

body{font:var(--fs)/1.45 var(--f-mono);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid #000;outline-offset:1px}
header.top{border-bottom:1px solid #000}
.brand b{font:600 var(--fs)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.brand b i{font-style:normal;background:var(--neon);padding:1px 4px;margin-left:2px}
.status{font:var(--fs) var(--f-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
nav.tabs{background:none;border:0;padding:0;gap:2px}
nav.tabs button{border-radius:0;padding:5px 10px;color:#000;font:500 var(--fs) var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
nav.tabs button::before{content:"/"}
/* Les commandes de projet (enregistrer, ouvrir, revenir à l'alphabet validé) vivent
   dans la barre, après les onglets et séparées d'eux par un filet vertical. */
header .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
header .actions .filet{width:1px;align-self:stretch;background:#000;margin-right:8px}
/* Langue : deux lettres, l'active en vert fluo. */
header .langues{display:inline-flex;border:1px solid #000;margin-left:auto}
header .langues .lg{border:0;border-right:1px solid #000;background:#fff;color:#000;padding:5px 9px;cursor:pointer;letter-spacing:.06em}
header .langues .lg:last-child{border-right:0}
header .langues .lg:hover{background:var(--cell)}
header .langues .lg[aria-pressed="true"]{background:var(--neon)}
/* Soutien : le bouton de la famille, vert fluo sur encre. */
header .coffee{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;background:var(--neon);color:#000;border:1px solid #000;text-decoration:none;white-space:nowrap;letter-spacing:0}
header .coffee .emoji{line-height:1}
header .status{margin-left:auto}
header .coffee:hover{background:#000;color:var(--neon)}
nav.tabs button:hover{background:var(--cell)}
nav.tabs button[aria-selected="true"]{background:var(--neon);color:#000}
.panel{border:1px solid #000;border-radius:0}
.lab{font:500 var(--fs) var(--f-mono);letter-spacing:.1em;color:#000}
aside .lab::before,#insp .lab::before,.rules .lab::before{content:"/"}
.hint{color:var(--muted)}
.val{color:#000}
input[type=number],input[type=text],select,textarea{border:1px solid #000;border-radius:0;background:#fff}
input[type=color]{border:1px solid #000;border-radius:0;background:#fff}
input[type=range]{accent-color:#000}
input[type=checkbox]{accent-color:#000}
textarea{font:600 var(--fs)/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.btn{border:1px solid #000;border-radius:0;background:#fff;font:500 var(--fs) var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px}
.btn:hover{border-color:#000;background:var(--neon)}
.btn.primary{background:#000;border-color:#000;color:#fff}
.btn.primary:hover{background:var(--neon);color:#000}
.btn.danger{color:#000;text-decoration:underline;text-underline-offset:3px}
.seg{border:1px solid #000;border-radius:0}
.seg button{background:#fff;border-right:1px solid #000;font-size:var(--fs);letter-spacing:.06em;text-transform:uppercase}
.seg button[aria-pressed="true"]{background:var(--neon);color:#000}
.tool{border:1px solid #000;border-radius:0;background:#fff;font-size:var(--fs);letter-spacing:.06em;text-transform:uppercase}
.tool:hover{background:var(--cell)}
.tool[aria-pressed="true"]{background:var(--neon);border-color:#000;color:#000}
.toolbar{border-bottom:1px solid #000}
.toolbar .sep{background:#000}
.toolbox{--tb:#ffffff;background:#fff;border-right:1px solid #000}
.toolbox .tb{color:#000;border-radius:0}
.toolbox .tb:hover{background:var(--cell)}
.toolbox .tb[aria-pressed="true"]{--tb:var(--neon);background:var(--neon);color:#000;box-shadow:none}
.toolbox .tb[aria-pressed="true"]::after{border-right-color:#000;border-bottom-color:#000}
.toolbox .tbsep{background:#000;opacity:.25}
.gi{border:1px solid var(--rule);border-radius:0;background:#fff}
.gi:hover{border-color:#000}
.gi[aria-current="true"]{border-color:#000;box-shadow:none;background:var(--neon)}
.gi .k{color:#000}
.gi .lock{background:#000;border-radius:0}
#stage,#cvwrap{background:#fff}
.vrow{border:1px solid var(--rule);border-radius:0}
.vrow.on{border-color:#000;box-shadow:none;background:var(--accent-soft)}
.vrow.on .vh{color:#000}
.warn{color:#000;background:var(--proof-soft);border-left:3px solid var(--neon);border-radius:0}
.okmsg{color:#000}
.okmsg::before{content:"";display:inline-block;width:8px;height:8px;background:var(--neon);margin-right:6px}
.missing{color:#000}
.otf{border-top:1px solid #000}
.otf h3{font:600 var(--fs) var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.otf h3::before{content:"/"}
#otf-prev{border:1px solid #000;border-radius:0;background:#fff;color:#000}
.toast{background:#000;color:#fff;border-radius:0;font:var(--fs) var(--f-mono);box-shadow:inset 4px 0 0 var(--neon);padding-left:16px}
dialog{border:1px solid #000;border-radius:0}
.rules h2{font:600 var(--fs)/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.rule b{font:600 var(--fs) var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.rule b::before{content:"/"}
.keys kbd{border:1px solid #000;border-radius:0;background:#fff}
.vrow .xy{grid-column:1/-1;flex-wrap:nowrap;gap:6px}
.vrow .xy input{width:0;flex:1;min-width:0}
label.row{flex-wrap:nowrap;align-items:flex-start}
label.row input[type=checkbox]{flex:none;margin:2px 0 0}