@font-face{
    font-family: 'Coolvetica';
    src: url('https://synthmedia.fr/wp-content/uploads/2024/05/Coolvetica-Regular-1.woff2') format('woff2');
    font-weight: normal; font-style: normal; font-display: swap;
  }
  @font-face{
    font-family: 'IBM Plex Mono Synth';
    src: url('https://synthmedia.fr/wp-content/uploads/2026/02/ibmplexmono-regular-webfont.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
  }
  :root{
    --bg:#e8e4dc;
    --paper:#f4f1ea;
    --ink:#141310;
    --red:#c81e1e;
    --line:#c6c0b2;
    --line-dark:#2a2824;
    --white:#f4f1ea;
    --grey:#6e6a5f;
  }
  :root[data-theme="dark"]{
    --bg:#26282b;
    --paper:#303236;
    --ink:#f0ece2;
    --red:#e2392f;
    --line:#3d3f43;
    --line-dark:#48494d;
    --white:#303236;
    --grey:#9a9c9f;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;background:var(--bg);color:var(--ink);
    font-family:'IBM Plex Mono Synth',monospace;overflow:hidden;
    height:100%;display:flex;flex-direction:column;
    transition:background .2s,color .2s;
  }
  body{height:100vh;}
  ::selection{background:var(--red);color:var(--paper);}

  #bgGrid{position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(20,19,16,0.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(20,19,16,0.055) 1px, transparent 1px);
    background-size:40px 40px;
  }
  #bgScan{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.5;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(20,19,16,0.03) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(20,19,16,0.03) 0%, transparent 45%);
  }
  .crossMark{position:fixed;z-index:8;pointer-events:none;color:var(--ink);opacity:.35;
    font-family:'IBM Plex Mono Synth',monospace;font-size:14px;line-height:1;}
  #cross-tl{top:10px;left:10px;} #cross-tr{top:10px;right:10px;}
  #cross-bl{bottom:10px;left:10px;} #cross-br{bottom:10px;right:10px;}

  header{
    position:relative;z-index:5;flex:none;
    padding:20px 28px 16px 28px;
    border-bottom:2px solid var(--ink);
    background:var(--paper);
    transition:background .2s,border-color .2s;
  }
  .titleRow{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  #mobileMenuBtn{
    display:none;background:var(--ink);border:1px solid var(--ink);color:var(--paper);
    font-size:16px;line-height:1;padding:8px 12px;cursor:pointer;flex:none;
  }
  #headerExtra{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin-top:14px;
  }
  .mobileFooterInfo{display:none;}
  .logoChip{
    background:var(--ink);padding:8px 12px;display:inline-flex;align-items:center;
    flex:none;height:fit-content;text-decoration:none;cursor:pointer;
  }
  .logoChip img{height:18px;width:auto;display:block;}
  .brand{display:flex;flex-direction:column;gap:4px;}
  .brand .eyebrowRow{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
  .brand .eyebrow{font-size:10.5px;letter-spacing:.18em;color:var(--red);text-transform:uppercase;font-weight:700;}
  h1{
    font-family:'Coolvetica',sans-serif;font-weight:800;
    font-size:clamp(20px,3.4vw,34px);line-height:1.05;margin:0;
    letter-spacing:-0.01em;text-transform:uppercase;color:var(--ink);
  }
  h1 em{color:var(--red);font-style:normal;}
  .subtitle{color:var(--grey);font-size:12.5px;max-width:560px;line-height:1.5;margin-top:2px;}
  .stats{display:flex;gap:0;font-size:11px;color:var(--grey);margin-top:12px;flex-wrap:wrap;}
  .stats div{border-left:1px solid var(--line);padding:2px 16px;}
  .stats div:first-child{padding-left:0;border-left:none;}
  .stats b{color:var(--ink);font-size:16px;display:block;font-family:'IBM Plex Mono Synth',monospace;}

  .headerActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
  #viewModeSelect, #themeToggleBtn{
    background:var(--ink);border:1px solid var(--ink);color:var(--paper);
    font-family:'IBM Plex Mono Synth',monospace;font-size:11px;letter-spacing:.04em;
    padding:9px 14px;border-radius:0;cursor:pointer;white-space:nowrap;
    transition:background .15s,border-color .15s,color .15s;
  }
  #viewModeSelect:hover, #themeToggleBtn:hover{background:var(--red);border-color:var(--red);color:var(--paper);}
  #themeToggleBtn{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;background:transparent;border:1px solid var(--ink);color:var(--ink);}
  #themeToggleBtn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  #gameBtn{
    display:inline-flex;align-items:center;background:var(--ink);border:1px solid var(--ink);color:var(--paper);
    font-family:'IBM Plex Mono Synth',monospace;font-size:11px;letter-spacing:.04em;
    padding:9px 14px;cursor:pointer;white-space:nowrap;text-decoration:none;
    transition:background .15s,border-color .15s,color .15s;
  }
  #gameBtn:hover{background:var(--red);border-color:var(--red);color:var(--paper);}

  /* « Je soutiens Synth » : même bouton que dans l'en-tête de synthmedia.fr (fond blanc, filet noir, ombre jaune décalée) */
  #supportBtn{
    display:inline-flex;align-items:center;justify-content:center;gap:.35em;
    background:#ffffff;border:1px solid #000000;color:#000000;border-radius:0;
    font-family:'Coolvetica','IBM Plex Mono Synth',sans-serif;font-size:.875rem;font-weight:400;line-height:1rem;letter-spacing:.02em;
    text-transform:uppercase;
    padding:.55rem 1.1rem;cursor:pointer;white-space:nowrap;text-decoration:none;
    box-shadow:4px 4px 0 -1px #F4BE43;
    transition:background-color .25s,box-shadow .25s;
  }
  #supportBtn:hover,#supportBtn:focus-visible{background:#FEECBC;box-shadow:none;}
  #supportBtn:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

  #app{position:relative;z-index:2;display:flex;flex:1 1 auto;min-height:0;}
  #sidebar{
    width:270px;flex:none;border-right:2px solid var(--ink);
    padding:18px 16px;overflow-y:auto;background:var(--paper);
    display:flex;flex-direction:column;gap:20px;
    transition:background .2s,border-color .2s;
  }
  #main{flex:1;position:relative;overflow:hidden;}
  svg{width:100%;height:100%;display:block;cursor:grab;}
  svg:active{cursor:grabbing;}

  .section-label{font-size:10px;letter-spacing:.16em;color:var(--red);text-transform:uppercase;margin-bottom:10px;font-weight:700;}

  .catToggleRow{display:flex;gap:8px;margin-bottom:8px;}
  .catToggleRow button{
    flex:1;background:transparent;border:1px solid var(--line);color:var(--grey);
    font-family:'IBM Plex Mono Synth',monospace;font-size:9.5px;letter-spacing:.03em;
    padding:5px 6px;cursor:pointer;border-radius:0;transition:border-color .15s,color .15s;
  }
  .catToggleRow button:hover{border-color:var(--red);color:var(--red);}

  #dialogFilterBtn{
    display:block;width:100%;background:transparent;border:1px solid var(--line);color:var(--ink);
    font-family:'IBM Plex Mono Synth',monospace;font-size:10.5px;letter-spacing:.02em;
    padding:8px 10px;margin-bottom:10px;cursor:pointer;border-radius:0;text-align:left;
    transition:background .15s,border-color .15s,color .15s;
  }
  #dialogFilterBtn:hover{border-color:var(--red);color:var(--red);}
  #dialogFilterBtn.active{background:var(--red);border-color:var(--red);color:var(--paper);}

  #search{
    width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
    font-family:'IBM Plex Mono Synth',monospace;font-size:12px;padding:9px 10px;border-radius:0;
  }
  #search:focus{outline:none;border-color:var(--red);}

  #countrySelect, #personSelect{
    width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
    font-family:'IBM Plex Mono Synth',monospace;font-size:12px;padding:9px 10px;border-radius:0;
  }
  #countrySelect:focus, #personSelect:focus{outline:none;border-color:var(--red);}

  .cat-row{
    display:flex;align-items:center;gap:9px;font-size:11.5px;padding:6px 4px;cursor:pointer;
    border-radius:0;transition:background .12s;user-select:none;
  }
  .cat-row:hover{background:rgba(20,19,16,0.05);}
  .cat-row.off{opacity:0.3;}
  .dot{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid var(--ink);}
  .cat-count{margin-left:auto;color:var(--grey);font-size:10.5px;}

  .rel-legend{font-size:10.5px;color:var(--grey);line-height:1.75;}
  .rel-legend span{color:var(--ink);}
  .rel-legend b{color:var(--ink);}

  #detail{
    position:absolute;top:16px;right:16px;width:340px;max-width:calc(100vw - 32px);
    background:var(--paper);border:2px solid var(--ink);border-radius:0;
    padding:20px;z-index:6;display:none;max-height:calc(100% - 32px);overflow-y:auto;
    box-shadow:8px 8px 0 rgba(20,19,16,0.15);
  }
  #detail.show{display:block;}
  #detail .close{position:absolute;top:12px;right:14px;cursor:pointer;color:var(--grey);font-size:16px;}
  #detail .close:hover{color:var(--red);}
  #detail .catTag{display:inline-block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    padding:3px 8px;border-radius:0;margin-bottom:10px;color:var(--ink);font-weight:700;border:1px solid var(--ink);}
  #detail .portraitWrap{
    position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
    margin:0 0 12px 0;border:1px solid var(--ink);
  }
  #detail .portrait{
    width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block;
    filter:grayscale(1) contrast(1.35) brightness(1.05);margin:0;
  }
  #detail .portraitWrap::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle, #000 1px, transparent 1.15px);
    background-size:4px 4px;background-position:0 0;
    mix-blend-mode:multiply;opacity:.85;
  }
  :root[data-theme="dark"] #detail .portraitWrap::after{mix-blend-mode:screen;background-image:radial-gradient(circle, #fff 1px, transparent 1.15px);opacity:.18;}
  #detail h2{font-family:'IBM Plex Mono Synth',sans-serif;font-size:19px;margin:0 0 4px 0;line-height:1.15;display:flex;align-items:center;gap:9px;color:var(--ink);}
  #detail h2 .idDot{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--ink);}
  #detail .meta{color:var(--grey);font-size:11px;margin-bottom:12px;}
  #detail p.desc{font-size:12.5px;line-height:1.65;color:var(--ink);margin:0 0 14px 0;}
  #detail .linksTitle{font-size:10px;letter-spacing:.12em;color:var(--red);text-transform:uppercase;margin:14px 0 6px 0;font-weight:700;}
  #detail .detailFilter{
    width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
    font-family:'IBM Plex Mono Synth',monospace;font-size:11px;padding:7px 9px;border-radius:0;
    margin:0 0 8px 0;
  }
  #detail .detailFilter:focus{outline:none;border-color:var(--red);}
  #detail .linkGroup{margin-bottom:4px;}
  #detail .linkGroupTitle{
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);
    margin:12px 0 2px 0;padding-top:8px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;font-weight:700;
  }
  #detail summary.linkGroupTitle{cursor:pointer;list-style:none;}
  #detail summary.linkGroupTitle::-webkit-details-marker{display:none;}
  #detail .chevron{display:inline-block;margin-right:5px;transition:transform .15s;}
  #detail details.linkGroup[open]>summary .chevron{transform:rotate(90deg);}
  #detail .linkGroupCount{color:var(--grey);letter-spacing:0;text-transform:none;font-weight:400;}
  #detail .linkRow{font-size:11.5px;padding:6px 0;display:flex;flex-direction:column;gap:1px;cursor:pointer;}
  #detail .linkRow:hover .lname{color:var(--red);}
  #detail .linkRow .lname{font-weight:500;color:var(--ink);}
  #detail .linkRow .lnote{color:var(--grey);font-size:10px;line-height:1.4;}
  #detail a.src{color:var(--red);font-size:10.5px;word-break:break-all;text-decoration:none;border-bottom:1px dotted var(--red);}

  .link{stroke-opacity:0.4;stroke:var(--ink);}
  .node-label{font-family:'IBM Plex Mono Synth',monospace;fill:var(--ink);pointer-events:none;
    paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round;}
  .node circle{cursor:pointer;stroke:var(--ink);}
  .node.dim{opacity:0.12;}
  .link.dim{opacity:0.04;}

  #sourcesBtn{
    display:block;width:100%;background:transparent;border:1px solid var(--line);color:var(--ink);
    font-family:'IBM Plex Mono Synth',monospace;font-size:10.5px;letter-spacing:.02em;
    padding:8px 10px;margin-top:10px;cursor:pointer;border-radius:0;text-align:left;
    transition:border-color .15s,color .15s;
  }
  #sourcesBtn:hover{border-color:var(--red);color:var(--red);}

  #sourcesModal, #timelineModal, #biblioModal{
    display:none;position:fixed;inset:0;z-index:50;
    background:rgba(20,19,16,0.55);align-items:center;justify-content:center;padding:24px;
  }
  #sourcesModal.open{display:flex;}
  #sourcesModalCard, #timelineModalCard, #biblioModalCard{
    position:relative;background:var(--paper);border:2px solid var(--ink);
    width:100%;max-width:720px;max-height:80vh;overflow-y:auto;padding:26px;
    box-shadow:8px 8px 0 rgba(20,19,16,0.25);
  }
  #sourcesModalCard h2, #timelineModalCard h2, #biblioModalCard h2{font-family:'Coolvetica',sans-serif;font-size:24px;margin:0 0 4px 0;color:var(--ink);text-transform:uppercase;}
  #sourcesModalCard .subtitle, #timelineModalCard .subtitle, #biblioModalCard .subtitle{color:var(--grey);font-size:11.5px;margin-bottom:18px;}
  #sourcesModalCard .close, #timelineModalCard .close, #biblioModalCard .close{position:absolute;top:16px;right:20px;cursor:pointer;color:var(--grey);font-size:18px;}
  #sourcesModalCard .close:hover, #timelineModalCard .close:hover, #biblioModalCard .close:hover{color:var(--red);}
  .sourceGroupTitle{
    font-family:'IBM Plex Mono Synth',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:700;color:var(--paper);background:var(--red);display:inline-block;
    padding:3px 9px;margin:18px 0 6px 0;
  }
  .sourceGroupTitle.synth{background:var(--ink);}
  .sourceGroup:first-child .sourceGroupTitle{margin-top:0;}
  .sourceRow{border-top:1px solid var(--line);padding:9px 0;font-size:12px;}
  .sourceRow:first-child{border-top:none;}
  .sourceDate{color:var(--grey);font-size:10.5px;float:right;}
  .sourceTitle{display:block;margin:3px 0;color:var(--ink);line-height:1.4;}
  .sourceLink{color:var(--red);font-size:10.5px;word-break:break-all;text-decoration:none;border-bottom:1px dotted var(--red);}

  .viewPanel{
    display:none;position:absolute;inset:0;overflow-y:auto;
    background:var(--bg);padding:32px clamp(20px,6vw,80px);
  }
  .viewPanel.active{display:block;}
  .viewPanel h2{font-family:'Coolvetica',sans-serif;font-size:clamp(22px,3vw,30px);margin:0 0 6px 0;color:var(--ink);text-transform:uppercase;}
  .viewPanel .viewPanelSubtitle{color:var(--grey);font-size:12px;margin-bottom:24px;max-width:640px;}

  .timelineDesc{display:block;color:var(--grey);font-size:11.5px;line-height:1.5;margin-bottom:4px;}

  .biblioGroupTitle{
    max-width:720px;
    font-family:'IBM Plex Mono Synth',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:700;color:var(--paper);background:var(--ink);display:inline-block;
    padding:3px 9px;margin:18px 0 8px 0;
  }
  .biblioGroup:first-child .biblioGroupTitle{margin-top:0;}
  .biblioRow{border-top:1px solid var(--line);padding:10px 0;font-size:12px;}
  .biblioRow:first-child{border-top:none;}
  .biblioAuthors{color:var(--red);font-size:10.5px;font-weight:700;}
  .biblioMeta{color:var(--grey);font-size:10.5px;float:right;}
  .biblioTitle{display:block;margin:3px 0;color:var(--ink);font-style:italic;line-height:1.4;}
  .biblioDesc{display:block;color:var(--grey);font-size:11.5px;line-height:1.5;margin-bottom:4px;}
  .biblioLink{color:var(--red);font-size:10px;text-decoration:none;border-bottom:1px dotted var(--red);}

  #zoomControls{
    position:absolute;bottom:16px;right:16px;z-index:6;
    display:flex;flex-direction:column;border:1px solid var(--ink);
  }
  #zoomControls button{
    width:34px;height:34px;background:var(--paper);border:none;
    border-bottom:1px solid var(--ink);color:var(--ink);font-size:16px;line-height:1;
    cursor:pointer;font-family:'IBM Plex Mono Synth',monospace;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
  }
  #zoomControls button:last-child{border-bottom:none;}
  #zoomControls button:hover{background:var(--red);color:var(--paper);}

  #tooltip{
    position:fixed;pointer-events:none;background:var(--ink);border:1px solid var(--red);
    color:var(--paper);font-size:11px;padding:6px 9px;border-radius:0;z-index:20;display:none;
    max-width:220px;
  }

  footer{
    position:relative;z-index:5;border-top:2px solid var(--ink);flex:none;
    padding:8px 28px;font-size:10px;color:var(--grey);display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:6px;background:var(--paper);
    transition:background .2s,border-color .2s;
  }
  footer b{color:var(--red);}
  footer a, .mobileFooterInfo a{color:var(--red);text-decoration:none;border-bottom:1px dotted var(--red);}
  footer a:hover, .mobileFooterInfo a:hover{color:var(--ink);border-color:var(--ink);}

  @media (max-width:760px){
    #tooltip{display:none !important;}
    #search{padding:20px;}
    #app{flex-direction:column;}
    #sidebar{width:100%;border-right:none;border-bottom:2px solid var(--ink);
      flex-direction:row;flex-wrap:wrap;max-height:120px;padding:10px 14px;gap:10px;}
    #sidebar .section-label{width:100%;margin-bottom:2px;}
    #sidebar > div{flex:1 1 auto;}
    #sidebar > div:first-child{flex:1 1 100%;width:100%;}
    #catList{display:flex;flex-wrap:wrap;gap:4px;}
    .cat-row{border:1px solid var(--line);padding:4px 8px;}
    .cat-count{display:none;}
    .rel-legend{display:none;}
    #detail{left:12px;right:12px;width:auto;top:auto;bottom:12px;max-height:60vh;}
    header{padding:14px 16px;}
    .stats{gap:14px;}

    #mobileMenuBtn{display:block;}
    #headerExtra{
      display:none;flex-direction:column;align-items:stretch;
      position:absolute;top:100%;left:0;right:0;z-index:9;
      background:var(--paper);border-bottom:2px solid var(--ink);
      padding:16px;margin-top:0;box-shadow:0 10px 24px rgba(0,0,0,0.18);
      max-height:calc(100vh - 60px);overflow-y:auto;
    }
    #headerExtra.open{display:flex;}
    .headerActions{justify-content:flex-start;}
    .mobileFooterInfo{
      display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
      font-size:10px;color:var(--grey);line-height:1.5;
    }
    .mobileFooterInfo div{margin-bottom:6px;}
    footer{display:none;}
    #zoomControls{bottom:auto;top:16px;right:16px;}
  }

