/* =========================================================================
   15 ANS DU BRASS BAND OCCITANIA - journal vertical à défiler
   Palette : off-noir chaud + laiton (la matière de l'orchestre).
   Chapitres « spreads » à couleur propre : Oceans (marine), Amboise (or),
   Memòria (terre occitane), Le silence (gris éteint).
   ========================================================================= */

:root{
  /* --- ground / encre : mode clair par défaut (viewer sans préférence stampée) --- */
  --ground:#ece5d7;
  --ground-2:#e3dac7;
  --ground-3:#d7cab0;
  --ink:#1d1710;
  --ink-2:#5b4d39;
  --ink-3:#8b7d65;
  --brass:#97640f;
  --brass-2:#7a5209;
  --line:rgba(29,23,16,.16);
  --shadow:rgba(40,28,12,.18);

  --font-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;

  --measure:33rem;
  --pad:1.4rem;

  --fs-giant:clamp(4.2rem,17vw,10.5rem);
  --fs-year:clamp(3rem,11.5vw,6.5rem);
  --fs-h1:clamp(1.95rem,6vw,3.3rem);
  --fs-h2:clamp(1.3rem,3.6vw,1.85rem);
  --fs-stat:clamp(2.3rem,8.5vw,4.2rem);
  --fs-lede:clamp(1.18rem,1.02rem + 1vw,1.5rem);
  --fs-body:clamp(1.05rem,1rem + 0.4vw,1.19rem);
  --fs-quote:clamp(1.3rem,1.08rem + 1.9vw,1.95rem);
  --fs-cap:0.8rem;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#161009;
    --ground-2:#1f1710;
    --ground-3:#2b2116;
    --ink:#f3ecdd;
    --ink-2:#c4b8a1;
    --ink-3:#8a7d67;
    --brass:#e7ac40;
    --brass-2:#c1841f;
    --line:rgba(243,236,221,.14);
    --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#161009;
  --ground-2:#1f1710;
  --ground-3:#2b2116;
  --ink:#f3ecdd;
  --ink-2:#c4b8a1;
  --ink-3:#8a7d67;
  --brass:#e7ac40;
  --brass-2:#c1841f;
  --line:rgba(243,236,221,.14);
  --shadow:rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--brass);color:#161009}

/* ---------- progression + accès clavier ---------- */
.progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:60;
  background:var(--line);
}
.progress::after{
  content:"";position:absolute;inset:0 auto 0 0;
  width:calc(var(--progress,0) * 100%);
  background:linear-gradient(90deg,var(--brass-2),var(--brass));
}
.skip{
  position:fixed;left:8px;top:8px;z-index:80;
  background:var(--brass);color:#161009;font-weight:700;
  padding:.5rem .8rem;border-radius:2px;text-decoration:none;
  transform:translateY(-160%);transition:transform .18s;
}
.skip:focus{transform:none}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ---------- sections ---------- */
main{display:block}
.chapter{
  background:var(--ground);color:var(--ink);
  padding-block:clamp(3.6rem,11vh,7rem);
  position:relative;
  border-top:1px solid var(--line);
}
.chapter:first-child{border-top:0}

/* spreads chromatiques : mondes de couleur assumes, independants du theme */
.chapter[data-tone="marine"]{
  --ground:#12333f;--ground-2:#0e2a34;--ground-3:#164150;
  --ink:#e9f2f1;--ink-2:#a7c6c6;--ink-3:#6f9a9a;
  --brass:#f1c877;--brass-2:#d7a24e;
  --line:rgba(233,242,241,.16);--shadow:rgba(0,0,0,.45);
}
.chapter[data-tone="amboise"]{
  --ground:#efe0bd;--ground-2:#e7d3a6;--ground-3:#dcc48c;
  --ink:#2a2013;--ink-2:#6a5836;--ink-3:#8f7c56;
  --brass:#a2690f;--brass-2:#82530a;
  --line:rgba(42,32,19,.2);--shadow:rgba(70,48,10,.22);
}
.chapter[data-tone="memoria"]{
  --ground:#3a1e17;--ground-2:#321913;--ground-3:#4a281f;
  --ink:#f5e5d9;--ink-2:#cca593;--ink-3:#9c7a68;
  --brass:#eaa85d;--brass-2:#cf8642;
  --line:rgba(245,229,217,.16);--shadow:rgba(0,0,0,.45);
}
.chapter[data-tone="silence"]{
  --ground:#0c0a07;--ground-2:#131009;--ground-3:#1b1710;
  --ink:#9a9180;--ink-2:#6c6454;--ink-3:#4f4838;
  --brass:#7f7663;--brass-2:#655d4c;
  --line:rgba(154,145,128,.12);--shadow:rgba(0,0,0,.6);
}

