/* ==========================================================================
   clement13.net — composants communs à toutes les pages
   (en-tête, menu, mise en page, contenu, pied de page). Les couleurs viennent de tokens.css.
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 16px/1.7 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--acc-2); color: #000; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Barre supérieure ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--top-h);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; min-width: 38px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--txt); cursor: pointer; font: inherit; font-size: 14px;
}
.btn-icon:hover { border-color: var(--acc); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--txt); text-decoration: none; font-weight: 700; letter-spacing: .01em; }
.brand img { width: 30px; height: 30px; }
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.top-spacer { flex: 1; }
.top-link { font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.top-link:hover { color: var(--txt); background: var(--card); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 40px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--txt); transition: transform .2s; }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--acc-2); outline-offset: 2px; }
@media (max-width: 720px) { .hide-sm { display: none !important; } .brand small { display: none; } .switch .lbl { display: none; } }

/* ---------- Fil d'Ariane rappelé dans la barre supérieure ---------- */
.top-crumb {
  display: none; min-width: 0; flex: 0 1 auto; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--line);
  font-size: 13.5px; overflow: hidden;
  opacity: 0; transform: translateY(10px); visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
}
.top-crumb ol { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; padding: 0; white-space: nowrap; }
.top-crumb li { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.top-crumb li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.top-crumb li:last-child { flex: 0 0 auto; max-width: 45vw; color: var(--txt); font-weight: 600; }
.top-crumb a { color: var(--muted); text-decoration: none; }
.top-crumb a:hover { color: var(--txt); text-decoration: underline; }
.crumb-on .top-crumb { opacity: 1; transform: none; visibility: visible; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
@media (min-width: 900px) { .top-crumb { display: block; } }
/* écran étroit : pas de place dans la barre, le fil d'Ariane de la page reste collé sous elle */
@media (max-width: 899px) {
  .breadcrumb { position: sticky; top: var(--top-h); z-index: 30; margin: 0 -18px 12px; padding: 8px 18px; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) { .top-crumb, .crumb-on .top-crumb { transition: none; transform: none; } }

/* ---------- Menu escamotable ---------- */
.overlay { position: fixed; inset: 0; background: rgba(2, 6, 18, .55); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); z-index: 60;
  background: var(--bg-2); border-right: 1px solid var(--line); box-shadow: var(--shadow);
  transform: translateX(-102%); transition: transform .25s ease; display: flex; flex-direction: column; visibility: hidden;
}
@media (max-width: 759px) {
  .nav-open .drawer { transform: none; visibility: visible; }
  .nav-open .overlay { opacity: 1; pointer-events: auto; }
  .nav-open body { overflow: hidden; }
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.drawer-head strong { font-size: 15px; }
.drawer-search { padding: 10px 14px 4px; }
.drawer-search input {
  width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  color: var(--txt); padding: 0 12px; font: inherit; font-size: 14px;
}
.drawer nav { overflow-y: auto; padding: 8px 8px 24px; flex: 1; }
.nav-group { margin: 2px 0; }
.nav-group > summary, .nav-link {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--txt);
  text-decoration: none; cursor: pointer; font-size: 15px; list-style: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary .chev { margin-left: auto; transition: transform .15s; color: var(--muted); }
.nav-group[open] > summary .chev { transform: rotate(90deg); }
.nav-group > summary:hover, .nav-link:hover { background: var(--card); }
.nav-children { margin: 2px 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-link[aria-current="page"] { background: color-mix(in srgb, var(--brand) 30%, transparent); font-weight: 600; box-shadow: inset 3px 0 0 var(--acc-2); }
.nav-link .tag { margin-left: auto; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.nav-hidden { display: none !important; }
.drawer-foot { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.drawer-foot a { color: var(--muted); }

/* ---------- Mise en page ---------- */
.shell { display: block; }
.layout { max-width: none; width: 100%; margin: 0; padding: 24px 18px 56px; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .shell { display: flex; align-items: flex-start; }
  .shell > .layout { flex: 1 1 0; min-width: 0; padding: 24px 28px 56px 32px; }
  /* menu docké à gauche : s'ouvre et se ferme en largeur, le contenu occupe l'espace libéré */
  .drawer { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); width: var(--menu-w); flex: none; z-index: 10;
            transform: none; visibility: visible; box-shadow: none; overflow: hidden;
            transition: width .28s ease, visibility 0s; }
  .drawer > * { min-width: var(--menu-w); }
  html:not(.nav-open) .drawer { width: 0; border-right-width: 0; visibility: hidden; transition: width .28s ease, visibility 0s .28s; }
  .overlay { display: none; }
  .drawer-head #menu-close { display: none; }
}
@media (min-width: 1080px) { .layout.has-aside { grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: 28px; } }
.aside { display: none; align-self: start; }
html.aside-off .layout.has-aside { grid-template-columns: minmax(0, 1fr); }
html.aside-off .aside, html.aside-off .inline-panels { display: none !important; }
#aside-btn[aria-pressed="false"] { color: var(--muted); }
.inline-panels { margin: 1.2em 0; max-width: var(--prose); }
@media (min-width: 1080px) {
  .aside { display: block; position: sticky; top: calc(var(--top-h) + 18px); max-height: calc(100vh - var(--top-h) - 36px); overflow: auto; padding-right: 2px; }
  .inline-panels { display: none; }
}

.breadcrumb { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--line); }
.breadcrumb a { color: var(--muted); }
.breadcrumb [aria-current] { color: var(--txt); }

article { min-width: 0; }
article > * { max-width: none; }   /* le contenu occupe toute la largeur disponible */
article > .wide, article > table, article > .table-wrap, article > .compare, article > .cards, article > pre, article > .levels, article > .fiche { max-width: none; }
h1 { font-size: clamp(1.8rem, 3.2vw + 1rem, 2.6rem); line-height: 1.15; margin: .2em 0 .4em; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; line-height: 1.25; margin: 2.2em 0 .6em; padding-top: .4em; border-top: 1px solid var(--line); position: relative; }
h3 { font-size: 1.2rem; margin: 1.8em 0 .4em; }
h4 { font-size: 1rem; margin: 1.4em 0 .3em; color: var(--acc); text-transform: uppercase; letter-spacing: .05em; }
h2 .anchor, h3 .anchor { margin-left: .4em; opacity: 0; text-decoration: none; color: var(--muted); font-weight: 400; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }
.lead { font-size: 1.15rem; color: var(--muted); }
p, ul, ol { margin: .8em 0; }
li { margin: .3em 0; }
strong { font-weight: 650; }
em { color: color-mix(in srgb, var(--txt) 90%, var(--acc-2)); }
kbd { font: 13px ui-monospace, Consolas, monospace; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); }
code { font: .92em ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--code-bg); border: 1px solid var(--line); padding: .05em .35em; border-radius: 6px; }
mark { background: var(--mark); color: inherit; padding: 0 .2em; border-radius: 4px; }
blockquote { margin: 1em 0; padding: .4em 1em; border-left: 3px solid var(--acc-2); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; margin: 1em 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--card); font-weight: 650; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* ---------- Blocs de code ---------- */
pre { position: relative; margin: 1em 0; padding: 14px 16px; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; line-height: 1.55; tab-size: 4; }
pre code { background: none; border: 0; padding: 0; font-size: 13.5px; }
pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 9px; right: 84px; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.copy { position: absolute; top: 4px; right: 6px; height: 28px; min-width: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; font: 12px inherit; padding: 0 8px; }
.copy:hover { color: var(--txt); border-color: var(--acc); }
.tk-k { color: #7cb7ff; font-weight: 600; } .tk-s { color: #8fe0a8; } .tk-n { color: #f5b942; } .tk-c { color: #7e8db0; font-style: italic; } .tk-f { color: #d6a8ff; }
:root[data-theme="light"] .tk-k { color: #0b57c4; } :root[data-theme="light"] .tk-s { color: #137a3c; } :root[data-theme="light"] .tk-n { color: #9a5b00; } :root[data-theme="light"] .tk-c { color: #667494; } :root[data-theme="light"] .tk-f { color: #7a35c4; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tk-k { color: #0b57c4; } :root:not([data-theme="dark"]) .tk-s { color: #137a3c; }
  :root:not([data-theme="dark"]) .tk-n { color: #9a5b00; } :root:not([data-theme="dark"]) .tk-c { color: #667494; } :root:not([data-theme="dark"]) .tk-f { color: #7a35c4; }
}

/* ---------- Blocs pédagogiques ---------- */
.callout { margin: 1.2em 0; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 4px; background: var(--card); max-width: var(--prose); }
.callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; }
.callout .t { display: block; font-weight: 700; margin-bottom: 2px; }
.callout.note { border-left-color: var(--acc); } .callout.warn { border-left-color: var(--warn); } .callout.ok { border-left-color: var(--ok); } .callout.bad { border-left-color: var(--bad); }
.callout.note .t { color: var(--acc); } .callout.warn .t { color: var(--warn); } .callout.ok .t { color: var(--ok); } .callout.bad .t { color: var(--bad); }

.compare { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 1em 0; }
@media (min-width: 980px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare .col { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px 6px; background: var(--card); }
.compare .col h4, .compare .col h3.cmp-h { margin: 12px 0 0; font-size: 1rem; color: var(--acc); text-transform: uppercase; letter-spacing: .05em; }
.compare .col.proc h4, .compare .col.proc h3.cmp-h { color: var(--bad); } .compare .col.ens h4, .compare .col.ens h3.cmp-h { color: var(--ok); }
.compare pre { margin: 10px 0; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 1.2em 0; }
.card { display: block; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--txt); text-decoration: none; transition: transform .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); border-color: var(--acc); }
.card .card-title { display: block; margin: 0 0 .3em; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--acc); }
.card .card-text { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.card .meta { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }

.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 1em 0; }
.fiche dt, .fiche dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.fiche dt { background: var(--card); font-weight: 650; color: var(--muted); }
.fiche dt:last-of-type, .fiche dd:last-of-type { border-bottom: 0; }
@media (max-width: 640px) { .fiche { grid-template-columns: 1fr; } .fiche dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Échelles de maturité ---------- */
.levels { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 10px; }
.lvl { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); position: relative; }
.lvl .n { font-size: 1.7rem; font-weight: 800; color: var(--acc); line-height: 1; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); padding-right: 14px; }
.lvl h3 { margin: 0 0 .2em; font-size: 1.05rem; }
.lvl p, .lvl ul { margin: .3em 0; font-size: 15px; }
.lvl .en { color: var(--muted); font-weight: 400; font-size: .9em; }
.lvl.is-mien { border-color: var(--acc-2); box-shadow: 0 0 0 1px var(--acc-2), var(--shadow); }
.lvl.is-acquis { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.niveaux-on .lvl.is-mien::after { content: "Mon niveau actuel"; position: absolute; top: -11px; right: 14px; background: var(--acc-2); color: #1a1500; font-weight: 700; font-size: 12px; padding: 1px 10px; border-radius: 999px; }
.dims { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); list-style: none; padding: 0; margin: 1em 0; }
.dim { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.dim h3, .dim h4 { margin: 0 0 .2em; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--txt); }
.dim p { margin: .2em 0; font-size: 14.5px; color: var(--muted); }
.mien { display: none; margin-top: 6px; font-size: 13px; font-weight: 700; color: #1a1500; background: var(--acc-2); border-radius: 999px; padding: 1px 10px; width: fit-content; }
.niveaux-on .mien.has-val { display: inline-block; }
.mien.empty { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 500; }
.niveaux-on .mien.empty { display: inline-block; }
.bandeau-niveau { display: none; margin: 1em 0; padding: 12px 16px; border: 1px solid var(--acc-2); border-radius: var(--radius); background: var(--mark); max-width: var(--prose); }
.niveaux-on .bandeau-niveau { display: block; }

/* ---------- Aside (résumé + sommaire) ---------- */
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: 14px; overflow: hidden; }
.panel > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary .chev { margin-left: auto; color: var(--muted); transition: transform .15s; }
.panel[open] > summary .chev { transform: rotate(90deg); }
.panel .inner { padding: 0 14px 12px; font-size: 14.5px; line-height: 1.55; }
.panel .inner p, .panel .inner ul { margin: .5em 0; }
.panel.resume { border-color: color-mix(in srgb, var(--acc-2) 55%, var(--line)); }
.panel.resume > summary { color: var(--acc-2); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: 4px 8px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; }
.toc a:hover { color: var(--txt); }
.toc a.active { color: var(--txt); border-left-color: var(--acc-2); background: var(--mark); }
.toc ol ol a { padding-left: 20px; font-size: 13.5px; }

/* ---------- Pied de page ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 3em 0 1em; max-width: none !important; }
.pager a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; color: var(--txt); }
.pager a:hover { border-color: var(--acc); }
.pager small { display: block; color: var(--muted); }
.pager .next { text-align: right; grid-column: 2; }
.pager .prev { grid-column: 1; }
.sources { font-size: 14.5px; }
.sources li { word-break: break-word; }
.site-foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; padding: 16px 18px; text-align: center; }
.site-foot a { color: var(--muted); }
.pill { display: inline-block; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.pill.ok { color: var(--ok); border-color: var(--ok); } .pill.warn { color: var(--warn); border-color: var(--warn); }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding: 4px 0 4px 44px; margin: .8em 0; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }

@media print {
  .topbar, .drawer, .overlay, .copy, .pager, .switch { display: none !important; }
  .layout { display: block; } body { background: #fff; color: #000; }
  details { display: block; } details > summary { display: none; }
}
/* ---------- Outil d'état des lieux ---------- */
.edl-barre { position: sticky; top: calc(var(--top-h) + 6px); z-index: 20; background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 1em 0; box-shadow: var(--shadow); }
.edl-kpis { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.edl-kpi { display: flex; flex-direction: column; min-width: 100px; }
.edl-kpi .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.edl-kpi strong { font-size: 1.7rem; line-height: 1.1; color: var(--acc-2); }
.edl-kpi small { color: var(--muted); font-size: 12px; }
.edl-kpi.grow { flex: 1; min-width: 240px; }
.edl-comptes { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 4px; }
.edl-comptes span { font-size: 12.5px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); }
.edl-comptes .p { color: var(--ok); border-color: var(--ok); } .edl-comptes .f { color: var(--warn); border-color: var(--warn); } .edl-comptes .a { color: var(--bad); border-color: var(--bad); }
.edl-comptes .s, .edl-comptes .n { color: var(--muted); }
.edl-prog .barre { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.edl-prog .barre i { display: block; height: 100%; background: var(--brand); transition: width .2s; }
.edl-prog small { color: var(--muted); font-size: 12px; }
.edl-outils { margin: .6em 0 1em; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.edl-produit { font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.edl-produit input, .edl-note, .edl-poids { background: var(--card); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; padding: 4px 8px; }
.edl-produit input { width: 260px; max-width: 100%; }
.edl-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.edl-boutons .btn-icon { font-size: 13.5px; height: 34px; }
.edl-msg { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13.5px; min-height: 1.2em; }
.edl-fam-titre { margin: 1.6em 0 .4em; padding: 0; color: var(--acc); text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; }
.edl-dim { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin: 8px 0; }
.edl-dim > summary { cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; list-style: none; }
.edl-dim > summary::-webkit-details-marker { display: none; }
.edl-dim > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.edl-dim[open] > summary::before { transform: rotate(90deg); }
.edl-dim-titre { font-weight: 650; flex: 1 1 220px; }
.edl-segs { display: inline-flex; gap: 3px; }
.edl-segs i { display: block; width: 30px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.edl-segs b { display: block; height: 100%; width: 0; background: var(--acc-2); }
.edl-badge { font-size: 13px; color: var(--muted); min-width: 110px; text-align: right; }
.edl-dim-corps { padding: 0 14px 12px; }
.edl-question, .edl-niv0 { margin: .3em 0; font-size: 14.5px; color: var(--muted); }
.edl-niveau { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; padding: 6px 12px 8px; min-width: 0; }
.edl-niveau.acquis { border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); }
.edl-niveau legend { padding: 0 8px; font-weight: 650; font-size: 14.5px; }
.edl-etat { font-weight: 500; color: var(--muted); }
.edl-niveau.acquis .edl-etat { color: var(--ok); }
.edl-sig { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.edl-crit { display: grid; gap: 6px 14px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); }
.edl-crit:first-of-type { border-top: 0; }
.edl-texte { font-size: 14.5px; line-height: 1.5; }
.edl-choix { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.edl-note { grid-column: 1 / -1; width: 100%; font-size: 13px; display: none; }
.edl-crit:hover .edl-note, .edl-crit:focus-within .edl-note, .edl-note:not(:placeholder-shown) { display: block; }
.edl-s { cursor: pointer; font-size: 12.5px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); user-select: none; }
.edl-s:hover { border-color: var(--acc); color: var(--txt); }
input:checked + .edl-s-place { background: var(--ok); border-color: var(--ok); color: #05210f; font-weight: 700; }
input:checked + .edl-s-perfectible { background: var(--warn); border-color: var(--warn); color: #231700; font-weight: 700; }
input:checked + .edl-s-afaire { background: var(--bad); border-color: var(--bad); color: #2a0707; font-weight: 700; }
input:checked + .edl-s-sansobjet { background: var(--muted); border-color: var(--muted); color: #0b1329; font-weight: 700; }
input:focus-visible + .edl-s { outline: 2px solid var(--acc-2); outline-offset: 2px; }
.edl-clear { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; }
.edl-clear:hover { color: var(--txt); }
.edl-res h3 { margin-top: 1.4em; }
.edl-table td, .edl-table th { padding: 7px 10px; font-size: 14px; }
.edl-poids { width: 70px; }
.edl-listes { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .edl-listes { grid-template-columns: 1fr 1fr; } }
.edl-listes ul { padding-left: 1.1em; font-size: 14.5px; }
.edl-pastille { font-size: 11.5px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.edl-pastille.edl-s-perfectible { color: var(--warn); border-color: var(--warn); }
.edl-pastille.edl-s-afaire { color: var(--bad); border-color: var(--bad); }
.edl-vide { color: var(--muted); font-style: italic; }
@media print {
  .edl-form, .edl-outils, .edl-barre .edl-prog { display: none !important; }
  .edl-barre { position: static; box-shadow: none; }
  .edl-niveau legend { font-size: 12px; }
}

/* ---------- Utilitaires (remplacent les styles en ligne du contenu) ---------- */
.my { margin: 1.2em 0; }
.note-sm { color: var(--muted); font-size: 14px; margin-top: 6px; }
.fig { width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.fig-720 { max-width: 720px; }
.fig-820 { max-width: 820px; }

/* ---------- Menu : rubriques de premier niveau ---------- */
.nav-theme > summary { font-weight: 700; font-size: 15.5px; }
.nav-theme > summary .nav-ico { color: var(--acc-2); }
.nav-theme { margin: 6px 0; }
.nav-link.nav-home { font-weight: 600; }

/* ---------- Pages de rubrique et plan du site ---------- */
.cards .card .meta { text-transform: none; }
.sitemap, .sitemap ul { list-style: none; padding-left: 1.2em; }
.sitemap { padding-left: 0; }
.sitemap > li { margin: 1.1em 0; }
.sitemap > li > a, .sitemap > li > strong { font-weight: 700; font-size: 1.05rem; }
.sitemap ul { border-left: 1px solid var(--line); margin: .3em 0 .3em .3em; padding-left: 1em; }

/* ---------- Pied de page ---------- */
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.site-foot .sep { color: var(--line); }

/* ---------- Ancienne adresse redirigée ---------- */
.redirect { max-width: 560px; margin: 18vh auto 0; padding: 0 18px; text-align: center; }

/* Sprite d'icônes en ligne : jamais visible */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Introduction (une fois par visite, toutes pages) : le logo seul, au centre, puis il rejoint sa place ---------- */
.topbar, .shell, .site-foot { transition: opacity .9s ease .25s; }
html.pre .topbar, html.pre .shell, html.pre .site-foot { opacity: 0; }
html.holdlogo .brand { visibility: hidden; }
#intro { display: none; position: fixed; inset: 0; z-index: 100; cursor: progress; }
html.pre #intro { display: block; }
#intro-bg { position: absolute; inset: 0; background: #0b1329; }   /* toujours sombre : le logo est blanc et jaune */
#intro-logo { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
#intro-skip { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #93a3c4; opacity: 0; animation: introHint 1s ease 1.6s forwards; }
@keyframes introHint { to { opacity: .7; } }

/* ---------- Icônes de rubrique, titre illustré, illustration du panneau de droite ---------- */
.ico-crumb { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; stroke-width: 2; }
.breadcrumb li { display: inline-flex; align-items: center; }
.nav-theme > summary .nav-ico { width: 18px; height: 18px; color: var(--acc-2); }
h1.with-ico { display: flex; align-items: center; gap: 14px; }
.page-ico { width: 48px; height: 48px; flex: none; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; }
.art { margin: 0 0 14px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.art img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.inline-panels .art { max-width: 420px; }

.site-foot .copyright { flex-basis: 100%; font-size: 12.5px; opacity: .85; }
.nav-theme > summary .nav-label { flex: 1; }

/* ---------- Vignettes dans le menu ---------- */
.nav-thumb { width: 24px; height: 24px; flex: none; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); }
.nav-thumb.nav-mark { border: 0; border-radius: 0; object-fit: contain; }
.nav-link > span { min-width: 0; }
.ico-mark { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.art-logo { background: #0b1329; padding: 16px 14px; }
.art-logo img { aspect-ratio: auto; }

/* ---------- Menu : un nœud est un lien vers sa page de sommaire (la flèche seule replie / déplie) ---------- */
.nav-sum { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.nav-sum[aria-current="page"] { font-weight: 700; }
.nav-group > summary { padding-right: 6px; }
.nav-group > summary .chev { padding: 4px; margin-left: 4px; border-radius: 6px; }
.nav-group > summary .chev:hover { background: var(--bg); }

/* ---------- Cartouches des sommaires : le nombre de pages en bas à droite ---------- */
.card { position: relative; padding-bottom: 38px; }
.card .meta { position: absolute; right: 14px; bottom: 10px; margin: 0; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }

/* ---------- Fiches de biais : fréquence, domaines, liens ---------- */
.bias-meta { display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.2em 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); max-width: var(--prose); }
.bm-label { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bm-freq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bm-freq .bm-label { flex-basis: 100%; margin-bottom: 0; }
.bm-help { flex-basis: 100%; font-size: 13.5px; color: var(--muted); }
.gauge { display: inline-flex; gap: 4px; }
.gauge i { display: block; width: 22px; height: 10px; border-radius: 5px; background: var(--line); }
.gauge.g1 i:nth-child(-n+1), .gauge.g2 i:nth-child(-n+2), .gauge.g3 i:nth-child(-n+3), .gauge.g4 i:nth-child(-n+4) { background: var(--acc-2); }
.gauge.g4 i { box-shadow: 0 0 8px color-mix(in srgb, var(--acc-2) 55%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; background: var(--bg-2); }
.relations { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: none; }
.rel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px 16px; }
.rel h3 { margin: 0 0 2px; font-size: 1rem; }
.rel-hint { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.rel ul { margin: 0; padding-left: 1.1em; }
.rel-amplifie { border-top: 3px solid var(--bad); } .rel-voisin { border-top: 3px solid var(--acc); } .rel-contrepoids { border-top: 3px solid var(--ok); }
.rel-todo { color: var(--muted); }
.signals { list-style: none; padding: 0; display: grid; gap: 8px; }
.signals li { margin: 0; padding: 8px 12px 8px 40px; position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.signals li::before { content: "“"; position: absolute; left: 12px; top: 2px; font-size: 28px; color: var(--acc-2); line-height: 1.2; }
.reflexes { counter-reset: r; list-style: none; padding: 0; display: grid; gap: 10px; }
.reflexes > li { counter-increment: r; margin: 0; padding: 10px 14px 10px 52px; position: relative; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); border-radius: 10px; background: var(--card); }
.reflexes > li::before { content: counter(r); position: absolute; left: 14px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #05210f; font-weight: 800; display: grid; place-items: center; font-size: 14px; }

/* ---------- Auteurs d'un biais (cadre à droite de la définition) ---------- */
.people { float: right; display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 14px 22px; max-width: 320px; justify-content: flex-end; clear: right; }
.person { position: relative; margin: 0; width: 148px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: 13px; line-height: 1.4; }
.people.n1 .person { width: 190px; }
.person .ph { aspect-ratio: 3 / 4; background: var(--bg-2); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.person .ph img, .person .sil { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.person figcaption { display: grid; gap: 2px; padding: 8px 10px 10px; }
.person strong { font-size: 14px; }
.person .nat { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.person .flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.person .dates { font-weight: 600; }
.person .places, .person .role { color: var(--muted); }
.person .credit { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.person .credit a { color: var(--muted); }
@media (max-width: 720px) { .people { float: none; max-width: none; margin: 10px 0; justify-content: flex-start; } .person, .people.n1 .person { width: 46%; min-width: 150px; } }
article h2 { clear: both; }

/* ---------- Jauge « Aide de l'IA » ---------- */
.bm-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: inherit; text-decoration: none; border-radius: 10px; padding: 0; }
.bm-ai:hover .bm-help { color: var(--acc); }
.bm-ai .bm-label { flex-basis: 100%; margin-bottom: 0; display: flex; align-items: center; gap: 6px; }
.bm-ico { width: 15px; height: 15px; color: var(--acc); }
.gauge.ai.g1 i:nth-child(-n+1), .gauge.ai.g2 i:nth-child(-n+2), .gauge.ai.g3 i:nth-child(-n+3), .gauge.ai.g4 i:nth-child(-n+4) { background: var(--acc); }
.gauge.ai.g4 i { box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 55%, transparent); }
.ia-box { border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--line)); border-radius: var(--radius); background: var(--card); padding: 4px 18px 10px; margin: 1em 0; max-width: none; }
.ia-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 1em 0; }
.ia-grid > div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 4px 16px 10px; }
.ia-grid h3 { margin: .8em 0 .3em; font-size: 1rem; color: var(--acc); }
.ia-grid ul { margin: .3em 0; padding-left: 1.1em; font-size: 15px; }
pre[data-lang="prompt"] { white-space: pre-wrap; border-left: 4px solid var(--acc); }
pre[data-lang="prompt"] code { font-family: inherit; font-size: 14px; }

.bm-label { display: flex; align-items: center; gap: 6px; }
.bm-label .bm-ico { color: var(--acc-2); }
.bm-ai .bm-label .bm-ico { color: var(--acc); }

/* ---------- Schémas de pensée (src/art/diagram.py) ---------- */
.dg { margin: 1.4em 0; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); max-width: none; }
.dg svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.dg figcaption { margin-top: 6px; text-align: center; color: var(--muted); font-size: 13.5px; }
.dg-t { fill: var(--txt); font-family: inherit; font-weight: 600; }
.dg-tx-note { fill: var(--muted); font-weight: 500; } .dg-tx-bad { fill: var(--bad); } .dg-tx-good { fill: var(--ok); } .dg-tx-acc { fill: var(--acc-2); } .dg-tx-blue { fill: var(--acc); }
.dg-lt { fill: var(--muted); font-weight: 500; }
.dg-n { stroke-width: 1.6; }
.dg-plain { fill: var(--bg-2); stroke: var(--line); }
.dg-bad { fill: color-mix(in srgb, var(--bad) 16%, var(--bg-2)); stroke: var(--bad); }
.dg-good { fill: color-mix(in srgb, var(--ok) 16%, var(--bg-2)); stroke: var(--ok); }
.dg-acc { fill: color-mix(in srgb, var(--acc-2) 20%, var(--bg-2)); stroke: var(--acc-2); }
.dg-blue { fill: color-mix(in srgb, var(--acc) 18%, var(--bg-2)); stroke: var(--acc); }
.dg-note { fill: none; stroke: var(--muted); stroke-dasharray: 4 4; }
.dg-ghost { fill: none; stroke: none; }
.dg-e, .dg-l { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.dg-s-plain { stroke: var(--muted); } .dg-s-bad { stroke: var(--bad); } .dg-s-good { stroke: var(--ok); } .dg-s-acc { stroke: var(--acc-2); } .dg-s-blue { stroke: var(--acc); } .dg-s-note { stroke: var(--muted); } .dg-s-ghost { stroke: none; }
.dg-dash { stroke-dasharray: 6 6; }
.dg-a-plain, .dg-a-note { fill: var(--muted); } .dg-a-bad { fill: var(--bad); } .dg-a-good { fill: var(--ok); } .dg-a-acc { fill: var(--acc-2); } .dg-a-blue { fill: var(--acc); } .dg-a-ghost { fill: none; }
.dg-lb { fill: var(--card); stroke: var(--line); }

/* ---------- Cas célèbres ---------- */
.case { margin: 1.6em 0; padding: 4px 20px 16px; max-width: none; border: 1px solid var(--line); border-left: 5px solid var(--bad); border-radius: var(--radius); background: var(--card); }
.case-tag { display: inline-block; margin-top: 12px; padding: 1px 10px; border: 1px solid var(--bad); border-radius: 999px; color: var(--bad); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.case h3 { margin: .45em 0 .1em; }
.case h3 small { color: var(--muted); font-weight: 500; font-size: .8em; }
.case-bias { margin: 0 0 .6em; color: var(--muted); }
.case-facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 1em 0; }
.case-facts > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--bg-2); }
.case-facts b { display: block; font-size: 1.2rem; color: var(--acc-2); line-height: 1.25; }
.case-facts span { color: var(--muted); font-size: 13.5px; }
.case-lesson { margin-top: 1em; padding-top: .5em; border-top: 1px dashed var(--line); }
.case-lesson h4 { margin: .4em 0 .2em; color: var(--ok); }

/* ---------- Schémas animés (apparition quand ils entrent à l'écran ; viz.js ajoute .play) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .dg.anim .dg-n, html.js .dg.anim .dg-t, html.js .dg.anim .dg-lb, html.js .dg.anim .dg-e { transition: opacity .55s ease, stroke-dashoffset .8s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  html.js .dg.anim:not(.play) .dg-n, html.js .dg.anim:not(.play) .dg-t, html.js .dg.anim:not(.play) .dg-lb, html.js .dg.anim:not(.play) .dg-e { opacity: 0; }
  html.js .dg.anim:not(.play) .dg-e[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; }
  html.js .dg.anim.play .dg-e[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
  html.js .dg.anim .dg-bar { transform-box: fill-box; transform-origin: left center; }
  html.js .dg.anim:not(.play) .dg-bar { transform: scaleX(0); opacity: 1; }
  .dg.anim .dg-acc { animation: dg-pulse 3.2s ease-in-out infinite; }
}
@keyframes dg-pulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--acc-2) 70%, transparent)); } }
@media print { .dg.anim * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } }

/* ---------- Graphiques interactifs et réseaux ---------- */
.viz { position: relative; margin: 1.4em 0; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); max-width: none; }
.viz-canvas { position: relative; width: 100%; height: 360px; }
.viz-h260 .viz-canvas { height: 260px; } .viz-h300 .viz-canvas { height: 300px; } .viz-h420 .viz-canvas { height: 420px; } .viz-h520 .viz-canvas { height: 520px; }
.viz-loading { display: grid; place-items: center; height: 100%; margin: 0; color: var(--muted); }
.viz figcaption { margin-top: 6px; text-align: center; color: var(--muted); font-size: 13.5px; }
.viz-data { margin-top: 8px; font-size: 14px; }
.viz-data summary { cursor: pointer; color: var(--muted); }
.viz-data table { margin-top: 6px; font-size: 13.5px; }
.viz-pair { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); max-width: none; }
.viz-pair > .viz { margin: 0; }
.viz-tip { position: absolute; z-index: 5; pointer-events: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--txt); font-size: 13px; box-shadow: var(--shadow); }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--muted); justify-content: center; }
.viz-legend li { margin: 0; display: flex; align-items: center; gap: 6px; }
.viz-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .viz-legend i.ln { width: 18px; height: 4px; border-radius: 2px; }

/* ---------- Chargement de l'introduction ---------- */
#intro-progress { position: absolute; left: 50%; bottom: 22%; width: min(320px, 70vw); transform: translateX(-50%); opacity: 0; transition: opacity .5s ease; text-align: center; }
html.pre #intro-progress.on { opacity: 1; }
#intro-progress .bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
#intro-progress .bar i { display: block; height: 100%; width: 100%; background: #FFD700; border-radius: 999px; transform-origin: left center; transform: scaleX(0); transition: transform .25s ease; }
#intro-progress .lbl { margin-top: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #93a3c4; }

/* ---------- Pied de page : composants libres ---------- */
.site-foot .third { flex-basis: 100%; font-size: 12px; opacity: .8; }
.site-foot .third a { color: inherit; }

/* ---------- Info-bulle riche du réseau des biais ---------- */
.viz-tip.vt-rich { width: 300px; padding: 0; overflow: hidden; border-radius: 12px; }
.vt-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.vt-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 55%, transparent), var(--bg-2) 82%); }
.vt-body { position: relative; padding: 12px 14px 10px; }
.vt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vt-head .icon { color: var(--acc-2); flex: none; }
.vt-head strong { font-size: 15px; line-height: 1.25; }
.vt-head small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.vt-desc { margin: .5em 0 .6em; font-size: 13px; line-height: 1.45; color: var(--txt); }
.vt-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12.5px; }
.vt-l { width: 82px; color: var(--muted); }
.vt-row .gauge i { width: 16px; height: 8px; }
.vt-go { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

/* ---------- Graphiques : titre extérieur, sélecteur de mode ---------- */
.viz-title { margin: 0 0 8px; font-weight: 650; font-size: 16px; line-height: 1.3; color: var(--txt); }
.viz-modes { display: inline-flex; gap: 0; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.viz-modes button { appearance: none; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; padding: 5px 16px; cursor: pointer; }
.viz-modes button:last-child { border-right: 0; }
.viz-modes button[aria-pressed="true"] { background: var(--acc); color: #fff; }
.viz-modes button:focus-visible { outline: 2px solid var(--acc-2); outline-offset: -2px; }

/* ---------- Illustrations « affiche » (scene.py) ---------- */




/* ---------- Arrière-plan photo stylisée (scene.py) ---------- */
.scene-bg { position: relative; isolation: isolate; margin: 1.4em 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.scene-bg-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .42; border-radius: inherit; }
.scene-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 35%, transparent), color-mix(in srgb, var(--card) 72%, transparent)); }
.scene-bg-body { position: relative; padding: 4px; }
.scene-bg .viz { background: transparent; border-color: transparent; margin: 0; }
.scene-credit { display: block; padding: 0 12px 8px; color: var(--muted); font-size: 12px; }
.scene-hero { margin: 0 0 1.2em; }
.scene-hero .scene-bg-body { padding: 14px 18px 4px; }
.scene-hero h1 { margin-top: 4px; }
.scene-hero { margin: 0 0 1.2em; }
.scene-hero .scene-bg-body { padding: 14px 18px 4px; }
.scene-hero h1 { margin-top: 4px; }
.scene-hero .lead { color: var(--txt); }
.scene-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--card) 55%, transparent), color-mix(in srgb, var(--card) 82%, transparent)); }

