:root{
    --paper:#EEE7D6; --paper2:#E4DCC7; --paper3:#D9D0B8; --ink:#1B1711; --ink2:#4A4336; --mute:#867B67; --rule:#B5A98E; --rule2:#CFC5AB;
    --cherry:#A33127; --leaf:#355F3E; --gold:#8F7229; --stamp:#7A2E27;
    --g-sp:#4A4336; --g-eth:#355F3E; --g-yem:#8F7229; --g-typ:#A9601C; --g-bou:#A33127; --g-bt:#9E4C68; --g-tim:#544483; --g-sar:#723A74; --g-intro:#3B5A80; --g-f1:#1E6F68; --g-rob:#5E3D1F;
    --mix:16%; --plate:contrast(1.04) saturate(.82);
    --display:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;
    --text:"Spectral",Georgia,"Times New Roman",serif;
    --sc:"Spectral SC","Spectral",Georgia,serif;
    --ui:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
    --mono:"IBM Plex Mono","Courier New",monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0F1712; --paper2:#151F19; --paper3:#1C271F; --ink:#ECE5D4; --ink2:#C2B9A4; --mute:#877F6D; --rule:#34412F; --rule2:#26312A;
      --cherry:#D9584C; --leaf:#7DBE88; --gold:#D2B15A; --stamp:#D9584C;
      --g-sp:#B7AE9A; --g-eth:#7DBE88; --g-yem:#D2B15A; --g-typ:#E39B50; --g-bou:#E36A5E; --g-bt:#E58AAE; --g-tim:#A993D9; --g-sar:#CF86C6; --g-intro:#83ABD9; --g-f1:#5CC4BA; --g-rob:#C89A6E;
      --mix:34%; --plate:contrast(1.02) saturate(.78) brightness(.88);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0F1712; --paper2:#151F19; --paper3:#1C271F; --ink:#ECE5D4; --ink2:#C2B9A4; --mute:#877F6D; --rule:#34412F; --rule2:#26312A;
    --cherry:#D9584C; --leaf:#7DBE88; --gold:#D2B15A; --stamp:#D9584C;
    --g-sp:#B7AE9A; --g-eth:#7DBE88; --g-yem:#D2B15A; --g-typ:#E39B50; --g-bou:#E36A5E; --g-bt:#E58AAE; --g-tim:#A993D9; --g-sar:#CF86C6; --g-intro:#83ABD9; --g-f1:#5CC4BA; --g-rob:#C89A6E;
    --mix:34%; --plate:contrast(1.02) saturate(.78) brightness(.88);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55}
  a{color:inherit}
  button,input{font:inherit;color:inherit}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  img{max-width:100%;display:block}
  .wrap{width:min(1240px,94vw);margin:0 auto}
  .sc{font-family:var(--sc);font-variant:small-caps;font-weight:600;letter-spacing:.14em;font-size:.82rem;color:var(--ink2)}
  .ui{font-family:var(--ui);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:var(--ink2)}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .tag{display:inline-block;font-family:var(--ui);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;line-height:1.4}
  .tag.gen{color:var(--gold)} .tag.arch{color:var(--ink2)} .tag.photo{color:var(--leaf)} .tag.illu{color:var(--cherry)}
  figure{margin:0}
  figcaption{font-family:var(--ui);font-size:.72rem;letter-spacing:.05em;color:var(--ink2);padding:8px 0 0;line-height:1.5}
  figcaption b{font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;margin-right:8px}

  /* ══ Couverture ══ */
  .cover{position:relative;min-height:min(86vh,760px);display:grid;grid-template-columns:1fr 1fr;background:#0B100D;color:#ECE5D4;overflow:hidden}
  .cover figure{position:relative;overflow:hidden;min-height:60vh}
  .cover img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05) brightness(.82)}
  .cover .p1 img{filter:sepia(.35) contrast(1.05) brightness(.75)}
  .cover figcaption{position:absolute;left:18px;bottom:16px;color:#ECE5D4;padding:0;max-width:44ch;text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .cover .veil{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 52%,rgba(11,16,13,.78),rgba(11,16,13,.15) 70%,transparent);pointer-events:none}
  .cover .title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 4vw}
  .cover h1{font-family:var(--display);font-weight:400;font-size:clamp(52px,10.5vw,168px);line-height:.86;margin:0;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .cover h1 .b{display:block}
  .cover h1 i{font-style:italic;color:#E8A08E}
  .cover .sub{margin:26px 0 0;font-family:var(--sc);font-variant:small-caps;letter-spacing:.2em;font-size:.86rem;color:#D8CFB9;display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
  .ann{position:absolute;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:#C9BFA6;line-height:1.5;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.7)}
  .ann b{display:block;font-family:var(--ui);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;color:#E8A08E}
  .ann.r{text-align:right}
  .cover svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .cover svg.lines path{fill:none;stroke:#E8A08E;stroke-width:1;opacity:.55;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s cubic-bezier(.4,0,.2,1) .4s forwards}
  .cover svg.lines circle{fill:#E8A08E;opacity:0;animation:pop .4s ease 2.4s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes pop{to{opacity:.9}}
  @media (prefers-reduced-motion:reduce){.cover svg.lines path{animation:none;stroke-dashoffset:0}.cover svg.lines circle{animation:none;opacity:.9}}
  .scale{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px 3vw 16px;border-top:1px solid rgba(236,229,212,.25);font-family:var(--mono);font-size:.72rem;color:#C9BFA6;position:relative;z-index:2;background:#0B100D}
  .scale .bar{position:relative;height:14px;border-bottom:1px solid #C9BFA6}
  .scale .bar i{position:absolute;bottom:-1px;width:1px;height:10px;background:#C9BFA6}
  .scale .bar i::after{content:attr(data-l);position:absolute;bottom:12px;left:-30px;width:60px;text-align:center;font-style:normal;font-size:.62rem;letter-spacing:.06em}
  .scale .bar i.big{height:14px;background:#E8A08E}
  .scale .bar i.big::after{color:#E8A08E}
  @media (max-width:900px){.cover{grid-template-columns:1fr;min-height:auto}.counts.big{grid-template-columns:1fr 1fr}.counts.big b{font-size:1.9rem}.cover figure{min-height:46vh}.cover .p2{display:none}.cover .title{position:relative;padding:40px 6vw}.cover h1{font-size:clamp(52px,17vw,110px)}.ann{display:none}.cover svg.lines{display:none}}

  /* ══ Bandeau collant ══ */
  .stick{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule);opacity:0;transform:translateY(-100%);transition:opacity .3s,transform .3s;pointer-events:none}
  .stick.on{opacity:1;transform:none;pointer-events:auto}
  .stick .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
  .stick .t{font-family:var(--display);font-size:1.1rem}
  .stick nav{display:flex;gap:18px;flex-wrap:wrap}
  .stick nav a{text-decoration:none;font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid transparent}
  .stick nav a:hover{border-bottom-color:var(--ink)}
  @media (max-width:760px){
    .stick .wrap{gap:10px;padding:6px 0}
    .stick .t{font-size:1rem;flex:0 0 auto}
    .stick nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding-bottom:2px}
    .stick nav::-webkit-scrollbar{display:none}
    .stick nav > a,.stick .menu{flex:0 0 auto;white-space:nowrap}
    .menu .dd{max-height:70vh;overflow-y:auto}
  }

  /* ══ Registre d'ouverture ══ */
  .registre{padding:56px 0 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
  .registre h1,.registre h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.04;margin:0;text-wrap:balance}
  .registre p{margin:0 0 14px;max-width:60ch}
  .registre p:first-of-type::first-letter{font-family:var(--display);font-size:3.2em;line-height:.8;float:left;padding:.1em .1em 0 0;color:var(--cherry)}
  .counts{display:grid;grid-template-columns:repeat(4,auto);gap:8px 28px;justify-content:start;margin:22px 0 0;padding-top:14px;border-top:1px solid var(--ink)}
  .counts.big{grid-template-columns:repeat(2,1fr);gap:14px 24px}
  .counts.big b{font-size:2.3rem}
  .start{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
  .start .sc{flex:0 0 100%;margin-bottom:2px}
  .start a{font-family:var(--ui);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
  .start a:hover{color:var(--cherry);border-bottom-color:var(--cherry)}
  .counts b{display:block;font-family:var(--display);font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
  .counts span{font-family:var(--ui);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  @media (max-width:900px){.registre{grid-template-columns:1fr;gap:20px}.counts{grid-template-columns:repeat(2,auto)}}

  /* ══ Planches ══ */
  .planche{margin:80px 0 0}
  .planche > .head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:26px}
  .planche .num{font-family:var(--display);font-size:1.4rem;color:var(--cherry)}
  .planche h1,.planche h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,38px);margin:0;line-height:1.05}
  .planche .lead{margin-left:auto;font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

  /* Planche I : le vivant */
  .vivant{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
  .anat3d canvas{display:block;width:100%;height:auto;touch-action:none}
  .anat3d .badge{position:absolute;top:10px;left:10px}
  .couches li{cursor:pointer}
  .couches li:hover b,.couches li.on b{color:var(--cherry)}
  .anat{position:relative;border:1px solid var(--ink);background:#EFE9DC;overflow:hidden}
  .anat img{width:100%;height:auto;display:block;filter:contrast(1.02)}
  .anat .badge{position:absolute;top:10px;left:10px;display:flex;gap:6px}
  .schema{margin:0 0 18px;border:1px solid var(--rule);background:var(--paper2);padding:10px 12px 0}
  .schema img{width:100%;height:auto;display:block}
  .schema figcaption{padding:8px 0 10px}
  .couches{list-style:none;margin:0;padding:0;counter-reset:c}
  .couches li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule2);counter-increment:c}
  .couches li::before{content:counter(c,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--cherry);padding-top:3px}
  .couches b{font-family:var(--display);font-weight:400;font-size:1.15rem;display:block;grid-column:2}
  .couches span{color:var(--ink2);font-size:.95rem;grid-column:2}
  .especes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
  .gal2{margin:40px 0 0;border-top:1px solid var(--rule);padding-top:18px}
  .gal2 h3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin:0 0 14px}
  .gg2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .gg2 figure{margin:0}
  .gg2 img{width:100%;height:auto;border:1px solid var(--rule);background:var(--paper2);display:block;filter:var(--plate)}
  @media (max-width:900px){.gg2{grid-template-columns:1fr}}
  .especes figure{cursor:pointer}
  .especes .ph{aspect-ratio:1;overflow:hidden;background:#000;border:1px solid var(--rule)}
  .especes img{width:100%;height:100%;object-fit:cover;filter:var(--plate);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .especes figure:hover img{transform:scale(1.04)}
  .especes .nm{font-family:var(--display);font-style:italic;font-size:1.25rem;margin:10px 0 2px}
  .especes .nm small{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--mute);margin-left:8px}
  @media (max-width:900px){.vivant{grid-template-columns:1fr}.especes{grid-template-columns:1fr 1fr}}

  /* Planche II : la carte */
  .carte{border:1px solid var(--ink);background:var(--paper2);display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto minmax(600px,82vh);position:relative}
  .bar{grid-column:1/-1;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--ink);background:var(--paper)}
  .search{position:relative;flex:1 1 240px;max-width:380px}
  .search input{width:100%;padding:7px 10px 7px 28px;border:0;border-bottom:1px solid var(--ink);background:transparent;font-size:1rem}
  .search input::placeholder{color:var(--mute);font-style:italic}
  .search svg{position:absolute;left:4px;top:11px;width:15px;height:15px;fill:none;stroke:var(--ink2);stroke-width:1.6}
  .search ul{position:absolute;z-index:30;top:38px;left:0;right:0;margin:0;padding:4px 0;list-style:none;background:var(--paper);border:1px solid var(--ink);max-height:300px;overflow:auto}
  .search li{padding:6px 10px;cursor:pointer;display:flex;gap:10px;align-items:baseline}
  .search li:hover,.search li.on{background:var(--paper2)}
  .search li small{font-family:var(--ui);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .fams{display:flex;flex-wrap:wrap;gap:4px 12px}
  .fam{background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--ui);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c);border-bottom:1.5px solid var(--c)}
  .fam[aria-pressed="false"]{color:var(--mute);border-bottom-color:transparent;text-decoration:line-through}
  .tools{display:flex;gap:6px;margin-left:auto}
  .tools button,.btn{background:none;border:1px solid var(--ink);padding:5px 10px;cursor:pointer;font-family:var(--ui);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;transition:background .2s,color .2s}
  .tools button:hover,.btn:hover{background:var(--ink);color:var(--paper)}
  .btn.on{background:var(--ink);color:var(--paper)}
  #viz{position:relative;min-width:0;overflow:hidden}
  #viz > svg{width:100%;height:100%;display:block;cursor:grab}
  #viz > svg:active{cursor:grabbing}
  .legende{position:absolute;left:12px;bottom:12px;background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid var(--rule);padding:8px 12px;font-family:var(--ui);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);display:grid;gap:5px;pointer-events:none}
  .legende span{display:inline-flex;align-items:center;gap:8px}
  .legende svg{width:28px;height:10px;overflow:visible}
  .legende line{stroke:var(--ink2);stroke-width:1.6}
  .legende rect{fill:none;stroke:var(--ink2);stroke-width:1.4}
  .echelle{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:.68rem;color:var(--mute);background:color-mix(in srgb,var(--paper) 88%,transparent);padding:4px 8px;border:1px solid var(--rule);pointer-events:none}
  .story{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:none;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--ink);padding:6px 10px;z-index:5}
  .story.on{display:flex}
  .story .s{font-family:var(--ui);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
  .story b{font-family:var(--display);font-weight:400;font-size:1rem}
  .story button{background:none;border:1px solid var(--rule);padding:3px 8px;cursor:pointer;font-family:var(--ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}

  .hull{fill:var(--c);fill-opacity:.09;stroke:none;pointer-events:none;transition:opacity .4s;opacity:0}
  .z0 .hull{opacity:1}
  .z1 .hull{opacity:.35}
  .famlabel{font-family:var(--display);font-style:italic;font-size:30px;fill:var(--c);fill-opacity:.9;pointer-events:none;letter-spacing:.02em;transition:opacity .4s}
  .z1 .famlabel{opacity:.6}
  .z2 .famlabel{opacity:0}
  .z2 .hull{opacity:0}
  .node{cursor:pointer}
  .node rect{fill:color-mix(in srgb,var(--c) var(--mix),var(--paper));stroke:var(--c);stroke-width:1.2;rx:1.5}
  .node.t-esp rect,.node.t-pop rect,.node.t-hist rect{rx:12}
  .node text{font-family:var(--text);font-weight:600;font-size:12.5px;fill:var(--ink);pointer-events:none;dominant-baseline:central}
  .node.t-esp text{font-family:var(--display);font-style:italic;font-weight:400;font-size:14px}
  .node.code text,.node.t-acc text{font-family:var(--mono);font-weight:500;font-size:11.5px}
  .node.hub rect{stroke-width:1.8}
  .node.hub text{font-family:var(--display);font-weight:400;font-size:15.5px}
  .node.deb rect{stroke-dasharray:5 3}
  .node.sel rect{stroke-width:2.6;fill:color-mix(in srgb,var(--c) 32%,var(--paper))}
  .node.path rect{stroke-width:2}
  .node.dim{opacity:.22}
  .node.hidden{display:none}
  .z0 .node:not(.hub) text{opacity:0}
  .z0 .node:not(.hub) rect{fill:var(--c);fill-opacity:.85}
  .z1 .node:not(.hub) text{opacity:.85}
  .edge{fill:none;stroke:var(--c);stroke-width:1.2;opacity:.9}
  .edge.f1,.edge.int{stroke-width:1.8}
  .edge.mut{stroke-dasharray:7 4}
  .edge.sel{stroke-dasharray:2 4;stroke-linecap:round}
  .edge.dim{opacity:.08}
  .edge.lit{opacity:1;stroke-width:2.4}
  .edge.path{opacity:1;stroke-width:3.2;stroke:var(--cherry)}
  .edge.hidden{display:none}
  marker path{fill:var(--c)}
  @media (prefers-reduced-motion:no-preference){.node rect,.node text,.edge{transition:opacity .3s ease}}

  /* Dossier = feuille d'herbier */
  aside{border-left:1px solid var(--ink);background:var(--paper);overflow:auto;min-height:0;position:relative}
  .sheet{padding:20px 22px 40px}
  .sheet .label{border:1px solid var(--ink);padding:12px 14px 10px;position:relative;background:var(--paper2)}
  .sheet .label .inst{font-family:var(--ui);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);text-align:center;border-bottom:1px solid var(--rule);padding-bottom:6px;margin-bottom:8px}
  .sheet .label .inst b{display:block;font-size:.72rem;color:var(--ink)}
  .fld{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:baseline;font-size:.9rem;padding:3px 0;border-bottom:1px dotted var(--rule)}
  .fld .k{font-family:var(--ui);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .fld .v{font-family:var(--text);color:var(--ink)}
  .fld .v.m{font-family:var(--mono);font-size:.82rem}
  .stamp{position:absolute;right:10px;top:34px;transform:rotate(-8deg);border:2px solid var(--stamp);color:var(--stamp);font-family:var(--ui);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:4px 8px;opacity:.85;background:color-mix(in srgb,var(--paper) 60%,transparent)}
  .stamp.doc{--stamp:var(--leaf)} .stamp.prob{--stamp:var(--gold)}
  .sheet h2{font-family:var(--display);font-weight:400;font-size:2.05rem;line-height:1.02;margin:16px 0 4px;text-wrap:balance}
  .sheet .alias{color:var(--mute);font-size:.9rem;font-style:italic;margin:0 0 12px}
  .sheet .ph{margin:12px 0 14px;border:1px solid var(--rule);overflow:hidden;background:#000;aspect-ratio:3/2}
  .sheet .ph img{width:100%;height:100%;object-fit:cover;filter:var(--plate)}
  .sheet .note{margin:0 0 14px;max-width:60ch}
  .sheet h3{font-family:var(--ui);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin:18px 0 6px;display:flex;align-items:center;gap:10px}
  .sheet h3::after{content:"";flex:1;height:1px;background:var(--rule)}
  .debat{border-left:2px solid var(--cherry);padding:6px 12px;margin:0 0 12px;font-size:.95rem}
  .hist p{margin:0 0 8px;font-size:.97rem}
  .coord{font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--ink2);margin:0 0 6px;word-break:break-word}
  .coord button{background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--rule)}
  .coord button:hover{color:var(--cherry);border-bottom-color:var(--cherry)}
  .coord .gen{color:var(--cherry)}
  .mini{width:100%;height:auto;margin:4px 0 8px;font-family:var(--text)}
  .mini text{font-size:11px;fill:var(--ink)}
  .mini .me{font-weight:600}
  .mini line{stroke:var(--rule);stroke-width:1}
  .mini rect{fill:color-mix(in srgb,var(--c) var(--mix),var(--paper));stroke:var(--c);stroke-width:1}
  .mini .me rect{stroke-width:2}
  .links{display:flex;flex-wrap:wrap;gap:4px 10px}
  .links button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--text);font-size:.95rem;color:var(--c);border-bottom:1px solid color-mix(in srgb,var(--c) 50%,transparent)}
  .links button:hover{border-bottom-color:var(--c)}
  .reperes{margin:0;padding:0;list-style:none;border-left:1px solid var(--rule)}
  .reperes li{padding:2px 0 8px 12px;font-size:.93rem}
  .reperes .d{font-family:var(--mono);font-size:.74rem;color:var(--mute);display:block}
  .meter{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:0 0 8px}
  .meter div{border-bottom:1px dotted var(--rule);padding:4px 0}
  .meter small{display:block;font-family:var(--ui);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .meter b{font-weight:600;font-size:.92rem}
  .meter b.bad{color:var(--cherry)} .meter b.good{color:var(--leaf)}
  .wsrc{font-family:var(--ui);font-size:.68rem;letter-spacing:.06em;color:var(--mute);margin:0 0 8px}
  .acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
  .sheet.intro p{max-width:56ch}
  .sheet.intro .ph img{aspect-ratio:auto}
  .hist-strip{padding:8px 22px;border-top:1px solid var(--rule);display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;font-family:var(--ui);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .hist-strip button{background:none;border:0;padding:0;font:inherit;color:var(--ink2);cursor:pointer;border-bottom:1px solid var(--rule);text-transform:none;letter-spacing:0;font-family:var(--text);font-size:.85rem}
  .close{display:none;position:absolute;top:8px;right:8px;background:var(--paper);border:1px solid var(--ink);padding:4px 10px;font-family:var(--ui);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;z-index:3}

  /* Comparaison */
  .compare{margin-top:22px;border:1px solid var(--ink);display:none;grid-template-columns:180px 1fr 1fr;background:var(--paper2)}
  .compare.on{display:grid}
  .compare > div{padding:10px 14px;border-bottom:1px solid var(--rule2);font-size:.93rem}
  .compare .k{font-family:var(--ui);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:var(--paper)}
  .compare .h{font-family:var(--display);font-size:1.4rem;background:var(--paper)}

  /* Mode mobile : lignées */
  #lignees{display:none;padding:12px 14px;overflow:auto}
  #lignees details{border-bottom:1px solid var(--rule2);padding:6px 0}
  #lignees summary{cursor:pointer;font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c);padding:6px 0}
  #lignees ul{list-style:none;margin:0;padding:0 0 6px 8px;columns:2;column-gap:16px}
  #lignees li{padding:3px 0;font-size:.95rem;cursor:pointer;break-inside:avoid}
  #lignees li.deb::after{content:" ?";color:var(--cherry)}
  @media (max-width:900px){
    .carte{grid-template-columns:1fr;grid-template-rows:auto minmax(420px,70vh)}
    #viz{display:none} #lignees{display:block}
    .carte.map #viz{display:block} .carte.map #lignees{display:none}
    aside{position:fixed;inset:0;z-index:60;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);border:0}
    aside.open{transform:none}
    .close{display:block}
    .compare{grid-template-columns:1fr}
  }

  /* Planche III : routes */
  .routes{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:36px;align-items:start}
  .routes svg{width:100%;height:auto;display:block;background:var(--paper2);border:1px solid var(--ink)}
  .routes .land{fill:var(--paper3);stroke:var(--rule);stroke-width:.4}
  .routes .graticule{fill:none;stroke:var(--rule2);stroke-width:.4}
  .routes .route{fill:none;stroke:var(--c);stroke-width:1.6;opacity:.35;stroke-linecap:round}
  .routes .route.on{opacity:1;stroke-width:2.4;stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 2.4s cubic-bezier(.4,0,.2,1) forwards}
  @media (prefers-reduced-motion:reduce){.routes .route.on{animation:none;stroke-dashoffset:0}}
  .routes .stop{fill:var(--paper);stroke:var(--c);stroke-width:1.4}
  .routes .stop.on{fill:var(--c)}
  .routes .lbl{font-family:var(--mono);font-size:8.5px;fill:var(--ink2)}
  .rlist{list-style:none;margin:0;padding:0}
  .rlist li{padding:12px 0;border-bottom:1px solid var(--rule2);cursor:pointer;display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start}
  .rlist li i{width:14px;height:14px;border-radius:50%;background:var(--c);margin-top:6px;opacity:.5}
  .rlist li.on i,.rlist li:hover i{opacity:1}
  .rlist b{font-family:var(--display);font-weight:400;font-size:1.2rem;display:block}
  .rlist span{color:var(--ink2);font-size:.93rem}
  .rlist small{display:block;font-family:var(--mono);font-size:.72rem;color:var(--mute);margin-top:2px}
  @media (max-width:900px){.routes{grid-template-columns:1fr}}

  /* Planche IV : chronique */
  .chap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;padding:48px 0;border-top:1px solid var(--rule)}
  .chap:first-child{border-top:0;padding-top:10px}
  .chap .yr{font-family:var(--display);font-size:clamp(64px,9vw,132px);line-height:.85;letter-spacing:-.03em;color:var(--cherry);font-variant-numeric:tabular-nums}
  .chap .yr small{display:block;font-size:.2em;letter-spacing:.14em;color:var(--mute);font-family:var(--ui);text-transform:uppercase;margin-top:10px}
  .chap h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.08;margin:18px 0 8px;text-wrap:balance}
  .chap .span{font-family:var(--mono);font-size:.78rem;color:var(--mute)}
  .chap figure{margin:20px 0 0;border:1px solid var(--ink);background:#000;overflow:hidden}
  .chap figure img{width:100%;height:auto;filter:var(--plate)}
  .chap figcaption{padding:8px 10px;background:var(--paper)}
  .chap blockquote{margin:22px 0 0;padding:0;font-family:var(--display);font-size:1.25rem;line-height:1.3}
  .chap blockquote cite{display:block;font-style:normal;font-family:var(--ui);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:6px}
  .keys{list-style:none;margin:0;padding:0}
  .keys li{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--rule);cursor:pointer}
  .keys li:hover .t{color:var(--cherry)}
  .keys .d{font-family:var(--display);font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
  .keys .d small{display:block;font-family:var(--mono);font-size:.68rem;color:var(--mute);margin-top:4px;letter-spacing:.04em}
  .keys .t{font-size:1.02rem}
  .keys .who{display:inline-block;font-family:var(--ui);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-top:6px;margin-right:14px}
  .keys .more,.reg .more{display:inline-block;font-family:var(--ui);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--rule);margin-top:6px}
  .keys li.open .more,.reg li.open .more{color:var(--cherry);border-bottom-color:var(--cherry)}
  .xp{display:none;grid-column:2;margin:6px 0 4px;padding:12px 16px;border-left:2px solid var(--cherry);background:color-mix(in srgb,var(--cherry) 5%,transparent);font-size:.98rem;line-height:1.55;max-width:66ch}
  .xp p{margin:0 0 10px}
  .xp .btn{margin-top:2px}
  li.open .xp{display:block}
  .reg .xp{font-size:.92rem}
  .reg{margin:18px 0 0;padding:0;list-style:none;columns:2;column-gap:32px;font-size:.88rem}
  .reg li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:5px 0;border-bottom:1px dotted var(--rule2);break-inside:avoid;cursor:pointer}
  .reg li:hover{color:var(--cherry)}
  .reg .d{font-family:var(--mono);font-size:.72rem;color:var(--mute);padding-top:2px}
  .src{display:block;font-family:var(--ui);font-size:.64rem;letter-spacing:.04em;color:var(--mute);margin-top:3px}
  .src::before{content:"source · ";letter-spacing:.12em;text-transform:uppercase}
  .reg.monde li{border-left:2px solid var(--gold);padding-left:8px}
  .reg.monde li:not([data-go]):not([data-x]){cursor:default}
  .reg-h{font-family:var(--ui);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:20px 0 0}
  @media (max-width:900px){.chap{grid-template-columns:1fr;gap:16px}.reg{columns:1}}

  /* Provenance & colophon */
  .prov{margin:80px 0 0;border-top:1px solid var(--ink);padding-top:28px}
  .prov table{width:100%;border-collapse:collapse;font-size:.85rem}
  .prov th{text-align:left;font-family:var(--ui);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:6px 8px 6px 0;border-bottom:1px solid var(--ink)}
  .prov td{padding:7px 8px 7px 0;border-bottom:1px solid var(--rule2);vertical-align:top}
  .prov td a{color:var(--ink2)}
  .prov .tw{overflow-x:auto}
  .colophon{margin:56px 0 0;padding:28px 0 70px;border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .colophon p{margin:0 0 12px;font-size:.95rem;color:var(--ink2);max-width:60ch}
  .colophon .sig{font-family:var(--display);font-size:1.3rem;color:var(--ink);margin-top:10px}
  .colophon ul{margin:0;padding-left:18px;font-size:.92rem}
  .colophon li{margin:4px 0}
  @media (max-width:900px){.colophon{grid-template-columns:1fr}}
  .rv{transform:translateY(12px);opacity:.75;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
  .rv.in{transform:none;opacity:1}
  @media (prefers-reduced-motion:reduce){.rv{transform:none;opacity:1;transition:none}}
:root[data-theme="light"]{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
.fil{font-family:var(--ui);font-size:12.5px;color:var(--mute);margin:0 0 20px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fil a{color:var(--mute);text-decoration:none;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:44px}
.fil a:hover{color:var(--leaf);border-bottom-color:var(--leaf)}
.fil span.sep{opacity:.5}
.fil b{font-weight:500;color:var(--ink2)}

.sect-tete{border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:30px}
.sect-tete .no{font-family:var(--mono);font-size:13px;color:var(--leaf);
  letter-spacing:.05em;display:block;margin-bottom:8px}
.sect-tete h1{font-family:var(--display);font-size:clamp(30px,4.4vw,44px);font-weight:300;
  letter-spacing:-.02em;line-height:1.06;margin:0;text-wrap:balance}

.paginat{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:56px 0 0}
@media (max-width:640px){.paginat{grid-template-columns:1fr}}
.paginat a{display:block;text-decoration:none;border:1px solid var(--rule2);
  border-radius:6px;padding:16px 18px;transition:border-color .16s,background .16s}
.paginat a:hover{border-color:var(--leaf);background:var(--paper3)}
.paginat a:hover .t{color:var(--leaf)}
.paginat .q{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);display:block;margin-bottom:5px}
.paginat .t{font-family:var(--display);font-size:18px;display:block}
.paginat .suiv{text-align:right}

.tdm{margin:64px 0 0;border-top:1px solid var(--rule);padding-top:26px}
.tdm h2{font-family:var(--display);font-size:24px;font-weight:400;margin:0 0 4px}
.tdm .sous{font-family:var(--ui);font-size:14px;color:var(--ink2);margin:0 0 20px}
.tdm ol{list-style:none;margin:0;padding:0}
.tdm li{border-top:1px solid var(--rule2)}
.tdm li:last-child{border-bottom:1px solid var(--rule2)}
.tdm a{display:grid;grid-template-columns:2.4rem 1fr;gap:14px;align-items:baseline;
  min-height:44px;padding:12px 8px 12px 0;text-decoration:none}
/* Le soulignement de ces entrees ne se regle pas ici : la regle du geste 7,
   `.txt li a`, pese plus lourd que `.tdm a` et gagnait quoi qu'on ecrive. L'exclusion
   est donc dans da.py, juste apres la regle qu'elle borne. */
.tdm a:focus-visible{outline-offset:-2px}
.tdm a:hover{background:var(--paper3);box-shadow:inset 3px 0 0 var(--leaf)}
.tdm a:hover .t{color:var(--leaf)}
.tdm a[aria-current]{background:var(--paper3)}
.tdm a[aria-current] .t{color:var(--leaf)}
.tdm .num{font-family:var(--mono);font-size:13px;color:var(--mute);
  font-variant-numeric:tabular-nums}
.tdm .t{font-family:var(--display);font-size:18px;font-weight:400}
.tdm .d{display:block;font-family:var(--text);font-size:15px;line-height:1.55;
  color:var(--ink2);margin-top:3px}
.pxl{--g:#FBFBFD;--w:#FFFFFF;--tx:#1D1D1F;--tx2:#6E6E73;--ln:#D9D9DE;--ac:#A33127;--inv:0;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--g);color:var(--tx);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  letter-spacing:-.011em}
:root:not([data-theme="light"]) .pxl{
  --g:#000000;--w:#141416;--tx:#F5F5F7;--tx2:#8E8E93;--ln:#2C2C2E;--ac:#E4796D;--inv:1}
[data-theme="dark"] .pxl{--g:#000000;--w:#141416;--tx:#F5F5F7;--tx2:#8E8E93;--ln:#2C2C2E;--ac:#E4796D;--inv:1}
.pxl .wrap{width:min(1120px,90vw);margin:0 auto}
.pxl a{color:inherit;text-decoration:none}
.pxl h1,.pxl h2,.pxl h3{font-weight:600;letter-spacing:-.024em;text-wrap:balance;margin:0}
.pxl main.wrap{width:100%;max-width:none;padding:0}
.pxl .sec{width:min(1120px,90vw);margin:0 auto;padding:0 0 22px}

/* ── ouverture ── */
.pxl .op{text-align:center;padding:74px 0 64px}
.pxl .lg{display:block;margin:0 auto 30px;height:auto;filter:invert(var(--inv))}
.pxl .op h1{font-size:clamp(42px,7.2vw,86px);line-height:1.03;margin:0 0 22px}
.pxl .op-l{max-width:34em;margin:0 auto;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--tx2)}
.pxl .op-b{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.pxl .pil{display:inline-flex;align-items:center;border-radius:999px;padding:13px 28px;
  font-size:1rem;font-weight:500;letter-spacing:-.01em;transition:transform .18s,opacity .18s,background .18s}
.pxl .pil-1{background:var(--tx);color:var(--g)}
.pxl .pil-2{border:1px solid var(--ln);color:var(--tx)}
.pxl .pil:hover{transform:translateY(-1px);opacity:.86}
.pxl .op-c{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 46px;margin:46px 0 0;
  padding:26px 0 0;border-top:1px solid var(--ln)}
.pxl .op-c b{display:block;font-size:1.6rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.pxl .op-c span{display:block;font-size:.8rem;color:var(--tx2);margin-top:2px}

/* ── panneaux ── */
.pxl .pan{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:38px;
  background:var(--w);border-radius:26px;padding:44px 44px 44px 48px;overflow:hidden}
.pxl .pan h2{font-size:clamp(28px,3.6vw,46px);line-height:1.06;margin:0 0 16px}
.pxl .pan p{margin:0 0 22px;font-size:1.02rem;line-height:1.56;color:var(--tx2);max-width:38em}
.pxl .pan-i img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--ln)}
.pxl .lnk{display:inline-flex;align-items:center;gap:6px;font-size:1rem;font-weight:500;color:var(--ac)}
.pxl .lnk::after{content:"›";font-size:1.32em;line-height:1;transform:translateY(-.06em);transition:transform .18s}
.pxl .pan:hover .lnk::after,.pxl .oc:hover .lnk::after{transform:translate(3px,-.06em)}
.pxl .pan-q{background:linear-gradient(160deg,#2A1614,#120C0B 58%);color:#F5EFE9;padding-bottom:0;align-items:end}
.pxl .pan-q h2{color:#fff}
.pxl .pan-q p{color:#BDAEA6}
.pxl .pan-q .pan-t{padding-bottom:44px}
.pxl .pan-q .lnk{color:#F08C7E}
.pxl .pan-q .pan-i img{border:0;border-radius:14px 14px 0 0;box-shadow:0 -2px 40px rgba(0,0,0,.5)}
.pxl .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.pxl .pan-v{grid-template-columns:1fr;gap:26px;padding:38px 34px 0;align-content:start}
.pxl .pan-v h2{font-size:clamp(25px,2.6vw,34px)}
.pxl .pan-v p{font-size:.98rem;margin-bottom:18px}
.pxl .pan-v .pan-i img{border-radius:12px 12px 0 0;border-bottom:0}

/* ── en-tête de section ── */
.pxl .sh{padding:56px 4px 26px}
.pxl .sh h2{font-size:clamp(28px,4vw,50px);line-height:1.06}
.pxl .sh p{margin:12px 0 0;font-size:1.06rem;line-height:1.5;color:var(--tx2);max-width:44em}

/* ── le rail des planches ── */
.pxl .rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 22px;scrollbar-width:thin;scrollbar-color:var(--ln) transparent;overscroll-behavior-x:contain}
.pxl .pc{flex:0 0 258px;scroll-snap-align:start;background:var(--w);border-radius:18px;overflow:hidden;
  padding-bottom:18px;transition:transform .2s}
.pxl .pc:hover{transform:translateY(-3px)}
.pxl .pc-i{aspect-ratio:16/10;overflow:hidden;background:var(--ln)}
.pxl .pc-i img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pxl .pc:hover .pc-i img{transform:scale(1.05)}
.pxl .pc-n{display:block;padding:16px 18px 0;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ac)}
.pxl .pc b{display:block;padding:3px 18px 0;font-size:1.16rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.pxl .pc p{margin:6px 0 0;padding:0 18px;font-size:.86rem;line-height:1.45;color:var(--tx2)}

/* ── outils ── */
.pxl .og{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pxl .oc{display:flex;flex-direction:column;background:var(--w);border-radius:18px;padding:26px 24px 24px;transition:transform .2s}
.pxl .oc:hover{transform:translateY(-3px)}
.pxl .oc b{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.pxl .oc p{margin:9px 0 18px;font-size:.92rem;line-height:1.5;color:var(--tx2);flex:1}
.pxl .oc .lnk{font-size:.92rem}

/* ── tribunes : les textes signés ── */
.pxl .tbg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pxl .tb{display:flex;flex-direction:column;background:var(--w);border-radius:18px;padding:28px 26px 26px;
  border-left:3px solid var(--ac);transition:transform .2s}
.pxl .tb:hover{transform:translateY(-3px)}
.pxl .tb-m{font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--tx2)}
.pxl .tb b{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:7px 0 10px}
.pxl .tb p{margin:0 0 18px;font-size:.92rem;line-height:1.55;color:var(--tx2);flex:1}
.pxl .tb .lnk{font-size:.92rem}

/* ── recherche ── */
.pxl .sec-r{padding-bottom:0}
.pxl .rb{background:var(--w);border-radius:26px;padding:60px 40px;text-align:center;margin:56px 0 0}
.pxl .rb h2{font-size:clamp(26px,3.4vw,44px);line-height:1.08}
.pxl .rb p{margin:14px auto 30px;max-width:38em;font-size:1.04rem;line-height:1.5;color:var(--tx2)}
.pxl .qs{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;background:var(--g);
  border:1px solid var(--ln);border-radius:999px;padding:5px 5px 5px 20px;transition:border-color .18s,box-shadow .18s}
.pxl .qs:focus-within{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 15%,transparent)}
.pxl .qs-l{width:21px;height:21px;flex:none;color:var(--tx2)}
.pxl .qs input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--tx);
  font-family:var(--sans);font-size:1.05rem;padding:13px 0}
.pxl .qs input::placeholder{color:var(--tx2);opacity:1}
.pxl .qs button{flex:none;border:0;border-radius:999px;background:var(--tx);color:var(--g);cursor:pointer;
  font-family:var(--sans);font-size:.95rem;font-weight:500;padding:13px 26px;transition:opacity .18s}
.pxl .qs button:hover{opacity:.85}

/* ── la barre de navigation, au ton de la page ── */
.pxl .stick{background:color-mix(in srgb,var(--g) 78%,transparent);border-bottom:1px solid var(--ln);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}
.pxl .stick .wrap{padding:10px 0}
.pxl .stick .t{font-family:var(--sans);font-size:.98rem;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
.pxl .stick .t i{font-style:normal;color:var(--tx)!important}
.pxl .stick nav{gap:26px}
.pxl .stick nav a{font-family:var(--sans);font-size:.79rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--tx2);border:0;transition:color .15s}
.pxl .stick nav a:hover{color:var(--tx)}
.pxl .menu .dd{background:var(--w);border:1px solid var(--ln);border-radius:14px;padding:8px 0;
  box-shadow:0 14px 40px rgba(0,0,0,.22)}
.pxl .menu .dd a{font-family:var(--sans);font-size:.86rem;padding:6px 18px}
.pxl .menu .ddh{font-family:var(--sans);color:var(--tx2);border-top-color:var(--ln)}

/* ── pied de page ── */
.pxl .pied{width:min(1120px,90vw);margin:72px auto 0;padding:34px 0 10px;border-top:1px solid var(--ln)}
.pxl .pg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 22px}
.pxl .pg h3{font-size:.82rem;font-weight:600;margin:0 0 10px}
.pxl .pg a{display:block;font-size:.82rem;line-height:1.9;color:var(--tx2)}
.pxl .pg a:hover{color:var(--ac)}

@media (max-width:900px){
  .pxl .pan,.pxl .pan-q{grid-template-columns:1fr;gap:26px;padding:34px 26px;align-items:start}
  .pxl .pan-q{padding-bottom:0}.pxl .pan-q .pan-t{padding-bottom:0}
  .pxl .duo{grid-template-columns:1fr}
  .pxl .og{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pxl .tbg{grid-template-columns:1fr}
  .pxl .pg{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .pxl .op{padding:44px 0 40px}
  .pxl .lg{width:88px;margin-bottom:22px}
  .pxl .op-c{gap:10px 26px;margin-top:34px}.pxl .op-c b{font-size:1.3rem}
  .pxl .pil{padding:12px 22px;font-size:.95rem}
  .pxl .sh{padding:40px 2px 20px}
  .pxl .pan,.pxl .pan-q,.pxl .pan-v{padding:26px 20px;border-radius:20px}
  .pxl .pan-q,.pxl .pan-v{padding-bottom:0}
  .pxl .pc{flex-basis:216px}
  .pxl .rb{padding:38px 20px;border-radius:20px}
  .pxl .pg{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .pxl .qs{padding:4px 4px 4px 15px}
  .pxl .qs input{font-size:1rem;padding:11px 0}
  .pxl .qs button{padding:11px 18px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.pxl *{transition:none!important}}
.topnav .wrap{display:flex;align-items:center;gap:18px}
.topnav .raccourcis{display:flex;gap:18px;margin-left:auto}
.topnav .raccourcis a{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;white-space:nowrap}
.topnav .raccourcis a:hover{color:var(--ink)}
#ouvrir-index{margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:2px;
  padding:7px 13px;cursor:pointer;white-space:nowrap}
.topnav .raccourcis + #ouvrir-index{margin-left:0}
#ouvrir-index:hover{border-color:var(--ink2)}
#ouvrir-index b{display:inline-block;width:14px;height:1px;background:currentColor;
  box-shadow:0 4px 0 currentColor,0 -4px 0 currentColor;font-size:0}

#index{position:fixed;inset:0;z-index:300;background:var(--paper);overflow:auto;
  display:none;padding:0 0 60px}
#index.on{display:block}
#index .barre{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--rule);
  padding:16px 0;z-index:2}
#index .barre .wrap{display:flex;align-items:center;gap:14px}
#index input{flex:1 1 auto;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--rule);
  color:var(--ink);font-family:var(--text);font-size:1.15rem;padding:6px 2px;outline:none}
#index input::placeholder{color:var(--mute)}
#index input:focus{border-bottom-color:var(--cherry)}
#index .fermer{background:transparent;border:0;color:var(--ink2);cursor:pointer;
  font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
#index .fermer:hover{color:var(--ink)}
#index .grille{display:grid;gap:34px 44px;padding-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
#index h4{font-family:var(--ui);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule2)}
#index a{display:flex;gap:11px;align-items:baseline;padding:6px 0;text-decoration:none;
  color:var(--ink);font-family:var(--text);font-size:1.02rem;line-height:1.3}
#index a:hover{color:var(--cherry)}
#index a .n{font-family:var(--mono);font-size:.7rem;color:var(--mute);min-width:34px;
  flex:0 0 auto;text-align:right}
#index a.ici{color:var(--cherry)}
#index a.ici .n::after{content:" ‹"}
#index .vide{display:none;font-family:var(--ui);font-size:.8rem;color:var(--mute);padding-top:24px}
#index.rien .vide{display:block}
#index.rien .grille{display:none}
@media (max-width:820px){.topnav .raccourcis{display:none}}
.renvois{list-style:none;margin:0;padding:0}.renvois li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid var(--rule2)}.renvois a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}.renvois a:hover{color:var(--cherry)}.renvois span{font-family:var(--mono);font-size:.68rem;color:var(--mute);white-space:nowrap}.menu{position:relative}.menu .dd{display:none;position:absolute;top:100%;left:0;background:var(--paper);border:1px solid var(--ink);padding:8px 0;min-width:240px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25)}.menu .dd a{display:block;padding:6px 16px;white-space:nowrap}.menu:hover .dd,.menu:focus-within .dd{display:block}.stick.topnav{position:sticky;opacity:1;transform:none;pointer-events:auto}.stick.topnav.on{opacity:1}.planche{margin-top:40px}.fin{margin:64px 0 0;padding:22px 0 60px;border-top:1px solid var(--ink);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}.fin a{text-decoration:none;border-bottom:1px solid var(--rule)}
.essai{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:start;margin-top:26px}
.essai .txt p{font-size:1.02rem;line-height:1.62;max-width:64ch;margin:0 0 14px}
.essai h3{font-family:var(--display);font-weight:400;font-size:1.55rem;margin:34px 0 10px}
.essai h3:first-child{margin-top:0}
.essai .txt .src{margin:-6px 0 16px}
.essai figure.pl{margin:0 0 26px}.essai figure.pl img{width:100%;display:block;filter:var(--plate)}
.essai figcaption{font-size:.8rem;color:var(--ink2);margin-top:8px;line-height:1.45}
.tbl{border-collapse:collapse;font-family:var(--mono);font-size:.76rem;margin:8px 0 18px;width:100%}
.tbl td,.tbl th{border:1px solid var(--rule);padding:5px 9px;vertical-align:top;text-align:left}
.tbl th{font-family:var(--ui);letter-spacing:.08em;text-transform:uppercase;font-size:.64rem;color:var(--mute);font-weight:400}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 22px}
.chiffres div{border-top:1px solid var(--ink);padding-top:8px}
.chiffres b{font-family:var(--display);font-size:1.7rem;font-weight:400;display:block;line-height:1.1}
.chiffres span{font-family:var(--ui);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.etapes{list-style:none;margin:0 0 18px;padding:0;counter-reset:e}
.etapes li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule);counter-increment:e}
.etapes li::before{content:counter(e, upper-roman);font-family:var(--display);font-size:1.5rem;color:var(--cherry);line-height:1}
.etapes b{font-family:var(--display);font-weight:400;font-size:1.1rem;display:block}
.etapes p{margin:4px 0 0;font-size:.94rem;line-height:1.5}
.biblio{list-style:none;margin:20px 0 0;padding:0}
.biblio li{display:grid;grid-template-columns:1fr 2fr;gap:22px;padding:16px 0;border-top:1px solid var(--rule)}
.biblio .t{font-family:var(--display);font-size:1.15rem;line-height:1.2}
.biblio .m{font-family:var(--ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.biblio p{margin:0;font-size:.94rem;line-height:1.55}
.biblio .tag{margin-left:8px}
.essai > div{min-width:0}
.tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 4px}
.tw > .tbl{margin-bottom:0}
@media (max-width:900px){.essai,.biblio li{grid-template-columns:1fr}.chiffres{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.essai{gap:26px}.essai .txt p{font-size:1rem}.tbl{font-size:.86rem}.tbl td,.tbl th{padding:6px 8px}
.gg{grid-template-columns:1fr 1fr;gap:16px 12px}.gg figcaption{font-size:.66rem}
.toc .tl{gap:4px 14px}.toc a{font-size:.88rem}}
.ombre{border:1px solid var(--cherry);padding:16px 18px;margin:36px 0 0}
.ombre h4{font-family:var(--ui);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cherry);margin:0 0 4px}
.ombre .oi{font-size:.84rem;color:var(--mute);margin:0 0 10px}
.ombre ul{margin:0;padding-left:18px;font-size:.92rem;line-height:1.5}.ombre li{margin:4px 0}
.famille{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 18px}
.famille div{border-top:1px solid var(--rule);padding:6px 0;font-size:.86rem}.famille b{font-family:var(--ui);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:block}
@media (max-width:900px){.famille{grid-template-columns:1fr 1fr}}
.frise{list-style:none;margin:10px 0 18px;padding:0}.frise li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:7px 0;border-top:1px solid var(--rule);font-size:.93rem;line-height:1.45}
.frise b{font-family:var(--mono);font-weight:500;font-size:.78rem;color:var(--cherry);padding-top:2px}
.pays{margin:0 0 6px}.pays dt{font-family:var(--display);font-size:1.25rem;margin:22px 0 4px}.pays dd{margin:0;font-size:1rem;line-height:1.6;max-width:64ch}
.enc{border-left:3px solid var(--cherry);padding:4px 0 4px 16px;margin:14px 0 18px;font-size:.95rem;line-height:1.55}
.enc h4{margin:0 0 6px;font-family:var(--display);font-size:1.1rem}
.toc{margin:0 0 28px;padding:12px 0 14px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.toc b{display:block;font-family:var(--ui);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.toc .tl{display:flex;flex-wrap:wrap;gap:6px 18px}
.toc a{font-size:.92rem;text-decoration:none;border-bottom:1px solid var(--rule2);color:var(--ink2);line-height:1.5}
.toc a:hover{color:var(--cherry);border-bottom-color:var(--cherry)}
.planche h3{scroll-margin-top:70px}
.gal{margin:34px 0 0;border-top:1px solid var(--ink);padding-top:16px}
.gal h3{font-family:var(--display);font-weight:400;font-size:1.5rem;margin:0 0 4px}
.gal .gi{margin:0 0 16px;font-size:.92rem;color:var(--ink2);max-width:62ch}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 20px}
.gg figure{margin:0}
.gg img{width:100%;height:auto;border:1px solid var(--rule);background:var(--paper2);display:block;filter:var(--plate)}
.gg figcaption{font-family:var(--ui);font-size:.72rem;line-height:1.45;color:var(--ink2);padding:6px 0 0}
.side .pl{margin:0 0 18px}
.side .pl img{width:100%;height:auto;border:1px solid var(--rule);display:block;filter:var(--plate)}
.side .pl figcaption{font-family:var(--ui);font-size:.72rem;line-height:1.45;color:var(--ink2);padding:6px 0 0}
.fig{margin:26px 0 22px;border-top:1px solid var(--rule);padding-top:14px}
.fig h4{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 2px}
.fig .sub{font-size:.9rem;color:var(--ink2);margin:0 0 12px;max-width:62ch}
.fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig .ax{stroke:var(--rule);stroke-width:1}
.fig .gl{stroke:var(--rule2);stroke-width:1}
.fig text{font-family:var(--ui);font-size:11px;fill:var(--ink2)}
.fig text.v{fill:var(--ink);font-variant-numeric:tabular-nums}
.fig text.lb{fill:var(--ink)}
.fig .bar{stroke:var(--paper);stroke-width:2}
.fig .zone{fill:var(--c1);fill-opacity:.14;stroke:var(--c1);stroke-width:1.5}
.fig details{margin:10px 0 0;font-size:.88rem}
.fig summary{cursor:pointer;color:var(--cherry)}
.fig{--c1:#C0392B;--c2:#2E6FD0;--c3:#178D63;--c4:#A87400;--c5:#8E44AD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fig{--c1:#D9584C;--c2:#4288DC;--c3:#28A06D;--c4:#BA8B1A;--c5:#A273CC}}
:root[data-theme="dark"] .fig{--c1:#D9584C;--c2:#4288DC;--c3:#28A06D;--c4:#BA8B1A;--c5:#A273CC}
:root{--surface-page:var(--paper);--surface-raised:var(--paper2);--surface-sunken:var(--paper3);--line:var(--rule2);--line-strong:var(--rule);--ink-muted:var(--ink2);--ink-faint:var(--mute);--leaf-wash:color-mix(in srgb,var(--leaf) 16%, var(--paper));--page:1240px}
[hidden]{display:none!important}
.bar,.bar *,.pan,.pan *{box-sizing:border-box}
/* ── le menu ─────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:60;background:var(--surface-page);
     border-bottom:1px solid var(--line)}
.bar .in{max-width:var(--page);margin:0 auto;padding:0 24px;display:flex;
         align-items:center;gap:8px;min-height:60px}
/* A 320 points, la barre demandait 333 pixels pour 305 disponibles, et toutes les
   pages du site defilaient horizontalement de 42 pixels. Trois retraits rendent
   43 pixels sans rien coûter : le detail du calcul est dans _patch_barre320.py. */
@media (max-width:400px){
  .bar .in{padding:0 14px}
  .bar .mark{font-size:17px;margin-right:6px}
  .bar #jour-nuit{padding-left:0;padding-right:0}
}
.mark{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.012em;
      text-decoration:none;margin-right:12px;white-space:nowrap;
      display:inline-flex;align-items:center;min-height:44px}
.mark i{color:var(--leaf);font-style:italic}
.bar menu{display:flex;gap:2px;margin:0;padding:0;list-style:none;flex:1}
.bar menu button, .bar menu a.rub{
  font-family:var(--ui);font-size:14px;font-weight:500;color:var(--ink-muted);
  background:none;border:0;cursor:pointer;padding:0 13px;min-height:44px;
  display:inline-flex;align-items:center;gap:6px;border-radius:2px;
  text-decoration:none;transition:color .14s,background .14s}
.bar menu button:hover,.bar menu a.rub:hover{color:var(--ink);background:var(--surface-sunken)}
.bar menu button[aria-expanded="true"]{color:var(--leaf);background:var(--leaf-wash)}
.bar menu button .fl{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .16s}
.bar menu button[aria-expanded="true"] .fl{transform:rotate(-135deg) translateY(-2px)}
.bar .cherche{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);
  border-radius:2px;padding:0 10px;height:38px;background:var(--surface-page)}
.bar .cherche:focus-within{border-color:var(--leaf)}
.bar .cherche form{display:flex;align-items:center;gap:8px;margin:0}
.bar .cherche input{border:0;background:none;color:var(--ink);font-family:var(--ui);
  font-size:14px;width:150px;outline:none}
.bar .cherche svg{flex:none;opacity:.6}
#burger{display:none}

/* le panneau */
/* `top:100%` est ecrit et non deduit. Sans lui, le panneau prenait sa position
   statique ; la barre est devenue `display:flex; align-items:center` entre-temps, et
   cette position statique est alors CENTREE sur la barre : (81 - 443) / 2 = -181 px,
   soit un menu dont les premieres entrees sont au-dessus de l'ecran. Une position
   absolue qui compte sur sa position statique compte sur la mise en page de son
   parent, et celle d'un parent change. */
.pan{position:absolute;top:100%;left:0;right:0;background:var(--surface-raised);
     border-bottom:1px solid var(--line-strong);box-shadow:0 18px 40px rgba(0,0,0,.18);
     z-index:55}
/* `display:block` n'est pas une precaution, c'est la correction d'une collision. La
   classe `.in` designe aussi la rangee souple de la barre du haut, et le panneau est un
   enfant de cette barre : les deux selecteurs pesent 0,2,0, et `.bar .in` gagne par
   l'ordre. Sans cette ligne, la grille de colonnes du panneau se rétracte sur son
   contenu minimal et les quatre colonnes s'empilent en une seule, haute de deux ecrans.
   Mesure avant correction, a 1 920 px : conteneur 1 240 px, grille 317 px de large pour
   1 636 px de haut. */
.pan .in{display:block;max-width:var(--page);margin:0 auto;padding:30px 24px 34px;
         max-height:calc(100vh - 80px);overflow-y:auto}
.pan .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px 32px}
.pan h3{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.09em;
        text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px;
        padding-bottom:8px;border-bottom:1px solid var(--line)}
.pan ul{list-style:none;margin:0;padding:0}
.pan li a{display:block;padding:9px 10px 9px 0;text-decoration:none;min-height:44px}
.pan li a:hover .t{color:var(--leaf)}
.pan .t{font-family:var(--display);font-size:17px;font-weight:400;display:flex;
        align-items:baseline;gap:9px}
.pan .no{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);
         flex:none;min-width:2.2em}
.pan .d{display:block;font-family:var(--ui);font-size:13.5px;line-height:1.45;
        color:var(--ink-muted);margin-top:1px;padding-left:calc(2.2em + 9px)}
.pan .cols.plat .d{padding-left:0}
#voile{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:50}

/* telephone */
@media (max-width:900px){
  #burger{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);
    background:none;border:1px solid var(--line-strong);border-radius:2px;
    padding:0 14px;min-height:44px;cursor:pointer}
  .bar menu, .bar .cherche{display:none}
  .bar.ouvert menu{display:block;position:fixed;inset:60px 0 0;background:var(--surface-page);
    overflow-y:auto;padding:0 20px 60px;z-index:58}
  .bar.ouvert menu li{display:block}
  .bar.ouvert menu button,.bar.ouvert menu a.rub{width:100%;justify-content:space-between;
    font-size:17px;padding:0;min-height:56px;border-bottom:1px solid var(--line);
    border-radius:0;color:var(--ink)}
  .bar.ouvert .cherche{display:flex;margin:18px 0 6px;width:100%;height:46px}
  .bar.ouvert .cherche input{width:100%}
  .pan{position:static;box-shadow:none;border:0;background:none}
  .pan .in{padding:6px 0 18px}
  .pan .cols{grid-template-columns:1fr;gap:18px}
  #voile{display:none}
}
/* Les couleurs sont RELEVEES sur les pieces d'archive du site, pas choisies. Chacune
   porte son fichier et son nombre de pixels, et une teinte nouvelle ne s'ajoute qu'au
   meme prix. C'est ce qui separe une identite d'une palette d'interface.

   Le papier clair est celui de la planche 106 de Kohler, mesure #F0EEEF sur 14 126
   pixels de marge non imprimee, retenu a #F3F2ED apres un leger rechauffement pour
   sortir du gris neutre. Le vert est le feuillage reellement photographie : #505A39
   sur 24 801 pixels de kohler_1897, #3E5525 sur liberica, #355A29 sur canephora_baies,
   #516A46 sur java_gumitir, soit une teinte de 78 a 105 degres, retenue a #4C5A2E.
   Le rouge vient du photochrome de Mysore de 1909, #85281E sur 14 569 pixels.

   L'ancien vert d'accent, #35B074, etait de teinte 151. Cette teinte n'existe sur
   aucune photographie de cafeier du site. C'etait un vert d'interface.

   Le fond sombre cesse d'etre une absence : #0C110E est a 0,51 % de luminance et a la
   teinte 144, c'est le noir de l'accent d'interface. Il devient #191D13, a 1,13 % de
   luminance et a la teinte 84, le feuillage pousse au noir. Une couleur qu'on peut
   nommer. */
/* Un mot sur les selecteurs, parce que c'est la tout le probleme et qu'il a couté une
   passe entiere. Le gabarit du site declare ses jetons sombres sur
   `:root:not([data-theme="light"])`, qui pese 0,2,0 en specificite. Des jetons clairs
   poses sur `:root` nu pesent 0,1,0 : ils ne peuvent pas gagner, ou qu'ils soient dans
   la page, puisque la specificite passe avant l'ordre. C'est la vraie raison pour
   laquelle le theme clair n'etait joignable par personne, et une requete media n'y
   change rien : elle ne compte pas dans la specificite.
   Les quatre blocs qui suivent pesent donc tous 0,2,0, et c'est leur ordre qui tranche. */
:root{
  color-scheme:light;
  /* L'echelle de caractere, raison 1,26. Huit valeurs la ou quinze etaient mesurees,
     dont huit tenaient entre 11 et 14 px, un mouchoir ou l'oeil ne distingue rien.
     Elle est repetee ici parce que les pages de section ne traversent pas la coquille
     du site : une variable absente rend la declaration qui l'emploie invalide, et la
     regle est alors ignoree en silence. */
  --t0:13px; --t1:15px; --t2:17px; --t3:21px; --t4:26px; --t5:33px; --t6:42px;
  --t7:clamp(42px,5.4vw,64px);
  /* L'echelle d'espacement, pas de 6 px. Six valeurs la ou vingt-cinq etaient
     mesurees sur la seule page d'accueil. */
  --e1:6px; --e2:12px; --e3:24px; --e4:48px; --e5:96px; --e6:144px;
  --display:"Fraunces","Spectral",Georgia,serif;
  --text:"Spectral",Georgia,"Times New Roman",serif;
  --sc:"Spectral SC","Spectral",Georgia,serif;
  --ui:"Spectral","Spectral SC",Georgia,serif;
  --sans:"Spectral",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
}
/* 1. Le clair, qui est le defaut. */
:root:not([data-theme="dark"]){
  color-scheme:light;
  --papier:#F3F2ED; --papier-haut:#FBFAF6; --papier-creux:#E9E7DD; --carton:#E9E7DD;
  --encre:#1C1F15; --encre-mi:#4B5140; --encre-pale:#676D5C;
  --filet:#B4B0A0; --filet-pale:#DAD7CB;
  --e-rubrique:#9A2A20; --e-laurier:#4C5A2E; --e-ocre:#7A6218;
  --e-outremer:#1F4E8C; --e-prune:#6B2F63;
  /* Les anciens noms restent, pointes sur les neufs : 437 pages et une quinzaine de
     modules les emploient, et les renommer partout d'un coup serait une seconde
     occasion de casser quelque chose sans le voir. */
  --paper:var(--papier); --paper2:var(--papier-haut); --paper3:var(--papier-creux);
  --ink:var(--encre); --ink2:var(--encre-mi); --mute:var(--encre-pale);
  --rule:var(--filet); --rule2:var(--filet-pale);
  --cherry:var(--e-rubrique); --leaf:var(--e-laurier); --gold:var(--e-ocre);
  --stamp:var(--e-laurier);
  --surface-page:var(--papier); --surface-raised:var(--papier-haut);
  --surface-sunken:var(--papier-creux); --line:var(--filet); --line-strong:var(--filet);
  --ink-muted:var(--encre-mi); --ink-faint:var(--encre-pale);
  --mix:14%; --plate:contrast(1.02) saturate(.88);
}
/* 2. Le sombre par preference systeme. */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){
  color-scheme:dark;
  --papier:#191D13; --papier-haut:#20241A; --papier-creux:#272C1F; --carton:#E9E7DD;
  --encre:#EDEAE0; --encre-mi:#ADB39B; --encre-pale:#8D937C;
  --filet:#4B5340; --filet-pale:#2E3524;
  --e-rubrique:#E07A6F; --e-laurier:#9FB566; --e-ocre:#C9A247;
  --e-outremer:#8FB2E0; --e-prune:#CC93C4;
  --paper:var(--papier); --paper2:var(--papier-haut); --paper3:var(--papier-creux);
  --ink:var(--encre); --ink2:var(--encre-mi); --mute:var(--encre-pale);
  --rule:var(--filet); --rule2:var(--filet-pale);
  --cherry:var(--e-rubrique); --leaf:var(--e-laurier); --gold:var(--e-ocre);
  --stamp:var(--e-laurier);
  --surface-page:var(--papier); --surface-raised:var(--papier-haut);
  --surface-sunken:var(--papier-creux); --line:var(--filet); --line-strong:var(--filet);
  --ink-muted:var(--encre-mi); --ink-faint:var(--encre-pale);
  --mix:30%; --plate:contrast(1.02) saturate(.82) brightness(.9);
 }
}
/* 3. Le sombre choisi explicitement, qui doit battre le clair par defaut. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --papier:#191D13; --papier-haut:#20241A; --papier-creux:#272C1F; --carton:#E9E7DD;
  --encre:#EDEAE0; --encre-mi:#ADB39B; --encre-pale:#8D937C;
  --filet:#4B5340; --filet-pale:#2E3524;
  --e-rubrique:#E07A6F; --e-laurier:#9FB566; --e-ocre:#C9A247;
  --e-outremer:#8FB2E0; --e-prune:#CC93C4;
  --paper:var(--papier); --paper2:var(--papier-haut); --paper3:var(--papier-creux);
  --ink:var(--encre); --ink2:var(--encre-mi); --mute:var(--encre-pale);
  --rule:var(--filet); --rule2:var(--filet-pale);
  --cherry:var(--e-rubrique); --leaf:var(--e-laurier); --gold:var(--e-ocre);
  --stamp:var(--e-laurier);
  --surface-page:var(--papier); --surface-raised:var(--papier-haut);
  --surface-sunken:var(--papier-creux); --line:var(--filet); --line-strong:var(--filet);
  --ink-muted:var(--encre-mi); --ink-faint:var(--encre-pale);
  --mix:30%; --plate:contrast(1.02) saturate(.82) brightness(.9);
}
/* La genealogie garde ses onze couleurs : elles portent une information. */
:root{--g-sp:#4C5A52;--g-eth:#2C7A50;--g-yem:#8A6C18;--g-typ:#9A5A22;--g-bou:#A8403A;
      --g-bt:#94445E;--g-tim:#584796;--g-sar:#7A3D86;--g-intro:#3B5A80;--g-f1:#1E6F68;--g-rob:#7A5730}
:root:not([data-theme="light"]){--g-sp:#9FB0A6;--g-eth:#4BAF7A;--g-yem:#C9A23F;
      --g-typ:#D98A4A;--g-bou:#DE6257;--g-bt:#C8718C;--g-tim:#8B7BD1;--g-sar:#B47BC0;
      --g-intro:#6699CC;--g-f1:#3FA79E;--g-rob:#B99268}

body{font-family:var(--text);font-size:17px;line-height:1.7}
h1,h2,h3,h4,.planche h2,.essai h3{font-family:var(--display)}

/* Le chapeau se compose comme du texte. C'etait le defaut principal. */
.planche .lead, .ph .lead, p.lead{
  font-family:var(--text)!important;font-size:19px!important;line-height:1.62!important;
  font-weight:300!important;text-transform:none!important;letter-spacing:0!important;
  color:var(--ink2)!important;max-width:58ch!important;margin:18px 0 0!important}

/* Une seule colonne de lecture ; figures et tableaux s'echappent.

   Pas de grille ici : une colonne centree, et les blocs larges sortent de la
   mesure par une marge negative. C'est la technique la plus simple, et sur une
   planche de trente mille pixels de haut elle evite a la page une grille de cent
   vingt rangees dont le rendu devient instable. */
.essai{display:block!important;margin-top:30px!important}
/* L'unite ch se calcule sur la police de l'element. Sans cette declaration, .txt
   heritait de Fraunces et 68ch valait 1 266 px : la mesure retombait a 107
   caracteres par ligne, pire qu'avant. La police de lecture d'abord, la mesure
   ensuite, et un plafond en pixels par securite. */
.essai .txt{font-family:var(--text);max-width:min(68ch,620px);margin:0 auto}
.essai .side{display:none}
.essai .txt p, .essai .txt li, .essai .txt dd, .essai .txt dt{
  font-family:var(--text)!important}
.essai .txt p{font-size:17px!important;line-height:1.7!important;max-width:none;margin:0 0 18px}
.essai .txt > figure, .essai .txt > .tw, .essai .txt > table,
.essai .txt > .balade, .essai .txt > .fig, .essai .txt > .gg, .essai .txt > .gg2,
.essai .txt > ul.frise{
  width:min(1160px,92vw);max-width:none!important;margin-left:50%;
  transform:translateX(-50%)}
/* La suite d'une entree de frise n'a pas de date, donc pas de `<b>` : son `<span>`
   tombait dans la case de la date, large de 92 px, et s'y pliait a un mot et demi par
   ligne. Trois cent neuf lignes dans ce cas sur trente pages. `:only-child` ne peut
   designer que ce cas : une suite occupe la largeur entiere. */
ul.frise li > span:only-child{grid-column:1 / -1}
.essai h3{font-size:30px;margin:52px 0 0;scroll-margin-top:84px;text-wrap:balance}
.essai h3 .no{display:block;font-family:var(--mono);font-size:13px;color:var(--leaf);
  letter-spacing:.05em;margin-bottom:7px;font-weight:400}
.essai h3 + p{margin-top:16px}

/* Les fiches : de l'air, et un champ par ligne.

   Une entree de liste etait un titre suivi d'un pave de cent cinquante mots ou
   trois champs se suivaient sans respiration. Chaque champ prend sa ligne, son
   nom passe en petites capitales, et les entrees sont separees par un filet. */
.essai .txt dl{margin:26px 0 30px;border-top:1px solid var(--rule2)}
.essai .txt dt{font-family:var(--display)!important;font-size:20px;font-weight:400;
  color:var(--ink);margin:0;padding:22px 0 0}
.essai .txt dd{margin:8px 0 0;padding:0 0 22px;border-bottom:1px solid var(--rule2)}
.essai .txt dd:last-of-type{border-bottom:0}
.ch{display:block;margin:0 0 9px;line-height:1.66}
.ch:last-child{margin-bottom:0}
.ch b{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--leaf);margin-bottom:2px}
.ch .v{display:block;font-family:var(--text);font-size:16.5px;color:var(--ink2)}
.ch b + .v{color:var(--ink)}
.ch.suite{margin-top:-3px}
.ch.suite .v{color:var(--ink)}
p.fiche{margin:0 0 22px}

/* La source, rendue a la typographie du livre.
   C'etait l'element le plus caracteristique du site, rendu de la facon la plus anonyme
   possible : du monospace gris derriere une etiquette SOURCE en capitales, obtenue a
   coups de cinq !important, dans la couleur la plus basse de la page. La bibliographie
   a cinq siecles de conventions et aucune n'etait employee.
   Un petit carre rubrique en tete de ligne remplace le mot « Source » : a 2 070
   occurrences, repeter le mot ne renseigne personne et coute une ligne a chaque fois.
   Le retrait negatif de premiere ligne aligne les suivantes sur le texte, comme une
   entree de bibliographie. */
.src{display:block;font-family:var(--text)!important;font-size:15px!important;
  line-height:1.5!important;letter-spacing:0!important;color:var(--ink2)!important;
  border:0;padding:0 0 0 1.15em;text-indent:-1.15em;margin:-2px 0 24px!important}
.src::before{content:""!important;display:inline-block;width:.46em;height:.46em;
  margin-right:.6em;vertical-align:.04em;background:var(--cherry)}
.src i,.src em,.src cite{font-style:italic;font-weight:400}
/* Une adresse n'a ni espace ni trait d'union : par defaut elle ne se coupe nulle
   part et pousse la page. Mesure sur falsification-09 a 390 points : un span.src de
   401 px de contenu dans une boite de 367, et toute la page qui defile de cote. */
.src,figcaption,.sources,.registre li{overflow-wrap:anywhere}

/* Figures et tableaux. */
figure.pl{margin:36px 0;background:var(--paper2);border:1px solid var(--rule2);
  border-radius:6px;overflow:hidden}
figure.pl img{border:0!important;width:100%;display:block}
figure.pl figcaption{font-family:var(--ui);font-size:13.5px;line-height:1.5;
  color:var(--ink2);padding:14px 18px}
.tw{border:1px solid var(--rule2);border-radius:6px;margin:32px 0}
table.tbl th{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);background:var(--paper3)}
table.tbl td{font-family:var(--text);font-size:15px}
table.tbl td.n,table.tbl td:last-child{font-variant-numeric:tabular-nums}

