/* Mastering Claude, figures pedagogiques. Jetons definis dans IDENTITE.md. */

:root{
  --paper:#EDEFEA; --paper-raise:#F7F8F5; --ink:#131A17; --ink-soft:#5A6B60;
  --rule:#CBD2CA; --proved:#0F7B5A; --refuted:#B3261E; --night:#101512; --night-ink:#E7EBE6;
  /* Refonte du 2026-09-14 : un seul accent, le cuivre du robot et du favicon, decisions de Pierre du
     2026-09-04. Le jaune de mesure est retire, il disputait l accent au cuivre sans hierarchie.
     --copper sert les surfaces, filets et soulignements ; --copper-ink seul porte du TEXTE. */
  --copper:#D97757; --copper-ink:#A64B29; --copper-pale:rgba(217,119,87,.16);
  --grid:rgba(19,26,23,.04); --grid-major:rgba(19,26,23,.065);
  --r0:0; --r1:2px; --r-pill:999px;
  --sh-lift:0 1px 0 rgba(19,26,23,.06),0 14px 34px -18px rgba(19,26,23,.32);
  --sh-modal:0 40px 90px -30px rgba(19,26,23,.6);
  --ease:cubic-bezier(.32,.72,0,1); --d-fast:160ms; --d-base:240ms;
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-read:"Newsreader",Georgia,serif;
  --f-data:"IBM Plex Mono",ui-monospace,monospace;
  --u:8px;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#101512;--paper-raise:#171E1A;--ink:#E7EBE6;--ink-soft:#9AA79E;--rule:#2C352F;
        --proved:#3FBF8F;--refuted:#F0736A;--night:#0A0E0C;--copper-ink:#E59A7D;
        --copper-pale:rgba(217,119,87,.22);--grid:rgba(231,235,230,.03);--grid-major:rgba(231,235,230,.055)}
}

/* ---------- enveloppe commune ---------- */
.fig{margin:calc(var(--u)*4) 0;font-family:var(--f-display);color:var(--ink);
  container-type:inline-size;container-name:fig}
.fig-head{display:flex;align-items:baseline;gap:var(--u);margin-bottom:calc(var(--u)*2)}
.fig-num{font-family:var(--f-data);font-size:13px;letter-spacing:.02em;color:var(--copper-ink);
  white-space:nowrap}
.fig-title{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0}
.fig-note{font-family:var(--f-read);font-size:14.4px;color:var(--ink-soft);margin-top:var(--u)}
.fig-box{border:1px solid var(--rule);border-radius:2px;background:var(--paper-raise);
  padding:calc(var(--u)*3);overflow-x:auto}

/* ---------- cote, signature de la marque ---------- */
.cote{display:flex;align-items:center;gap:var(--u);font-family:var(--f-data);font-size:13px;
  color:var(--ink-soft);letter-spacing:.02em}
.cote-line{flex:1;height:9px;position:relative;min-width:40px}
.cote-line::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule)}
.cote-line::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule);
  box-shadow:inherit}
.cote-val{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .cote-line::before{transform-origin:left;animation:cote-draw .3s ease-out both}
}
@keyframes cote-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- flow ----------
   Pas de retour a la ligne : une etape orpheline sur une seconde ligne recevait une fleche
   venue de nulle part. La boite defile horizontalement si la sequence est longue, et passe
   en colonne sous 720 px. */
.f-flow{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0}
.f-step{flex:1 1 0;min-width:150px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);padding:calc(var(--u)*2);position:relative}
.f-step + .f-step{margin-left:calc(var(--u)*3)}
.f-step + .f-step::before{content:"";position:absolute;left:calc(var(--u)*-3);top:50%;width:calc(var(--u)*3);
  height:1px;background:var(--rule)}
.f-step + .f-step::after{content:"";position:absolute;left:calc(var(--u)*-1.2);top:calc(50% - 4px);
  border:4px solid transparent;border-left-color:var(--rule)}