#langSwitch{display:inline-flex;border:1px solid var(--ink);overflow:hidden;}
#langSwitch .langBtn{
  background:transparent;border:none;border-right:1px solid var(--line);color:var(--ink);
  padding:9px 11px;font-family:'IBM Plex Mono Synth',monospace;font-size:11px;letter-spacing:.06em;line-height:1;cursor:pointer;
  transition:background .15s,color .15s;
}
#langSwitch .langBtn:last-child{border-right:none;}
#langSwitch .langBtn:hover{background:var(--paper);}
#langSwitch .langBtn.active{background:var(--red);color:var(--paper);}

.titleRow{display:flex;align-items:center;gap:14px;}
.titleRow .logoChip{display:inline-flex;align-items:center;flex:none;}
.titleRow #synthLogo{height:60px;width:auto;display:block;}
@media (max-width:760px){ .titleRow #synthLogo{height:40px;} }

/* logo Synth : noir et rouge sur fond transparent ; en thème sombre, version blanche et rouge (synth-logo-dark.png) */
.titleRow .logoChip{background:transparent;padding:0}

/* ===== boutons de la carte : même direction artistique que ceux du jeu (contour fin, carré, icône au trait, police à chasse fixe) ===== */
#viewModeSelect,#gameBtn,#themeToggleBtn,#mobileMenuBtn{
  display:inline-flex;align-items:center;gap:8px;height:36px;box-sizing:border-box;padding:0 12px;
  background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:0;
  font-family:'IBM Plex Mono Synth',monospace;font-size:11.5px;letter-spacing:.04em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
#viewModeSelect:hover,#gameBtn:hover,#themeToggleBtn:hover,#mobileMenuBtn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);border-color:var(--ink);color:var(--ink)}
.uBtn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#viewModeSelect{appearance:none;-webkit-appearance:none;padding-right:32px;background-repeat:no-repeat;background-position:right 11px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141310' stroke-width='1.6'/%3E%3C/svg%3E");background-size:11px 7px}
html[data-theme="dark"] #viewModeSelect{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f0ece2' stroke-width='1.6'/%3E%3C/svg%3E")}
#viewModeSelect option{background:var(--paper);color:var(--ink)}
#themeToggleBtn,#mobileMenuBtn{width:36px;padding:0;justify-content:center}
#themeToggleBtn .lbl{display:none}
#mobileMenuBtn{display:none}
#langSwitch{display:inline-flex;border:none;gap:2px;overflow:visible}
#langSwitch .langBtn{border:none;background:transparent;color:var(--grey);padding:9px 8px;font-family:'IBM Plex Mono Synth',monospace;font-size:11.5px;letter-spacing:.06em;cursor:pointer;transition:color .15s}
#langSwitch .langBtn:hover{color:var(--ink);background:transparent}
#langSwitch .langBtn.active{color:var(--ink);background:transparent;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:7px}
@media (max-width:760px){
  #mobileMenuBtn{display:inline-flex}
  .headerActions{flex-direction:column;align-items:stretch;gap:8px}
  #viewModeSelect,#gameBtn,#themeToggleBtn{width:100%;height:44px;justify-content:flex-start;font-size:13px}
  #themeToggleBtn .lbl{display:inline}
  #langSwitch{justify-content:center}
  #supportBtn{justify-content:center}
}
@media (max-width:760px){
  .titleRow{gap:10px}
  .titleRow #synthLogo{height:34px}
  #pageTitle{min-width:0;font-size:clamp(15px,4.6vw,20px)}
}

/* burger -> croix à l'ouverture du menu (mobile) */
#mobileMenuBtn svg path{transform-origin:12px 12px;transition:transform .28s ease,opacity .18s ease}
#mobileMenuBtn[aria-expanded="true"] .b1{transform:rotate(45deg) translateY(5px)}
#mobileMenuBtn[aria-expanded="true"] .b2{opacity:0}
#mobileMenuBtn[aria-expanded="true"] .b3{transform:rotate(-45deg) translateY(-5px)}

/* ===== vues : réseau, orbite, grappes, index (barre de pastilles, barre secondaire, légendes) ===== */
#viewModeSelect{display:none !important}

#viewBar{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:7;
  display:flex;gap:6px;max-width:calc(100% - 120px);overflow-x:auto;padding:2px;
  scrollbar-width:none;
}
#viewBar::-webkit-scrollbar{display:none}
.vPill,.subBtn{
  flex:none;height:34px;padding:0 14px;background:var(--paper);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:0;cursor:pointer;
  font-family:'IBM Plex Mono Synth',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.vPill:hover,.subBtn:hover:not(:disabled){border-color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
.vPill.on,.subBtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vPill:focus-visible,.subBtn:focus-visible,.crumb:focus-visible,.idxSort:focus-visible,.idxName:focus-visible{outline:2px solid var(--red);outline-offset:2px}

#subBar{
  position:absolute;left:16px;top:16px;z-index:7;display:none;align-items:center;gap:6px;flex-wrap:wrap;
  max-width:calc(100% - 100px);font-size:11px;
}
#subBar.show{display:flex}
#subBar .subBtn{height:30px;padding:0 11px;font-size:10.5px}
#subBar .subBtn:disabled{opacity:.35;cursor:default}
#subBar .subLabel{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;margin-right:4px}
#subBar .crumb{background:none;border:none;padding:4px 2px;font:inherit;font-size:11px;color:var(--grey);cursor:pointer;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#subBar button.crumb:hover{color:var(--red)}
#subBar .crumb.root{color:var(--red);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px;cursor:default}
#subBar .crumb.cur{color:var(--ink);font-weight:700}
#subBar .crumbSep{color:var(--grey);opacity:.6}
#subBar .orbitSum{width:100%;color:var(--grey);font-size:10px;padding-left:2px}

#viewNote{
  position:absolute;left:16px;bottom:60px;z-index:6;max-width:330px;display:none;
  font-size:10px;line-height:1.55;color:var(--grey);pointer-events:none;
  background:color-mix(in srgb,var(--bg) 82%,transparent);padding:4px 6px 4px 0;
}
#viewNote.show{display:block}

