.demo-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
    section.demo{padding:54px 0}
    .demo-tag{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute)}
    .demo-h{font-family:var(--serif);font-weight:700;text-transform:uppercase;line-height:.96;letter-spacing:.004em;
      font-size:clamp(2.2rem,5.4vw,4.2rem);margin:10px 0 0}
    .demo-h .em{color:var(--red)}
    .demo-lead{font-size:1.15rem;color:var(--ink-soft);max-width:46ch;margin:18px 0 0;line-height:1.45}

    /* ---------- BLOC DATA réutilisable : globe (géo) + classement (lecture) ---------- */
    .data-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
      border-bottom:2px solid var(--ink);padding-bottom:12px;flex-wrap:wrap}
    .data-head h2{font-family:var(--serif);font-weight:700;text-transform:uppercase;
      font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1}
    /* changement de sujet : le titre "s'imprime" de gauche à droite */
    #subj-title{display:inline-block;animation:title-wipe .6s cubic-bezier(.2,.8,.2,1) both}
    @keyframes title-wipe{from{clip-path:inset(0 100% 0 0);opacity:.35}to{clip-path:inset(0 -4% 0 0);opacity:1}}
    .data-head .src{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}

    .data-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8px 44px;align-items:center;margin-top:6px}
    .globe-stage{position:relative;width:100%;height:clamp(380px,52vh,520px);cursor:grab;touch-action:none}
    .globe-stage:active{cursor:grabbing}
    .globe-stage canvas{display:block;width:100%;height:100%}
    .g-tip{position:absolute;top:0;left:0;pointer-events:none;opacity:0;transition:opacity .2s ease;
      font-family:var(--sans);text-align:center;white-space:nowrap;will-change:transform,opacity}
    .g-tip .v{font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--red);line-height:1;font-variant-numeric:tabular-nums}
    .g-tip .n{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}

    .rank{list-style:none}
    .rank li{display:grid;grid-template-columns:20px 1fr 96px;align-items:center;gap:12px;padding:9px 8px;border-radius:8px;
      cursor:default;transition:background .15s;border-bottom:1px solid var(--line-soft);
      animation:rank-in .5s cubic-bezier(.16,.84,.28,1) both;animation-delay:calc(var(--i,0)*45ms)}
    @keyframes rank-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
    .rank li:hover,.rank li.on{background:var(--paper-2)}
    .rank .r-rk{font-family:var(--sans);font-weight:600;font-size:.8rem;color:var(--ink-mute);text-align:right;font-variant-numeric:tabular-nums}
    .rank .r-mid{display:block;min-width:0}
    .rank .r-name{display:block;font-family:var(--serif);font-weight:500;font-size:1.02rem;color:var(--ink);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rank .r-track{display:block;height:9px;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:5px}
    .rank .r-fill{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left;
      transition:transform 1s cubic-bezier(.16,.84,.28,1)}
    .rank li.on .r-fill{background:var(--red-deep)}
    .rank .r-val{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--ink);text-align:right;
      font-variant-numeric:tabular-nums;white-space:nowrap}
    .rank .r-val u{font-style:normal;font-size:.68rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;margin-left:2px}

    /* navigation entre sujets */
    .subj-nav{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
    .subj-dots{display:flex;gap:8px}
    .subj-dots button{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);background:transparent;
      padding:0;cursor:pointer;transition:background .2s,border-color .2s}
    .subj-dots button.on{background:var(--red);border-color:var(--red)}
    .subj-label{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
    .subj-label b{color:var(--ink);font-weight:600}
    .data-hint{font-family:var(--sans);font-size:.8rem;color:var(--ink-mute);font-style:italic;margin-top:12px}

    /* ---------- CHIFFRES + BARRES ---------- */
    .surprise{border-top:2px solid var(--ink);padding-top:6px}
    .s-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px 40px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
    /* thème identifié par une icône dessinée, plus lisible qu'un micro-eyebrow */
    .s-cat{display:inline-flex;align-items:center;gap:13px;font-family:var(--sans);font-weight:600;
      font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
    .s-ic{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--red);border-radius:50%}
    .s-ic svg{width:27px;height:27px;display:block;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .s-num{font-family:var(--serif);font-weight:700;font-size:clamp(3rem,8vw,5.4rem);line-height:.9;color:var(--ink);
      font-variant-numeric:tabular-nums;margin:6px 0 0}
    .s-num .u{color:var(--red)}
    .s-line{font-family:var(--serif);font-size:1.16rem;line-height:1.3;color:var(--ink-soft);margin-top:12px;max-width:42ch}
    .s-src{font-family:var(--sans);font-size:.7rem;color:var(--ink-mute);margin-top:6px}
    .s-bar-track{height:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
    .s-bar{height:100%;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform 1.15s cubic-bezier(.16,.84,.28,1)}
    .s-bar-cap{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
    .draw-underline{position:absolute;left:0;bottom:-14px;width:min(360px,90%);height:12px;overflow:visible}
    .draw-underline path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .95s cubic-bezier(.16,.84,.28,1)}

    /* ---------- REEL : le pont Instagram ↔ jeu ---------- */
    .bridge-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .bridge{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;padding:52px 0}
    .bridge .reel{max-width:230px}
    .bridge h2{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1}
    .bridge p{color:var(--ink-soft);font-size:1.12rem;margin-top:14px;max-width:44ch;line-height:1.45}
    .bridge .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

    @media (max-width:820px){
      .data-grid{grid-template-columns:1fr;gap:24px}
      .bridge{grid-template-columns:1fr;gap:24px;text-align:center}.bridge .reel{margin:0 auto}
    }
    @media (max-width:680px){ .s-row{grid-template-columns:1fr;gap:18px} }
    @media (prefers-reduced-motion:reduce){ .s-bar,.draw-underline path,.rank .r-fill,.g-tip{transition:none} #subj-title,.rank li{animation:none} }

/* home — section "numbers that surprised us" : icône de thème + reveal au scroll */
.ins-ic{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--red);border-radius:50%;margin-bottom:14px}
.ins-ic svg{width:25px;height:25px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.insight{transition:opacity .6s ease}
.insight .cat{margin-top:0}
@media (prefers-reduced-motion:reduce){.insight{transition:none}}