.f-step-n{font-family:var(--f-data);font-size:11.5px;color:var(--ink-soft)}
.f-step-t{font-size:14.4px;font-weight:700;margin:4px 0}
.f-step-d{font-family:var(--f-read);font-size:14.4px;color:var(--ink-soft);line-height:1.5}
.f-step[data-state="danger"]{border-color:var(--refuted);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--rule) 6px,var(--rule) 7px)}
.f-step[data-state="good"]{border-color:var(--proved)}
.f-step[data-state="mark"]{box-shadow:inset 0 -3px 0 var(--copper)}
@container fig (max-width:660px){
  .f-flow{flex-direction:column}
  .f-step + .f-step{margin-left:0;margin-top:calc(var(--u)*3)}
  .f-step + .f-step::before{left:50%;top:calc(var(--u)*-3);width:1px;height:calc(var(--u)*3)}
  .f-step + .f-step::after{left:calc(50% - 4px);top:calc(var(--u)*-1.2);
    border-color:transparent;border-top-color:var(--rule)}
}
@media (max-width:720px){
  .f-flow{flex-direction:column}
  .f-step + .f-step{margin-left:0;margin-top:calc(var(--u)*3)}
  .f-step + .f-step::before{left:50%;top:calc(var(--u)*-3);width:1px;height:calc(var(--u)*3)}
  .f-step + .f-step::after{left:calc(50% - 4px);top:calc(var(--u)*-1.2);
    border-color:transparent;border-top-color:var(--rule)}
}

/* ---------- compare ---------- */
.f-table{width:100%;border-collapse:collapse;font-family:var(--f-read);font-size:14.4px}
.f-table th{font-family:var(--f-display);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  text-align:left;color:var(--ink-soft);border-bottom:1px solid var(--ink);padding:var(--u);font-weight:700}
.f-table td{border-bottom:1px solid var(--rule);padding:var(--u);vertical-align:top;color:var(--ink)}
.f-table tbody tr:hover td{background:var(--paper)}
.f-table td.is-good{color:var(--proved)}
.f-table td.is-bad{color:var(--refuted)}
.f-table td.is-mark{box-shadow:inset 0 -2px 0 var(--copper)}
.f-table th:first-child,.f-table td:first-child{font-family:var(--f-display);font-weight:600}

/* ---------- matrix ---------- */
.f-matrix{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.f-matrix > *{background:var(--paper-raise);padding:calc(var(--u)*2)}
.f-mx-corner{background:var(--paper)}
.f-mx-h{font-family:var(--f-data);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);text-align:center}
/* Libelle d axe vertical ecrit a l horizontale dans une colonne etroite : en ecriture verticale,
   un libelle long impose la hauteur de toute la ligne et creuse la matrice de vide. */
.f-mx-v{font-family:var(--f-data);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);width:104px;display:flex;align-items:center;line-height:1.4}
.f-mx-q h4{font-size:14.4px;margin:0 0 4px}
.f-mx-q p{font-family:var(--f-read);font-size:14.4px;color:var(--ink-soft);margin:0;line-height:1.5}

/* ---------- branches d un flow ---------- */
.f-branches{margin-top:calc(var(--u)*2);display:flex;flex-direction:column;gap:var(--u)}
.f-branch{display:flex;align-items:baseline;gap:calc(var(--u)*1.5);
  border-left:3px solid var(--copper);padding:var(--u) calc(var(--u)*2);background:var(--paper-raise)}
.f-branch-l{font-family:var(--f-data);font-size:13px;
  letter-spacing:.02em;color:var(--ink-soft);white-space:nowrap}
.f-branch-n{font-family:var(--f-data);font-size:11.5px;color:var(--copper-ink);
  border:1px solid var(--rule);border-radius:2px;padding:1px 5px;white-space:nowrap}
.f-branch-t{font-family:var(--f-read);font-size:14.4px;line-height:1.5}
@media (max-width:720px){.f-branch{flex-direction:column;gap:calc(var(--u)*0.5)}}

/* ---------- stack ---------- */
.f-stack{display:flex;flex-direction:column-reverse;gap:2px}
.f-layer{position:relative;isolation:isolate;border:1px solid var(--rule);border-radius:2px;
  padding:calc(var(--u)*1.5) calc(var(--u)*2);background:var(--paper-raise);display:flex;
  flex-direction:column;gap:calc(var(--u)*0.5)}
.f-layer-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--u)}
.f-layer-n{font-size:14.4px;font-weight:700}
.f-layer-v{font-family:var(--f-data);font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
/* La description d une couche : sans elle, un empilement de libelles courts ne dit pas ce que
   chaque couche contient. Elle passe a la ligne, la valeur mesuree non. */
.f-layer-d{font-family:var(--f-read);font-size:14.4px;color:var(--ink-soft);line-height:1.5}
/* Le remplissage passe DERRIERE le texte et reste pale : une couche de mesure ne doit jamais
   rendre son propre libelle illisible. */
.f-layer[data-fill]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill);
  background:var(--copper);opacity:.32;z-index:-1}
