/* ============================================================
   OBSERVATOIRE DU COMPLOTISME
   Direction : instrument d'observation. Fond encre-aubergine,
   didone de la fin du XVIIIe s. (l'époque de Barruel), et trois
   couleurs sémantiques qui encodent la seule distinction qui
   compte : documenté / fabriqué / persécutoire.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;0,6..96,900;1,6..96,400;1,6..96,700&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:        #15111f;
  --ink-2:      #1d1829;
  --surface:    #241e33;
  --surface-2:  #2c2540;
  --line:       #3a3150;
  --line-soft:  #2e2742;

  --bone:       #ece5da;
  --bone-dim:   #b6adc0;
  --muted:      #9d94ae;
  --muted-2:    #746b86;

  --sulphur:    #e8c547;   /* accent principal — signal */
  --verdigris:  #57b39b;   /* DOCUMENTÉ */
  --crimson:    #e05263;   /* FABRIQUÉ */
  --amber:      #d98e33;   /* PERSÉCUTOIRE */
  --violet:     #9d7fd4;   /* CONTESTÉ */

  --maxw: 1240px;
  --measure: 68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Spectral',Georgia,serif;
  font-size:17.5px;
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* subtle field of measurement lines behind everything */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(232,197,71,.045) 1px, transparent 1px);
  background-size:88px 100%;
  mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
main,header,footer{position:relative; z-index:1}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:'Bodoni Moda',Didot,'Bodoni MT',serif;
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0 0 .45em;
  color:#fbf7f0;
}
h1{font-size:clamp(2.6rem,5vw,4.5rem); font-weight:500}
h2{font-size:clamp(1.9rem,3.4vw,3rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem); font-weight:700; letter-spacing:0}
h4{font-size:1.05rem; font-weight:700}

p{margin:0 0 1.15em; max-width:var(--measure)}
.wide p{max-width:none}
strong{font-weight:600; color:#fdfaf4}
em{font-style:italic}

a{color:var(--sulphur); text-decoration:none; border-bottom:1px solid rgba(232,197,71,.32); transition:border-color .18s, color .18s}
a:hover{color:#fff; border-bottom-color:var(--sulphur)}

::selection{background:var(--sulphur); color:var(--ink)}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sulphur); display:flex; align-items:center; gap:.85em;
  margin:0 0 1.4em; font-weight:500;
}
.eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(to right,rgba(232,197,71,.5),transparent); max-width:180px}