/* A lire ensuite, en fin de section. */
.ensuite{margin:28px 0 8px;border-top:1px solid var(--rule2);padding-top:14px}
.ensuite .q{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);display:block;margin-bottom:8px}
.ensuite a{display:block;text-decoration:none;padding:9px 0;min-height:44px;
  border-bottom:1px solid var(--rule2)}
.ensuite a:last-child{border-bottom:0}
.ensuite a:hover .t{color:var(--leaf)}
.ensuite .ou{font-family:var(--mono);font-size:11px;color:var(--leaf);letter-spacing:.05em;
  text-transform:uppercase;display:block}
.ensuite .t{font-family:var(--display);font-size:17.5px;display:block;margin-top:1px}
.ensuite .pq{font-family:var(--ui);font-size:13.5px;line-height:1.45;color:var(--ink2);
  display:block;margin-top:2px}

/* PLUS UNE SEULE CAPITALE FABRIQUEE.
   La regle `.fam` nue vient d'un bouton de filtre et arrivait sur le bloc d'index par
   collision de nom de classe : le `text-transform` etant herite, 97 noms de maisons et
   leurs villes passaient en capitales sur la page ou balayer est tout l'usage. */
.fam,.ui,.tag,.ann b,.stick nav a,.start a,.counts span,.planche .lead,
.search li small,.tools button,.btn,.legende,figcaption b,.fam h3,.famille b{
  text-transform:none!important;letter-spacing:normal!important}