/* réseau et grappes : seuls les pivots sont nommés tant qu'on n'a pas zoomé */
/* noms secondaires : fondu plutôt qu'apparition brutale */
#graph .node-label.dim{opacity:.16}
#graph .node-label{transition:opacity .35s ease}
#graph .node-label.minor,#graph .node-label.b0,#graph .node-label.b1{opacity:0}
#graph.zin .node-label.minor,#graph.zin2 .node-label.b1{opacity:1}
#graph.zin .node-label.minor.dim,#graph.zin2 .node-label.b1.dim{opacity:.16}
#graph.mode-orbit .node.center circle{stroke-width:3}
#graph.mode-orbit .node circle{transition:stroke-width .2s}
.link{transition:stroke-opacity .2s}

/* grappes par catégorie ou par pays : faisceaux entre groupes, liens individuels en filigrane */
.bundle{fill:none;stroke:var(--ink);stroke-opacity:.17;stroke-linecap:round}
.bundle:hover{stroke-opacity:.45}
.bundleCount{font-family:'IBM Plex Mono Synth',monospace;font-size:9.5px;fill:var(--grey);paint-order:stroke;stroke:var(--bg);stroke-width:3px;pointer-events:none}
.groupLabel{font-family:'IBM Plex Mono Synth',monospace;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;fill:var(--ink);
  paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.clusterFaint:not(.hasSel) .link{stroke-opacity:.06}
.clusterFaint.hasSel .bundle{stroke-opacity:.04}
.clusterFaint.hasSel .link:not(.dim){stroke-opacity:.6}
.clusterFaint.hasSel .bundleCount{opacity:.15}

/* orbite */
.sectorLabel{font-family:'IBM Plex Mono Synth',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink);opacity:.8;pointer-events:none;
  paint-order:stroke;stroke:var(--bg);stroke-width:3px}
