@charset "utf-8";
:root { color-scheme: light; --accent:#216650; --line:#dce5df; --muted:#52635b; }
body.glossaire-app { margin:0; background:#f5f7f5; color:#20352b; font:16px/1.6 system-ui,sans-serif; }
.glossaire-app .app-header { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; padding:14px max(24px,calc((100vw - 1440px)/2)); background:white; border-bottom:1px solid var(--line); }
.glossaire-app h1 { margin:0; font-size:1.45rem; }
.glossaire-app .app-header p { grid-column:1; margin:2px 0 0; color:var(--muted); font-size:.9rem; }
.glossaire-app .tabs { grid-column:2; grid-row:1 / 3; align-self:start; display:flex; gap:8px; }
.glossaire-app .tabs a { padding:7px 14px; border-radius:8px; text-decoration:none; color:var(--accent); border:1px solid var(--line); font-size:.9rem; }
.glossaire-app .tabs a[aria-current] { background:var(--accent); color:white; }
.glossaire-app .app-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; max-width:1440px; margin:auto; padding:28px; box-sizing:border-box; }
.glossaire-app .menu { position:sticky; top:20px; align-self:start; max-height:calc(100vh - 40px); overflow:auto; padding:16px; background:white; border:1px solid var(--line); border-radius:12px; }
.glossaire-app .menu label { display:block; font-weight:650; margin-bottom:8px; }
.glossaire-app input[type=search] { width:100%; box-sizing:border-box; padding:10px; font:inherit; border:1px solid #85988c; border-radius:6px; }
.glossaire-app .niveau { font-size:.76rem; font-weight:700; color:var(--muted); margin:14px 0 4px; }
.glossaire-app .menu_element { display:block; width:100%; text-align:left; padding:4px 9px; margin:0; border:0; background:transparent; border-radius:6px; font: .86rem/1.5 monospace; color:#20352b; cursor:pointer; }
.glossaire-app .menu_element:hover { background:#edf4ef; }
.glossaire-app .menu_element[aria-current] { background:#deeee4; color:#164b38; font-weight:700; box-shadow:inset 3px 0 var(--accent); }
.glossaire-app [hidden] { display:none !important; }
.glossaire-app .glossaire { min-width:0; }
.glossaire-app .fiche-root { padding:28px; background:white; border:1px solid var(--line); border-radius:12px; }
.glossaire-app .fiche-root h2 { margin:0 0 24px; padding:0 0 16px; border-bottom:1px solid var(--line); font-size:1.6rem; }
.glossaire-app h2 tt { display:inline-block; font:500 .85rem system-ui,sans-serif; color:var(--muted); }
.glossaire-app .meta dl { margin:0 0 20px; }
.glossaire-app dt { font-weight:700; margin:18px 0 8px; }
.glossaire-app dd { margin:0; overflow-wrap:anywhere; }
.glossaire-app button:not(.menu_element) { cursor:pointer; padding:7px 12px; margin:3px; border:1px solid #a9b9ae; border-radius:6px; background:#f4f7f4; color:#20352b; font:500 .85rem system-ui,sans-serif; }
.glossaire-app .menu .category-toggle { display:flex; align-items:center; gap:7px; width:100%; padding:4px 2px; margin:0; border:0; background:transparent; color:var(--muted); font:700 .76rem/1.5 system-ui,sans-serif; text-align:left; }
.glossaire-app .category-toggle::before { content:'▸'; flex-shrink:0; width:10px; }
.glossaire-app .category-toggle[aria-expanded="true"]::before { content:'▾'; }
.glossaire-app .menu .category-toggle:hover { color:var(--accent); background:#edf4ef; }
.glossaire-app .category-entries { padding-left:20px; }
.glossaire-app .category-count { font-weight:500; font-variant-numeric:tabular-nums; }
.glossaire-app :focus-visible { outline:3px solid #296ba3; outline-offset:3px; }
.glossaire-app .skip-link { position:absolute; top:8px; left:8px; transform:translateY(-180%); padding:10px; background:white; color:var(--accent); z-index:10; }
.glossaire-app .skip-link:focus { transform:none; }
.glossaire-app table.visualisation { width:100%; table-layout:fixed; border-spacing:8px; margin:0 -8px 24px; }
.glossaire-app .visualisation_entete { text-align:left; font-size:.85rem; color:var(--muted); padding:8px; }
.glossaire-app td.visualisation_cellule_code,
.glossaire-app td.visualisation_cellule_code_css,
.glossaire-app td.visualisation_cellule { width:50%; padding:12px; vertical-align:top; border:1px solid var(--line); border-radius:8px; background:#fafcfb; }
.glossaire-app .visualisation_sous-titre { font-weight:650; padding:8px; }
.glossaire-app .practice-code-limit { max-width:100%; }
.glossaire-app .code-scroll pre[class*="language-"],
.glossaire-app .code-scroll code[class*="language-"] { white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; }
.glossaire-app .copy-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:6px; }
.glossaire-app .copy-status { font: .8rem system-ui,sans-serif; color:var(--muted); }
.glossaire-app .copy-toolbar .copy-button { padding:4px 9px; margin:0; font-size:.78rem; }
.glossaire-app .CodeMirror { height:300px; }
.glossaire-app iframe.visualisation_jeu { width:100%; height:380px; border:0; background:white; }
.glossaire-app iframe.example-preview { display:block; height:1px; }
.glossaire-app textarea { box-sizing:border-box; width:100%; min-height:240px; font:15px/1.5 monospace; }
.glossaire-app .empty-state { padding:48px 28px; background:white; border:1px solid var(--line); border-radius:12px; }
.glossaire-app .empty-state h2 { margin-top:0; }
.glossaire-app .menu-status { color:var(--muted); font-size:.85rem; }
.glossaire-app .playground { margin-top:28px; padding:20px; background:#edf6ef; border:1px solid #b3d1bf; border-left:4px solid var(--accent); border-radius:10px; }
.glossaire-app .playground-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.glossaire-app .playground h3 { margin:0; color:#164b38; font-size:1.3rem; }
.glossaire-app .playground-header p { margin:4px 0 0; color:var(--muted); font-size:.9rem; }
.glossaire-app .playground-tools { font-weight:650; margin-bottom:8px; }
.glossaire-app .playground .reset-playground { background:white; white-space:nowrap; }
.glossaire-app .playground table.visualisation { margin-bottom:0; }
.glossaire-app .playground .visualisation_entete { color:#164b38; }
.glossaire-app .playground td.visualisation_cellule { background:white; }
.glossaire-app .playground-css .CodeMirror { height:200px; }
.glossaire-app .playground-css textarea { min-height:200px; height:200px; }
@media (max-width:900px) {
  .glossaire-app .app-layout { grid-template-columns:200px minmax(0,1fr); padding:16px; gap:16px; }
  .glossaire-app .fiche-root { padding:16px; }
}
@media (max-width:650px) {
  .glossaire-app .app-layout { display:block; }
  .glossaire-app .menu { position:static; max-height:300px; margin-bottom:20px; }
  .glossaire-app table.visualisation, .glossaire-app table.visualisation tbody,
  .glossaire-app table.visualisation tr { display:block; width:auto; }
  .glossaire-app table.visualisation th { display:none; }
  .glossaire-app table.visualisation td { display:block; width:auto; margin-bottom:10px; }
  .glossaire-app .app-header { grid-template-columns:1fr; padding:14px 20px; }
  .glossaire-app .tabs { grid-column:1; grid-row:auto; margin-top:10px; flex-wrap:wrap; }
  .glossaire-app .playground { padding:12px; }
  .glossaire-app .playground-header { flex-wrap:wrap; }
}