/* ════════════════════════════════════════════════════════════════════════════
   Académie Basira — feuille de style commune (hub · formation · leçon · flipbook)
   Charte : navy #121540 · or #c99629 · crème #eadfc7 · Butler (serif)
   Thème jour / nuit via html[data-theme]. Zéro dépendance externe.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'Butler'; src:url('../fonts/Butler-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Butler'; src:url('../fonts/Butler.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Butler'; src:url('../fonts/Butler-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Butler'; src:url('../fonts/Butler-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --navy:#121540; --gold:#c99629; --cream:#eadfc7;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Butler',Georgia,'Times New Roman',serif;

  --bg:#0e1132; --bg-2:#121540; --surface:rgba(20,24,64,.42); --surface-2:rgba(28,33,80,.55);
  --text:#f4eede; --text-dim:#c8bfa5; --line:rgba(234,223,199,.18); --line-2:rgba(234,223,199,.10);
  --accent:#c99629; --accent-2:#e0b445; --accent-dim:rgba(201,150,41,.16);
  --ok:#5fbf8f; --focus:#f0d68a;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 18px 50px rgba(6,8,26,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --head-h:58px;
}
html[data-theme="jour"]{
  --bg:#f7f2e6; --bg-2:#fffdf7; --surface:rgba(255,255,255,.74); --surface-2:#fffdf7;
  --text:#171a45; --text-dim:#5d5a4e; --line:rgba(18,21,64,.14); --line-2:rgba(18,21,64,.08);
  --accent:#9d7317; --accent-2:#c99629; --accent-dim:rgba(201,150,41,.14);
  --shadow:0 16px 44px rgba(18,21,64,.10);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:radial-gradient(120% 80% at 50% -10%, rgba(201,150,41,.10) 0%, transparent 60%);
  background-attachment:fixed;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.serif{ font-family:var(--serif); font-weight:500; letter-spacing:.005em; }

/* transitions de page natives (Chrome/Edge/Safari) — pas de coupure sèche */
@view-transition{ navigation:auto; }

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; }
:focus:not(:focus-visible){ outline:none; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:99; background:var(--accent); color:#12142f; padding:10px 16px; border-radius:var(--r-sm); }
.skip:focus{ left:12px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  @view-transition{ navigation:none; }
}

/* ─────────────────────────── En-tête ─────────────────────────── */
.ac-head{
  position:sticky; top:0; z-index:40; height:var(--head-h);
  display:flex; align-items:center; gap:var(--sp-4); padding:0 clamp(14px,3vw,32px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line-2);
}
.ac-brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:17px; white-space:nowrap; }
.ac-brand img{ width:26px; height:26px; object-fit:contain; }
.ac-brand small{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.ac-crumb{ flex:1; min-width:0; font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:8px; overflow:hidden; }
.ac-crumb a{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-crumb a:hover{ color:var(--accent-2); }
.ac-crumb span{ opacity:.5; }
.ac-actions{ display:flex; align-items:center; gap:8px; }
.ac-btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface); font-size:13px; transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.ac-btn:hover{ border-color:var(--accent); background:var(--accent-dim); }
.ac-btn.gold{ background:var(--accent); color:#141733; border-color:transparent; font-weight:600; }
.ac-btn.gold:hover{ background:var(--accent-2); transform:translateY(-1px); }
.ac-btn.sm{ padding:6px 11px; font-size:12px; }
.ac-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ac-ico{ width:36px; height:36px; padding:0; justify-content:center; }
@media (max-width:720px){ .ac-brand small,.ac-crumb{ display:none; } }

/* ─────────────────────────── Structure ─────────────────────────── */
.wrap{ width:min(1240px,100%); margin:0 auto; padding:0 clamp(14px,3vw,32px); }
.wrap-n{ width:min(880px,100%); }
section{ padding:clamp(34px,6vw,66px) 0; }
.eyebrow{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
h1.big{ font-family:var(--serif); font-size:clamp(28px,5vw,50px); line-height:1.08; font-weight:500; }
h2.h2{ font-family:var(--serif); font-size:clamp(21px,3vw,30px); font-weight:500; }
h3.h3{ font-family:var(--serif); font-size:clamp(17px,2vw,21px); font-weight:500; }
.lead{ color:var(--text-dim); font-size:clamp(15px,1.5vw,17px); max-width:64ch; }
.muted{ color:var(--text-dim); }
.rule{ height:1px; background:var(--line-2); border:0; margin:var(--sp-8) 0; }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow);
}
.grid{ display:grid; gap:var(--sp-5); }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  border:1px solid var(--line); font-size:11.5px; letter-spacing:.04em; color:var(--text-dim); background:var(--surface-2);
}
.chip.gold{ color:var(--accent); border-color:rgba(201,150,41,.4); background:var(--accent-dim); }
.chip.ok{ color:var(--ok); border-color:rgba(95,191,143,.4); background:rgba(95,191,143,.12); }

/* révélations au scroll — CSS natif, aucun JS ; invisible seulement si supporté */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rise{ animation:rise linear both; animation-timeline:view(); animation-range:entry 4% cover 26%; }
    @keyframes rise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
  }
}

/* ─────────────────────────── Barres de progression ─────────────────────────── */
.pbar{ height:6px; border-radius:var(--r-pill); background:var(--line-2); overflow:hidden; }
.pbar>i{
  display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);
  transition:width .55s var(--ease);
}
.pbar.thin{ height:4px; }
.pbar.thick{ height:9px; }
.pmeta{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); font-size:12.5px; color:var(--text-dim); margin-bottom:7px; }
.pmeta b{ color:var(--text); font-size:14px; }

.pring{ --v:0; width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--v)*1%), var(--line-2) 0);
  font-size:11px; font-weight:700; position:relative; }
.pring::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--bg-2); }
.pring span{ position:relative; z-index:1; }

/* ─────────────────────────── Cartes formation (hub) ─────────────────────────── */
.f-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.f-card{ position:relative; display:flex; flex-direction:column; gap:var(--sp-4); overflow:hidden;
  transition:transform .34s var(--ease), border-color .3s; }
.f-card:hover{ transform:translateY(-3px); border-color:rgba(201,150,41,.42); }
.f-card .f-top{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.f-card .f-cover{ width:88px; flex:none; border-radius:8px; overflow:hidden; box-shadow:0 8px 22px rgba(6,8,26,.4); }
.f-card h3{ font-family:var(--serif); font-size:20px; font-weight:500; line-height:1.2; }
.f-card .f-tag{ font-size:13px; color:var(--text-dim); margin-top:6px; }
.f-stats{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); font-size:12.5px; color:var(--text-dim); }
.f-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.f-price{ font-family:var(--serif); font-size:19px; color:var(--accent); }
.f-price small{ font-family:var(--sans); font-size:11.5px; color:var(--text-dim); display:block; }

/* ─────────────────────────── Hero formation ─────────────────────────── */
.hero{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr); gap:clamp(20px,4vw,48px); align-items:center; }
@media (max-width:860px){ .hero{ grid-template-columns:1fr; } }
.hero-cover{ border-radius:var(--r-md); overflow:hidden; box-shadow:0 26px 60px rgba(6,8,26,.5); transform:rotate(1.2deg); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.kpis{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); margin-top:var(--sp-5); font-size:13px; color:var(--text-dim); }
.kpis b{ color:var(--text); }

/* ─────────────────────────── Sommaire (modules + leçons) ─────────────────────────── */
.mod{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; margin-bottom:var(--sp-4); }
.mod>summary{ list-style:none; cursor:pointer; padding:var(--sp-4) var(--sp-5); display:flex; align-items:center; gap:var(--sp-4); }
.mod>summary::-webkit-details-marker{ display:none; }
.mod>summary:hover{ background:var(--accent-dim); }
.mod-n{ font-family:var(--serif); font-size:13px; color:var(--accent); letter-spacing:.1em; flex:none; }
.mod-t{ flex:1; min-width:0; }
.mod-t b{ display:block; font-family:var(--serif); font-size:16.5px; font-weight:500; }
.mod-t small{ color:var(--text-dim); font-size:12px; }
.mod-caret{ flex:none; transition:transform .3s var(--ease); opacity:.6; }
.mod[open] .mod-caret{ transform:rotate(90deg); }
.mod-body{ padding:0 var(--sp-5) var(--sp-5); }
.unit{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:var(--sp-5) 0 var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--line-2); }
.unit:first-child{ border-top:0; padding-top:0; margin-top:var(--sp-2); }

.les{ display:flex; align-items:center; gap:var(--sp-3); padding:9px 10px; border-radius:var(--r-sm); transition:background .2s; }
.les:hover{ background:var(--accent-dim); }
.les.cur{ background:var(--accent-dim); box-shadow:inset 2px 0 0 var(--accent); }
.les.locked{ opacity:.5; }
.les-tick{ width:19px; height:19px; flex:none; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:10px; }
.les.done .les-tick{ background:var(--ok); border-color:transparent; color:#0c2418; }
.les-n{ font-size:11.5px; color:var(--accent); font-variant-numeric:tabular-nums; flex:none; width:34px; }
.les-t{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.les-d{ font-size:11.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; flex:none; }
.les-x{ font-size:11px; color:var(--accent); flex:none; }

/* ─────────────────────────── Le livre du module ─────────────────────────── */
.bk{ display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap;
  border:1px dashed rgba(201,150,41,.4); border-radius:var(--r-md); padding:var(--sp-4); background:var(--accent-dim); margin-bottom:var(--sp-5); }
.bk img{ width:74px; flex:none; border-radius:6px; box-shadow:0 8px 20px rgba(6,8,26,.4); }
.bk-b{ flex:1; min-width:190px; }
.bk-b b{ font-family:var(--serif); font-size:15.5px; font-weight:500; display:block; }
.bk-b small{ color:var(--text-dim); font-size:12px; }
.bk-a{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ─────────────────────────── Player de leçon ─────────────────────────── */
.player{ background:#05060f; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); position:relative; }
.player video{ width:100%; display:block; aspect-ratio:16/9; background:#05060f; }
.player .novid{ aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:var(--sp-8); color:var(--text-dim); gap:var(--sp-3); }
.player .novid b{ font-family:var(--serif); font-size:19px; color:var(--text); display:block; margin-bottom:6px; }
.lesson-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.lesson-nav{ display:flex; gap:var(--sp-2); }
.watch{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-3); font-size:12.5px; color:var(--text-dim); }
.watch .pbar{ flex:1; }

/* Exercice — le bloc le plus visible de la page */
.exo{ border:1px solid rgba(201,150,41,.5); border-radius:var(--r-lg); overflow:hidden; margin-top:var(--sp-8);
  background:linear-gradient(180deg, rgba(201,150,41,.14) 0%, var(--surface) 42%); box-shadow:var(--shadow); }
.exo-h{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.exo-h .exo-i{ width:40px; height:40px; flex:none; border-radius:12px; background:var(--accent); color:#141733; display:grid; place-items:center; font-size:19px; }
.exo-h b{ font-family:var(--serif); font-size:19px; font-weight:500; display:block; }
.exo-h small{ color:var(--text-dim); font-size:12.5px; }
.exo-h .exo-a{ margin-left:auto; display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.exo-body{ padding:var(--sp-5) var(--sp-6) var(--sp-6); }
.exo-frame{ width:100%; height:min(78vh,1180px); border:1px solid var(--line); border-radius:var(--r-md); background:#fbf8f1; display:block; }
.exo-files{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--sp-3); margin-top:var(--sp-5); }
.file{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); transition:border-color .2s, transform .2s var(--ease); }
.file:hover{ border-color:var(--accent); transform:translateY(-2px); }
.file .fi{ width:32px; height:32px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--accent-dim); color:var(--accent); font-size:11px; font-weight:700; }
.file b{ font-size:13.5px; font-weight:500; display:block; }
.file small{ font-size:11.5px; color:var(--text-dim); }
.donebox{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); padding:var(--sp-4);
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); cursor:pointer; }
.donebox input{ width:20px; height:20px; accent-color:var(--accent); flex:none; cursor:pointer; }
.donebox b{ font-size:14px; font-weight:500; }
.donebox small{ display:block; font-size:12px; color:var(--text-dim); }

/* ─────────────────────────── Flipbook ─────────────────────────── */
.fb-page{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
.fb-page > .ac-head, .fb-page > .fb-bar, .fb-page > .fb-thumbs{ flex:none; }
/* scène défilable : le zoom agrandit la MISE EN PAGE, donc le livre peut dépasser.
   `margin:auto` sur l'enfant le centre quand il tient, et laisse tout atteignable sinon
   (contrairement à place-items:center qui rogne le début du débordement). */
.fb-stage{ flex:1; display:grid; overflow:auto; padding:clamp(10px,2vw,26px); min-height:0;
  scrollbar-width:thin; scrollbar-gutter:stable;
  background:radial-gradient(70% 60% at 50% 40%, rgba(201,150,41,.12) 0%, transparent 70%); }
.fb-stage > *{ margin:auto; }
.fb-stage.zoomed{ cursor:default; }
.fb-book{ position:relative; display:flex; perspective:2600px; transform-style:preserve-3d; border-radius:3px;
  transition:transform .58s var(--ease); }   /* le livre glisse quand on ouvre / ferme la couverture */
/* ⚠️ cibler les DEUX pages nommément, pas `.fb-book>div` : cette forme est plus
   spécifique que `.fb-sheet` et remettait la feuille en position:relative — elle
   se posait alors À CÔTÉ du livre au lieu de tourner par-dessus. */
.fb-book>.fb-l, .fb-book>.fb-r{ position:relative; overflow:hidden; background:#fbf8f1; }
.fb-book img{ width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
/* l'ombre portée est sur CHAQUE page (pas sur le livre) : une page absente ne laisse aucune trace */
.fb-l{ border-radius:3px 0 0 3px; box-shadow:inset -14px 0 26px -18px rgba(0,0,0,.55), 0 30px 72px rgba(4,6,20,.6); }
.fb-r{ border-radius:0 3px 3px 0; box-shadow:inset 14px 0 26px -18px rgba(0,0,0,.55), 0 30px 72px rgba(4,6,20,.6); }
/* page absente (couverture seule, fin d'ouvrage) : pas de fausse page blanche */
/* visibility:hidden et non background:transparent — preserve-3d promeut chaque page en
   couche composite, et une couche transparente laisse un liseré d'un pixel. */
.fb-book>div.fb-blank{ visibility:hidden; background:transparent; box-shadow:none; }
/* ── la feuille qui tourne ──
   Deux faces dos à dos (recto = la page qu'on quitte, verso = la page portée par la
   même feuille). L'animation est pilotée en JS (Web Animations), pas en transition CSS :
   on a besoin de synchroniser le mouvement ET l'ombrage au même timing. */
.fb-book>.fb-sheet{ position:absolute; top:0; z-index:5; pointer-events:none;
  transform-style:preserve-3d; will-change:transform; }
.fb-sheet.fwd{ transform-origin:left center; }   /* pivote sur la reliure */
.fb-sheet.bwd{ transform-origin:right center; }
.fb-sheet>figure{ position:absolute; inset:0; overflow:hidden; background:#fbf8f1;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fb-sheet>figure>img{ width:100%; height:100%; object-fit:contain; display:block; }
.fb-sheet>figure.b{ transform:rotateY(180deg); }
.fb-sheet.one>figure.b{ display:none; }          /* mode une page : pas de verso */
/* l'ombrage : dégradé partant de la reliure, dont l'opacité est animée en JS */
.fb-sheet>figure>.sh{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.fb-sheet.fwd>figure.f>.sh{ background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.16) 42%, transparent 78%); }
.fb-sheet.fwd>figure.b>.sh{ background:linear-gradient(270deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.16) 42%, transparent 78%); }
.fb-sheet.bwd>figure.f>.sh{ background:linear-gradient(270deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.16) 42%, transparent 78%); }
.fb-sheet.bwd>figure.b>.sh{ background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.16) 42%, transparent 78%); }
/* groupe de zoom dans la barre */
.fb-zoomgrp{ display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--surface-2); flex:none; }
.fb-zoomgrp button{ width:28px; height:26px; border-radius:var(--r-pill); font-size:15px; line-height:1;
  display:grid; place-items:center; color:var(--text-dim); transition:background .2s,color .2s; }
.fb-zoomgrp button:hover:not(:disabled){ background:var(--accent-dim); color:var(--accent); }
.fb-zoomgrp button:disabled{ opacity:.32; cursor:default; }
.fb-zoomgrp .fb-zval{ min-width:50px; padding:0 6px; font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--text); border-radius:var(--r-pill); }
.fb-zoomgrp .fb-zval:hover{ background:var(--accent-dim); color:var(--accent); }
.fb-hit{ position:absolute; top:0; bottom:0; width:50%; z-index:6; cursor:pointer; background:transparent; }
.fb-hit.prev{ left:0; } .fb-hit.next{ right:0; }
.fb-endcard{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:var(--sp-4);
  padding:clamp(18px,4vw,44px); background:linear-gradient(160deg,#161a44,#0d1030); color:var(--text); }
.fb-endcard b{ font-family:var(--serif); font-size:clamp(19px,2.4vw,26px); font-weight:500; }

.fb-bar{ flex:none; display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) clamp(12px,3vw,26px);
  border-top:1px solid var(--line-2); background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); flex-wrap:wrap; }
.fb-bar .fb-count{ font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; min-width:96px; text-align:center; }
.fb-slider{ flex:1; min-width:150px; accent-color:var(--accent); }
.fb-thumbs{ flex:none; display:flex; gap:6px; overflow-x:auto; padding:var(--sp-3) clamp(12px,3vw,26px);
  border-top:1px solid var(--line-2); scrollbar-width:thin; }
.fb-thumbs img{ height:66px; width:auto; border-radius:3px; border:2px solid transparent; opacity:.6; cursor:pointer; flex:none; transition:opacity .2s,border-color .2s; }
.fb-thumbs img:hover{ opacity:1; }
.fb-thumbs img.on{ opacity:1; border-color:var(--accent); }
.fb-thumbs.hide{ display:none; }

/* onglets flipbook / PDF */
.tabs{ display:flex; gap:4px; padding:3px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface-2); }
.tabs button{ padding:6px 15px; border-radius:var(--r-pill); font-size:12.5px; color:var(--text-dim); transition:background .2s,color .2s; }
.tabs button[aria-selected="true"]{ background:var(--accent); color:#141733; font-weight:600; }
.pdfview{ flex:1; min-height:0; display:none; }
.pdfview.on{ display:block; }
.pdfview iframe{ width:100%; height:100%; border:0; background:#2b2b2b; }
.pdfview .nopdf{ height:100%; display:grid; place-content:center; text-align:center; gap:var(--sp-4); padding:clamp(20px,5vw,60px); }

/* ─────────────────────────── Divers ─────────────────────────── */
.empty{ text-align:center; padding:clamp(28px,6vw,64px) var(--sp-5); border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--text-dim); }
.empty b{ display:block; font-family:var(--serif); font-size:19px; color:var(--text); margin-bottom:8px; }
.foot{ border-top:1px solid var(--line-2); padding:var(--sp-8) 0 var(--sp-12); font-size:12.5px; color:var(--text-dim); }
.foot a{ text-decoration:underline; text-underline-offset:3px; }
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:70; opacity:0; pointer-events:none;
  background:var(--surface-2); border:1px solid var(--accent); color:var(--text); padding:11px 20px; border-radius:var(--r-pill);
  font-size:13px; box-shadow:var(--shadow); transition:opacity .3s,transform .3s var(--ease); backdrop-filter:blur(12px); }
.toast.on{ opacity:1; transform:translate(-50%,0); }