.fam{cursor:auto;font:inherit;color:inherit}
/* Ceux qui servent de libelle prennent la police qui DESSINE ses petites capitales,
   au lieu de faire etirer des bas de casse par le navigateur. */
.ui,.tag,.ann b,.counts span,.legende,figcaption b,.fam h3,.famille b{
  font-family:var(--sc)!important;font-weight:400!important;
  letter-spacing:.02em!important}
/* Le chapeau d'une planche est une phrase, pas une etiquette : il n'a jamais rien eu a
   faire en capitales. */
.planche .lead{font-family:var(--text)!important}

/* GESTE 7. LA CARTE CESSE D'ETRE UNE BOITE. */
.porte,.outil,.jour,.paginat a,.tw,.ensuite a,.balade a,.essai-note,.ombre,.suggest a{
  background:none!important;border-radius:0!important;box-shadow:none!important}
.tw,.ensuite a,.balade a,.ombre{border:0!important}
figure.pl{background:var(--carton)!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;overflow:visible!important}
figure.pl figcaption{padding:var(--e2) 0 0!important;font-family:var(--text)!important;
  font-size:var(--t1)!important;color:var(--encre-mi)!important;max-width:56ch}
button,input,select{border-radius:2px}
a,button,summary{transition:color .12s linear,border-color .12s linear,
  text-decoration-color .12s linear}