#graph.mode-orbit .link{stroke-opacity:.55}
#graph.mode-orbit .link.dim{opacity:.05}

/* légende des types de relation */
.relBar{display:flex;height:8px;margin:0 0 10px;border:1px solid var(--ink)}
.relBar span{display:block;min-width:2px}
.relRow{display:flex;align-items:center;gap:8px;line-height:1.9}
.relRow svg{flex:none}
.relRow em{margin-left:auto;font-style:normal;color:var(--grey)}
.relNote{margin-top:8px;font-size:10px;line-height:1.5;color:var(--grey)}

/* index */
.idxWrap{overflow-x:auto;padding-bottom:70px}
.idxTable{border-collapse:collapse;width:100%;min-width:640px;font-size:12px}
.idxTable th{position:sticky;top:-32px;background:var(--bg);text-align:left;border-bottom:2px solid var(--ink);padding:0}
.idxTable td{border-top:1px solid var(--line);padding:8px 10px 8px 0;vertical-align:top}
.idxTable td.num{text-align:right;padding-right:18px;font-variant-numeric:tabular-nums}
.idxTable td a{color:var(--red);text-decoration:none;border-bottom:1px dotted var(--red);word-break:break-word}
.idxSort,.idxName{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0;text-align:left}
.idxSort{padding:8px 10px 8px 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:700}
.idxSort:hover{color:var(--ink)}
.idxName{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.idxName:hover{color:var(--red)}
.idxName .idDot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--ink)}
#indexView .viewPanelSubtitle b{color:var(--ink)}