.lede{font-size:clamp(1.1rem,1.6vw,1.32rem); color:#d8d0c4; font-weight:300; line-height:1.6; max-width:56ch}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,44px)}
.narrow{max-width:820px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(21,17,31,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.hdr{display:flex; align-items:center; gap:16px; max-width:var(--maxw); margin:0 auto; padding:11px clamp(20px,4vw,44px)}
.brand{display:flex; align-items:center; gap:11px; border:none; flex:0 0 auto}
.brand:hover{border:none}
.brand svg{flex:0 0 auto}
.brand b{font-family:'Bodoni Moda',serif; font-weight:700; font-size:.9rem; color:#fbf7f0; letter-spacing:.01em; display:block; line-height:1.15}
.brand span{font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); display:block}

nav.nav{display:flex; gap:1px; flex-wrap:wrap; margin-left:auto}
nav.nav a{
  font-family:'JetBrains Mono',monospace; font-size:.575rem; letter-spacing:.015em; text-transform:uppercase;
  color:var(--muted); padding:6px 6px; border:none; border-radius:3px; white-space:nowrap;
}
nav.nav a:hover{color:var(--bone); background:var(--surface)}
nav.nav a.active,nav.nav a[aria-current="page"]{color:var(--ink); background:var(--sulphur); font-weight:700}

@media(max-width:1080px){
  .hdr{flex-wrap:wrap; gap:10px}
  nav.nav{width:100%; margin-left:0; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; scrollbar-width:none}
  nav.nav::-webkit-scrollbar{display:none}
  nav.nav a{flex:0 0 auto}
}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(38px,5vw,64px); border-bottom:1px solid var(--line-soft); position:relative}
.hero h1{margin-bottom:.3em; text-wrap:balance}
.hero-grid{display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(28px,5vw,72px); align-items:end}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

.hero-figure{border-left:1px solid var(--line); padding-left:26px}
.hero-figure p{font-size:.94rem; color:var(--muted); max-width:none}

.hero-index{border-top:1px solid var(--line-soft); margin-top:clamp(36px,6vw,64px); padding-top:22px; display:flex; gap:30px; flex-wrap:wrap}
.hero-index span{font-family:'JetBrains Mono',monospace; font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2)}

/* ---------- page head (interior pages) ---------- */
.pagehead{padding:clamp(46px,7vw,88px) 0 clamp(30px,4vw,52px); border-bottom:1px solid var(--line-soft)}
.pagehead h1{font-size:clamp(2.3rem,5vw,4.1rem)}
.chapter-no{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.22em;
  color:var(--sulphur); text-transform:uppercase; margin-bottom:1.2em; display:block;
}

/* ---------- sections ---------- */
.section{padding:clamp(48px,7vw,84px) 0; border-bottom:1px solid var(--line-soft)}
.section:last-of-type{border-bottom:none}
.section-head{margin-bottom:clamp(28px,4vw,44px)}
.section-head h2{text-wrap:balance}
.section-head p{color:#cdc4b8}

/* ---------- classification chips (signature) ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 10px 4px 8px; border-radius:2px;
  border:1px solid currentColor; white-space:nowrap;
}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.c-doc{color:var(--verdigris); background:rgba(87,179,155,.09)}
.c-fab{color:var(--crimson); background:rgba(224,82,99,.09)}
.c-per{color:var(--amber); background:rgba(217,142,51,.09)}
.c-con{color:var(--violet); background:rgba(157,127,212,.09)}
.c-neu{color:var(--muted); background:rgba(157,148,174,.08)}

/* ---------- cards ---------- */
.grid{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.cell{background:var(--ink-2); padding:clamp(22px,2.6vw,30px); position:relative}
.cell p{font-size:.95rem; color:#c8bfb4; max-width:none; margin-bottom:.8em}
.cell p:last-child{margin-bottom:0}
.cell .k{font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:1em}
.cell h3{margin-bottom:.6em}

/* nav cards */
a.cell{border:none; display:block; transition:background .2s}
a.cell:hover{background:var(--surface); border:none}
a.cell:hover h3{color:var(--sulphur)}
a.cell .go{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sulphur); margin-top:1.1em; display:block}

/* ---------- stats ---------- */
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft)}
.fig{background:var(--ink); padding:26px clamp(18px,2vw,26px)}
.fig .n{font-family:'Bodoni Moda',serif; font-size:clamp(2.3rem,4vw,3.3rem); font-weight:500; color:var(--sulphur); line-height:.95; letter-spacing:-.02em}
.fig .n small{font-size:.42em; font-weight:400; letter-spacing:0}
.fig .l{font-size:.88rem; color:#c3bab0; margin-top:.75em; line-height:1.42; max-width:30ch}
.fig .s{font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.08em; color:var(--muted-2); margin-top:.9em; display:block; text-transform:uppercase}

/* ---------- prose blocks ---------- */
.prose{max-width:var(--measure)}
.prose h3{margin-top:2.2em}
.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.15em; margin:0 0 1.3em; color:#cdc4b8}
.prose li{margin-bottom:.6em}
.prose li::marker{color:var(--sulphur)}

/* ---------- dossier ---------- */
.dossier{border:1px solid var(--line-soft); background:var(--ink-2); margin-bottom:20px}
.dossier > summary{
  list-style:none; cursor:pointer; padding:20px clamp(18px,2.4vw,28px);
  display:flex; gap:18px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  transition:background .18s;
}
.dossier > summary::-webkit-details-marker{display:none}
.dossier > summary:hover{background:var(--surface)}
.dossier[open] > summary{border-bottom:1px solid var(--line-soft); background:var(--surface)}
.d-id{font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.14em; color:var(--muted-2); display:block; margin-bottom:.5em}
.d-title{flex:1 1 320px}
.d-title h3{margin:0 0 .25em; font-size:1.2rem}
.d-title .sub{font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.06em; color:var(--muted)}
.d-right{display:flex; align-items:center; gap:14px}
.d-caret{font-family:'JetBrains Mono',monospace; color:var(--sulphur); font-size:.9rem; transition:transform .2s}
.dossier[open] .d-caret{transform:rotate(90deg)}
.d-body{padding:clamp(20px,2.6vw,28px)}
.d-body p{font-size:.97rem; color:#cbc2b7}
.d-body p:last-child{margin-bottom:0}
.d-body .verdict{
  border-left:2px solid var(--sulphur); padding:2px 0 2px 16px; margin-top:1.4em;
  font-size:.9rem; color:#ddd4c8;
}
.d-body .verdict b{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sulphur); display:block; margin-bottom:.35em}

/* ---------- timeline ---------- */
.era-bar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:36px}
.era-bar button{
  font-family:'JetBrains Mono',monospace; font-size:.63rem; letter-spacing:.11em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:7px 13px; cursor:pointer; border-radius:2px; transition:all .18s;
}
.era-bar button:hover{color:var(--bone); border-color:var(--muted)}
.era-bar button.active{background:var(--sulphur); color:var(--ink); border-color:var(--sulphur); font-weight:700}

.tl{position:relative; padding-left:clamp(22px,3vw,38px); border-left:1px solid var(--line)}
.ev{position:relative; padding-bottom:38px}
.ev:last-child{padding-bottom:0}
.ev::before{
  content:""; position:absolute; top:9px; width:9px; height:9px; border-radius:50%;
  background:var(--ink); border:2px solid var(--sulphur);
  left:calc(-1 * clamp(22px,3vw,38px) - 5px);
}
.ev .date{font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.13em; color:var(--sulphur); text-transform:uppercase}
.ev h4{font-family:'Bodoni Moda',serif; font-size:1.35rem; font-weight:500; margin:.3em 0 .55em}
.ev p{font-size:.95rem; color:#c6bdb2; margin-bottom:0}
.ev .chip{margin-bottom:.9em}
.ev.hide{display:none}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line-soft)}
table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:560px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:#c8bfb4}
thead th{
  font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sulphur); background:var(--ink-2); font-weight:500; white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--ink-2)}