/* Le filet anglais : un gras, un blanc, un maigre. Deux degrades poses en fond, ce qui
   evite d'ajouter un element vide dans le HTML pour dessiner un trait. */
.sect > .tete,.planche .ph{border-bottom:0;padding-bottom:14px;
  background-image:linear-gradient(var(--encre),var(--encre)),
                   linear-gradient(var(--filet),var(--filet));
  background-size:100% 2px,100% 1px;
  background-position:0 100%,0 calc(100% - 4px);
  background-repeat:no-repeat}

/* Partout ailleurs, c'est le blanc qui separe. */
.tdm li,.biblio li,.etapes li{border-top:0}
.tdm li + li,.biblio li + li,.etapes li + li{margin-top:var(--e2)}

/* LE LIEN REPREND UNE FORME, et elle porte une information : trait plein pour ce qui
   reste dans l'ouvrage, pointille pour ce qui en sort. */
.txt p a,.txt li a,.txt dd a,.essai p a,.ph a{color:inherit;
  text-decoration-line:underline;text-decoration-color:var(--e-outremer);
  text-decoration-thickness:1px;text-underline-offset:.16em;
  text-decoration-skip-ink:auto}
.txt p a:hover,.txt li a:hover,.essai p a:hover{text-decoration-thickness:2px;
  color:var(--e-outremer)}