.f-layer[data-fill]::after{content:"";position:absolute;left:var(--fill);top:0;bottom:0;width:2px;
  background:var(--copper);z-index:-1}

/* ---------- timeline ---------- */
.f-time{position:relative;padding-left:calc(var(--u)*3);border-left:1px solid var(--rule)}
.f-ev{position:relative;padding:0 0 calc(var(--u)*3) 0}
.f-ev::before{content:"";position:absolute;left:calc(var(--u)*-3 - 4px);top:6px;width:7px;height:7px;
  background:var(--paper);border:1px solid var(--ink);border-radius:50%}
.f-ev[data-state="mark"]::before{background:var(--copper);border-color:var(--copper)}
.f-ev-d{font-family:var(--f-data);font-size:11.5px;color:var(--ink-soft)}
.f-ev-t{font-size:14.4px;font-weight:700;margin:2px 0}
.f-ev-x{font-family:var(--f-read);font-size:14.4px;color:var(--ink-soft);line-height:1.5}

/* ---------- contrast ---------- */
.f-contrast{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2)}
.f-side{border:1px solid var(--rule);border-radius:2px;padding:calc(var(--u)*2);background:var(--paper-raise)}
.f-side[data-kind="bad"]{border-color:var(--refuted)}
.f-side[data-kind="good"]{border-color:var(--proved)}
.f-side-h{font-family:var(--f-data);font-size:13px;letter-spacing:.02em;
  margin-bottom:var(--u)}
.f-side[data-kind="bad"] .f-side-h{color:var(--refuted)}
.f-side[data-kind="good"] .f-side-h{color:var(--proved)}
.f-side pre{font-family:var(--f-data);font-size:14.4px;white-space:pre-wrap;margin:0;line-height:1.5}
.f-side p{font-family:var(--f-read);font-size:14.4px;line-height:1.6;margin:0}
@media (max-width:640px){.f-contrast{grid-template-columns:1fr}}

/* ---------- metric ---------- */
.f-metrics{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2)}
.f-metric{flex:1 1 180px;border-top:2px solid var(--ink);padding-top:var(--u)}
.f-metric-v{font-family:var(--f-display);font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;
  box-shadow:inset 0 -8px 0 var(--copper);display:inline}
.f-metric-u{font-family:var(--f-data);font-size:14.4px;color:var(--ink-soft);margin-left:4px}
.f-metric-l{font-family:var(--f-read);font-size:14.4px;margin-top:var(--u);line-height:1.5}
.f-metric-s{font-family:var(--f-data);font-size:11.5px;color:var(--ink-soft);margin-top:4px}

/* ---------- anatomy ---------- */
.f-anatomy{position:relative;display:inline-block;max-width:100%}
.f-anatomy img{display:block;max-width:100%;height:auto;border:1px solid var(--rule)}
.f-mark{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--copper);color:var(--ink);
  font-family:var(--f-data);font-size:11.5px;font-weight:600;display:flex;align-items:center;
  justify-content:center;transform:translate(-50%,-50%);border:1px solid var(--ink)}
.f-legend{margin-top:calc(var(--u)*2);display:grid;gap:var(--u)}
.f-legend li{display:flex;gap:var(--u);font-family:var(--f-read);font-size:14.4px;list-style:none;
  line-height:1.5}
.f-legend b{font-family:var(--f-data);font-size:11.5px;flex:0 0 22px;text-align:center}

/* ---------- verdict ---------- */
.f-verdict{border-left:3px solid var(--rule);padding:var(--u) calc(var(--u)*2);
  font-family:var(--f-read);font-size:14.4px;line-height:1.6}
.f-verdict[data-kind="proved"]{border-left-color:var(--proved)}
.f-verdict[data-kind="refuted"]{border-left-color:var(--refuted)}
.f-verdict-h{font-family:var(--f-data);font-size:13px;letter-spacing:.02em;
  color:var(--ink-soft)}

/* ---------- graphiques de donnees ----------
   Palette de series validee par les six controles de la methode dataviz, en clair
   comme en sombre : bande de clarte, plancher de chroma, separation daltonienne sur
   chaque paire voisine, plancher de vision normale, contraste sur le fond.
   Le jaune de mesure reste hors des series, il ne sert qu au reperage. */
