/* ── Reset & base ────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --mag-bg:        #111700;
      --mag-dark:      #1a1a00;
      --mag-lime:      #D9FF50;
      --mag-lime-soft: #d9ff50;
      --mag-cream:     #faffe6;
      --mag-text:      #1f1a03;
      --mag-muted:     #5a5830;
      --font-display:  'Urbanist', sans-serif;
      --font-body:     'Lora', Georgia, serif;
      --page-w:        460px;
      --page-h:        650px;
      --nav-h:         3.5rem;
      --top-h:         3.25rem;
    }

    html, body {
      height: 100%;
      overflow: hidden;
      background: var(--mag-bg);
      color: var(--mag-cream);
      font-family: var(--font-body);
    }

    /* ── Layout ──────────────────────────────────────────────────── */
    #mag-app {
      display: flex;
      flex-direction: column;
      height: 100%;
      height: 100dvh;
    }

    /* Top bar */
    #mag-topbar {
      flex-shrink: 0;
      height: var(--top-h);
      background: rgba(17, 23, 0, 0.92);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(204, 255, 51, 0.15);
      display: flex;
      align-items: center;
      padding: 0 1rem;
      gap: 0.75rem;
      z-index: 100;
    }
    #mag-topbar .mag-back-btn {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      color: #aaa;
      font-size: 0.85rem;
      text-decoration: none;
      font-family: var(--font-display);
      transition: color 0.15s;
      flex-shrink: 0;
    }
    #mag-topbar .mag-back-btn:hover { color: var(--mag-lime); }
    #mag-topbar .mag-title {
      flex: 1;
      text-align: center;
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: var(--mag-lime);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    #mag-topbar .mag-toc-btn {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      color: #aaa;
      font-size: 0.85rem;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-display);
      transition: color 0.15s;
      flex-shrink: 0;
    }
    #mag-topbar .mag-toc-btn:hover { color: var(--mag-lime); }

    /* Boutons icône top bar */
    .mag-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: 4px;
      background: none;
      border: none;
      color: #aaa;
      font-size: 1rem;
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
      flex-shrink: 0;
      position: relative;
    }
    /* Zone tactile élargie à 44px sans grossir le bouton visuellement */
    .mag-icon-btn::after { content: ""; position: absolute; inset: -6px; }
    .mag-icon-btn:hover { color: var(--mag-lime); background: rgba(204,255,51,0.08); }
    /* Masquer fullscreen sur appareils ne le supportant pas */
    .mag-fullscreen-unavailable { display: none !important; }

    /* Reader area */
    #mag-reader {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 1rem 3.5rem;
      touch-action: none;
    }
    #mag-reader.mag-reader--zoomed { cursor: grab; }
    #mag-reader.mag-reader--zoomed.is-panning { cursor: grabbing; }

    /* Viewport zoom — page centrée, zoom molette */
    #mag-reader-viewport {
      position: absolute;
      left: 3.5rem;
      right: 3.5rem;
      top: 1rem;
      bottom: 1rem;
      overflow: hidden;
      touch-action: none;
    }
    @media (max-width: 600px) {
      #mag-reader-viewport {
        left: 0.5rem;
        right: 0.5rem;
        top: 0.5rem;
        bottom: 0.5rem;
      }
    }
    #mag-reader-stage {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      will-change: transform;
    }

    /* ── Mode lecture PDF (canvas page par page) ─────────────────── */
    #mag-lecture-pane {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      max-height: 100%;
      flex-shrink: 0;
    }
    #mag-lecture-pane[hidden],
    #flipbook[hidden] {
      display: none !important;
    }
    #mag-lecture-canvas {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      background: #FCFFE9;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
      user-select: none;
      -webkit-user-drag: none;
    }
    #mag-lecture-html {
      width: min(var(--page-w, 460px), 92vw);
      max-height: calc(100dvh - 8rem);
      overflow: auto;
      background: #FCFFE9;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
    }
    #mag-lecture-html .mag-page {
      min-height: min(70vh, 650px);
    }

    /* Nav arrows (sides) */
    .mag-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 50;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: rgba(204, 255, 51, 0.12);
      border: 1px solid rgba(204, 255, 51, 0.25);
      color: var(--mag-lime);
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s, transform 0.15s;
    }
    .mag-nav-btn:hover:not(:disabled) {
      background: rgba(204, 255, 51, 0.25);
      transform: translateY(-50%) scale(1.08);
    }
    .mag-nav-btn:disabled { opacity: 0.2; cursor: default; }
    #mag-btn-prev { left: 0.5rem; }
    #mag-btn-next { right: 0.5rem; }
    @media (max-width: 600px) {
      .mag-nav-btn { display: none; }
      #mag-reader { padding: 0.5rem 0.5rem; }
    }

    /* Navigation bas de page (mobile) */
    .mag-bottom-nav-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      flex-shrink: 0;
      border-radius: 50%;
      border: 1px solid rgba(204, 255, 51, 0.25);
      background: rgba(204, 255, 51, 0.1);
      color: var(--mag-lime);
      font-size: 1.15rem;
      cursor: pointer;
      transition: background 0.15s, transform 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .mag-bottom-nav-btn:hover:not(:disabled),
    .mag-bottom-nav-btn:active:not(:disabled) {
      background: rgba(204, 255, 51, 0.22);
    }
    .mag-bottom-nav-btn:disabled {
      opacity: 0.25;
      cursor: default;
    }
    @media (max-width: 600px) {
      #mag-bottombar {
        display: grid;
        grid-template-columns: 2.75rem 1fr 2.75rem;
        align-items: center;
        gap: 0.35rem;
        padding: 0 0.65rem;
      }
      .mag-bottom-nav-btn { display: flex; }
      #mag-bottom-prev { grid-column: 1; grid-row: 1; }
      #mag-page-counter {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
      }
      #mag-bottom-next { grid-column: 3; grid-row: 1; }
      #mag-reader-zoom-badge { display: none; }
    }

    /* Bottom bar */
    #mag-bottombar {
      flex-shrink: 0;
      height: var(--nav-h);
      background: rgba(17, 23, 0, 0.92);
      backdrop-filter: blur(8px);
      border-top: 1px solid rgba(204, 255, 51, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      padding: 0 1rem;
    }
    #mag-page-counter {
      font-family: var(--font-display);
      font-size: 0.85rem;
      color: rgba(204, 255, 51, 0.7);
      min-width: 5rem;
      text-align: center;
    }
    #mag-reader-zoom-badge {
      font-family: var(--font-display);
      font-size: 0.75rem;
      color: rgba(204, 255, 51, 0.55);
      min-width: 3.5rem;
      text-align: center;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    #mag-reader-zoom-badge.is-visible { opacity: 1; }
    #mag-reader-zoom-badge.is-flash {
      color: var(--mag-lime);
      font-weight: 600;
      animation: mag-zoom-flash 0.65s ease;
    }
    @keyframes mag-zoom-flash {
      0%, 100% { transform: scale(1); }
      40% { transform: scale(1.12); }
    }

    /* ── Initiatives chip & drawer ───────────────────────────────── */
    #mag-initiatives-bar {
      text-align: center;
      padding: .25rem 0 .1rem;
    }
    #mag-initiatives-bar[hidden] { display: none; }
    #mag-initiatives-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .7rem;
      font-family: var(--font-display);
      background: rgba(217,255,80,.07);
      border: 1px solid rgba(217,255,80,.22);
      color: rgba(217,255,80,.65);
      border-radius: 20px;
      padding: .18rem .75rem;
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    #mag-initiatives-chip:hover {
      background: rgba(217,255,80,.16);
      color: rgba(217,255,80,.9);
    }
    #mag-initiatives-drawer {
      position: fixed;
      inset: 0;
      z-index: 900;
      pointer-events: none;
    }
    #mag-initiatives-drawer:not([hidden]) { pointer-events: auto; }
    .mag-initiatives-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.38);
      opacity: 0;
      transition: opacity .22s;
    }
    #mag-initiatives-drawer.is-open .mag-initiatives-backdrop { opacity: 1; }
    .mag-initiatives-sheet {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #181800;
      border-top: 2px solid var(--mag-lime);
      border-radius: 14px 14px 0 0;
      padding: 1rem 1.25rem 2rem;
      max-height: 55vh;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform .26s cubic-bezier(.16,1,.3,1);
    }
    #mag-initiatives-drawer.is-open .mag-initiatives-sheet { transform: translateY(0); }
    .mag-initiatives-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .85rem;
    }
    .mag-initiatives-title {
      font-family: var(--font-display);
      font-size: .88rem;
      font-weight: 600;
      color: var(--mag-lime);
      display: flex;
      align-items: center;
      gap: .4rem;
    }
    .mag-initiatives-close {
      background: none;
      border: none;
      color: rgba(255,255,255,.4);
      font-size: 1.05rem;
      cursor: pointer;
      padding: .1rem .3rem;
      line-height: 1;
    }
    .mag-initiatives-close:hover { color: var(--mag-lime); }
    .mag-initiatives-item {
      display: flex;
      flex-direction: column;
      gap: .1rem;
      padding: .6rem 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .mag-initiatives-item:last-child { border-bottom: none; }
    .mag-initiatives-item-titre {
      font-family: var(--font-display);
      font-size: .88rem;
      font-weight: 600;
      color: var(--mag-cream);
    }
    .mag-initiatives-item-cat {
      font-size: .72rem;
      color: rgba(255,255,255,.38);
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .mag-initiatives-item-link {
      display: inline-flex;
      align-items: center;
      gap: .2rem;
      font-size: .78rem;
      color: var(--mag-lime);
      text-decoration: none;
      margin-top: .25rem;
      font-family: var(--font-display);
      opacity: .85;
    }
    .mag-initiatives-item-link:hover { opacity: 1; text-decoration: underline; }

    /* ── Aide raccourcis ──────────────────────────────────────────── */
    .mag-shortcuts { margin: 0; }
    .mag-shortcuts-section {
      font-family: var(--font-display);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(204, 255, 51, 0.55);
      margin: 1rem 0 0.45rem;
    }
    .mag-shortcuts-section:first-child { margin-top: 0; }
    .mag-shortcuts-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.4rem 0;
      border-bottom: 1px solid rgba(204, 255, 51, 0.08);
      font-size: 0.88rem;
    }
    .mag-shortcuts-row:last-child { border-bottom: none; }
    .mag-shortcuts-keys {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      justify-content: flex-end;
      flex-shrink: 0;
    }
    .mag-shortcuts kbd {
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 600;
      padding: 0.15rem 0.45rem;
      border-radius: 3px;
      border: 1px solid rgba(204, 255, 51, 0.3);
      background: rgba(204, 255, 51, 0.08);
      color: var(--mag-lime);
      line-height: 1.4;
    }
    .mag-shortcuts-note {
      font-size: 0.78rem;
      opacity: 0.5;
      margin-top: 1rem;
      font-family: 'Urbanist', sans-serif;
    }

    /* ── Flipbook container ───────────────────────────────────────── */
    #flipbook {
      position: relative;
    }

    /* ── Page base styles ─────────────────────────────────────────── */
    .page {
      background: #FCFFE9;
      overflow: hidden;
      user-select: none;
    }

    /* ── Page intérieure commune ──────────────────────────────────── */
    .mag-page {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* ── Couverture ───────────────────────────────────────────────── */
    .mag-page--cover {
      background: var(--mag-dark);
      color: var(--mag-cream);
      align-items: center;
      justify-content: center;
    }
    .mag-cover-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 80%, rgba(204,255,51,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(204,255,51,0.05) 0%, transparent 50%);
    }
    .mag-cover-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      padding: 2rem 1.5rem;
      text-align: center;
    }
    .mag-cover-tag {
      font-family: var(--font-display);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--mag-lime);
      opacity: 0.75;
    }
    .mag-cover-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 12vw, 4.5rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--mag-lime);
      line-height: 1;
    }
    .mag-cover-sub {
      font-family: var(--font-body);
      font-style: italic;
      font-size: 0.9rem;
      color: rgba(250, 255, 230, 0.6);
      margin-bottom: 1rem;
    }
    .mag-cover-divider {
      width: 3rem;
      height: 1px;
      background: rgba(204, 255, 51, 0.3);
    }

    /* ── Article ──────────────────────────────────────────────────── */
    .mag-page--article {
      background: #FCFFE9;
      color: var(--mag-text);
    }
    .mag-article-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1rem;
      border-bottom: 1px solid #f0f0e8;
      background: var(--mag-cream);
      flex-shrink: 0;
    }
    .mag-cat-badge {
      font-family: var(--font-display);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: var(--mag-dark);
      color: var(--mag-lime);
      padding: 0.2rem 0.55rem;
      border-radius: 2px;
    }
    .mag-page-num {
      font-family: var(--font-display);
      font-size: 0.75rem;
      color: #aaa6;
    }
    .mag-article-img-wrap {
      width: 100%;
      height: 40%;
      overflow: hidden;
      flex-shrink: 0;
    }
    .mag-article-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mag-article-img-placeholder {
      background: linear-gradient(135deg, #f0f0e0 0%, #e8e8d4 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ccc8a0;
      font-size: 2rem;
    }
    .mag-article-body {
      padding: 0.85rem 1.1rem 0.5rem;
      flex: 1;
      overflow: hidden;
    }
    .mag-article-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 0.5rem;
      color: var(--mag-text);
    }
    .mag-article-desc {
      font-family: var(--font-body);
      font-size: 0.8rem;
      line-height: 1.6;
      color: #4a4830;
    }

    /* Footer article avec bouton sondage */
    .mag-article-footer {
      flex-shrink: 0;
      padding: 0.5rem 1rem;
      border-top: 1px solid #f0f0e8;
      background: #fafaf2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .article-poll-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: none;
      border: 1px solid rgba(26, 26, 0, 0.2);
      border-radius: 2px;
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--mag-muted);
      padding: 0.28rem 0.75rem;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .article-poll-btn:hover {
      background: var(--mag-dark);
      color: var(--mag-lime);
      border-color: var(--mag-dark);
    }
    .article-poll-btn i { font-size: 0.8rem; }

    /* Lien "Voir l'annonce" dans le footer article */
    .article-detail-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-family: var(--font-display);
      font-size: 0.72rem;
      color: var(--mag-muted);
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: color 0.15s;
    }
    .article-detail-link:hover { color: var(--mag-dark); text-decoration: underline; }

    /* ── Page image uploadée ─────────────────────────────────────── */
    .mag-page--image {
      background: #1F1A03;
      position: relative;
    }
    .mag-image-full {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }
    .mag-image-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0.35rem 0.75rem;
      background: rgba(17, 23, 0, 0.65);
      font-family: var(--font-display);
      font-size: 0.7rem;
      color: rgba(204, 255, 51, 0.8);
      text-align: center;
    }

    /* ── Publicité ────────────────────────────────────────────────── */
    .mag-page--ad {
      background: #FCFFE9;
      cursor: pointer;
    }
    .mag-ad-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .mag-ad-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mag-ad-cta {
      position: absolute;
      bottom: 1.25rem;
      right: 1.25rem;
      background: var(--mag-dark);
      color: var(--mag-lime);
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      padding: 0.4rem 0.9rem;
      border-radius: 2px;
    }

    /* ── Sondage — variante B (card flottante) ───────────────────── */
    .mag-page--poll {
      background: #12120a;
      color: var(--mag-cream);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
    }
    .mag-poll-inner {
      width: 100%;
      max-width: 340px;
      padding: 1.25rem;
    }

    /* Card */
    .mag-poll-card {
      background: #23230e;
      border-radius: 10px;
      border-left: 4px solid var(--mag-lime);
      box-shadow: 0 8px 32px rgba(0,0,0,.45);
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* En-tête de la card */
    .mag-poll-card-top {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .mag-poll-icon {
      font-size: 1.2rem;
      color: var(--mag-lime);
      flex-shrink: 0;
    }
    .mag-poll-title {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--mag-lime);
      line-height: 1.25;
    }

    /* Bloc question */
    .mag-poll-question-bloc + .mag-poll-question-bloc {
      margin-top: 0.875rem;
      padding-top: 0.875rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .mag-poll-question {
      font-family: var(--font-body);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--mag-cream);
      line-height: 1.5;
      margin-bottom: 0.55rem;
    }

    /* Options */
    .mag-poll-options {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .mag-poll-option {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 0.45rem 0.7rem;
      cursor: pointer;
      font-size: 0.8rem;
      color: rgba(250,255,230,0.7);
      transition: border-color 0.12s, color 0.12s, background 0.12s;
    }
    .mag-poll-option:hover {
      border-color: rgba(217,255,80,0.4);
      color: var(--mag-cream);
      background: rgba(217,255,80,0.05);
    }
    .mag-poll-radio,
    .mag-poll-input { accent-color: var(--mag-lime); flex-shrink: 0; }

    /* Texte libre */
    .mag-poll-textarea {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      color: var(--mag-cream);
      font-family: var(--font-body);
      font-size: 0.8rem;
      padding: 0.5rem 0.7rem;
      resize: none;
    }
    .mag-poll-textarea::placeholder { color: rgba(250,255,230,0.25); }
    .mag-poll-textarea:focus { outline: none; border-color: rgba(217,255,80,0.5); }

    /* Séparateur + bouton */
    .mag-poll-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.07);
      margin: 0.875rem 0 0.875rem;
    }
    .mag-poll-btn {
      display: block;
      width: 100%;
      background: var(--mag-lime);
      color: var(--mag-dark);
      border: none;
      border-radius: 6px;
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 0.65rem 1rem;
      cursor: pointer;
      transition: background 0.15s;
      text-align: center;
    }
    .mag-poll-btn:hover { background: var(--mag-lime-soft); }
    .mag-poll-btn:disabled { opacity: 0.55; cursor: not-allowed; }

    /* Merci */
    .mag-poll-merci {
      font-size: 0.75rem;
      color: var(--mag-lime);
      margin-bottom: 0.5rem;
    }

    /* Barres de résultats */
    .mag-poll-bar-row {
      display: grid;
      grid-template-columns: 1fr 2.5fr auto;
      align-items: center;
      gap: 0.45rem;
      margin-bottom: 0.3rem;
      font-size: 0.73rem;
    }
    .mag-poll-bar-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgba(250,255,230,0.7);
    }
    .mag-poll-bar-track {
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      height: 5px;
      overflow: hidden;
    }
    .mag-poll-bar-fill {
      height: 100%;
      background: var(--mag-lime);
      border-radius: 2px;
      transition: width 0.5s ease;
    }
    .mag-poll-bar-pct {
      color: rgba(250,255,230,0.4);
      font-size: 0.68rem;
      min-width: 2rem;
      text-align: right;
    }

    /* Réponses texte */
    .mag-poll-text-resp {
      font-size: 0.75rem;
      color: rgba(250,255,230,0.7);
      padding: 0.25rem 0.55rem;
      background: rgba(217,255,80,0.05);
      border-left: 2px solid rgba(217,255,80,0.35);
      border-radius: 0 3px 3px 0;
      margin-bottom: 0.2rem;
    }

    /* Sondage legacy (sans questions natives) */
    .mag-poll-desc {
      font-family: var(--font-body);
      font-style: italic;
      font-size: 0.82rem;
      color: rgba(250,255,230,0.55);
    }

    /* ── 4e de couverture ─────────────────────────────────────────── */
    .mag-page--backcover {
      background: var(--mag-dark);
      color: var(--mag-cream);
    }
    .mag-backcover-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }
    .mag-backcover-tag {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--mag-lime);
      letter-spacing: 0.05em;
    }
    .mag-backcover-mention {
      font-family: var(--font-body);
      font-size: 0.8rem;
      color: rgba(250,255,230,0.4);
      font-style: italic;
    }

    /* ── Loading ─────────────────────────────────────────────────── */
    #mag-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      color: var(--mag-cream);
      font-family: var(--font-display);
      position: relative;
      z-index: 20;
    }
    #mag-loading .spinner-border { color: var(--mag-lime); }

    /* ── Empty state ─────────────────────────────────────────────── */
    #mag-empty {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      color: rgba(250, 255, 230, 0.5);
      font-family: var(--font-display);
      font-size: 0.9rem;
      position: relative;
      z-index: 20;
    }

    /* ── Floating survey button ────────────────────────────────────── */
    #btn-sondage-global {
      position: fixed;
      bottom: calc(var(--nav-h) + 1rem);
      right: 1.25rem;
      z-index: 200;
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      background: var(--mag-lime);
      color: var(--mag-dark);
      border: none;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(204, 255, 51, 0.35);
      transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    #btn-sondage-global:hover {
      background: var(--mag-lime-soft);
      transform: scale(1.08);
      box-shadow: 0 6px 22px rgba(204, 255, 51, 0.5);
    }
    #btn-sondage-global-label {
      position: fixed;
      bottom: calc(var(--nav-h) + 1rem + 3.5rem);
      right: 1.25rem;
      z-index: 200;
      background: rgba(17,23,0,0.9);
      color: var(--mag-lime);
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 0.25rem 0.6rem;
      border-radius: 2px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.2s, transform 0.2s;
    }
    #btn-sondage-global:hover + #btn-sondage-global-label,
    #btn-sondage-global:focus + #btn-sondage-global-label {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Table des matières ─────────────────────────────────────────── */
    #offcanvas-toc .offcanvas-header {
      background: var(--mag-dark);
      color: var(--mag-lime);
    }
    #offcanvas-toc .offcanvas-body {
      background: #181e00;
      color: var(--mag-cream);
    }
    .toc-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 0;
      border-bottom: 1px solid rgba(204,255,51,0.08);
      cursor: pointer;
      font-family: var(--font-display);
      font-size: 0.88rem;
      transition: color 0.15s;
    }
    .toc-item:hover { color: var(--mag-lime); }
    .toc-item:focus-visible { outline: 2px solid var(--mag-lime); outline-offset: 2px; }
    .toc-arrow {
      font-size: 0.8rem;
      opacity: 0.35;
    }
    .toc-label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .toc-empty {
      font-size: 0.8rem;
      opacity: 0.4;
      font-family: var(--font-display);
    }
    .toc-num {
      font-size: 0.7rem;
      color: rgba(204,255,51,0.4);
      min-width: 1.5rem;
      text-align: right;
    }
    .toc-cat {
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(204,255,51,0.5);
      margin-left: auto;
    }

    /* ── Modals dark ──────────────────────────────────────────────── */
    .modal-dark .modal-content {
      background: #181e00;
      color: var(--mag-cream);
      border: 1px solid rgba(204,255,51,0.2);
    }
    .modal-dark .modal-header {
      background: var(--mag-dark);
      border-bottom: 1px solid rgba(204,255,51,0.15);
    }
    .modal-dark .modal-title { color: var(--mag-lime); font-family: var(--font-display); }
    .modal-dark .btn-close { filter: invert(1) sepia(1) hue-rotate(60deg); }

    /* ── Barre de progression ─────────────────────────────────────── */
    #mag-progress-wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: rgba(204, 255, 51, 0.1);
    }
    #mag-progress-bar {
      height: 100%;
      width: 0%;
      background: var(--mag-lime);
      transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border-radius: 0 2px 2px 0;
    }

    /* ── Panneau curseur de zoom ──────────────────────────────────── */
    #mag-zoom-panel {
      flex-shrink: 0;
      background: rgba(17, 23, 0, 0.96);
      border-top: 1px solid rgba(204, 255, 51, 0.15);
      padding: 0.55rem 1rem 0.65rem;
    }
    #mag-zoom-panel[hidden] { display: none !important; }
    .mag-zoom-presets {
      display: flex;
      gap: 0.35rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 0.45rem;
    }
    .mag-zoom-preset {
      font-family: var(--font-display);
      font-size: 0.72rem;
      padding: 0.22rem 0.6rem;
      border: 1px solid rgba(204, 255, 51, 0.25);
      background: rgba(204, 255, 51, 0.06);
      color: rgba(204, 255, 51, 0.8);
      border-radius: 3px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .mag-zoom-preset:hover { background: rgba(204, 255, 51, 0.14); }
    .mag-zoom-preset.is-active {
      background: rgba(204, 255, 51, 0.22);
      color: var(--mag-lime);
      border-color: rgba(204, 255, 51, 0.45);
    }
    .mag-zoom-slider-wrap {
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }
    .mag-zoom-range {
      flex: 1;
      min-width: 0;
      accent-color: var(--mag-lime);
      height: 1.35rem;
      cursor: pointer;
    }
    .mag-zoom-bound {
      font-size: 0.65rem;
      color: rgba(204, 255, 51, 0.45);
      white-space: nowrap;
      font-family: var(--font-display);
    }
    #mag-zoom-value {
      font-family: var(--font-display);
      font-size: 0.82rem;
      color: var(--mag-lime);
      min-width: 3.25rem;
      text-align: center;
    }
    .mag-zoom-reset {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.1rem;
      height: 2.1rem;
      flex-shrink: 0;
      border-radius: 4px;
      border: 1px solid rgba(204, 255, 51, 0.25);
      background: rgba(204, 255, 51, 0.08);
      color: var(--mag-lime);
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s;
    }
    .mag-zoom-reset:hover { background: rgba(204, 255, 51, 0.2); }
    .mag-icon-btn.is-active {
      color: var(--mag-lime);
      background: rgba(204, 255, 51, 0.12);
    }

    /* ── Paywall (aperçu magazine) ────────────────────────────────── */
    .mag-paywall {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
      display: flex; justify-content: center;
      padding: 1rem 1rem calc(var(--nav-h) + 1rem);
      background: linear-gradient(180deg, rgba(31,26,3,0) 0%, rgba(31,26,3,.55) 35%, rgba(31,26,3,.92) 100%);
      pointer-events: none;
    }
    .mag-paywall-card {
      pointer-events: auto;
      background: #1f1a03; color: #fcffe9; border: 1px solid rgba(217,255,80,.4);
      border-radius: 16px; padding: 1.5rem 1.75rem; max-width: 440px; text-align: center;
      box-shadow: 0 12px 40px rgba(0,0,0,.4);
      font-family: 'Urbanist', system-ui, sans-serif;
    }
    .mag-paywall-card .bi-lock-fill { color: #d9ff50; font-size: 1.6rem; }
    .mag-paywall-card h3 { font-family: 'Averia Serif Libre', Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.4rem; margin: .4rem 0 .5rem; }
    .mag-paywall-card p { font-size: .9rem; color: rgba(252,255,233,.8); margin-bottom: 1rem; }
    .mag-paywall-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
    .mag-paywall-btn {
      display: inline-flex; align-items: center; gap: .4rem;
      font-weight: 600; font-size: .85rem; text-decoration: none;
      border-radius: 9999px; padding: .55rem 1.2rem;
      border: 1px solid rgba(252,255,233,.4); color: #fcffe9;
    }
    .mag-paywall-btn:hover { background: rgba(252,255,233,.15); color: #fcffe9; }
    .mag-paywall-btn--cta { background: #d9ff50; border-color: #d9ff50; color: #1f1a03; }
    .mag-paywall-btn--cta:hover { background: #ceff00; color: #1f1a03; }