.txt a[href^="http"]{text-decoration-style:dotted;text-decoration-thickness:1.5px}
/* MAIS PAS DANS LES BLOCS OU TOUT EST LIEN.
   Le geste 7 souligne un lien DANS UN TEXTE, pour qu'il se detache de ce qui n'est pas
   cliquable. Les sommaires, la pagination, les renvois et les index vivent eux aussi
   dans `.txt`, et la tout est lien : le trait ne distingue plus rien, il barre
   seulement chacune des lignes de chaque entree. Mesure : 21 entrees soulignees sur le
   seul sommaire de la planche de torrefaction, present au pied des 289 pages de
   section.
   Meme specificite que la regle ci-dessus, et juste apres : l'exclusion gagne par
   l'ordre, pas par une surenchere de poids, et cela se relit. */
.txt .tdm a,.txt .paginat a,.txt .ensuite a,.txt .balade a,.txt .suite a,
.txt .fam a,.txt .tsom a,.txt .frise a,.txt .tcarte a,.txt .alpha a,
.essai .tdm a,.essai .paginat a,.essai .ensuite a,.essai .balade a,
.essai .fam a,.essai .frise a{text-decoration-line:none}
.txt .tdm a:hover,.essai .tdm a:hover{text-decoration-line:none}
/* Et la meme exclusion sans ancetre, pour les pages ou ces blocs vivent hors de
   `.txt` : les tribunes, par exemple, dont la pagination etait soulignee alors
   que ses deux entrees sont des liens de bloc. Specificite plus faible, donc
   inoperante la ou la regle du geste 7 s'applique, et suffisante ailleurs. */
