
/* Concept : chaque article garde la couleur de son monde imprimé (marine, olive, anthracite, bleu roi,
   jaune, ardoise) ; une seule grille, une seule typographie, une navigation par numéro. */
:root{
  --night:#15170B;     /* fond de la couverture */
  --gold:#F4C24E;      /* logo */
  --orange:#E0841A;    /* sommaire */
  --paper:#ECEAE4;     /* mot de Maxime */
  --slate:#1E2D44;
  --display:"Bricolage Grotesque","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --sub:"Barlow Semi Condensed","DIN Condensed","Arial Narrow",sans-serif;
  --body:Literata,Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --hiero:"Noto Sans Egyptian Hieroglyphs",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:#F4EFE2;font-family:var(--body);font-size:1.0625rem;line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.1em;hyphens:auto;-webkit-hyphens:auto}
strong{font-weight:600}
math{font-size:1.1em}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- monde d'un article ---------- */
.view{--bg:#15170B;--fg:#F4EFE2;--muted:rgba(244,239,226,.72);--accent:#F4C24E;--accent-ink:#1A1A10;--rule:rgba(244,239,226,.2);--card:rgba(255,255,255,.06);--chart:#0B1626;
  background:var(--bg);color:var(--fg)}
.view[hidden]{display:none!important}
.w-marche{--bg:#0F1E33;--fg:#EEF2F7;--muted:#AFC0D4;--accent:#E8B634;--accent-ink:#1B1606;--rule:rgba(238,242,247,.18);--card:#152843;--curve:#E2643D}
.w-bases{--bg:#41481C;--fg:#F3F0DF;--muted:#D2CFB2;--accent:#F1E3B3;--accent-ink:#2B2F12;--rule:rgba(243,240,223,.22);--card:#4B5323}
.w-etymo{--bg:#3D3C3A;--fg:#F1EEE7;--muted:#C9C5BC;--accent:#F3ECD9;--accent-ink:#2D2C2A;--rule:rgba(241,238,231,.2);--card:#4A4946}
.w-peda{--bg:#0B2468;--fg:#F1F4FC;--muted:#BCC8EA;--accent:#5C8BFF;--accent-ink:#ffffff;--rule:rgba(241,244,252,.2);--card:#132F7D}
.w-lire{--bg:#FBC71E;--fg:#161308;--muted:#3E3517;--accent:#161308;--accent-ink:#FBC71E;--rule:rgba(22,19,8,.22);--card:#FDD95C;color-scheme:light}
.w-defi{--bg:#21304D;--fg:#F2EEE4;--muted:#BAC4D6;--accent:#F2E6C6;--accent-ink:#21304D;--rule:rgba(242,238,228,.2);--card:#2A3B5D}
.w-home{--bg:#15170B;--fg:#F4EFE2;--muted:#C9C3AA;--accent:#F4C24E;--accent-ink:#15170B;--rule:rgba(244,239,226,.18);--card:#202312}

/* ---------- barre de navigation ---------- */

/* ---------- gabarits communs ---------- */
.gut{padding-inline:clamp(16px,4vw,40px)}
.col{max-width:40rem;margin-inline:auto}
.wide{max-width:62rem;margin-inline:auto}
.kicker{font-family:var(--sub);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem}
.title{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;margin:0;text-wrap:balance;letter-spacing:-.005em}
.view h2{font-family:var(--sub);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);line-height:1.15;margin:2.4rem 0 1rem;text-wrap:balance;color:var(--fg)}
.view h3{font-family:var(--sub);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1.15rem;margin:1.8rem 0 .6rem}
.lead{font-style:italic;font-size:1.12rem;color:var(--fg)}
.body{padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem)}
ul.tri{list-style:none;padding:0;margin:0 0 1.2em}
ul.tri li{position:relative;padding-left:1.3em;margin-bottom:.25em}
ul.tri li::before{content:"‣";position:absolute;left:.1em;color:var(--accent);font-weight:700}
ul.dash{list-style:none;padding:0;margin:0 0 1.2em}
ul.dash li::before{content:"- "}
.formula{display:block;text-align:center;margin:1.3rem 0 1.4rem;overflow-x:auto;font-size:1.2rem}
.pill-formula{display:block;width:fit-content;max-width:100%;margin:1.4rem auto;padding:.9rem 1.6rem;background:var(--accent);color:var(--accent-ink);border-radius:18px;font-size:1.25rem;overflow-x:auto}
.note-i{font-style:italic;font-size:.9rem;color:var(--muted)}
.refs{font-size:.88rem;line-height:1.6;color:var(--muted)}
.refs p{margin-bottom:.5em}
.refs a{word-break:break-all}
.view a.ext{text-decoration-thickness:1px;text-underline-offset:3px}
figure{margin:0}
.fig{margin:2rem auto}
.fig img{width:100%;height:auto}
.fig figcaption{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:.5rem;text-align:center}
.float-r{float:right;width:min(42%,16rem);margin:.3rem 0 1rem 1.6rem}
.float-l{float:left;width:min(40%,15rem);margin:.3rem 1.6rem 1rem 0}
@media (max-width:540px){.float-r,.float-l{float:none;width:70%;margin:0 auto 1.4rem}}
.clear{clear:both}

/* atelier interactif (repris de l'article Benford) */
.lab{border:2px dashed var(--accent);background:var(--card);padding:clamp(18px,3vw,30px);margin:2.4rem auto}
.lab-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.lab-head h3{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:0;text-transform:none;letter-spacing:0}
.badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:.25rem .55rem;white-space:nowrap}
.lab label{font-family:var(--sub);font-weight:600;letter-spacing:.04em;font-size:.95rem;display:flex;justify-content:space-between;gap:1rem}
.lab output,.readout{font-family:var(--mono);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);margin:.4rem 0 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1rem}
.chip{border:1px solid var(--rule);background:transparent;padding:.3rem .7rem;font-family:var(--mono);font-size:.78rem;cursor:pointer}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;margin-top:.4rem}
.stat{border-top:3px solid var(--accent);padding:.5rem .1rem 0}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.35;display:block}

/* article suivant */
.next{display:block;text-decoration:none;border-top:1px solid var(--rule);padding-block:2rem 2.6rem}
.next .k{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.next .t{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);line-height:1;margin-top:.4rem}
.next .t::after{content:" →";color:var(--accent)}
.next:hover .t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* pied de page */
.foot{background:#0E0F07;color:#C9C3AA;font-family:var(--mono);font-size:.74rem;line-height:1.6}
.foot .in{max-width:76rem;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding-block:1.6rem 2.4rem}
.foot p{margin:0;max-width:34rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* ---------- composants partagés (ajoutés au no 5) ---------- */
.plot{background:var(--chart,rgba(0,0,0,.25));border:1px solid var(--rule);padding:10px 8px 6px}
.plot svg{display:block;width:100%;height:auto;touch-action:none}
.plot text{fill:var(--muted);font-family:var(--mono);font-size:11px}
.plot .grid{stroke:var(--rule)}
.plot .axis{stroke:var(--muted)}
.btn-lab{background:var(--accent);color:var(--accent-ink);border:0;padding:.55rem 1rem;font-family:var(--sub);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;cursor:pointer}
.btn-lab.ghost{background:transparent;color:var(--fg);border:1px solid var(--rule)}
.lab-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.6rem 0}
.lab .note-i{margin:.6rem 0 0}
.calc{font-family:var(--body);background:var(--card);border-left:4px solid var(--accent);padding:.9rem 1.1rem;margin:1.2rem 0;overflow-x:auto}
.calc p{margin:0 0 .3em}.calc p:last-child{margin:0}
.calc .ctr{text-align:center;font-size:1.05rem}
.hero-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;max-width:76rem;margin:0 auto}
.hero-band .txt{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(2rem,5vw,4rem) clamp(16px,4vw,40px)}
.hero-band .title{font-size:clamp(2.4rem,1.3rem + 4vw,4.6rem)}
.hero-band img{width:100%;height:100%;object-fit:cover;min-height:20rem}
@media (max-width:760px){.hero-band{grid-template-columns:1fr}.hero-band img{max-height:24rem}}
.qr-row{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}
.qr-row img{width:110px;height:110px;background:#fff;padding:6px;border-radius:10px}
.video-link{display:flex;gap:1rem;align-items:center;background:var(--fg);color:var(--bg);padding:.9rem 1.1rem;text-decoration:none;margin:1rem 0;flex-wrap:wrap}
.video-link .play{width:2.8rem;height:2.8rem;border-radius:50%;background:#E3262C;display:grid;place-items:center;flex:none}
.video-link .play::after{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.video-link span{min-width:0;flex:1 1 12rem;line-height:1.45}