@media (max-width:760px){
  #viewBar{left:10px;right:70px;top:10px;bottom:auto;transform:none;max-width:none}
  #subBar{left:10px;top:54px;max-width:calc(100% - 20px)}
  #viewNote{display:none !important}
  .vPill{height:32px;padding:0 11px}
  .idxWrap{padding-bottom:20px}
}

/* légende des relations : la règle globale svg{width:100%;height:100%} étirerait les traits */
.relRow svg{width:28px;height:8px;flex:none;cursor:default}

/* colonne de gauche redimensionnable : poignée entre la colonne et la carte */
#sidebarResize{
  flex:none;position:relative;z-index:4;width:9px;margin:0 -4px;cursor:col-resize;touch-action:none;
}
#sidebarResize::after{
  content:'';position:absolute;top:0;bottom:0;left:3px;width:3px;background:transparent;transition:background .15s;
}
#sidebarResize:hover::after,#sidebarResize:focus-visible::after,body.resizingSide #sidebarResize::after{background:var(--red)}
#sidebarResize:focus-visible{outline:none}
body.resizingSide{cursor:col-resize;user-select:none}
body.resizingSide #graph{pointer-events:none}
@media (max-width:760px){ #sidebarResize{display:none} }

/* ===== profondeur à la sélection, plein écran, étiquette du groupe central ===== */
#graph:not(.mode-orbit) .node{transition:opacity .45s ease}
.node.dim{opacity:.16}
.link{transition:stroke-opacity .3s ease,opacity .45s ease}
.node .pulse{pointer-events:none}
.groupLabel.middle{font-size:16px;stroke-width:7px;letter-spacing:.1em;opacity:.92}

#zoomControls button svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;cursor:inherit}
#zoomControls.fsOnly button:not(#fullscreenBtn){display:none}
#main:fullscreen{background:var(--bg)}
#main:-webkit-full-screen{background:var(--bg)}
#main.pseudoFull{position:fixed;inset:0;z-index:60;background:var(--bg)}
@media (prefers-reduced-motion: reduce){ .node,.link{transition:none} }

/* légende des types de relation en orbite : affichée seulement en plein écran (la barre latérale est alors cachée) */
#orbitLegend{
  position:absolute;left:16px;top:84px;z-index:6;display:none;min-width:190px;max-width:260px;
  background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);
  padding:10px 12px 8px;font-size:10.5px;color:var(--grey);line-height:1.5;
}
#main.isFull #orbitLegend.show{display:block}
#orbitLegend .olTitle{font-size:10px;letter-spacing:.16em;color:var(--red);text-transform:uppercase;font-weight:700;margin-bottom:6px}
#orbitLegend .relRow span{color:var(--ink)}
#orbitLegend svg{width:26px;height:8px}
/* pseudo plein écran : #app crée un contexte d'empilement sous l'en-tête, on le remonte tant que la carte est plein écran */
#app:has(#main.pseudoFull){z-index:60}