.paginat a,.tdm a,.ensuite a,.balade a,.suite a,.tsom a,
.tcarte h3 a,.frise .plus > summary{text-decoration-line:none}
:focus-visible{outline:2px solid var(--e-outremer);outline-offset:2px}

/* GESTE 8. LES INDEX REPRENNENT LA FORME D'UN INDEX.
   Le selecteur vise les blocs qui portent un paragraphe de presentation, c'est-a-dire
   les index de constructeurs et de process, et jamais la grille de l'accueil, dont les
   plaques doivent rester une grille d'images. */
/* Une GRILLE, et non des colonnes CSS. Les colonnes coupent un flux continu en
   tranches : rien ne s'aligne d'une colonne a l'autre, et surtout rien n'est borne,
   si bien qu'une glose en italique d'un seul tenant traversait le filet et entrait
   dans la colonne voisine. Une grille pose des rangees, donc les entrees se repondent,
   et ses pistes en `minmax(0, …)` ne peuvent pas deborder. Les deux defauts tombent
   avec la meme regle. */
.fam:has(> .quoi) ul,.fam:has(> p.quoi) ul{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:var(--e3) var(--e4);column-count:auto;column-rule:0;
  background:none;border:0;border-radius:0}
.fam:has(> .quoi) li{background:none;padding:0;display:block;min-width:0}