:root{
  --c0:#0F7B5A; --c1:#1F6FEB; --c2:#C2691A; --c3:#7B4FC9; --c4:#B3261E;
  --plot:#CBD2CA;
}
@media (prefers-color-scheme:dark){
  :root{--c4:#D8564C; --plot:#2A332D}
}
.f-c0,.f-s0{--c:var(--c0)} .f-c1,.f-s1{--c:var(--c1)} .f-c2,.f-s2{--c:var(--c2)}
.f-c3,.f-s3{--c:var(--c3)} .f-c4,.f-s4{--c:var(--c4)}

.f-chart{display:flex;flex-direction:column;gap:var(--u)}
.f-src{font-family:var(--f-data);font-size:11px;color:var(--ink-soft);letter-spacing:.02em}
.f-empty{font-family:var(--f-data);font-size:11.5px;color:var(--refuted)}
.f-u{font-family:var(--f-data);font-size:11px;color:var(--ink-soft)}
.f-legend-d{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.5);font-family:var(--f-data);
  font-size:11.5px;color:var(--ink-soft)}
.f-lg{display:inline-flex;align-items:center;gap:6px}
.f-lg b{color:var(--ink);font-weight:600}
.f-sw{width:10px;height:10px;flex:0 0 10px;background:var(--c);border-radius:2px}

/* bars : le libelle et la valeur sont ecrits, la couleur ne porte aucun sens seule */
.f-bar-row{display:grid;grid-template-columns:minmax(0,10rem) 1fr auto;align-items:center;
  gap:var(--u);min-height:24px}
.f-bar-l{font-family:var(--f-read);font-size:13.5px;line-height:1.35}
.f-bar-t{background:var(--plot);border-radius:2px;height:10px;position:relative}
.f-bar{display:block;height:10px;background:var(--c);border-radius:0;
  box-shadow:0 0 0 2px var(--paper-raise)}
.f-bar-v{font-family:var(--f-data);font-size:12.5px;text-align:right;white-space:nowrap}

/* line : une seule echelle verticale, jamais deux */
.f-linec{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ax svg" ". xa" ". lg" ". src";
  gap:6px var(--u);align-items:stretch}
.f-linec .f-ax{grid-area:ax;display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--f-data);font-size:11px;color:var(--ink-soft)}
.f-svg{grid-area:svg;width:100%;height:120px;display:block;background:
  linear-gradient(var(--plot) 1px,transparent 1px) 0 0/100% 25%}
.f-line{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.f-linec .f-xa{grid-area:xa;display:flex;justify-content:space-between;
  font-family:var(--f-data);font-size:11px;color:var(--ink-soft)}
.f-linec .f-legend-d{grid-area:lg} .f-linec .f-src{grid-area:src}

/* part : une composition, en barre empilee et jamais en camembert a huit parts */
.f-stackbar{display:flex;height:14px;border-radius:0;overflow:hidden;background:var(--plot)}
.f-seg{background:var(--c);box-shadow:inset 0 0 0 1px var(--paper-raise)}

/* gauge : une valeur situee sur son echelle, avec sa cible */
.f-gauge-v{font-family:var(--f-data);font-size:26px;line-height:1;letter-spacing:-.01em}
.f-gauge-t{position:relative;height:10px;background:var(--plot);border-radius:2px}
.f-gauge-f{display:block;height:10px;background:var(--proved);border-radius:0}
.f-target{position:absolute;top:-3px;width:2px;height:16px;background:var(--copper);
  box-shadow:0 0 0 1px var(--ink)}
.f-gauge-s{display:flex;justify-content:space-between;font-family:var(--f-data);
  font-size:11px;color:var(--ink-soft)}
.f-gauge-c{color:var(--ink)}

/* ---------- verre depoli sur l entete de figure, seule surface flottante ---------- */
.fig-head{position:sticky;top:0;z-index:1;
  background:var(--paper-raise);border-bottom:1px solid var(--rule);padding-block:8px}

/* ---------- mouvement, uniquement si la personne ne l a pas refuse ---------- */
@media (prefers-reduced-motion:no-preference){
  .f-bar,.f-gauge-f{transform-origin:left center;animation:f-grow .5s cubic-bezier(.22,1,.36,1) both}
  .f-seg{animation:f-fade .45s ease-out both}
  .f-line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:f-draw 1.1s cubic-bezier(.22,1,.36,1) .1s forwards}
  .f-metric{animation:f-rise .45s cubic-bezier(.22,1,.36,1) both}
  @keyframes f-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes f-fade{from{opacity:0}to{opacity:1}}
  @keyframes f-draw{to{stroke-dashoffset:0}}
  @keyframes f-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}