/* légende des catégories en réseau (plein écran) : mêmes emplacement et habillage que celle de l'orbite */
#orbitLegend.cats{top:16px}
#orbitLegend .catItem{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;padding:4px 0;font:inherit;color:var(--ink);cursor:pointer;text-align:left;transition:opacity .15s}
#orbitLegend .catItem:hover .cname{color:var(--red)}
#orbitLegend .catItem.off{opacity:.3}
#orbitLegend .catItem em{margin-left:auto;font-style:normal;color:var(--grey);padding-left:10px}
#orbitLegend .catItem .dot{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid var(--ink)}
#orbitLegend .catItem:focus-visible{outline:2px solid var(--red);outline-offset:1px}

/* pendant un zoom ou un déplacement : le flou reste actif ; on coupe seulement les transitions parasites et on simplifie le texte */
#graph.zooming .node,#graph.zooming .link{transition:none !important}
#graph.zooming .node-label{text-rendering:optimizeSpeed}
#graph.zooming .node-label{transition:none !important}
#graph.mode-network .node-label.sel,#graph.mode-clusters .node-label.sel{opacity:1 !important}

/* bureau : boutons + − ⟲ et plein écran à l'horizontale, au même endroit (bas droite) ; la fiche s'arrête au-dessus d'eux */
@media (min-width:761px){
  #zoomControls{flex-direction:row}
  #zoomControls button{border-bottom:none;border-right:1px solid var(--ink)}
  #zoomControls button:last-child{border-right:none}
  /* les pastilles de vue laissent la place aux boutons horizontaux (≈ 154 px) et défilent si l'écran est étroit */
  #viewBar{left:16px;right:170px;transform:none;max-width:none;justify-content:safe center}
  #detail{max-height:calc(100% - 16px - 66px)}
  #main:has(#zoomControls[style*="display: none"]) #detail{max-height:calc(100% - 32px)}
}