/* LA FORME DES PORTES DE L'ACCUEIL. Un filet epais en tete, transparent au repos et
   rubrique au survol ; pas de boite, pas de coin arrondi, pas de fond. C'est un
   bouton typographique, et la zone cliquable couvre toute l'entree, glose comprise. */
.fam:has(> .quoi) a{display:block;padding:var(--e2) 0 var(--e2);min-height:44px;
  background-image:none;border:0;border-radius:0;
  border-top:3px solid var(--filet-pale);
  transition:border-top-color .15s,color .15s}
.fam:has(> .quoi) a:hover,.fam:has(> .quoi) a:focus-visible{
  border-top-color:var(--e-rubrique)}
/* Dans un index, CHAQUE entree est un lien : le soulignement ne distingue plus rien
   et ajoute un trait sous chacune des trois lignes d'un titre. On le retire ici, et
   ici seulement : c'est le filet de tete qui dit que l'entree se clique. */
.fam:has(> .quoi) a,.fam:has(> .quoi) a .t,.fam:has(> .quoi) a .ou{
  text-decoration:none;border-bottom:0;box-shadow:none}
.fam:has(> .quoi) .t{font-family:var(--display);
  font-variation-settings:"opsz" 24,"SOFT" 10,"WONK" 0;
  font-weight:400;font-size:var(--t3);line-height:1.18;
  text-transform:none;letter-spacing:normal;display:block;
  text-wrap:balance;overflow-wrap:break-word}
.fam:has(> .quoi) .ou{font-family:var(--text);font-style:italic;font-size:var(--t1);
  color:var(--encre-mi);display:block;margin-top:4px;overflow-wrap:break-word}
.fam:has(> .quoi) a:hover .t{color:var(--e-rubrique)}
.fam > .quoi{font-family:var(--text);font-size:var(--t2);line-height:1.6;
  color:var(--encre-mi);max-width:64ch;margin:0 0 var(--e3)}
/* La grille se replie toute seule : `auto-fit` avec un minimum de 230 px donne
   quatre colonnes a 1 200 px, trois a 900, deux a 640 et une en dessous, sans qu'on
   ait a ecrire un seul point de rupture. */

/* L'ECHELLE TYPOGRAPHIQUE DU DOSSIER.
   Mesure avant : h1 de page de section a 30 px, axes variables inactifs. Le titre, les
   intertitres et le texte tenaient entre 17 et 30 px, c'est-a-dire dans un mouchoir ou
   l'oeil ne hierarchise rien. Apres : le titre monte jusqu'a 64 px selon la largeur, et
   les axes optiques de Fraunces sont enfin demandes.
   L'interligne est impose a 1,12 sur tous les titres : ils heritaient du 1,7 du corps
   de texte, si bien qu'un h2 de 30 px etait interligne a 51 px et se lisait comme un
   paragraphe en plus gros. */
.wrap h1,.planche h1,.sect-tete h1,.pfiche h1{
  font-family:var(--display)!important;font-weight:300!important;
  font-size:var(--t7)!important;
  font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1!important;
  letter-spacing:-.024em!important;line-height:1.02!important;text-wrap:balance}
.planche .ph h2,.essai .txt h2{
  font-family:var(--display)!important;font-weight:400!important;
  font-size:var(--t6)!important;
  font-variation-settings:"opsz" 72,"SOFT" 22,"WONK" 1!important;
  letter-spacing:-.016em!important;line-height:1.08!important;text-wrap:balance}
.essai .txt h3,.pfiche h4{
  font-family:var(--display)!important;font-weight:500!important;
  font-size:var(--t4)!important;
  font-variation-settings:"opsz" 36,"SOFT" 12,"WONK" 0!important;
  letter-spacing:-.008em!important;line-height:1.16!important}
h1,h2,h3,h4{text-wrap:balance}
/* Le numero de chapitre, quand il est dans le titre lui-meme. Aucune regle ne le
   touchait : « 01Le comptable de Rhode Island », au corps du titre et sans espace.
   Il reprend ici son role de sommaire, un reperage en petit et en retrait. */
h2 > .no,h3 > .no{display:inline-block;margin-right:.55em;
  font-family:var(--ui)!important;font-weight:600!important;
  font-size:.46em!important;letter-spacing:.14em;
  color:var(--cherry)!important;vertical-align:.42em;
  font-variation-settings:normal!important}
/* Le chapeau, qui doit se lire comme une entree et non comme un paragraphe de plus. */
.planche .ph .lead,.pfiche .lead{font-size:var(--t3)!important;line-height:1.5!important;
  font-weight:300!important;color:var(--encre-mi)!important;max-width:58ch}
/* Le chapeau d'une FICHE, et lui seul. Sur une planche le chapeau est dans le bloc de
   texte et prend sa mesure ; sur une fiche il en est le frere et prenait tout le
   cadre, si bien que le titre commencait 331 px avant sa premiere ligne de texte.
   `.planche > .ph` ne peut designer que le second cas. Mesure recopiee de `.txt`. */
.planche > .ph{max-width:min(68ch,620px);margin-inline:auto}
/* Le sommaire d'une planche ne doit plus ecraser le titre de l'article. Mesure du
   dossier : un h1 d'article a 44 px sous un libelle de sommaire a 58 px. Le plus gros
   mot de la page etait un libelle d'appareil. */
.tdm h2{font-family:var(--sc)!important;font-size:var(--t3)!important;
  font-weight:400!important;font-variation-settings:normal!important;
  letter-spacing:.02em!important;color:var(--encre-mi)!important}

/* Les petites capitales, en dernier pour gagner a specificite egale.
   Cinquante-cinq regles posaient `text-transform:uppercase` sur quatorze corps et onze
   approches differentes : deux cent vingt elements en capitales sur la seule page des
   constructeurs. Pendant ce temps Spectral SC etait telechargee sur 436 pages et
   n'etait appelee nulle part.
   Une capitale fabriquee par le navigateur est une lettre etiree dans une chasse qui
   n'est pas la sienne. Une vraie petite capitale est un dessin : meme graisse apparente
   que le bas de casse, meme gris typographique, et elle se lit a 15 px la ou une
   capitale fabriquee demandait d'etre reduite a 11,5 px pour ne pas crier. */
.ch b,table.tbl th,.ensuite .q,.ensuite .ou,.balade .ou,.planche .num,
.pan h3,.pied h4,.fam h3,.ombre b,.paginat .q,.ident .q,.sect-tete .no{
  font-family:var(--sc)!important;font-weight:400!important;font-size:15px!important;
  letter-spacing:.02em!important;text-transform:none!important}
.planche .num,.ensuite .ou,.balade .ou{color:var(--cherry)!important}
.ch b{color:var(--ink)!important;margin-bottom:1px}
table.tbl th{color:var(--ink)!important}

/* Continuer la balade, en fin de planche. */
.balade{margin:76px 0 0;border-top:1px solid var(--rule);padding-top:28px}
.balade h3{font-size:26px!important;margin:0 0 6px!important}
.balade .intro{font-family:var(--ui);font-size:14.5px;color:var(--ink2);margin:0 0 22px;max-width:70ch}
.balade .grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.balade a{display:block;text-decoration:none;border:1px solid var(--rule2);border-radius:6px;
  padding:17px 18px;transition:border-color .16s,background .16s}
.balade a:hover{border-color:var(--leaf);background:var(--paper3)}
.balade a:hover .t{color:var(--leaf)}
.balade .ou{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.05em;
  text-transform:uppercase;display:block;margin-bottom:5px}
.balade .t{font-family:var(--display);font-size:18px;display:block}
.balade .pq{font-family:var(--ui);font-size:13px;line-height:1.45;color:var(--ink2);
  display:block;margin-top:5px}

/* Le titre de planche. */
.planche > .head, .planche .ph{border-bottom-color:var(--rule)!important}
.planche .num{font-family:var(--ui)!important;font-size:12px!important;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--leaf)!important}
.planche h2{font-size:clamp(38px,5.4vw,58px)!important;font-weight:300!important;
  letter-spacing:-.022em;line-height:1.02}
.planche > .head{display:block!important;border-bottom:0!important;padding-bottom:0!important}

@media (max-width:900px){
  .essai .txt{display:block}
  .essai h3{font-size:25px;margin-top:42px}
  .planche h2{font-size:34px!important}
}
.essai .txt ul.cat{list-style:none;margin:20px 0 24px;padding:0;
  border-top:1px solid var(--rule2)}
.essai .txt ul.cat li{border-bottom:1px solid var(--rule2);padding:11px 0;
  display:block;line-height:1.62}
.essai .txt ul.cat li b{display:block;font-family:var(--ui);font-size:12px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--leaf);
  margin-bottom:2px}
.essai .txt ul.cat li span{font-family:var(--text);font-size:16.5px;color:var(--ink)}
.essai .txt ul.frise{list-style:none;margin:20px 0 24px;padding:0 0 0 2px;
  border-left:2px solid var(--rule2)}
.essai .txt ul.frise li{display:grid;grid-template-columns:7.5rem 1fr;gap:16px;
  padding:9px 0 9px 16px;align-items:baseline;line-height:1.6}