/* ---------- colonne de texte / pleine largeur ---------- */
.col{
  width:min(100% - 2.4rem,var(--measure));
  margin-inline:auto;
}
.col + .col{margin-top:1.4rem}
.bleed{
  width:100vw;margin-left:calc(50% - 50vw);
}
.stack{display:flex;flex-direction:column;gap:clamp(1.6rem,5vw,2.8rem)}

/* ---------- typo ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-cap);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 .9rem;
}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;line-height:1.04;font-weight:800}
.h1{font-size:var(--fs-h1);letter-spacing:-.015em}
.h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.005em;line-height:1.12}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--ink)}
.dim{color:var(--ink-2)}
strong{font-weight:700}

.caption{
  font-size:var(--fs-cap);
  line-height:1.45;
  color:var(--ink-2);
  margin:.7rem 0 0;
  width:min(100% - 2.4rem,var(--measure));
  margin-inline:auto;
}
.caption b{color:var(--ink);font-weight:600}

/* ---------- figures ---------- */
figure{margin:0}
.figure img{width:100%;height:auto;object-fit:cover;background:var(--ground-3)}
.figure.tall img{max-height:82vh;object-fit:cover}
.frame{
  width:min(100% - 2.4rem,22rem);margin-inline:auto;
  border:1px solid var(--line);
  box-shadow:0 24px 60px -30px var(--shadow);
  background:var(--ground-2);
}
.frame img{width:100%;height:auto}
.poster{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--ground);
  display:flex;justify-content:center;
  padding-block:.5rem;
}
.poster img{
  width:auto;max-width:100%;
  height:auto;max-height:92svh;
  display:block;
}

/* ---------- repère d'année collant ---------- */
.era{
  position:sticky;top:0;z-index:20;
  background:var(--ground);
  border-bottom:1px solid var(--line);
  padding:.5rem 0 .35rem;
}
.era-in{
  width:min(100% - 2.4rem,58rem);margin-inline:auto;
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
}
.era .yr{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-year);letter-spacing:-.03em;
  color:var(--brass);line-height:.9;
}
.era .lbl{
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.72rem,2.4vw,.9rem);
  color:var(--ink-2);
}