/* fiche d'acteur : le défilement est dans le corps, la croix de fermeture reste toujours visible, sur fond opaque */
#detail{padding:0;overflow:hidden}
#detail.show{display:flex;flex-direction:column}
#detailBody{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px}
#detail .close{
  top:8px;right:8px;z-index:5;width:32px;height:32px;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:15px;line-height:1;
  box-shadow:0 0 0 3px var(--paper);transition:background .15s,color .15s;
}
#detail .close:hover,#detail .close:focus-visible{background:var(--red);border-color:var(--red);color:var(--paper);outline:none}

/* ===== bouton et fenêtre « À propos » ===== */
#aboutBtn{
  display:inline-flex;align-items:center;gap:8px;height:36px;box-sizing:border-box;padding:0 12px;
  background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:0;
  font-family:'IBM Plex Mono Synth',monospace;font-size:11.5px;letter-spacing:.04em;cursor:pointer;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
#aboutBtn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);border-color:var(--ink)}
@media (max-width:760px){ #aboutBtn{width:100%;height:44px;justify-content:flex-start;font-size:13px} }

#aboutModal{display:none;position:fixed;inset:0;z-index:70;background:rgba(20,19,16,.55);align-items:center;justify-content:center;padding:24px}
#aboutModal.open{display:flex}
#aboutModalCard{
  position:relative;background:var(--paper);border:2px solid var(--ink);width:100%;max-width:680px;max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:8px 8px 0 rgba(20,19,16,.25);
}
#aboutBody{flex:1 1 auto;min-height:0;overflow-y:auto;padding:30px 32px 26px;font-size:13px;line-height:1.7;color:var(--ink)}
#aboutBody h2{font-family:'Coolvetica',sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,32px);text-transform:uppercase;margin:0 40px 14px 0;line-height:1.05}
#aboutBody h3{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700;margin:26px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
#aboutBody h2 + h3{margin-top:6px;padding-top:0;border-top:none}
#aboutBody p{margin:0 0 12px}
#aboutBody a{color:var(--red);text-decoration:none;border-bottom:1px dotted var(--red)}
#aboutBody a:hover{color:var(--ink);border-color:var(--ink)}
#aboutBody .aboutNote{font-size:11.5px;color:var(--grey)}
#aboutBody .aboutList{margin:0 0 12px;padding:0 0 0 18px;font-size:12.5px;line-height:1.75}
#aboutBody .aboutList li::marker{color:var(--red)}
.aboutSrcBtn{
  display:inline-block;margin:2px 0 4px;padding:9px 14px;background:transparent;color:var(--ink);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:0;font-family:'IBM Plex Mono Synth',monospace;font-size:11px;letter-spacing:.03em;
  transition:border-color .15s,color .15s;
}
.aboutSrcBtn:hover{border-color:var(--red);color:var(--red)}
.aboutClose{
  position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;font-size:15px;line-height:1;cursor:pointer;
  box-shadow:0 0 0 3px var(--paper);transition:background .15s,color .15s;
}
.aboutClose:hover,.aboutClose:focus-visible{background:var(--red);border-color:var(--red);color:var(--paper);outline:none}
.aboutSrcBtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:760px){ #aboutModal{padding:12px} #aboutBody{padding:24px 20px 20px} }

/* menus déroulants de la colonne de gauche : flèche à 11 px du bord droit (la flèche native colle au bord, environ 6 px) */
#countrySelect,#personSelect{
  appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px 7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141310' stroke-width='1.6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] #countrySelect,html[data-theme="dark"] #personSelect{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f0ece2' stroke-width='1.6'/%3E%3C/svg%3E");
}
#countrySelect option,#personSelect option{background:var(--paper);color:var(--ink)}

/* mobile : le bouton thème prend le même retrait que les autres boutons du menu (12 px, icône puis libellé) */
@media (max-width:760px){
  #themeToggleBtn{padding:0 12px}
}

/* À propos : crédits photographiques repliés */
#aboutBody .aboutPhotos{margin:0 0 12px}
#aboutBody .aboutPhotos summary{cursor:pointer;font-size:12.5px;font-weight:600;padding:4px 0;color:var(--ink)}
#aboutBody .aboutPhotos summary:hover{color:var(--red)}
#aboutBody .aboutPhotos .aboutList{margin-top:6px;font-size:12px;line-height:1.6}