@media (max-width:640px){.essai .txt ul.frise li{grid-template-columns:1fr;gap:2px}}
.essai .txt ul.frise li b{font-family:var(--mono);font-size:13px;color:var(--leaf);
  font-weight:400;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.essai .txt ul.frise li span{font-family:var(--text);font-size:16.5px;color:var(--ink)}
.calc{border:1px solid var(--ink);padding:16px 18px;margin:10px 0 18px;background:var(--paper2)}
.calc .row{display:flex;flex-wrap:wrap;gap:12px 22px;margin:0 0 12px;font-size:.9rem;align-items:center}
.calc label{display:inline-flex;align-items:center;gap:6px}.calc input[type=number]{width:68px;font:inherit;padding:3px 6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.calc input[type=range]{width:160px;accent-color:var(--cherry)}
.calc select{font:inherit;padding:4px 8px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);max-width:100%}
.calc #c-chart{width:100%;max-width:440px;height:auto;display:block;margin:8px 0}
.calc .cnote,.calc .cdesc{font-size:.88rem;color:var(--ink2);margin:0 0 10px;line-height:1.5}.calc .cdesc b{color:var(--ink)}
.calc .zone{fill:var(--cherry);fill-opacity:.12;stroke:var(--cherry);stroke-width:.8}.calc .zone2{fill:var(--ink);fill-opacity:.08;stroke:var(--ink2);stroke-width:.8;stroke-dasharray:3 3}
.calc .ax{stroke:var(--ink2);stroke-width:.8}.calc text{font-family:var(--ui);font-size:8px;fill:var(--ink2)}.calc .pt{fill:var(--cherry);stroke:var(--paper);stroke-width:1.5}.calc .ref{fill:var(--ink2)}.calc .tap{fill:none;stroke:var(--ink2);stroke-width:1}
.calc .warn{color:var(--cherry);font-weight:600}
.calc .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 18px}.calc .grid2 > *{min-width:0}
.calc details{margin:6px 0 10px;font-size:.88rem}.calc summary{cursor:pointer;color:var(--cherry)}
.motgl{border-bottom:1px dotted var(--mute);cursor:help;text-decoration:none;color:inherit}
.motgl:hover{border-bottom-color:var(--cherry)}
#glpop{position:absolute;z-index:200;max-width:min(92vw,360px);background:var(--paper);
  border:1px solid var(--ink2);box-shadow:0 10px 30px rgba(0,0,0,.35);padding:13px 15px;
  font-family:var(--text);font-size:.88rem;line-height:1.5;display:none}
#glpop.on{display:block}
#glpop p{margin:0}
#glpop b{display:block;font-family:var(--ui);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cherry);margin-bottom:6px}
#glpop a{font-family:var(--ui);font-size:.72rem;color:var(--ink2);display:inline-block;
  margin-top:9px;border-bottom:1px solid var(--rule)}
.suite{display:flex;gap:16px;justify-content:space-between;max-width:100%;margin:56px 0 0;padding-top:24px;border-top:1px solid var(--rule)}.suite a{flex:1 1 0;min-width:0;text-decoration:none;color:inherit;padding:14px 16px;border:1px solid var(--rule);transition:border-color .15s}.suite a:hover{border-color:var(--ink2)}.suite a.apres{text-align:right}.suite .q{display:block;font-family:var(--ui);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}.suite .t{font-family:var(--display);font-size:1.12rem;line-height:1.25}@media (max-width:620px){.suite{flex-direction:column}.suite a.apres{text-align:left}}
/* Mesure faite en direct a 1 440 px sur manieres-05 : `.essai` occupe 1 240 px, le
   texte 620, centre. Il reste donc 310 px de gouttiere de chaque cote. Une figure
   flottante ordinaire les ignorerait et viendrait rogner la mesure de moitie, ce qui
   est exactement le contraire de ce qu'on cherche.
   Un flottant a marge negative a ete essaye d'abord, et mesure en direct : au lieu de
   se ranger dans la gouttiere il debordait de 106 px sur la ligne. Les navigateurs ne
   placent pas la boite de marge d'un flottant a marge negative la ou le calcul le dit.
   Le positionnement absolu, lui, est sans ambiguite : la figure sort du flux, donc elle
   ne peut plus rogner la mesure, et sans `top` elle reste exactement a la hauteur ou le
   flux l'aurait posee. La ligne garde ses 620 px, et le lecteur voit une note de marge
   comme dans un livre de botanique. */
@media (min-width:1300px){
  .essai .txt{position:relative}
  /* Scope au conteneur qui porte `position:relative` juste au-dessus. Sans lui,
     la note de marge se calait sur un ancetre lointain : sur un recit a 1 600 px
     elle sortait de 302 px et faisait defiler la page. Un element en position
     absolue ne peut pas savoir qu'il deborde ; c'est au selecteur de le tenir. */
  /* `transform:none` annule le recentrage de plein cadre de da.py, qui s'appliquait
     encore faute d'etre declare ici : la figure partait de la moitie de sa largeur
     vers la gauche, 136 px sur 272, et se posait sur le texte. Une regle qui sort un
     element du flux doit annuler ce qui le deplacait tant qu'il y etait. */
  .essai .txt > figure.pl.gal.cote{position:absolute;right:-302px;width:272px;
    margin:4px 0 0;transform:none}
}
figure.pl.gal{max-width:640px}
figure.pl.gal img{background:var(--carton,#E9E7DD);border-radius:2px}
figure.pl.gal figcaption .src{display:block;margin-top:2px;color:var(--ink-faint)}
/* Le filet anglais en tete du colophon : un gras, un blanc, un maigre. Deux degrades
   poses en fond, ce qui evite d'ajouter un element vide juste pour dessiner un trait. */
.colophon{margin:var(--e5,96px) auto var(--e4,48px);max-width:64ch;
  padding-top:var(--e3,24px);
  background-image:linear-gradient(var(--encre),var(--encre)),
                   linear-gradient(var(--filet),var(--filet));
  background-size:100% 2px,100% 1px;background-position:0 0,0 4px;
  background-repeat:no-repeat}
.colophon p{font-family:var(--text);font-size:var(--t1,15px);line-height:1.6;
  color:var(--encre-mi);margin:0 0 var(--e1,6px)}
.colophon .c1{font-family:var(--sc);letter-spacing:.02em;color:var(--encre)}
.colophon .cn{font-family:var(--display);font-variation-settings:"opsz" 40,"SOFT" 20;
  color:var(--e-rubrique)}
.colophon .c3{color:var(--encre-pale);font-size:var(--t0,13px);max-width:52ch;
  margin-top:var(--e2,12px)}
.colophon i{font-style:italic}
#jour-nuit{font-family:var(--sc);font-size:var(--t1,15px);background:none;
  border:1px solid var(--filet);border-radius:2px;color:var(--encre-mi);
  min-height:38px;padding:0 12px;cursor:pointer;margin-left:var(--e1,6px)}
#jour-nuit:hover{color:var(--encre);border-color:var(--e-rubrique)}
/* La boite qui defile. `max-width:100%` la borne a la mesure, `overflow-x:auto` lui
   donne sa barre quand le tableau est plus large, et rien sinon. Le filet a droite
   n'apparait que dans ce cas : c'est le seul signe qui dit au lecteur qu'il reste
   quelque chose a voir, et une barre de defilement ne se voit pas sur telephone. */
/* Deux noms pour la meme boite : `.tw` vient de correctifs.py, qui enveloppe les
   tableaux de classe `tbl` depuis longtemps, et `.tscroll` de ce module, qui
   prend tous les autres. Les fusionner en un seul nom demanderait de toucher aux
   deux modules et a leur ordre ; leur donner la meme regle coute une ligne et
   garantit le meme comportement, ce qui est ce que le lecteur voit. */
.tscroll,.tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll > table,.tw > table{margin:0}
/* LA MOITIE MANQUANTE. Le tableau porte `width:100%` : il se reduit donc toujours a
   la largeur de sa boite et ne deborde jamais, si bien que la boite defilante ne
   defile jamais. Mesure a 390 points : 476 cellules de moins de 140 px contenant
   plus de 70 caracteres sur la seule page de provenance. On reserve 11 rem par
   colonne, soit 176 px, de quoi loger une date ou un membre de phrase ; le nombre
   de colonnes est compte a la construction et ecrit sur l'enveloppe. Au-dessus de
   760 px, rien ne change. */
@media (max-width:760px){
  .tscroll > table,.tw > table{width:auto;min-width:calc(var(--cols,3) * 11rem)}
}
@media (max-width:700px){
  .tscroll,.tw{background:linear-gradient(to left,var(--filet-pale,#d8d5c8),transparent 14px)
           right center / 2px 100% no-repeat}
}
/* UN SEUL BLOC DE TRAVAIL, 956 px, centre dans le cadre de 1 240.
   Avant : colonne de texte a 47 % du cadre, et blocs larges centres SUR ELLE, donc
   plus larges qu'elle des deux cotes, donc dans la gouttiere ou logeaient les notes
   de marge. Mesure : bloc large 373..1533, note 1272..1544, croisement de 261 px.
   Une affiche emaillee s'est retrouvee au milieu d'un tableau. */
/* UNE PLANCHE NE MANGE PAS UN ECRAN. Une piece en hauteur mise a la largeur du bloc
   ferait 1 400 px de haut : on ne la voit plus, on la traverse. La largeur reste le
   plafond, la hauteur en devient un second, et l'image se centre entre les deux.
   Celle qui veut le detail a la loupe pour cela. */
.essai .txt > figure.pl img{width:auto;max-width:100%;max-height:74vh;
  margin-left:auto;margin-right:auto;display:block}
@media (min-width:1240px){
  .essai .txt{max-width:956px!important;margin-left:auto!important;
    margin-right:auto!important;position:relative}
  /* La mesure de lecture ne bouge pas : 68 signes, c'est elle qui rend le texte
     lisible. Elle est centree dans le bloc, les planches debordent de part et
     d'autre. Chaque selecteur pese autant que celui de da.py qu'il corrige et passe
     apres lui ; c'est pour cela qu'ils sont enumeres au lieu d'un `> *`. */
  .essai .txt > p,.essai .txt > ul,.essai .txt > ol,.essai .txt > dl,
  .essai .txt > h2,.essai .txt > h3,.essai .txt > h4,.essai .txt > blockquote,
  .essai .txt > details,.essai .txt > .src,.essai .txt > .enc,.essai .txt > .ombre,
  .essai .txt > .itoc,.essai .txt > .toc,.essai .txt > .ph,.essai .txt > .lead,
  .essai .txt > .sect-tete,.essai .txt > .chapno{
    max-width:min(68ch,620px);margin-left:auto;margin-right:auto}
  /* Ce qui est large occupe le bloc entier, et rien de plus. Meme liste que da.py,
     pour qu'on retrouve l'une en cherchant l'autre. */
  .essai .txt > figure,.essai .txt > .tw,.essai .txt > table,
  .essai .txt > .tscroll,.essai .txt > .balade,.essai .txt > .fig,
  .essai .txt > .gg,.essai .txt > .gg2,.essai .txt > ul.frise{
    max-width:none!important;width:100%!important;
    margin-left:0!important;margin-right:0!important;transform:none!important}
  /* La note de marge rentre dans le flux. Hors du flux, elle passait sous les
     tableaux et les planches, qui sont plus larges que la colonne de lecture. */
  .essai .txt > figure.pl.gal.cote{position:static!important;right:auto!important;
    width:100%!important;max-width:none!important;margin:0 0 26px!important;
    transform:none!important}
}
figure img{cursor:zoom-in}
#loupe{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.93);display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:26px 20px 18px}
#loupe.on{display:flex}
#loupe img{max-width:min(100%,1500px);max-height:calc(100vh - 170px);object-fit:contain;
  filter:none;background:#fff}
#loupe .leg{max-width:760px;margin-top:16px;color:#ded7c8;font-family:var(--text);
  font-size:.86rem;line-height:1.5;text-align:center}
#loupe .leg .tag{display:inline-block;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:#9a9182;margin-right:8px}
#loupe .pos{position:absolute;top:18px;left:24px;font-family:var(--mono);font-size:.72rem;
  color:#9a9182}
#loupe .x{position:absolute;top:12px;right:16px;background:transparent;border:0;
  color:#ded7c8;font-size:1.9rem;line-height:1;cursor:pointer;padding:6px 10px}
#loupe .pas{position:absolute;top:50%;transform:translateY(-50%);background:transparent;
  border:0;color:#ded7c8;font-size:2.4rem;line-height:1;cursor:pointer;padding:14px 18px;
  opacity:.55}
#loupe .pas:hover{opacity:1}
#loupe .av{left:4px}#loupe .ap{right:4px}
@media (max-width:620px){#loupe .pas{font-size:1.9rem;padding:10px 8px}
  #loupe .leg{font-size:.78rem}}
:where(img[width]){height:auto}