/* ---------- Carte des liens : contrôles ---------- */
.viz-h640 .viz-canvas { height: 640px; } .viz-h760 .viz-canvas { height: 760px; }
.viz-ctl { display: grid; gap: 8px; margin: 0 0 10px; }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ctl-l { min-width: 64px; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.ctl-stats { color: var(--muted); font-size: 13px; margin-right: auto; }
.viz-ctl input[type="search"], .viz-ctl select { font: inherit; font-size: 13.5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--txt); }
.viz-ctl input[type="search"] { min-width: 200px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .chip i.ln { width: 16px; height: 4px; border-radius: 2px; }
.chip[aria-pressed="true"] { color: var(--txt); background: color-mix(in srgb, var(--acc) 14%, transparent); border-color: color-mix(in srgb, var(--acc) 55%, var(--line)); }
.chip[aria-pressed="false"] i { opacity: .35; }
.chip-link { border-style: dashed; }
.ctl-check { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Bulle de zoom des portraits (avatars vectoriels : définition nette à toute taille) ---------- */
.ph-zoom { display: none; position: absolute; z-index: 40; right: calc(100% + 14px); top: -8px; width: min(400px, 56vw); border: 2px solid var(--txt); border-radius: 8px; background: var(--bg-2); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); pointer-events: none; overflow: hidden; }
.ph-zoom img { display: block; width: 100%; height: auto; }
.person:hover .ph-zoom, .person:focus-within .ph-zoom { display: block; }
@media (max-width: 720px), (hover: none) { .ph-zoom { display: none !important; } }

.viz-badge { display: inline-block; margin: 0 0 8px 8px; padding: 2px 10px; border: 1px solid var(--warn); border-radius: 999px; color: var(--warn); font-size: 12.5px; font-weight: 600; }
.viz-note { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--acc); background: color-mix(in srgb, var(--acc) 7%, transparent); border-radius: 0 8px 8px 0; font-size: 14.5px; }
.viz-note p { margin: .4em 0; }
.viz-note[hidden] { display: none; }