/* ---------- hero ---------- */
.hero{
  --ground:#100b06;--ink:#f5eede;--ink-2:#c4b8a1;--brass:#e7ac40;
  --line:rgba(245,238,222,.16);
  background:var(--ground);color:var(--ink);
  min-height:82svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(4rem,12vh,7rem);
  position:relative;overflow:hidden;border-top:0;
}
.hero .bg{
  position:absolute;inset:0;z-index:0;
}
.hero .bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.32;filter:grayscale(.3) contrast(1.05);
}
.hero .bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 30%,transparent 20%,#100b06 88%);
}
.hero .inner{position:relative;z-index:1;width:min(100% - 2.4rem,52rem);margin-inline:auto}
.hero .eyebrow{color:var(--brass);margin-bottom:1.1rem}
.hero .title{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-giant);line-height:.86;letter-spacing:-.035em;
  margin:0;
}
.hero .range{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1rem,4.5vw,1.9rem);letter-spacing:.12em;
  margin:1rem 0 1.4rem;color:var(--brass);
}
.hero .line{font-size:var(--fs-lede);color:var(--ink-2);max-width:28rem;margin:0}
.scrollcue{
  margin-top:clamp(2.4rem,7vh,4rem);
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:.76rem;color:var(--ink-2);
}
.scrollcue .arw{
  width:1.5rem;height:1.5rem;border-radius:50%;
  border:1.5px solid var(--brass);color:var(--brass);
  display:grid;place-items:center;
}
@media (prefers-reduced-motion:no-preference){
  .scrollcue .arw{animation:bob 1.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
}

/* ---------- panneaux « cases de BD » ---------- */
.duo{
  width:min(100% - 2.4rem,58rem);margin-inline:auto;
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.duo > *{background:var(--ground);padding:clamp(1.3rem,4.5vw,2rem)}
@media (min-width:720px){
  .duo{grid-template-columns:1fr 1fr}
  .duo.wide{grid-template-columns:1.15fr .85fr}
}
.panelbox{
  width:min(100% - 2.4rem,58rem);margin-inline:auto;
  border:1px solid var(--line);background:var(--ground-2);
  padding:clamp(1.4rem,5vw,2.4rem);
}
.kicker{
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.76rem;color:var(--brass);margin:0 0 .7rem;
}

/* ---------- paire d'images ---------- */
.pair{
  width:min(100% - 2.4rem,58rem);margin-inline:auto;
  display:grid;gap:1rem 1.1rem;
}
@media (min-width:640px){.pair{grid-template-columns:1fr 1fr}}
.pair figure{margin:0}
.pair img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;background:var(--ground-3);display:block}
.pair figcaption{font-size:var(--fs-cap);line-height:1.4;color:var(--ink-2);margin-top:.5rem}
.pair figcaption b{color:var(--ink);font-weight:600}

/* ---------- grand chiffre ---------- */
.stat{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-stat);line-height:.92;letter-spacing:-.02em;
  color:var(--brass);
}
.statline{
  width:min(100% - 2.4rem,58rem);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:clamp(1.2rem,5vw,3rem);
  border-block:1px solid var(--line);padding-block:clamp(1.4rem,5vw,2.2rem);
}
.statline .item{flex:1 1 8rem}
.statline .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,7vw,3.2rem);color:var(--brass);line-height:1}
.statline .t{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-top:.4rem}

/* ---------- citation ---------- */
.pull{
  width:min(100% - 2.4rem,40rem);margin-inline:auto;
  font-family:var(--font-serif);font-style:italic;
  font-size:var(--fs-quote);line-height:1.34;
  color:var(--ink);
}
.pull cite{
  display:block;margin-top:.9rem;
  font-family:var(--font-display);font-style:normal;font-weight:600;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}

/* ---------- coupures de presse ---------- */
.clips{
  width:min(100% - 2.4rem,58rem);margin-inline:auto;
  display:grid;gap:1rem;
}
@media (min-width:640px){.clips{grid-template-columns:1fr 1fr}}
.clip{
  border:1px solid var(--line);border-left:3px solid var(--brass);
  background:var(--ground-2);padding:1.1rem 1.2rem;
}
.clip q{
  display:block;margin-bottom:.5rem;
  font-family:var(--font-serif);font-style:italic;font-size:1.08rem;line-height:1.4;
  quotes:"«\00a0" "\00a0»";
}
.clip p{
  font-family:var(--font-serif);font-style:italic;font-size:1.04rem;line-height:1.42;margin:0;
}
.clip .src{
  display:block;margin-top:.7rem;
  font-family:var(--font-display);font-weight:600;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);
}

/* ---------- anecdotes ---------- */
.notes{
  width:min(100% - 2.4rem,40rem);margin-inline:auto;
  display:flex;flex-direction:column;gap:1.3rem;list-style:none;padding:0;
}
.note{border-top:1px solid var(--line);padding-top:1.1rem}
.note h3{font-size:1.05rem;font-weight:700;color:var(--brass);letter-spacing:0;margin:0 0 .35rem}
.note p{font-size:1rem;color:var(--ink);margin:0}

/* ---------- cascade des années ---------- */
.cascade{
  width:min(100% - 2.4rem,40rem);margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
}
.cascade span{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--ink-3);
}
.cascade span:nth-child(1){font-size:clamp(1.6rem,6vw,2.4rem)}
.cascade span:nth-child(2){font-size:clamp(1.9rem,7vw,2.9rem);color:var(--ink-2)}
.cascade span:nth-child(3){font-size:clamp(2.3rem,8.5vw,3.6rem);color:var(--ink-2)}
.cascade span:nth-child(4){font-size:clamp(2.9rem,10vw,4.6rem);color:var(--ink)}
.cascade span:nth-child(5){font-size:clamp(3.6rem,13vw,6rem);color:var(--ink)}
.cascade span:nth-child(6){font-size:clamp(4.6rem,17vw,8rem);color:var(--brass)}
.tonight{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-giant);line-height:.9;letter-spacing:-.04em;
  color:var(--brass);width:min(100% - 2.4rem,52rem);margin:1.5rem auto 0;
}

/* ---------- concert ---------- */
.bigdate{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem,10vw,5rem);line-height:.94;letter-spacing:-.03em;
  color:var(--ink);
}
.venue{font-size:var(--fs-lede);color:var(--ink-2);margin:.8rem 0 0}
.cta{
  display:inline-block;
  background:var(--brass);color:#161009;
  font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;letter-spacing:.02em;
  padding:.9rem 1.7rem;border-radius:2px;text-decoration:none;
}
.cta:hover,.cta:focus-visible{background:var(--brass-2)}
/* ---------- programme du concert ---------- */
.program{width:min(100% - 2.4rem,40rem);margin-inline:auto}
.program .prog-part{
  font-family:var(--font-display);font-weight:700;
  font-size:.95rem;letter-spacing:.02em;color:var(--brass);
  margin:1.7rem 0 .3rem;
}
.program .prog-part:first-child{margin-top:0}
.program ol{list-style:none;margin:0;padding:0;counter-reset:prog}
.program li{
  display:grid;grid-template-columns:1.5em 1fr;gap:.1rem .7rem;
  align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--line);
}
.program li::before{
  counter-increment:prog;content:counter(prog);
  grid-column:1;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  color:var(--ink-3);
}
.program .work{grid-column:2;font-weight:600;font-size:1rem}
.program .who{grid-column:2;color:var(--ink-2);font-size:.86rem;margin-top:.1rem}

/* ---------- pied ---------- */
.end{--ground:#100b06;--ink:#f5eede;--ink-2:#c4b8a1;--brass:#e7ac40;--line:rgba(245,238,222,.16);
  text-align:center;background:var(--ground);color:var(--ink)}
.end .logo{width:96px;height:96px;margin:0 auto 1.6rem;border-radius:10px}
.end .big{font-family:var(--font-display);font-weight:800;font-size:var(--fs-giant);line-height:.86;letter-spacing:-.04em;margin:0}
.end .sub{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);margin:.6rem 0 0}
.end .name{margin-top:1.6rem;font-family:var(--font-display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;color:var(--brass)}
.social{
  margin:1.2rem auto 0;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;
}
.social a{
  border:1px solid var(--line);padding:.55rem .95rem;text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.06em;
  color:var(--ink);
}
.social a:hover{background:var(--brass);color:#161009;border-color:var(--brass)}

/* ---------- menu flottant ---------- */
.nav-toggle{
  position:fixed;right:14px;bottom:14px;z-index:70;
  width:52px;height:52px;border-radius:50%;
  border:none;background:var(--brass);color:#161009;
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);cursor:pointer;
  display:grid;place-items:center;
}
.nav-panel{
  position:fixed;right:14px;bottom:76px;z-index:70;
  width:min(78vw,260px);
  background:#161009;color:#f3ecdd;
  border:1px solid rgba(243,236,221,.16);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  padding:.5rem;
  max-height:min(70vh,520px);overflow:auto;
}
.nav-panel[hidden]{display:none}
.nav-panel ol{list-style:none;margin:0;padding:0;counter-reset:c}
.nav-panel a{
  display:flex;gap:.7rem;align-items:baseline;
  padding:.55rem .6rem;text-decoration:none;color:#c4b8a1;
  font-size:.9rem;border-radius:3px;
}
.nav-panel a .y{font-family:var(--font-display);font-weight:700;color:#e7ac40;min-width:3.4em}
.nav-panel a:hover,.nav-panel a.active{background:rgba(231,172,64,.12);color:#f3ecdd}

/* ---------- révélation au scroll (jamais parquée à l'invisible sans JS / motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .panel{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .js .panel.is-in{opacity:1;transform:none}
}

@media (min-width:900px){
  :root{--measure:34rem}
  .caption{font-size:.84rem}
}