/* ===== Frise horizontale à pistes (GSAP) : défilement à la main ou lecture automatique ===== */
:root{
  --tl-idees:#C26A12;--tl-secession:#2E8B57;--tl-argent:#B4182D;--tl-etat:#37415C;--tl-surveillance:#1B86A8;--tl-france:#7A4FB0;--tl-critique:#C0508F;--tl-all:#B4182D;
}
:root[data-theme="dark"]{
  --tl-idees:#F0A04B;--tl-secession:#4DB67F;--tl-argent:#E85A6B;--tl-etat:#8FA0E0;--tl-surveillance:#3CC3DA;--tl-france:#A98AE0;--tl-critique:#E57CB3;--tl-all:#E85A6B;
}
.tlL-idees{--c:var(--tl-idees)}.tlL-secession{--c:var(--tl-secession)}.tlL-argent{--c:var(--tl-argent)}.tlL-etat{--c:var(--tl-etat)}
.tlL-surveillance{--c:var(--tl-surveillance)}.tlL-france{--c:var(--tl-france)}.tlL-critique{--c:var(--tl-critique)}.tlL-all{--c:var(--tl-all)}
#timelineView.active{display:flex;flex-direction:column;overflow:hidden;padding-bottom:70px}
#timelineView h2,#timelineView .viewPanelSubtitle{flex:none}
#timelineView .viewPanelSubtitle{margin-bottom:8px;max-width:820px}
#tlStage{position:relative;flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
#tlLanes{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:0 0 10px}
.tlChip{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 9px;background:var(--paper);color:var(--ink);border:1px solid var(--line-dark);font:inherit;font-size:10.5px;letter-spacing:.03em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tlChip i{display:inline-block;width:14px;height:4px;background:var(--c)}
.tlChip em{font-style:normal;color:var(--grey);font-size:10px}
.tlChip:hover,.tlChip:focus-visible{border-color:var(--c);outline:none}
.tlChip[aria-pressed="true"]{border-color:var(--c);box-shadow:inset 0 -3px 0 var(--c)}
#tlFrame{position:relative;flex:none}
#tlScroller{position:relative;overflow-x:auto;overflow-y:hidden;margin:0 calc(-1 * clamp(20px,6vw,80px));scrollbar-width:thin;scrollbar-color:var(--red) transparent;outline:none}
#tlScroller:focus-visible{box-shadow:inset 0 0 0 2px var(--red)}
#tlTrack{position:relative}
#tlSvg{display:block;overflow:visible}
#tlLineMark{position:absolute;top:0;bottom:14px;width:0;border-left:1px dashed var(--red);opacity:.5;pointer-events:none}
.tlTick{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.tlYear{fill:var(--ink);font-family:'Coolvetica',sans-serif;font-size:22px;letter-spacing:.02em}
.tlBase{stroke:var(--line);stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round}
.tlHalo{fill:none;stroke:var(--paper);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.tlLine{fill:none;stroke:var(--c);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.tlSt{cursor:pointer;outline:none}
.tlHit{fill:transparent;pointer-events:all}
.tlPill{fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
.tlDot{fill:var(--paper);stroke:var(--c);stroke-width:3}
.tlSt:hover .tlDot,.tlSt:focus-visible .tlDot{fill:var(--c)}
.tlDate{fill:var(--ink);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.tlDateS{font-size:8.5px;letter-spacing:.02em}
.tlSt:focus-visible .tlDate,.tlSt:hover .tlDate{fill:var(--red)}
.tlCur{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:3 3;opacity:0;pointer-events:none}
#tlReader{flex:none;margin-top:6px;min-height:104px;border:1px solid var(--ink);background:var(--paper);padding:10px 16px;box-shadow:4px 4px 0 var(--line)}
.tlRIn{display:block}
.tlRMeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:4px}
.tlRDate{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.tlRLanes{display:inline-flex;flex-wrap:wrap;gap:6px}
.tlTag{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--grey)}
.tlTag i{display:inline-block;width:12px;height:4px;background:var(--c)}
.tlTransfer{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:1px 6px}
.tlRTitle{margin:0 0 3px;font-size:13.5px;line-height:1.35;font-weight:700;color:var(--ink)}
.tlRDesc{margin:0;font-size:11.5px;line-height:1.5;color:var(--grey);max-width:900px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tlRFoot{margin-left:auto;display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px}
.tlSrc{color:var(--red);font-size:10px;text-decoration:none;border-bottom:1px dotted var(--red)}
.tlOpen{height:24px;padding:0 10px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font:inherit;font-size:10.5px;letter-spacing:.04em;cursor:pointer}
.tlOpen:hover,.tlOpen:focus-visible{background:var(--red);border-color:var(--red);color:var(--paper);outline:none}
#tlControls{flex:none;display:flex;align-items:center;gap:14px;padding-top:12px}
#tlPlay{flex:none;width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);border:1px solid var(--ink);cursor:pointer}
#tlPlay:hover,#tlPlay:focus-visible{background:var(--red);border-color:var(--red);color:var(--paper)}
#tlPlay svg{width:16px;height:16px;fill:currentColor}
#tlProgress{position:relative;flex:1 1 auto;height:28px;cursor:pointer;touch-action:none;outline:none}
#tlProgress::before{content:'';position:absolute;left:0;right:0;top:13px;height:2px;background:var(--line)}
#tlProgFill{position:absolute;left:0;top:13px;height:2px;width:0;background:var(--red)}
#tlKnob{position:absolute;top:7px;left:0;width:12px;height:14px;margin-left:-6px;background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--ink)}
#tlProgress:focus-visible #tlKnob,#tlProgress:hover #tlKnob{background:var(--red);box-shadow:0 0 0 1px var(--red)}
#tlNow{flex:none;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--grey)}
#tlNow b{color:var(--ink)}
@media (max-width:760px){
  #timelineView.active{padding:60px 16px 16px}
  #tlScroller{margin:0 -16px}
  #tlLanes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tlChip{flex:none}
  #tlReader{min-height:150px;padding:10px 12px}
  #tlNow{display:none}
}
@media (prefers-reduced-motion:reduce){ #tlScroller{scroll-behavior:auto} }

/* ===== Rechargement à chaud (aperçu local) ===== */
#liveTag{position:fixed;left:14px;bottom:14px;z-index:60;padding:6px 10px;background:var(--paper);color:var(--ink);border:1px solid var(--red);font-size:10.5px;letter-spacing:.04em;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
#liveTag.on{opacity:1;transform:none}