td strong{color:#f5efe6}

/* ---------- quote ---------- */
blockquote{
  margin:clamp(28px,4vw,48px) 0; padding:0 0 0 clamp(20px,3vw,34px);
  border-left:2px solid var(--sulphur);
  font-family:'Bodoni Moda',serif; font-size:clamp(1.3rem,2.4vw,1.85rem);
  font-weight:400; line-height:1.32; color:#f6f0e6;
}
blockquote p{max-width:30ch; margin-bottom:.5em; font-family:inherit; font-size:inherit; line-height:inherit}
blockquote cite{
  display:block; font-family:'JetBrains Mono',monospace; font-style:normal;
  font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:1.2em;
}

/* ---------- chart / viz ---------- */
.viz{border:1px solid var(--line-soft); background:var(--ink-2); padding:clamp(20px,3vw,32px)}
.viz-title{font-family:'JetBrains Mono',monospace; font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sulphur); margin-bottom:1.6em}
.viz figcaption{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.05em; color:var(--muted-2); margin-top:1.4em; line-height:1.6}

/* horizontal bars */
.bars{display:flex; flex-direction:column; gap:14px}
.bar-row{display:grid; grid-template-columns:1fr 54px; gap:14px; align-items:center}
.bar-label{font-size:.88rem; color:#c8bfb4; line-height:1.35}
.bar-track{grid-column:1/-1; height:7px; background:var(--surface); border-radius:1px; overflow:hidden; margin-top:-4px}
.bar-fill{height:100%; background:linear-gradient(to right,var(--sulphur),#f0d878); width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar-val{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--sulphur); text-align:right; font-weight:500}

/* ---------- quiz ---------- */
.quiz{border:1px solid var(--line); background:var(--ink-2); padding:clamp(24px,3.4vw,38px)}
.quiz-meta{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.5em; display:flex; justify-content:space-between; gap:16px}
.quiz-q{font-family:'Bodoni Moda',serif; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.34; color:#f6f0e6; margin-bottom:1.5em; max-width:52ch}
.quiz-opts{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px}
.quiz-opts button{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  padding:11px 17px; border:1px solid var(--line); background:transparent; color:var(--bone);
  cursor:pointer; border-radius:2px; transition:all .16s;
}
.quiz-opts button:hover:not(:disabled){border-color:var(--sulphur); color:var(--sulphur)}
.quiz-opts button:disabled{opacity:.42; cursor:default}
.quiz-opts button.right{border-color:var(--verdigris); color:var(--verdigris); opacity:1; background:rgba(87,179,155,.1)}
.quiz-opts button.wrong{border-color:var(--crimson); color:var(--crimson); opacity:1; background:rgba(224,82,99,.1)}
.quiz-fb{font-size:.94rem; color:#cbc2b7; border-left:2px solid var(--verdigris); padding-left:16px; margin-bottom:20px}
.quiz-fb.no{border-left-color:var(--crimson)}
.quiz-fb b{display:block; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4em; color:var(--verdigris)}
.quiz-fb.no b{color:var(--crimson)}

.btn{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  padding:11px 20px; border:1px solid var(--sulphur); background:var(--sulphur); color:var(--ink);
  cursor:pointer; border-radius:2px; display:inline-block; transition:all .16s;
}
.btn:hover{background:transparent; color:var(--sulphur); border-color:var(--sulphur)}
.btn.ghost{background:transparent; color:var(--sulphur)}
.btn.ghost:hover{background:var(--sulphur); color:var(--ink)}

/* ---------- rules decoder ---------- */
.rules{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft)}
.rule{background:var(--ink-2); padding:22px clamp(18px,2.4vw,28px); display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start}
.rule .no{font-family:'Bodoni Moda',serif; font-size:2rem; color:var(--sulphur); line-height:1; opacity:.55}
.rule h4{margin-bottom:.4em; font-family:'Bodoni Moda',serif; font-weight:500; font-size:1.2rem}
.rule p{font-size:.93rem; color:#c3bab0; margin:0; max-width:62ch}

/* ---------- glossary ---------- */
.gloss{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft)}
.gterm{background:var(--ink-2); padding:22px clamp(18px,2.4vw,26px)}
.gterm dt{font-family:'Bodoni Moda',serif; font-size:1.18rem; font-weight:500; color:#f6f0e6; margin-bottom:.35em}
.gterm dd{margin:0; font-size:.93rem; color:#c3bab0; line-height:1.6}
.gterm .orig{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.06em; color:var(--muted-2); display:block; margin-bottom:.5em}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:clamp(40px,6vw,64px) 0 clamp(48px,7vw,80px); background:var(--ink-2)}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,4vw,56px)}
@media(max-width:820px){.foot{grid-template-columns:1fr}}
.foot p{font-size:.86rem; color:var(--muted); max-width:52ch}
.foot h4{font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sulphur); margin-bottom:1.2em; font-weight:500}
.foot a{display:block; font-size:.87rem; margin-bottom:.55em; color:var(--bone); border:none}
.foot a:hover{color:var(--sulphur)}
.colophon{margin-top:clamp(32px,4vw,48px); padding-top:22px; border-top:1px solid var(--line-soft); font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.06em; color:var(--muted-2); line-height:1.8}

/* ---------- utilities ---------- */
.hr{height:1px; background:var(--line-soft); border:none; margin:clamp(32px,5vw,56px) 0}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:1.4em 0}
.note{font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.04em; color:var(--muted-2); line-height:1.75; max-width:70ch}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:200; background:var(--sulphur); color:var(--ink); padding:10px 16px; border-radius:2px}
:focus-visible{outline:2px solid var(--sulphur); outline-offset:3px}

.cols2{columns:2; column-gap:clamp(28px,4vw,52px)}
@media(max-width:760px){.cols2{columns:1}}
.cols2 p{break-inside:avoid; max-width:none}

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

/* timeline : gouttière de dates sur écrans larges */
@media(min-width:1000px){
  .ev{display:grid; grid-template-columns:190px minmax(0,1fr); column-gap:40px; align-items:start}
  .ev .date{grid-column:1; grid-row:1 / span 3; padding-top:4px; text-align:right; line-height:1.5}
  .ev h4{grid-column:2; grid-row:1; margin-top:0}
  .ev .chip{grid-column:2; grid-row:2; justify-self:start}
  .ev p{grid-column:2; grid-row:3; max-width:66ch}
}