/* ---------- Carte des liens : légende et filtres à gauche, carte sur toute la largeur restante ---------- */
.viz-split { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; align-items: start; }
.viz-split .viz-canvas { min-width: 0; }
.viz-split .viz-ctl { margin: 0; position: sticky; top: 70px; }
.viz-split .ctl-row { flex-direction: column; align-items: stretch; gap: 5px; }
.viz-split .ctl-l { min-width: 0; margin-top: 4px; }
.viz-split .chip { justify-content: flex-start; width: 100%; border-radius: 8px; }
.viz-split .ctl-stats { margin: 0; }
.viz-split input[type="search"], .viz-split select { width: 100%; box-sizing: border-box; }
.viz-split .viz-canvas { height: 78vh; min-height: 640px; }
@media (max-width: 900px) { .viz-split { grid-template-columns: minmax(0, 1fr); } .viz-split .viz-ctl { position: static; } .viz-split .ctl-row { flex-direction: row; flex-wrap: wrap; } .viz-split .chip { width: auto; } .viz-split .viz-canvas { height: 560px; min-height: 0; } }

/* ---------- Pastille d'information sur la photo d'arrière-plan (bleu et jaune d'Ukraine) ---------- */
.scene-bg:hover, .scene-bg:focus-within { z-index: 30; }
.scene-info { position: absolute; top: 10px; right: 10px; z-index: 5; }
.scene-i { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 215, 0, .5); background: rgba(11, 19, 41, .35); color: rgba(255, 215, 0, .75); font: 700 12px/1 Georgia, "Times New Roman", serif; font-style: italic; cursor: help; display: grid; place-items: center; opacity: .7; transition: opacity .2s, background-color .2s, border-color .2s; }
.scene-i:hover, .scene-i:focus-visible { opacity: 1; background: #0057B7; border-color: #FFD700; color: #FFD700; outline: none; }
.scene-info { top: 8px; right: 8px; }
.scene-card { display: none; position: absolute; top: 34px; right: 0; width: min(340px, 82vw); padding: 10px; border: 1px solid var(--line); border-top: 3px solid #FFD700; border-radius: 10px; background: var(--bg-2); color: var(--txt); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); text-align: left; font-size: 13px; line-height: 1.4; }
.scene-card::before { content: ""; position: absolute; top: -9px; right: 8px; width: 0; height: 0; }
.scene-info:hover .scene-card, .scene-info:focus-within .scene-card { display: block; }
.scene-card img { display: block; width: 100%; height: auto; max-height: 230px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; background: var(--bg); }
.scene-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 0; }
.scene-card dt { color: var(--muted); font-weight: 600; }
.scene-card dd { margin: 0; overflow-wrap: anywhere; }
.scene-card a { color: var(--acc-2); }
.scene-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.lic { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 1px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; }
.lic b { padding: 1px 7px; border-radius: 999px; background: #0057B7; color: #FFD700; font-size: 11.5px; letter-spacing: .04em; }

/* ---------- Carte des scandales ---------- */
.wm-fig { margin: 1em 0 .5em; }
.wm { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.wm-c { fill: color-mix(in srgb, var(--muted) 22%, transparent); stroke: var(--bg); stroke-width: .6; }
.wm-c.on { fill: color-mix(in srgb, #0057B7 38%, transparent); }
.wm .bub { cursor: pointer; }
.wm .bub circle { fill: #0057B7; stroke: #FFD700; stroke-width: 2.5; }
.wm .bub text { fill: #FFD700; font: 700 15px Inter, system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.wm .bub:hover circle, .wm .bub:focus circle, .wm .bub.sel circle { stroke-width: 4.5; fill: #0a6bd9; }
.wm .bub:focus { outline: none; }
.wm-fig figcaption { margin-top: 6px; color: var(--muted); font-size: 13.5px; text-align: center; }
.sc-bar { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.sc-count { color: var(--muted); font-size: 14px; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.sc { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid #FFD700; border-radius: var(--radius); background: var(--card); }
.sc[hidden] { display: none; }
.sc h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; }
.sc h3 small { color: var(--muted); font-weight: 500; font-size: 13px; }
.sc p { margin: .3em 0; font-size: 14.5px; }
.sc-meta { color: var(--muted); font-size: 13px !important; }
.sc-bias { color: var(--acc-2); }

article > .wm-fig, article > .sc-bar, article > .sc-list { max-width: none; }
#aside-btn[hidden] { display: none; }

/* ---------- Sélecteur de langue, version, recherche ---------- */
.lang-sw { display: inline-flex; align-items: center; margin-left: 8px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 600; }
.lang-sw a, .lang-sw span { padding: 5px 11px; text-decoration: none; }
.lang-sw .lang-cur { background: var(--acc); color: #fff; }
.lang-sw .lang-alt { color: var(--muted); }
.lang-sw .lang-alt:hover, .lang-sw .lang-alt:focus-visible { color: var(--txt); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.site-foot .ver { margin-left: auto; color: var(--muted); font-size: 12px; }
.callout.untranslated { margin-top: 0; }
.drawer-foot { flex-wrap: wrap; gap: 6px 14px; }
.search-form { margin: 0 0 6px; }
.search-form input[type="search"] { width: 100%; max-width: 640px; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--txt); }
.q-status { color: var(--muted); font-size: 14px; min-height: 1.4em; }
.q-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.q-results li { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.q-results p { margin: .25em 0 0; color: var(--muted); font-size: 14px; }

/* ---------- Barre de la fiche : nature, durée, vérification, mode de lecture ---------- */
.ess-hide { display: none !important; }
.fiche-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 1em 0 .2em; font-size: 13.5px; position: relative; z-index: 4; }
.fb-type { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--acc-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.fb-read { color: var(--muted); }
.chk { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; border: 1px solid var(--line); cursor: help; font-weight: 600; }
.chk .icon { width: 14px; height: 14px; }
.chk-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.chk-partial { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.chk-pending { color: var(--muted); }
.chk:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }
.chk-card { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(380px, 86vw); padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid #FFD700; border-radius: 10px; background: var(--bg-2); color: var(--txt); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); font-weight: 400; font-size: 13.5px; line-height: 1.45; text-align: left; }
.chk:hover .chk-card, .chk:focus-within .chk-card, .chk:focus .chk-card { display: block; }
.chk-card strong { display: block; margin-bottom: 4px; font-size: 14px; }
.chk-d { display: block; }
.chk-todo { display: block; margin-top: 8px; color: var(--acc-2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
.chk-card ul { margin: 4px 0 0; padding-left: 18px; }
.chk-card li { margin: 2px 0; }
.chk-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.rd-mode { margin-left: auto; display: inline-flex; align-items: center; gap: 0; color: var(--muted); }
.rd-mode > button { font: inherit; font-size: 13px; padding: 3px 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.rd-mode > button:first-of-type { border-radius: 999px 0 0 999px; margin-left: 8px; }
.rd-mode > button + button { border-radius: 0 999px 999px 0; border-left: 0; }
.rd-mode > button[aria-pressed="true"] { background: var(--acc); color: #fff; border-color: var(--acc); }
.rd-note { margin-left: 10px; font-size: 12.5px; }

/* ---------- Listes de contrôle, vues des biais ---------- */
.checklist { list-style: none; padding-left: 0; }
.checklist > li { position: relative; margin: .5em 0; padding-left: 30px; }
.checklist > li::before { content: ""; position: absolute; left: 2px; top: .28em; width: 16px; height: 16px; border: 2px solid var(--acc-2); border-radius: 4px; background: transparent; }
.vw-filter { margin: 12px 0; }
.vw-filter input { width: 100%; max-width: 560px; box-sizing: border-box; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--txt); }
.vw-sec { margin: 0 0 18px; break-inside: avoid; }
.vw-sec[hidden], .vw-list li[hidden] { display: none; }
.vw-sec h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.vw-sec h2 small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.vw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vw-list li { margin: 0; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.vw-list .gauge { margin-left: 6px; vertical-align: middle; }
.vw-d, .vw-sub { display: block; color: var(--muted); font-size: 13.5px; }
.vw-sub { display: inline; margin-left: 6px; font-size: 12.5px; }
.vw-domains { column-width: 340px; column-gap: 26px; }
.vw-domains .vw-list { display: block; }
@media print { .checklist > li::before { border-color: #000; } .site-foot, .topbar, .drawer, .fiche-bar { display: none; } }

/* Bulle de survol des portraits : fiche modernisée, aux couleurs de l'Ukraine, thèmes sombre et clair */
.person .ph { display: block; }
.ph-zoom.rich { pointer-events: auto; padding-right: 14px; right: 100%; top: -8px; border: 0; background: none; box-shadow: none; overflow: visible; }
.ph-zoom.rich .zoom-card { display: block; width: 100%; border-radius: 12px; overflow: hidden; background: var(--card); color: var(--txt); text-decoration: none; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); position: relative; }
.ph-zoom.rich .zoom-card::before { content: ""; display: block; height: 3px; background: #FFD700; }
.ph-zoom.rich .zoom-card img { display: block; width: 100%; height: auto; }
.zoom-note { display: flex; padding: 9px 14px 11px; border-top: 1px solid var(--line); }
.zoom-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zoom-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt); background: linear-gradient(90deg, rgba(0, 87, 183, .18), rgba(255, 215, 0, .28)); border-radius: 999px; padding: 2px 9px; }
.zoom-top .flag { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.zoom-how { color: var(--muted); }
.zoom-more { justify-self: start; margin-top: 4px; font-weight: 700; font-size: 12.5px; color: #FFD700; background: #0057B7; border-radius: 999px; padding: 4px 12px; }
.ph-zoom.rich .zoom-card:hover .zoom-more { filter: brightness(1.12); }

/* Trombinoscope */
.pd-bar { display: grid; gap: 10px; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); position: sticky; top: 56px; z-index: 5; }
.pd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pd-lab { min-width: 96px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-chip { display: inline-flex; align-items: center; gap: 6px; }
.pd-chip .n { font-size: 11px; color: var(--muted); }
.pd-chip[aria-pressed="true"] { background: #0057B7; border-color: #FFD700; color: #FFD700; }
.pd-chip[aria-pressed="true"] .n { color: #FFD700; }
.pd-chip .sx-ic { width: 18px; height: 18px; }
.pd-chip .flag { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.pd-tools { justify-content: space-between; }
.pd-count { font-weight: 600; }
.pd-grid { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pd-card[hidden], .pd-detail[hidden] { display: none; }
.pd-card a { display: block; text-decoration: none; color: var(--txt); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); transition: transform .15s, box-shadow .15s; height: 100%; }
.pd-card a:hover, .pd-card a:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); border-color: #0057B7; }
.pd-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.pd-n { display: grid; gap: 2px; padding: 8px 10px 10px; border-top: 3px solid #FFD700; font-size: 12.5px; line-height: 1.3; }
.pd-n strong { font-size: 13.5px; }
.pd-f { display: flex; gap: 4px; }
.pd-f .flag, .pd-natl .flag { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.pd-r { color: var(--muted); }
.pd-none { padding: 18px; text-align: center; color: var(--muted); }
.pd-details { display: grid; gap: 22px; }
.pd-detail { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 22px; padding: 18px; border: 1px solid var(--line); border-left: 6px solid #0057B7; border-radius: 12px; background: var(--card); scroll-margin-top: 80px; }
.pd-detail.pd-focus { box-shadow: 0 0 0 3px #FFD700; }
.pd-fig { margin: 0; }
.pd-fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.pd-fig figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pd-kind { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; color: var(--txt); background: linear-gradient(90deg, rgba(0, 87, 183, .18), rgba(255, 215, 0, .28)); border-radius: 999px; padding: 1px 8px; }
.pd-txt h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 1.5rem; }
.pd-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0 0 10px; font-size: 14px; }
.pd-facts dt { color: var(--muted); font-weight: 600; }
.pd-facts dd { margin: 0; }
.pd-natl { display: flex; align-items: center; gap: 6px; }
.pd-txt h3 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pd-pages, .pd-links { margin: 0; padding-left: 18px; }
.pd-known { padding: 8px 12px; border-left: 3px solid #FFD700; background: rgba(0, 87, 183, .08); border-radius: 0 8px 8px 0; }
@media (max-width: 720px) { .pd-detail { grid-template-columns: 1fr; } .pd-bar { position: static; } }

/* Pied de page allégé : une seule ligne centrée (copyright · licences · version) */
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px; padding: 10px 18px; font-size: 12.5px; }
.site-foot .copyright { flex-basis: auto; font-size: inherit; opacity: 1; }
.site-foot .sep { color: var(--muted); opacity: .6; }
.site-foot .ver { margin-left: 0; font-size: inherit; text-decoration: none; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.chg h2 { margin-top: 1.6em; }
.chg h3, .chg h4 { margin: 1.1em 0 .3em; font-size: 1rem; }
.chg ul { margin: 0 0 .6em; }
.chg-now { margin: 0 0 .4em; font-size: 1.05rem; }

/* Pages importées (guides) : marqueur de niveau et ligne de niveau */
.lvl-tag { margin: 1em 0 .3em; font-weight: 700; color: var(--muted); font-size: .95rem; }
.lvl-line { color: var(--muted); font-size: .92rem; }

.zoom-note.col { flex-direction: column; align-items: flex-start; gap: 8px; }
.zoom-quote { display: block; quotes: none; font-style: italic; line-height: 1.4; color: var(--txt); }

/* Liens du contenu : trait fin dégradé bleu -> jaune qui se déploie au survol, flèche sur les liens externes */
:is(article, aside.aside .resume) :is(p, li, td, th, dd, figcaption, summary, blockquote) a:not(.anchor):not(.card):not(.chip):not(.zoom-card):not(.ph):not(nav a) {
  color: var(--acc); font-weight: 500; text-decoration: none; border-radius: 3px;
  background-image: linear-gradient(90deg, var(--acc), var(--acc-2)), linear-gradient(color-mix(in srgb, var(--acc) 38%, transparent), color-mix(in srgb, var(--acc) 38%, transparent));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0 2px, 100% 1px;
  padding-bottom: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .25s ease, color .2s ease, background-color .2s ease;
}
:is(article, aside.aside .resume) :is(p, li, td, th, dd, figcaption, summary, blockquote) a:not(.anchor):not(.card):not(.chip):not(.zoom-card):not(.ph):not(nav a):is(:hover, :focus-visible) {
  color: var(--txt); background-size: 100% 2px, 100% 1px; background-color: color-mix(in srgb, var(--acc) 10%, transparent);
}
:is(article, aside.aside .resume) :is(p, li, td, th, dd, figcaption, summary, blockquote) a:not(.anchor):not(.card):not(.chip):not(.zoom-card):not(.ph):not(nav a):focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }
:is(article, aside.aside .resume) a[target="_blank"]:not(.anchor):not(.card):not(nav a)::after { content: "↗"; display: inline-block; margin-left: .2em; font-size: .78em; font-weight: 700; opacity: .65; transform: translateY(-.08em); }
:is(article, aside.aside .resume) a[target="_blank"]:not(.anchor):not(.card):not(nav a):hover::after { opacity: 1; }
:is(article, aside.aside .resume) a code { color: inherit; background: none; }
@media (prefers-reduced-motion: reduce) { :is(article, aside.aside .resume) a { transition: none !important; } }

/* Tableau de bord « Santé du site » */
.dash { display: grid; gap: 8px; }
.dash-hero { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--line); margin: 6px 0 4px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 20%, var(--card)), var(--card) 70%); }
.dash-hero.bad { background: linear-gradient(135deg, color-mix(in srgb, var(--bad) 24%, var(--card)), var(--card) 70%); }
.dash-hero.info { background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 18%, var(--card)), var(--card) 70%); }
.dash-hero .dh-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: var(--ok); flex: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 25%, transparent); }
.dash-hero.bad .dh-ic { background: var(--bad); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 25%, transparent); }
.dash-hero.info .dh-ic { background: var(--acc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 25%, transparent); }
.dash-hero strong { display: block; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.2; }
.dash-hero span { color: var(--muted); }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 8px; }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#0057B7, #FFD700); }
.kpi-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi-v { font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi-s { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.kpi.good .kpi-v { color: var(--ok); }
.kpi.warn .kpi-v { color: var(--warn); }
.kpi-bar { width: 100%; height: 6px; margin-top: 8px; }
.kpi-bar .bg { fill: color-mix(in srgb, var(--txt) 12%, transparent); }
.kpi-bar .fg { fill: var(--acc); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0; }
.dash-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 12px 14px 8px; min-width: 0; }
.dash-card .viz { margin: 0; }
.dash-card .viz-title { margin-top: 2px; font-weight: 700; }
.dash-card:has(.viz-h380), .dash-card:has(.viz-h420) { grid-column: 1 / -1; }
.dash-empty { padding: 16px 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.dash-empty.ok { border-style: solid; border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--txt); }
.dash-table td, .dash-table th { vertical-align: top; }
.dash-tag { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.dash-tag.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.dash-pages { margin: 0; padding-left: 16px; font-size: 13px; }
.dash-notes { display: grid; gap: 8px; padding: 0; list-style: none; }
.dash-notes li { padding: 10px 14px; border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--warn) 9%, transparent); }
.dash-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dash-checks div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.dash-checks strong { display: block; margin-bottom: 4px; }
.dash-checks span { color: var(--muted); font-size: 13.5px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } .dash-hero { padding: 16px; } }

/* Tableau de bord : filtre par rubrique */
.dash-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.dash-chip{font:inherit;font-size:.9rem;padding:6px 14px;border-radius:999px;border:1px solid var(--line,#3a4a6b);background:transparent;color:inherit;cursor:pointer}
.dash-chip i{font-style:normal;opacity:.65;margin-left:4px;font-variant-numeric:tabular-nums}
.dash-chip:hover{border-color:var(--yellow,#ffdd33)}
.dash-chip.on{background:var(--yellow,#ffdd33);border-color:var(--yellow,#ffdd33);color:#0b1329}
.dash-chip.on i{opacity:.8}
.dash-view[hidden]{display:none}
.dash-card { padding: 8px 10px 4px; }
.dash-card .viz { margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0; }
.dash-card .viz-title { margin: 0 0 2px; }

/* Page Contact : adresse protégée contre les robots (contact.js) */
.contact-box { margin: 1rem 0 1.6rem; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.contact-box .callout { margin: 0 0 14px; }
.contact-form label { display: block; margin-bottom: 10px; }
.contact-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.contact-row input { width: 5.5em; font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); }
.contact-btn { display: inline-flex; align-items: center; font: inherit; font-weight: 650; padding: 9px 18px; border-radius: 999px; border: 1px solid transparent; background: var(--brand); color: #fff; text-decoration: none; cursor: pointer; }
.contact-btn:hover { filter: brightness(1.12); }
.contact-btn.alt { background: transparent; color: var(--txt); border-color: var(--line); }
.contact-msg { min-height: 1.4em; margin: 10px 0 0; color: var(--warn); }
.contact-nojs { margin: 0; color: var(--muted); }
.contact-addr { font: 1.1em ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }

/* Formules, cartes de récit utilisateur (remplacent les blocs de texte « console ») */
.eq { margin: 1.3em 0; padding: 18px 22px; border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: var(--radius); background: var(--card); text-align: center; font-size: 1.12rem; line-height: 1.5; }
.eq > div + div, .eq .eq-then { margin-top: .7em; }
.eq .eq-then { color: var(--muted); }
.eq .frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .35em; font-size: .95em; }
.eq .frac > span:first-child { padding: 0 .6em .2em; border-bottom: 2px solid currentColor; }
.eq .frac > span:last-child { padding: .2em .6em 0; }
.eq .eq-note { margin: .9em 0 0; padding-top: .7em; border-top: 1px dashed var(--line); font-size: .92rem; color: var(--muted); text-align: left; }
.story-card { margin: 1.3em 0; padding: 18px 22px; border: 1px solid var(--line); border-top: 4px solid var(--acc); border-radius: var(--radius); background: var(--card); }
.story-card .story-title { margin: 0 0 .6em; font-weight: 650; font-size: 1.08rem; }
.story-card .story-line { margin: 0 0 .9em; padding: 12px 16px; border-left: 3px solid var(--acc-2); background: color-mix(in srgb, var(--acc) 7%, transparent); border-radius: 0 8px 8px 0; line-height: 1.7; }
.story-card .story-line em { font-style: normal; color: var(--acc-2); }
.story-tpl { max-width: 520px; }
.story-tpl .story-line { margin: 0; }
.story-card dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: .95rem; }
.story-card dt { color: var(--muted); font-weight: 600; }
.story-card dd { margin: 0; }
.story-card dd ul { margin: 0; padding-left: 1.1em; }
@media (max-width: 620px) { .story-card dl { grid-template-columns: 1fr; gap: 2px; } .story-card dd { margin-bottom: .6em; } }

/* Pictogrammes des produits et services (src/art/products.py) */
.prod { white-space: nowrap; }
.pi { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: .28em; flex: none; }

/* Bulles de survol des schémas (site.js) */
.dg-tip { cursor: help; outline: none; }
.dg-tip:hover > .dg-n, .dg-tip:focus-visible > .dg-n, .dg-tip.on > .dg-n { stroke-width: 2.8; filter: brightness(1.08); }
.dg-tip:focus-visible > .dg-n { stroke-width: 3.2; }
.dg-hint { display: block; margin-top: 3px; font-size: 12.5px; opacity: .75; }
.dg-bubble { position: fixed; z-index: 80; max-width: 300px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--txt); box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.5; pointer-events: none; opacity: 0; transition: opacity .12s; }
.dg-bubble.on { opacity: 1; }
.dg-bubble b { display: block; margin-bottom: 2px; color: var(--acc-2); font-weight: 650; }

/* Tableau de bord : filtres par version et par rubrique, cartes de graphiques pilotées par dash.js */
.dash-filters { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.dash-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px; }
.dash-flabel { min-width: 82px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.dash-filters .dash-filter { margin: 0; }
.dash-fnote { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.dash-chip.dash-all { border-style: dashed; }
.dash-card .dash-canvas { width: 100%; }
.dash-canvas.h0 { height: 0; } .dash-canvas.h260 { height: 260px; } .dash-canvas.h320 { height: 320px; } .dash-canvas.h360 { height: 360px; }
.dash-canvas.h420 { height: 420px; } .dash-canvas.h520 { height: 520px; } .dash-canvas.h680 { height: 680px; } .dash-canvas.h840 { height: 840px; }
.dash-card.wide { grid-column: 1 / -1; }
.dash-card .dash-cap { margin: 6px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.kpi-d { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kpi-d.good { color: var(--ok); }
.kpi-d.bad { color: var(--bad); }

/* Encadré « Fraîcheur » */
.fresh { margin: 14px 0; padding: 9px 14px; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius); background: var(--card); font-size: 14px; line-height: 1.6; }
.fresh p { margin: 0; }
.fresh strong { margin-right: 4px; }
.fresh-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size: 13px; }
.fresh-rest, .fresh-ok { color: var(--muted); }

/* Journal des versions : pictogramme de rubrique devant chaque élément */
.chg-list { list-style: none; padding-left: 0; }
.chg-list li { position: relative; padding-left: 28px; margin: 0 0 .5em; }
.chg-list .chg-ic { position: absolute; left: 0; top: .2em; width: 18px; height: 18px; color: var(--accent, currentColor); }
.dash-tag.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }