/* ============================================================
   WebTV Cabaret Vert 2026 — « Le Fil, habillé Affiche »
   DA : blocmarque 20e édition (Blokk) — aplats francs, ombres dures
   ============================================================ */

:root{
  --bleu:  #056CF2;
  --vert:  #05F26C;
  --jaune: #D7F205;
  --rose:  #F250B9;
  --encre: #1D1D1B;
  --papier:#F4F1E4;
  --blanc: #FFFFFF;
  --encre-soft:#161614;

  --f-bubble:'Titan One', 'Arial Black', sans-serif;
  --f-script:'Yellowtail', 'Brush Script MT', cursive;
  --f-sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --shadow-hard: .06em .06em 0 var(--encre);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-sans);
  color:var(--blanc);
  background:var(--encre);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- chapitres / scroll-snap ---------- */
main{
  height:100dvh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
}
.chap{
  min-height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:clamp(20px,4vh,48px) clamp(20px,6vw,80px);
}
.inner{width:min(920px,100%)}
.inner.wide{width:min(1080px,100%)}
.inner.center{text-align:center; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3.4vh,34px)}

.bg-bleu  {background:var(--bleu);   color:var(--blanc)}
.bg-encre {background:var(--encre-soft); color:#F1F1EA}
.bg-jaune {background:var(--jaune);  color:var(--encre)}
.bg-vert  {background:var(--vert);   color:var(--encre)}
.bg-papier{background:var(--papier); color:var(--encre)}

/* ---------- typographie ---------- */
.t-vert{color:var(--vert)} .t-jaune{color:var(--jaune)} .t-rose{color:var(--rose)}
.t-bleu{color:var(--bleu)} .t-encre{color:var(--encre)}

.bubble{
  font-family:var(--f-bubble);
  font-weight:400;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.005em;
  font-size:clamp(3rem, 10.5vw, 8.2rem);
  text-shadow:var(--shadow-hard);
  -webkit-text-stroke:2px var(--encre);
  paint-order:stroke fill;
  text-wrap:balance;
}
.bubble-sm{
  font-family:var(--f-bubble);
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  text-shadow:.05em .05em 0 var(--encre);
}
.script{
  font-family:var(--f-script);
  font-size:clamp(2rem, 5vw, 3.8rem);
  transform:rotate(-3deg);
  text-shadow:.045em .045em 0 var(--encre);
}
.script-inline{font-family:var(--f-script); text-transform:none; font-size:1.15em; letter-spacing:0}

.kicker{
  font-size:clamp(.8rem,1.4vw,.95rem);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:clamp(14px,2.6vh,26px);
}
.bg-jaune .kicker, .bg-vert .kicker{opacity:.75}

.statement{
  font-family:var(--f-sans);
  font-weight:900;
  font-size:clamp(2.1rem, 5.6vw, 4.4rem);
  line-height:1.04;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:balance;
  margin-bottom:clamp(22px,4.5vh,44px);
}
.statement.sm{font-size:clamp(1.8rem, 4.4vw, 3.4rem)}
.statement em{font-style:normal}

/* ---------- pills / étoiles / hint ---------- */
.pills{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.pill{
  display:inline-block;
  font-weight:700;
  font-size:clamp(.75rem,1.5vw,.95rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.55em 1.3em;
  border-radius:999px;
  border:2.5px solid var(--encre);
  box-shadow:3px 3px 0 var(--encre);
  color:var(--encre);
  text-decoration:none;
}
.pill.rose{background:var(--rose)}
.pill.jaune{background:var(--jaune)}
.pill.blanc{background:var(--blanc)}
.pill.link:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--encre)}
.pill.link:focus-visible{outline:3px solid var(--vert); outline-offset:2px}

.star{
  position:absolute; color:var(--blanc);
  font-size:clamp(2rem,4.5vw,4rem);
  text-shadow:.06em .06em 0 var(--encre);
  pointer-events:none;
}
.star.s1{top:9%; left:7%; transform:rotate(-14deg)}
.star.s2{bottom:12%; right:7%; transform:rotate(16deg)}
.star.s3{top:16%; right:13%; transform:rotate(8deg); font-size:clamp(1.2rem,2.4vw,2rem)}
.star.s4{bottom:14%; left:10%; transform:rotate(-10deg); font-size:clamp(1.2rem,2.4vw,2rem)}

.hint{
  position:absolute; bottom:clamp(14px,3vh,28px); left:50%; transform:translateX(-50%);
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  opacity:.85;
}

/* ---------- rail de chapitres ---------- */
.rail{
  position:fixed; right:clamp(10px,1.6vw,22px); top:50%; transform:translateY(-50%);
  z-index:50;
}
.rail ol{list-style:none; display:flex; flex-direction:column; gap:12px}
.rail button{
  display:block; width:13px; height:13px; border-radius:50%;
  background:rgba(255,255,255,.35);
  border:2px solid var(--encre);
  cursor:pointer; padding:0;
  transition:transform .2s, background .2s;
  position:relative;
}
.rail button:hover{transform:scale(1.25)}
.rail button:focus-visible{outline:3px solid var(--rose); outline-offset:2px}
.rail button.on{background:var(--vert); box-shadow:2px 2px 0 var(--encre); transform:scale(1.3)}
.rail button::after{
  content:attr(data-label);
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  background:var(--encre); color:var(--blanc);
  font-family:var(--f-sans); font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.rail button:hover::after, .rail button:focus-visible::after{opacity:1}

.counter{
  position:fixed; left:clamp(12px,2vw,24px); bottom:clamp(12px,2vh,22px); z-index:50;
  font-family:var(--f-bubble); font-size:.95rem;
  color:var(--blanc); text-shadow:2px 2px 0 var(--encre);
  letter-spacing:.06em;
}

/* ---------- 02 · cartes objectifs ---------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(12px,1.8vw,20px);
}
.card{
  background:#22221F;
  border:2.5px solid #3A3A33;
  border-radius:18px;
  padding:clamp(16px,2.2vw,24px);
  transition:transform .2s, border-color .2s;
}
.card:hover{transform:translateY(-4px); border-color:var(--vert)}
.card h3{
  font-size:1.02rem; font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  display:flex; flex-direction:column; gap:10px; margin-bottom:10px;
}
.card p{font-size:.92rem; color:#A2A597}
.tag{
  align-self:flex-start;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; border:2px solid var(--encre);
  color:var(--encre);
}
.tag.bleu{background:var(--bleu); color:var(--blanc)}
.tag.vert{background:var(--vert)}
.tag.rose{background:var(--rose)}
.tag.jaune{background:var(--jaune)}

/* ---------- 03 · TV démo ---------- */
/* le cadre occupe le maximum de la fenêtre : limité soit par la largeur,
   soit par la hauteur restante sous le titre (ratio 16/9 préservé) */
#demo .inner{width:100%; text-align:center}
.tv{
  margin-inline:auto;
  width:min(1780px, 100%, calc((100dvh - 240px) * 16 / 9));
  border:4px solid var(--encre);
  border-radius:20px;
  overflow:hidden;
  box-shadow:10px 10px 0 var(--bleu);
  background:#0E0E10;
}
.tv-screen{aspect-ratio:16/9; position:relative}
.tv-screen iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tv-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  text-align:center; padding:clamp(16px,4vw,48px);
  background:
    radial-gradient(circle at 18% 22%, rgba(5,242,108,.08) 0 22%, transparent 23%),
    radial-gradient(circle at 82% 78%, rgba(242,80,185,.08) 0 22%, transparent 23%),
    #0E0E10;
}
.tv-placeholder p{max-width:52ch; color:#C9C9C0; font-size:.98rem}
.tv-note{font-size:.78rem !important; color:#77776D !important}
.tv-note code{font-family:ui-monospace,Menlo,Consolas,monospace; color:#A2A597}

/* ---------- 04 · chiffre héros + stats ---------- */
.heronum{display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vh,24px)}
.num{font-variant-numeric:tabular-nums; font-size:clamp(4rem, 15vw, 11.5rem)}
.statrow{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(18px,4vw,56px);
}
.stat{display:flex; flex-direction:column; align-items:center; gap:6px}
.stat-n{
  font-family:var(--f-bubble);
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  color:var(--blanc);
  text-shadow:.055em .055em 0 var(--encre);
  font-variant-numeric:tabular-nums;
}
.stat-n i{font-style:normal}
.stat-n i::before{content:"+"}
.stat-l{
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; opacity:.9; line-height:1.45;
}
.foot-note{font-size:.82rem; opacity:.75; max-width:60ch; margin-inline:auto}

/* ---------- 05 · courbe ---------- */
.chart-legend, .duel-legend{
  display:flex; flex-wrap:wrap; gap:22px; margin-bottom:14px;
  font-size:.85rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.sw{
  display:inline-block; width:15px; height:15px; border-radius:4px;
  border:2px solid var(--encre); margin-right:8px; vertical-align:-2px;
}
.sw.vert{background:var(--vert)} .sw.jaune{background:var(--jaune)} .sw.bleu{background:var(--bleu)}
.chart-box{width:100%}
.chart-box svg{width:100%; height:auto; display:block}
#courbe .foot-note{margin-top:16px}

/* ---------- 06 · duel barres ---------- */
.duel{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(24px,6vw,80px);
  margin:clamp(10px,2vh,20px) 0 18px;
}
.duel-group{display:flex; flex-direction:column; align-items:center; gap:14px}
.duel-bars{
  display:flex; align-items:flex-end; gap:clamp(8px,1.4vw,16px);
  height:clamp(160px,30vh,280px);
  border-bottom:4px solid var(--encre);
  padding:0 4px;
}
.bar{
  width:clamp(48px,7vw,88px);
  border:3.5px solid var(--encre);
  border-bottom:none;
  border-radius:14px 14px 0 0;
  position:relative;
  transform-origin:bottom;
  transform:scaleY(0);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
  box-shadow:inset -6px 6px 0 rgba(29,29,27,.14);
}
.chap.in .bar{transform:scaleY(var(--sy,1))}
.b-a{background:var(--bleu)}
.b-b{background:var(--vert)}
.bar span{
  position:absolute; top:-2.2em; left:50%; transform:translateX(-50%);
  font-family:var(--f-bubble); font-size:clamp(.85rem,1.8vw,1.25rem);
  color:var(--encre); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.duel-lab{
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; line-height:1.4;
}
.duel-legend{justify-content:center; margin-bottom:20px}

.callout{
  background:var(--blanc);
  border:3px solid var(--encre);
  border-radius:16px;
  box-shadow:6px 6px 0 var(--encre);
  padding:clamp(14px,2.2vw,22px) clamp(18px,3vw,28px);
  max-width:760px; margin-inline:auto;
  color:var(--encre);
}
.callout p{font-size:clamp(.9rem,1.7vw,1.05rem)}
.callout.dark{background:var(--encre); color:var(--blanc); box-shadow:6px 6px 0 var(--bleu)}

/* ---------- 07 · programme ---------- */
.prog{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(12px,1.8vw,20px);
}
.prog-card{
  border:3px solid var(--encre);
  border-radius:18px;
  padding:clamp(16px,2vw,24px);
  background:var(--blanc);
  box-shadow:6px 6px 0 var(--encre);
}
.prog-card h3{
  font-size:1.05rem; font-weight:900; text-transform:uppercase; letter-spacing:.03em;
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:3px solid var(--encre);
}
.pc-vert h3{background:linear-gradient(transparent 55%, var(--vert) 55%)}
.pc-bleu h3{background:linear-gradient(transparent 55%, #B8D4FD 55%)}
.pc-rose h3{background:linear-gradient(transparent 55%, #FBC1E7 55%)}
.pc-jaune h3{background:linear-gradient(transparent 55%, var(--jaune) 55%)}
.prog-card ul{list-style:none; display:flex; flex-direction:column; gap:8px}
.prog-card li{font-size:.88rem; padding-left:18px; position:relative}
.prog-card li::before{content:"✦"; position:absolute; left:0; font-size:.7rem; top:.25em}

/* ---------- 08 · running order année ---------- */
.order{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(12px,1.8vw,20px);
  margin-bottom:clamp(16px,3vh,28px);
}
.order-col{
  border:3px solid var(--encre);
  border-radius:18px;
  overflow:hidden;
  background:var(--blanc);
  box-shadow:6px 6px 0 var(--encre);
}
.oc-head{
  font-size:.95rem; font-weight:900; text-transform:uppercase; letter-spacing:.14em;
  padding:12px 18px;
  border-bottom:3px solid var(--encre);
}
.oc-jaune{background:var(--jaune)} .oc-bleu{background:var(--bleu); color:var(--blanc)} .oc-rose{background:var(--rose)}
.slot{
  padding:12px 18px;
  display:flex; flex-direction:column; gap:2px;
  border-bottom:2px solid #E4E0D0;
}
.order-col .slot:last-child{border-bottom:none}
.slot strong{font-size:.92rem}
.slot span{font-size:.8rem; color:#6B6752}

/* ---------- 09 · finale / pass ---------- */
.pass{position:relative; display:flex; flex-direction:column; align-items:center}
.pass-lanyard{
  width:26px; height:clamp(40px,8vh,70px);
  background:repeating-linear-gradient(45deg, var(--vert) 0 9px, var(--encre) 9px 18px);
  border:2px solid var(--encre); border-bottom:none;
}
.pass-card{
  width:min(320px, 78vw);
  background:var(--papier);
  color:var(--encre);
  border:4px solid var(--encre);
  border-radius:18px;
  box-shadow:10px 10px 0 var(--bleu);
  padding:22px 24px 18px;
  text-align:center;
  transform:rotate(-2deg);
}
.pass-hole{width:52px; height:12px; background:var(--encre-soft); border-radius:999px; margin:0 auto 14px; border:2px solid var(--encre)}
.pass-k{
  font-family:var(--f-bubble); text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.02;
}
.pass-k em{font-style:normal; color:var(--rose)}
.pass-r{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#5D6156; margin-top:10px}
.pass-code{
  margin-top:14px; height:26px;
  background:repeating-linear-gradient(90deg, var(--encre) 0 3px, transparent 3px 8px);
}
.closing{font-size:clamp(.95rem,1.8vw,1.15rem); color:#C9C9C0; max-width:56ch}
.blocmarque{width:min(300px,70vw); height:auto; margin-top:clamp(4px,1vh,10px)}

/* ---------- reveals ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.d1{transition-delay:.12s} .reveal.d2{transition-delay:.24s} .reveal.d3{transition-delay:.38s}
.chap.in .reveal{opacity:1; transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .bar{transform:scaleY(var(--sy,1)); transition:none}
}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  .rail{display:none}
  .duel{gap:18px}
  .bar span{font-size:.72rem}
  .chap{padding-inline:18px}
  .statrow{gap:20px}
}